@mjhls/mjh-framework 1.0.50 → 1.0.52

package/dist/index.js

@@ -503,1523 +503,879 @@ var getYoutubeId = createCommonjsModule(function (module, exports) {
 }));
 });
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
+var parseAssetId_1 = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var example = 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg';
+function parseAssetId(ref) {
+    var _a = ref.split('-'), id = _a[1], dimensionString = _a[2], format = _a[3];
+    if (!id || !dimensionString || !format) {
+        throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
     }
-  }
+    var _b = dimensionString.split('x'), imgWidthStr = _b[0], imgHeightStr = _b[1];
+    var width = +imgWidthStr;
+    var height = +imgHeightStr;
+    var isValidAssetId = isFinite(width) && isFinite(height);
+    if (!isValidAssetId) {
+        throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
+    }
+    return { id: id, width: width, height: height, format: format };
+}
+exports.default = parseAssetId;
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
+});
 
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
+unwrapExports(parseAssetId_1);
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+var parseSource_1 = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+Object.defineProperty(exports, "__esModule", { value: true });
+var isRef = function (src) {
+    var source = src;
+    return source ? typeof source._ref === 'string' : false;
 };
-
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+var isAsset = function (src) {
+    var source = src;
+    return source ? typeof source._id === 'string' : false;
+};
+var isAssetStub = function (src) {
+    var source = src;
+    return source && source.asset ? typeof source.asset.url === 'string' : false;
+};
+// Convert an asset-id, asset or image to an image record suitable for processing
+// eslint-disable-next-line complexity
+function parseSource(source) {
+    if (!source) {
+        return null;
     }
-
-    return _arr;
-  }
-
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    var image;
+    if (typeof source === 'string' && isUrl(source)) {
+        // Someone passed an existing image url?
+        image = {
+            asset: { _ref: urlToId(source) }
+        };
     }
-  };
-}();
-
-var toConsumableArray = function (arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  } else {
-    return Array.from(arr);
-  }
-};
-
-var DeckContent = function (_React$Component) {
-  inherits(DeckContent, _React$Component);
-
-  function DeckContent() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, DeckContent);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    else if (typeof source === 'string') {
+        // Just an asset id
+        image = {
+            asset: { _ref: source }
+        };
     }
-
-    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,
-      page: 1,
-      from: _this.params ? _this.params.from : 0,
-      to: _this.params ? _this.params.to : 2,
-      total_pages: null,
-      scrolling: true,
-      query: _this.query
-    }, _this.loadMore = function () {
-      setTimeout(function () {
-        _this.setState(function (state) {
-          return {
-            page: state.page + 1,
-            from: state.from + state.per,
-            to: state.to + state.per
-          };
-        }, _this.loadData);
-      }, 10);
-    }, _this.loadData = function () {
-      var _this$state = _this.state,
-          from = _this$state.from,
-          to = _this$state.to,
-          data = _this$state.data,
-          query = _this$state.query;
-      var client = _this.props.client;
-
-
-      var params = { from: from, to: to };
-      var queryUpdated = query.replace('$from', params.from).replace('$to', params.to);
-      // const query = '*[_type == "article" && defined(title) && defined(thumbnail)][$from...$to] { title, summary, thumbnail { asset-> }, url }'
-
-      if (_this.pointer && _this.pointerArray) {
-        var pointer = _this.pointer;
-        client.fetch(queryUpdated).then(function (dataArr) {
-          _this.setState(function (state, props) {
-            if (dataArr[_this.pointerArray][pointer].length > 0) {
-              return {
-                data: [].concat(toConsumableArray(data), toConsumableArray(dataArr[_this.pointerArray][pointer])),
-                scrolling: true
-              };
-            } else {
-              return {
-                scrolling: false
-              };
+    else if (isRef(source)) {
+        // We just got passed an asset directly
+        image = {
+            asset: source
+        };
+    }
+    else if (isAsset(source)) {
+        // If we were passed an image asset document
+        image = {
+            asset: {
+                _ref: source._id || ''
             }
-          });
-        });
-      } else {
-        client.fetch(queryUpdated).then(function (dataArr) {
-          _this.setState(function (state, props) {
-            if (dataArr.length > 0) {
-              return {
-                data: [].concat(toConsumableArray(data), toConsumableArray(dataArr)),
-                scrolling: true
-              };
-            } else {
-              return {
-                scrolling: false
-              };
+        };
+    }
+    else if (isAssetStub(source)) {
+        // If we were passed a partial asset (`url`, but no `_id`)
+        image = {
+            asset: {
+                _ref: urlToId(source.asset.url)
             }
-          });
-        });
-      }
-    }, _this.renderCardImage = function (row, page) {
-      if (row.thumbnail && row.thumbnail.asset) {
-        return row.thumbnail.asset.url;
-        /*} else if (page === 'videos' && row.youtubeURL) {
-          return `https://img.youtube.com/vi/${getYouTubeId(row.youtubeURL)}/0.jpg`*/
-      } else {
-        return _this.defaultImage;
-      }
-    }, _this.cardLoader = function (page, columns, variant) {
-      var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
-
-      var itemCounter = 0;
-      var lgVar = 12;
-      return React__default.createElement(
-        Row,
-        null,
-        _this.state.data && _this.state.data.map(function (row, index) {
-          if (columns === 'rotate' && itemCounter % 3 === 0) {
-            lgVar = 12;
-          } else if (columns && columns !== 'rotate') {
-            lgVar = Math.floor(12 / columns);
-          } else {
-            lgVar = 6;
-          }
-
-          return React__default.createElement(
-            Col,
-            { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
-            React__default.createElement(
-              Card,
-              { className: 'content-card', style: { flexDirection: mode } },
-              React__default.createElement(
-                Link,
-                { href: _this.mapping[row.contentCategory.name] + '/[url]', as: _this.mapping[row.contentCategory.name] + '/' + row.url.current },
-                React__default.createElement(
-                  'a',
-                  null,
-                  React__default.createElement(Card.Img, { variant: 'top', src: _this.renderCardImage(row, page), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
-                )
-              ),
-              React__default.createElement(
-                Card.Body,
-                null,
-                React__default.createElement(
-                  Link,
-                  { href: _this.mapping[row.contentCategory.name] + '/[url]', as: _this.mapping[row.contentCategory.name] + '/' + row.url.current },
-                  React__default.createElement(
-                    'a',
-                    null,
-                    React__default.createElement(
-                      Card.Title,
-                      null,
-                      row.title
-                    ),
-                    React__default.createElement(
-                      Card.Text,
-                      null,
-                      row.summary
-                    )
-                  )
-                )
-              )
-            )
-          );
-        })
-      );
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  createClass(DeckContent, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.dataKeptToCompareNewDatarecord !== this.props.dataRecord) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          data: this.props.dataRecord,
-          dataKeptToCompareNewDatarecord: this.props.dataRecord,
-          per: this.props.params ? this.props.params.to : 2,
-          page: 1,
-          from: this.props.params ? this.props.params.from : 0,
-          to: this.props.params ? this.props.params.to : 2,
-          total_pages: null,
-          scrolling: true,
-          query: this.props.query
-        });
-      }
+        };
     }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      // this.loadData();
+    else if (typeof source.asset === 'object') {
+        // Probably an actual image with materialized asset
+        image = source;
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          columns = _props.columns,
-          variant = _props.variant,
-          autoScroll = _props.autoScroll,
-          page = _props.page;
-
-
-      return React__default.createElement(
-        'div',
-        { className: 'contentDeck' },
-        autoScroll ? React__default.createElement(
-          React__default.Fragment,
-          null,
-          React__default.createElement(
-            InfiniteScroll,
-            { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling },
-            this.cardLoader(page, columns, variant)
-          ),
-          React__default.createElement(
-            'noscript',
-            null,
-            'Manual Pagination Here'
-          )
-        ) : React__default.createElement(
-          React__default.Fragment,
-          null,
-          this.cardLoader(page, columns, variant),
-          React__default.createElement(
-            'div',
-            { style: { padding: '0px 10px' } },
-            this.state.scrolling ? React__default.createElement(
-              'button',
-              {
-                style: { margin: 'auto', width: '100%' },
-                onClick: function onClick(e) {
-                  _this2.loadMore();
-                } },
-              'Load More'
-            ) : React__default.createElement(
-              'p',
-              { style: { textAlign: 'center' } },
-              React__default.createElement(
-                'b',
-                null,
-                'End of data'
-              )
-            )
-          ),
-          React__default.createElement(
-            'noscript',
-            null,
-            'Manual Pagination Here'
-          )
-        )
-      );
+    else {
+        // We got something that does not look like an image, or it is an image
+        // that currently isn't sporting an asset.
+        return null;
     }
-  }]);
-  return DeckContent;
-}(React__default.Component);
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-var isArray_1 = isArray;
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-var _freeGlobal = freeGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = _freeGlobal || freeSelf || Function('return this')();
-
-var _root = root;
-
-/** Built-in value references. */
-var Symbol$1 = _root.Symbol;
-
-var _Symbol = Symbol$1;
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto.toString;
-
-/** Built-in value references. */
-var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag(value) {
-  var isOwn = hasOwnProperty.call(value, symToStringTag),
-      tag = value[symToStringTag];
-
-  try {
-    value[symToStringTag] = undefined;
-  } catch (e) {}
-
-  var result = nativeObjectToString.call(value);
-  {
-    if (isOwn) {
-      value[symToStringTag] = tag;
-    } else {
-      delete value[symToStringTag];
+    var img = source;
+    if (img.crop) {
+        image.crop = img.crop;
     }
-  }
-  return result;
-}
-
-var _getRawTag = getRawTag;
-
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$1.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString(value) {
-  return nativeObjectToString$1.call(value);
+    if (img.hotspot) {
+        image.hotspot = img.hotspot;
+    }
+    return applyDefaults(image);
 }
-
-var _objectToString = objectToString;
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag$1 && symToStringTag$1 in Object(value))
-    ? _getRawTag(value)
-    : _objectToString(value);
+exports.default = parseSource;
+function isUrl(url) {
+    return /^https?:\/\//.test("" + url);
 }
-
-var _baseGetTag = baseGetTag;
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
+function urlToId(url) {
+    var parts = url.split('/').slice(-1);
+    return ("image-" + parts[0]).replace(/\.([a-z]+)$/, '-$1');
 }
-
-var isObjectLike_1 = isObjectLike;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike_1(value) && _baseGetTag(value) == symbolTag);
+// Mock crop and hotspot if image lacks it
+function applyDefaults(image) {
+    if (image.crop && image.hotspot) {
+        return image;
+    }
+    // We need to pad in default values for crop or hotspot
+    var result = __assign({}, image);
+    if (!result.crop) {
+        result.crop = {
+            left: 0,
+            top: 0,
+            bottom: 0,
+            right: 0
+        };
+    }
+    if (!result.hotspot) {
+        result.hotspot = {
+            x: 0.5,
+            y: 0.5,
+            height: 1.0,
+            width: 1.0
+        };
+    }
+    return result;
 }
 
-var isSymbol_1 = isSymbol;
+});
 
-/** Used to match property names within property paths. */
-var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
-    reIsPlainProp = /^\w*$/;
+unwrapExports(parseSource_1);
 
-/**
- * Checks if `value` is a property name and not a property path.
- *
- * @private
- * @param {*} value The value to check.
- * @param {Object} [object] The object to query keys on.
- * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
- */
-function isKey(value, object) {
-  if (isArray_1(value)) {
-    return false;
-  }
-  var type = typeof value;
-  if (type == 'number' || type == 'symbol' || type == 'boolean' ||
-      value == null || isSymbol_1(value)) {
-    return true;
-  }
-  return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||
-    (object != null && value in Object(object));
+var urlForImage_1 = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var parseAssetId_1$$1 = __importDefault(parseAssetId_1);
+var parseSource_1$$1 = __importDefault(parseSource_1);
+exports.parseSource = parseSource_1$$1.default;
+exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = [
+    ['width', 'w'],
+    ['height', 'h'],
+    ['format', 'fm'],
+    ['download', 'dl'],
+    ['blur', 'blur'],
+    ['sharpen', 'sharp'],
+    ['invert', 'invert'],
+    ['orientation', 'or'],
+    ['minHeight', 'min-h'],
+    ['maxHeight', 'max-h'],
+    ['minWidth', 'min-w'],
+    ['maxWidth', 'max-w'],
+    ['quality', 'q'],
+    ['fit', 'fit'],
+    ['crop', 'crop'],
+    ['auto', 'auto'],
+    ['dpr', 'dpr']
+];
+function urlForImage(options) {
+    var spec = __assign({}, (options || {}));
+    var source = spec.source;
+    delete spec.source;
+    var image = parseSource_1$$1.default(source);
+    if (!image) {
+        return null;
+    }
+    var id = image.asset._ref || image.asset._id || '';
+    var asset = parseAssetId_1$$1.default(id);
+    // Compute crop rect in terms of pixel coordinates in the raw source image
+    var cropLeft = Math.round(image.crop.left * asset.width);
+    var cropTop = Math.round(image.crop.top * asset.height);
+    var crop = {
+        left: cropLeft,
+        top: cropTop,
+        width: Math.round(asset.width - image.crop.right * asset.width - cropLeft),
+        height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
+    };
+    // Compute hot spot rect in terms of pixel coordinates
+    var hotSpotVerticalRadius = (image.hotspot.height * asset.height) / 2;
+    var hotSpotHorizontalRadius = (image.hotspot.width * asset.width) / 2;
+    var hotSpotCenterX = image.hotspot.x * asset.width;
+    var hotSpotCenterY = image.hotspot.y * asset.height;
+    var hotspot = {
+        left: hotSpotCenterX - hotSpotHorizontalRadius,
+        top: hotSpotCenterY - hotSpotVerticalRadius,
+        right: hotSpotCenterX + hotSpotHorizontalRadius,
+        bottom: hotSpotCenterY + hotSpotVerticalRadius
+    };
+    // If irrelevant, or if we are requested to: don't perform crop/fit based on
+    // the crop/hotspot.
+    if (!(spec.rect || spec.focalPoint || spec.ignoreImageParams || spec.crop)) {
+        spec = __assign({}, spec, fit({ crop: crop, hotspot: hotspot }, spec));
+    }
+    return specToImageUrl(__assign({}, spec, { asset: asset }));
 }
-
-var _isKey = isKey;
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return value != null && (type == 'object' || type == 'function');
+exports.default = urlForImage;
+// eslint-disable-next-line complexity
+function specToImageUrl(spec) {
+    var cdnUrl = spec.baseUrl || 'https://cdn.sanity.io';
+    var filename = spec.asset.id + "-" + spec.asset.width + "x" + spec.asset.height + "." + spec.asset.format;
+    var baseUrl = cdnUrl + "/images/" + spec.projectId + "/" + spec.dataset + "/" + filename;
+    var params = [];
+    if (spec.rect) {
+        // Only bother url with a crop if it actually crops anything
+        var _a = spec.rect, left = _a.left, top_1 = _a.top, width = _a.width, height = _a.height;
+        var isEffectiveCrop = left !== 0 || top_1 !== 0 || height !== spec.asset.height || width !== spec.asset.width;
+        if (isEffectiveCrop) {
+            params.push("rect=" + left + "," + top_1 + "," + width + "," + height);
+        }
+    }
+    if (spec.bg) {
+        params.push("bg=" + spec.bg);
+    }
+    if (spec.focalPoint) {
+        params.push("fp-x=" + spec.focalPoint.x);
+        params.push("fp-x=" + spec.focalPoint.y);
+    }
+    var flip = [spec.flipHorizontal && 'h', spec.flipVertical && 'v'].filter(Boolean).join('');
+    if (flip) {
+        params.push("flip=" + flip);
+    }
+    // Map from spec name to url param name, and allow using the actual param name as an alternative
+    exports.SPEC_NAME_TO_URL_NAME_MAPPINGS.forEach(function (mapping) {
+        var specName = mapping[0], param = mapping[1];
+        if (typeof spec[specName] !== 'undefined') {
+            params.push(param + "=" + encodeURIComponent(spec[specName]));
+        }
+        else if (typeof spec[param] !== 'undefined') {
+            params.push(param + "=" + encodeURIComponent(spec[param]));
+        }
+    });
+    if (params.length === 0) {
+        return baseUrl;
+    }
+    return baseUrl + "?" + params.join('&');
 }
-
-var isObject_1 = isObject;
-
-/** `Object#toString` result references. */
-var asyncTag = '[object AsyncFunction]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    proxyTag = '[object Proxy]';
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  if (!isObject_1(value)) {
-    return false;
-  }
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 9 which returns 'object' for typed arrays and other constructors.
-  var tag = _baseGetTag(value);
-  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+function fit(source, spec) {
+    var cropRect;
+    var imgWidth = spec.width;
+    var imgHeight = spec.height;
+    // If we are not constraining the aspect ratio, we'll just use the whole crop
+    if (!(imgWidth && imgHeight)) {
+        return { width: imgWidth, height: imgHeight, rect: source.crop };
+    }
+    var crop = source.crop;
+    var hotspot = source.hotspot;
+    // If we are here, that means aspect ratio is locked and fitting will be a bit harder
+    var desiredAspectRatio = imgWidth / imgHeight;
+    var cropAspectRatio = crop.width / crop.height;
+    if (cropAspectRatio > desiredAspectRatio) {
+        // The crop is wider than the desired aspect ratio. That means we are cutting from the sides
+        var height = crop.height;
+        var width = height * desiredAspectRatio;
+        var top_2 = crop.top;
+        // Center output horizontally over hotspot
+        var hotspotXCenter = (hotspot.right - hotspot.left) / 2 + hotspot.left;
+        var left = hotspotXCenter - width / 2;
+        // Keep output within crop
+        if (left < crop.left) {
+            left = crop.left;
+        }
+        else if (left + width > crop.left + crop.width) {
+            left = crop.left + crop.width - width;
+        }
+        cropRect = {
+            left: Math.round(left),
+            top: Math.round(top_2),
+            width: Math.round(width),
+            height: Math.round(height)
+        };
+    }
+    else {
+        // The crop is taller than the desired ratio, we are cutting from top and bottom
+        var width = crop.width;
+        var height = width / desiredAspectRatio;
+        var left = crop.left;
+        // Center output vertically over hotspot
+        var hotspotYCenter = (hotspot.bottom - hotspot.top) / 2 + hotspot.top;
+        var top_3 = hotspotYCenter - height / 2;
+        // Keep output rect within crop
+        if (top_3 < crop.top) {
+            top_3 = crop.top;
+        }
+        else if (top_3 + height > crop.top + crop.height) {
+            top_3 = crop.top + crop.height - height;
+        }
+        cropRect = {
+            left: Math.max(0, Math.floor(left)),
+            top: Math.max(0, Math.floor(top_3)),
+            width: Math.round(width),
+            height: Math.round(height)
+        };
+    }
+    return {
+        width: imgWidth,
+        height: imgHeight,
+        rect: cropRect
+    };
 }
 
-var isFunction_1 = isFunction;
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = _root['__core-js_shared__'];
-
-var _coreJsData = coreJsData;
+});
 
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
+unwrapExports(urlForImage_1);
+var urlForImage_2 = urlForImage_1.parseSource;
+var urlForImage_3 = urlForImage_1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
 
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
+var builder = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var urlForImage_1$$1 = __importStar(urlForImage_1);
+var validFits = ['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min'];
+var validCrops = ['top', 'bottom', 'left', 'right', 'center', 'focalpoint', 'entropy'];
+var validAutoModes = ['format'];
+function isSanityClient(client) {
+    return client ? typeof client.clientConfig === 'object' : false;
 }
-
-var _isMasked = isMasked;
-
-/** Used for built-in method references. */
-var funcProto = Function.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to convert.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
+function rewriteSpecName(key) {
+    var specs = urlForImage_1$$1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
+    for (var _i = 0, specs_1 = specs; _i < specs_1.length; _i++) {
+        var entry = specs_1[_i];
+        var specName = entry[0], param = entry[1];
+        if (key === specName || key === param) {
+            return specName;
+        }
+    }
+    return key;
 }
+function urlBuilder(options) {
+    // Did we get a SanityClient?
+    var client = options;
+    if (isSanityClient(client)) {
+        // Inherit config from client
+        var _a = client.clientConfig, apiHost = _a.apiHost, projectId = _a.projectId, dataset = _a.dataset;
+        return new ImageUrlBuilder(null, {
+            baseUrl: apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),
+            projectId: projectId,
+            dataset: dataset
+        });
+    }
+    // Or just accept the options as given
+    return new ImageUrlBuilder(null, options);
+}
+exports.default = urlBuilder;
+var ImageUrlBuilder = /** @class */ (function () {
+    function ImageUrlBuilder(parent, options) {
+        this.options = parent
+            ? __assign({}, (parent.options || {}), (options || {})) : __assign({}, (options || {})); // Copy options
+    }
+    ImageUrlBuilder.prototype.withOptions = function (options) {
+        var baseUrl = options.baseUrl || '';
+        var newOptions = { baseUrl: baseUrl };
+        for (var key in options) {
+            if (options.hasOwnProperty(key)) {
+                var specKey = rewriteSpecName(key);
+                newOptions[specKey] = options[key];
+            }
+        }
+        return new ImageUrlBuilder(this, __assign({ baseUrl: baseUrl }, newOptions));
+    };
+    // The image to be represented. Accepts a Sanity 'image'-document, 'asset'-document or
+    // _id of asset. To get the benefit of automatic hot-spot/crop integration with the content
+    // studio, the 'image'-document must be provided.
+    ImageUrlBuilder.prototype.image = function (source) {
+        return this.withOptions({ source: source });
+    };
+    // Specify the dataset
+    ImageUrlBuilder.prototype.dataset = function (dataset) {
+        return this.withOptions({ dataset: dataset });
+    };
+    // Specify the projectId
+    ImageUrlBuilder.prototype.projectId = function (projectId) {
+        return this.withOptions({ projectId: projectId });
+    };
+    // Specify background color
+    ImageUrlBuilder.prototype.bg = function (bg) {
+        return this.withOptions({ bg: bg });
+    };
+    // Set DPR scaling factor
+    ImageUrlBuilder.prototype.dpr = function (dpr) {
+        return this.withOptions({ dpr: dpr });
+    };
+    // Specify the width of the image in pixels
+    ImageUrlBuilder.prototype.width = function (width) {
+        return this.withOptions({ width: width });
+    };
+    // Specify the height of the image in pixels
+    ImageUrlBuilder.prototype.height = function (height) {
+        return this.withOptions({ height: height });
+    };
+    // Specify focal point in fraction of image dimensions. Each component 0.0-1.0
+    ImageUrlBuilder.prototype.focalPoint = function (x, y) {
+        return this.withOptions({ focalPoint: { x: x, y: y } });
+    };
+    ImageUrlBuilder.prototype.maxWidth = function (maxWidth) {
+        return this.withOptions({ maxWidth: maxWidth });
+    };
+    ImageUrlBuilder.prototype.minWidth = function (minWidth) {
+        return this.withOptions({ minWidth: minWidth });
+    };
+    ImageUrlBuilder.prototype.maxHeight = function (maxHeight) {
+        return this.withOptions({ maxHeight: maxHeight });
+    };
+    ImageUrlBuilder.prototype.minHeight = function (minHeight) {
+        return this.withOptions({ minHeight: minHeight });
+    };
+    // Specify width and height in pixels
+    ImageUrlBuilder.prototype.size = function (width, height) {
+        return this.withOptions({ width: width, height: height });
+    };
+    // Specify blur between 0 and 100
+    ImageUrlBuilder.prototype.blur = function (blur) {
+        return this.withOptions({ blur: blur });
+    };
+    ImageUrlBuilder.prototype.sharpen = function (sharpen) {
+        return this.withOptions({ sharpen: sharpen });
+    };
+    // Specify the desired rectangle of the image
+    ImageUrlBuilder.prototype.rect = function (left, top, width, height) {
+        return this.withOptions({ rect: { left: left, top: top, width: width, height: height } });
+    };
+    // Specify the image format of the image. 'jpg', 'pjpg', 'png', 'webp'
+    ImageUrlBuilder.prototype.format = function (format) {
+        return this.withOptions({ format: format });
+    };
+    ImageUrlBuilder.prototype.invert = function (invert) {
+        return this.withOptions({ invert: invert });
+    };
+    // Rotation in degrees 0, 90, 180, 270
+    ImageUrlBuilder.prototype.orientation = function (orientation) {
+        return this.withOptions({ orientation: orientation });
+    };
+    // Compression quality 0-100
+    ImageUrlBuilder.prototype.quality = function (quality) {
+        return this.withOptions({ quality: quality });
+    };
+    // Make it a download link. Parameter is default filename.
+    ImageUrlBuilder.prototype.forceDownload = function (download) {
+        return this.withOptions({ download: download });
+    };
+    // Flip image horizontally
+    ImageUrlBuilder.prototype.flipHorizontal = function () {
+        return this.withOptions({ flipHorizontal: true });
+    };
+    // Flip image verically
+    ImageUrlBuilder.prototype.flipVertical = function () {
+        return this.withOptions({ flipVertical: true });
+    };
+    // Ignore crop/hotspot from image record, even when present
+    ImageUrlBuilder.prototype.ignoreImageParams = function () {
+        return this.withOptions({ ignoreImageParams: true });
+    };
+    ImageUrlBuilder.prototype.fit = function (value) {
+        if (validFits.indexOf(value) === -1) {
+            throw new Error("Invalid fit mode \"" + value + "\"");
+        }
+        return this.withOptions({ fit: value });
+    };
+    ImageUrlBuilder.prototype.crop = function (value) {
+        if (validCrops.indexOf(value) === -1) {
+            throw new Error("Invalid crop mode \"" + value + "\"");
+        }
+        return this.withOptions({ crop: value });
+    };
+    ImageUrlBuilder.prototype.auto = function (value) {
+        if (validAutoModes.indexOf(value) === -1) {
+            throw new Error("Invalid auto mode \"" + value + "\"");
+        }
+        return this.withOptions({ auto: value });
+    };
+    // Gets the url based on the submitted parameters
+    ImageUrlBuilder.prototype.url = function () {
+        return urlForImage_1$$1.default(this.options);
+    };
+    // Synonym for url()
+    ImageUrlBuilder.prototype.toString = function () {
+        return this.url();
+    };
+    return ImageUrlBuilder;
+}());
 
-var _toSource = toSource;
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
+});
 
-/** Used for built-in method references. */
-var funcProto$1 = Function.prototype,
-    objectProto$2 = Object.prototype;
+unwrapExports(builder);
 
-/** Used to resolve the decompiled source of functions. */
-var funcToString$1 = funcProto$1.toString;
+var node = createCommonjsModule(function (module) {
+var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var builder_1 = __importDefault(builder);
+module.exports = builder_1.default;
 
-/** Used to check objects for own properties. */
-var hasOwnProperty$1 = objectProto$2.hasOwnProperty;
+});
 
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString$1.call(hasOwnProperty$1).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
+var imageUrlBuilder = unwrapExports(node);
 
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject_1(value) || _isMasked(value)) {
-    return false;
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
   }
-  var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
-  return pattern.test(_toSource(value));
-}
-
-var _baseIsNative = baseIsNative;
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-var _getValue = getValue;
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = _getValue(object, key);
-  return _baseIsNative(value) ? value : undefined;
-}
-
-var _getNative = getNative;
+};
 
-/* Built-in method references that are verified to be native. */
-var nativeCreate = _getNative(Object, 'create');
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
 
-var _nativeCreate = nativeCreate;
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
 
-/**
- * Removes all key-value entries from the hash.
- *
- * @private
- * @name clear
- * @memberOf Hash
- */
-function hashClear() {
-  this.__data__ = _nativeCreate ? _nativeCreate(null) : {};
-  this.size = 0;
-}
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
 
-var _hashClear = hashClear;
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
 
-/**
- * Removes `key` and its value from the hash.
- *
- * @private
- * @name delete
- * @memberOf Hash
- * @param {Object} hash The hash to modify.
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function hashDelete(key) {
-  var result = this.has(key) && delete this.__data__[key];
-  this.size -= result ? 1 : 0;
-  return result;
-}
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
 
-var _hashDelete = hashDelete;
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
 
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED = '__lodash_hash_undefined__';
+var slicedToArray = function () {
+  function sliceIterator(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
 
-/** Used for built-in method references. */
-var objectProto$3 = Object.prototype;
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
 
-/** Used to check objects for own properties. */
-var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"]) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
 
-/**
- * Gets the hash value for `key`.
- *
- * @private
- * @name get
- * @memberOf Hash
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function hashGet(key) {
-  var data = this.__data__;
-  if (_nativeCreate) {
-    var result = data[key];
-    return result === HASH_UNDEFINED ? undefined : result;
+    return _arr;
   }
-  return hasOwnProperty$2.call(data, key) ? data[key] : undefined;
-}
-
-var _hashGet = hashGet;
-
-/** Used for built-in method references. */
-var objectProto$4 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
 
-/**
- * Checks if a hash value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Hash
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function hashHas(key) {
-  var data = this.__data__;
-  return _nativeCreate ? (data[key] !== undefined) : hasOwnProperty$3.call(data, key);
-}
-
-var _hashHas = hashHas;
-
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
-
-/**
- * Sets the hash `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Hash
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the hash instance.
- */
-function hashSet(key, value) {
-  var data = this.__data__;
-  this.size += this.has(key) ? 0 : 1;
-  data[key] = (_nativeCreate && value === undefined) ? HASH_UNDEFINED$1 : value;
-  return this;
-}
-
-var _hashSet = hashSet;
+  return function (arr, i) {
+    if (Array.isArray(arr)) {
+      return arr;
+    } else if (Symbol.iterator in Object(arr)) {
+      return sliceIterator(arr, i);
+    } else {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    }
+  };
+}();
 
-/**
- * Creates a hash object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Hash(entries) {
-  var index = -1,
-      length = entries == null ? 0 : entries.length;
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
 
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
+    return arr2;
+  } else {
+    return Array.from(arr);
   }
-}
-
-// Add methods to `Hash`.
-Hash.prototype.clear = _hashClear;
-Hash.prototype['delete'] = _hashDelete;
-Hash.prototype.get = _hashGet;
-Hash.prototype.has = _hashHas;
-Hash.prototype.set = _hashSet;
-
-var _Hash = Hash;
+};
 
-/**
- * Removes all key-value entries from the list cache.
- *
- * @private
- * @name clear
- * @memberOf ListCache
- */
-function listCacheClear() {
-  this.__data__ = [];
-  this.size = 0;
-}
+var DeckContent = function (_React$Component) {
+  inherits(DeckContent, _React$Component);
 
-var _listCacheClear = listCacheClear;
+  function DeckContent() {
+    var _ref;
 
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
+    var _temp, _this, _ret;
 
-var eq_1 = eq;
+    classCallCheck(this, DeckContent);
 
-/**
- * Gets the index at which the `key` is found in `array` of key-value pairs.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {*} key The key to search for.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function assocIndexOf(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq_1(array[length][0], key)) {
-      return length;
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-  }
-  return -1;
-}
-
-var _assocIndexOf = assocIndexOf;
 
-/** Used for built-in method references. */
-var arrayProto = Array.prototype;
-
-/** Built-in value references. */
-var splice = arrayProto.splice;
-
-/**
- * Removes `key` and its value from the list cache.
- *
- * @private
- * @name delete
- * @memberOf ListCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function listCacheDelete(key) {
-  var data = this.__data__,
-      index = _assocIndexOf(data, key);
-
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  --this.size;
-  return true;
-}
-
-var _listCacheDelete = listCacheDelete;
-
-/**
- * Gets the list cache value for `key`.
- *
- * @private
- * @name get
- * @memberOf ListCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function listCacheGet(key) {
-  var data = this.__data__,
-      index = _assocIndexOf(data, key);
+    return _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,
+      page: 1,
+      from: _this.params ? _this.params.from : 0,
+      to: _this.params ? _this.params.to : 2,
+      total_pages: null,
+      scrolling: true,
+      query: _this.query
+    }, _this.loadMore = function () {
+      setTimeout(function () {
+        _this.setState(function (state) {
+          return {
+            page: state.page + 1,
+            from: state.from + state.per,
+            to: state.to + state.per
+          };
+        }, _this.loadData);
+      }, 10);
+    }, _this.loadData = function () {
+      var _this$state = _this.state,
+          from = _this$state.from,
+          to = _this$state.to,
+          data = _this$state.data,
+          query = _this$state.query;
+      var client = _this.props.client;
 
-  return index < 0 ? undefined : data[index][1];
-}
 
-var _listCacheGet = listCacheGet;
+      var params = { from: from, to: to };
+      var queryUpdated = query.replace('$from', params.from).replace('$to', params.to);
+      // const query = '*[_type == "article" && defined(title) && defined(thumbnail)][$from...$to] { title, summary, thumbnail { asset-> }, url }'
 
-/**
- * Checks if a list cache value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf ListCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function listCacheHas(key) {
-  return _assocIndexOf(this.__data__, key) > -1;
-}
+      if (_this.pointer && _this.pointerArray) {
+        var pointer = _this.pointer;
+        client.fetch(queryUpdated).then(function (dataArr) {
+          _this.setState(function (state, props) {
+            if (dataArr[_this.pointerArray][pointer].length > 0) {
+              return {
+                data: [].concat(toConsumableArray(data), toConsumableArray(dataArr[_this.pointerArray][pointer])),
+                scrolling: true
+              };
+            } else {
+              return {
+                scrolling: false
+              };
+            }
+          });
+        });
+      } else {
+        client.fetch(queryUpdated).then(function (dataArr) {
+          _this.setState(function (state, props) {
+            if (dataArr.length > 0) {
+              return {
+                data: [].concat(toConsumableArray(data), toConsumableArray(dataArr)),
+                scrolling: true
+              };
+            } else {
+              return {
+                scrolling: false
+              };
+            }
+          });
+        });
+      }
+    }, _this.urlFor = function (source) {
+      var client = _this.props.client;
 
-var _listCacheHas = listCacheHas;
+      var builder = imageUrlBuilder(client);
+      return builder.image(source);
+    }, _this.renderCardImage = function (row, page) {
+      if (row.thumbnail && row.thumbnail.asset) {
+        return _this.urlFor(row.thumbnail.asset).url();
+        /*} else if (page === 'videos' && row.youtubeURL) {
+        return `https://img.youtube.com/vi/${getYouTubeId(row.youtubeURL)}/0.jpg`*/
+      } else {
+        return _this.defaultImage;
+      }
+    }, _this.cardLoader = function (page, columns, variant) {
+      var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
 
-/**
- * Sets the list cache `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf ListCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the list cache instance.
- */
-function listCacheSet(key, value) {
-  var data = this.__data__,
-      index = _assocIndexOf(data, key);
+      var itemCounter = 0;
+      var lgVar = 12;
+      return React__default.createElement(
+        Row,
+        null,
+        _this.state.data && _this.state.data.map(function (row, index) {
+          if (columns === 'rotate' && itemCounter % 3 === 0) {
+            lgVar = 12;
+          } else if (columns && columns !== 'rotate') {
+            lgVar = Math.floor(12 / columns);
+          } else {
+            lgVar = 6;
+          }
 
-  if (index < 0) {
-    ++this.size;
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
+          return React__default.createElement(
+            Col,
+            { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
+            React__default.createElement(
+              Card,
+              { className: 'content-card', style: { flexDirection: mode } },
+              React__default.createElement(
+                Link,
+                { href: _this.mapping[row.contentCategory.name] + '/[url]', as: _this.mapping[row.contentCategory.name] + '/' + row.url.current },
+                React__default.createElement(
+                  'a',
+                  null,
+                  React__default.createElement(Card.Img, { variant: 'top', src: _this.renderCardImage(row, page), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
+                )
+              ),
+              React__default.createElement(
+                Card.Body,
+                null,
+                React__default.createElement(
+                  Link,
+                  { href: _this.mapping[row.contentCategory.name] + '/[url]', as: _this.mapping[row.contentCategory.name] + '/' + row.url.current },
+                  React__default.createElement(
+                    'a',
+                    null,
+                    React__default.createElement(
+                      Card.Title,
+                      null,
+                      row.title
+                    ),
+                    React__default.createElement(
+                      Card.Text,
+                      null,
+                      row.summary
+                    )
+                  )
+                )
+              )
+            )
+          );
+        })
+      );
+    }, _temp), possibleConstructorReturn(_this, _ret);
   }
-  return this;
-}
 
-var _listCacheSet = listCacheSet;
-
-/**
- * Creates an list cache object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function ListCache(entries) {
-  var index = -1,
-      length = entries == null ? 0 : entries.length;
+  createClass(DeckContent, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.state.dataKeptToCompareNewDatarecord !== this.props.dataRecord) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          data: this.props.dataRecord,
+          dataKeptToCompareNewDatarecord: this.props.dataRecord,
+          per: this.props.params ? this.props.params.to : 2,
+          page: 1,
+          from: this.props.params ? this.props.params.from : 0,
+          to: this.props.params ? this.props.params.to : 2,
+          total_pages: null,
+          scrolling: true,
+          query: this.props.query
+        });
+      }
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // this.loadData();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
 
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
+      var _props = this.props,
+          columns = _props.columns,
+          variant = _props.variant,
+          autoScroll = _props.autoScroll,
+          page = _props.page;
 
-// Add methods to `ListCache`.
-ListCache.prototype.clear = _listCacheClear;
-ListCache.prototype['delete'] = _listCacheDelete;
-ListCache.prototype.get = _listCacheGet;
-ListCache.prototype.has = _listCacheHas;
-ListCache.prototype.set = _listCacheSet;
 
-var _ListCache = ListCache;
-
-/* Built-in method references that are verified to be native. */
-var Map = _getNative(_root, 'Map');
-
-var _Map = Map;
-
-/**
- * Removes all key-value entries from the map.
- *
- * @private
- * @name clear
- * @memberOf MapCache
- */
-function mapCacheClear() {
-  this.size = 0;
-  this.__data__ = {
-    'hash': new _Hash,
-    'map': new (_Map || _ListCache),
-    'string': new _Hash
-  };
-}
-
-var _mapCacheClear = mapCacheClear;
-
-/**
- * Checks if `value` is suitable for use as unique object key.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
- */
-function isKeyable(value) {
-  var type = typeof value;
-  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
-    ? (value !== '__proto__')
-    : (value === null);
-}
-
-var _isKeyable = isKeyable;
-
-/**
- * Gets the data for `map`.
- *
- * @private
- * @param {Object} map The map to query.
- * @param {string} key The reference key.
- * @returns {*} Returns the map data.
- */
-function getMapData(map, key) {
-  var data = map.__data__;
-  return _isKeyable(key)
-    ? data[typeof key == 'string' ? 'string' : 'hash']
-    : data.map;
-}
-
-var _getMapData = getMapData;
-
-/**
- * Removes `key` and its value from the map.
- *
- * @private
- * @name delete
- * @memberOf MapCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function mapCacheDelete(key) {
-  var result = _getMapData(this, key)['delete'](key);
-  this.size -= result ? 1 : 0;
-  return result;
-}
-
-var _mapCacheDelete = mapCacheDelete;
-
-/**
- * Gets the map value for `key`.
- *
- * @private
- * @name get
- * @memberOf MapCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function mapCacheGet(key) {
-  return _getMapData(this, key).get(key);
-}
-
-var _mapCacheGet = mapCacheGet;
-
-/**
- * Checks if a map value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf MapCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function mapCacheHas(key) {
-  return _getMapData(this, key).has(key);
-}
-
-var _mapCacheHas = mapCacheHas;
-
-/**
- * Sets the map `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf MapCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the map cache instance.
- */
-function mapCacheSet(key, value) {
-  var data = _getMapData(this, key),
-      size = data.size;
-
-  data.set(key, value);
-  this.size += data.size == size ? 0 : 1;
-  return this;
-}
-
-var _mapCacheSet = mapCacheSet;
-
-/**
- * Creates a map cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function MapCache(entries) {
-  var index = -1,
-      length = entries == null ? 0 : entries.length;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-// Add methods to `MapCache`.
-MapCache.prototype.clear = _mapCacheClear;
-MapCache.prototype['delete'] = _mapCacheDelete;
-MapCache.prototype.get = _mapCacheGet;
-MapCache.prototype.has = _mapCacheHas;
-MapCache.prototype.set = _mapCacheSet;
-
-var _MapCache = MapCache;
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/**
- * Creates a function that memoizes the result of `func`. If `resolver` is
- * provided, it determines the cache key for storing the result based on the
- * arguments provided to the memoized function. By default, the first argument
- * provided to the memoized function is used as the map cache key. The `func`
- * is invoked with the `this` binding of the memoized function.
- *
- * **Note:** The cache is exposed as the `cache` property on the memoized
- * function. Its creation may be customized by replacing the `_.memoize.Cache`
- * constructor with one whose instances implement the
- * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)
- * method interface of `clear`, `delete`, `get`, `has`, and `set`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to have its output memoized.
- * @param {Function} [resolver] The function to resolve the cache key.
- * @returns {Function} Returns the new memoized function.
- * @example
- *
- * var object = { 'a': 1, 'b': 2 };
- * var other = { 'c': 3, 'd': 4 };
- *
- * var values = _.memoize(_.values);
- * values(object);
- * // => [1, 2]
- *
- * values(other);
- * // => [3, 4]
- *
- * object.a = 2;
- * values(object);
- * // => [1, 2]
- *
- * // Modify the result cache.
- * values.cache.set(object, ['a', 'b']);
- * values(object);
- * // => ['a', 'b']
- *
- * // Replace `_.memoize.Cache`.
- * _.memoize.Cache = WeakMap;
- */
-function memoize(func, resolver) {
-  if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  var memoized = function() {
-    var args = arguments,
-        key = resolver ? resolver.apply(this, args) : args[0],
-        cache = memoized.cache;
-
-    if (cache.has(key)) {
-      return cache.get(key);
-    }
-    var result = func.apply(this, args);
-    memoized.cache = cache.set(key, result) || cache;
-    return result;
-  };
-  memoized.cache = new (memoize.Cache || _MapCache);
-  return memoized;
-}
-
-// Expose `MapCache`.
-memoize.Cache = _MapCache;
-
-var memoize_1 = memoize;
-
-/** Used as the maximum memoize cache size. */
-var MAX_MEMOIZE_SIZE = 500;
-
-/**
- * A specialized version of `_.memoize` which clears the memoized function's
- * cache when it exceeds `MAX_MEMOIZE_SIZE`.
- *
- * @private
- * @param {Function} func The function to have its output memoized.
- * @returns {Function} Returns the new memoized function.
- */
-function memoizeCapped(func) {
-  var result = memoize_1(func, function(key) {
-    if (cache.size === MAX_MEMOIZE_SIZE) {
-      cache.clear();
+      return React__default.createElement(
+        'div',
+        { className: 'contentDeck' },
+        autoScroll ? React__default.createElement(
+          React__default.Fragment,
+          null,
+          React__default.createElement(
+            InfiniteScroll,
+            { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling },
+            this.cardLoader(page, columns, variant)
+          ),
+          React__default.createElement(
+            'noscript',
+            null,
+            'Manual Pagination Here'
+          )
+        ) : React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.cardLoader(page, columns, variant),
+          React__default.createElement(
+            'div',
+            { style: { padding: '0px 10px' } },
+            this.state.scrolling ? React__default.createElement(
+              'button',
+              {
+                style: { margin: 'auto', width: '100%' },
+                onClick: function onClick(e) {
+                  _this2.loadMore();
+                } },
+              'Load More'
+            ) : React__default.createElement(
+              'p',
+              { style: { textAlign: 'center' } },
+              React__default.createElement(
+                'b',
+                null,
+                'End of data'
+              )
+            )
+          ),
+          React__default.createElement(
+            'noscript',
+            null,
+            'Manual Pagination Here'
+          )
+        )
+      );
     }
-    return key;
-  });
-
-  var cache = result.cache;
-  return result;
-}
-
-var _memoizeCapped = memoizeCapped;
-
-/** Used to match property names within property paths. */
-var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
-
-/** Used to match backslashes in property paths. */
-var reEscapeChar = /\\(\\)?/g;
-
-/**
- * Converts `string` to a property path array.
- *
- * @private
- * @param {string} string The string to convert.
- * @returns {Array} Returns the property path array.
- */
-var stringToPath = _memoizeCapped(function(string) {
-  var result = [];
-  if (string.charCodeAt(0) === 46 /* . */) {
-    result.push('');
-  }
-  string.replace(rePropName, function(match, number, quote, subString) {
-    result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match));
-  });
-  return result;
-});
-
-var _stringToPath = stringToPath;
-
-/**
- * A specialized version of `_.map` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- */
-function arrayMap(array, iteratee) {
-  var index = -1,
-      length = array == null ? 0 : array.length,
-      result = Array(length);
-
-  while (++index < length) {
-    result[index] = iteratee(array[index], index, array);
-  }
-  return result;
-}
-
-var _arrayMap = arrayMap;
-
-/** Used as references for various `Number` constants. */
-var INFINITY = 1 / 0;
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = _Symbol ? _Symbol.prototype : undefined,
-    symbolToString = symbolProto ? symbolProto.toString : undefined;
-
-/**
- * The base implementation of `_.toString` which doesn't convert nullish
- * values to empty strings.
- *
- * @private
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
- */
-function baseToString(value) {
-  // Exit early for strings to avoid a performance hit in some environments.
-  if (typeof value == 'string') {
-    return value;
-  }
-  if (isArray_1(value)) {
-    // Recursively convert values (susceptible to call stack limits).
-    return _arrayMap(value, baseToString) + '';
-  }
-  if (isSymbol_1(value)) {
-    return symbolToString ? symbolToString.call(value) : '';
-  }
-  var result = (value + '');
-  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
-}
-
-var _baseToString = baseToString;
-
-/**
- * Converts `value` to a string. An empty string is returned for `null`
- * and `undefined` values. The sign of `-0` is preserved.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- * @example
- *
- * _.toString(null);
- * // => ''
- *
- * _.toString(-0);
- * // => '-0'
- *
- * _.toString([1, 2, 3]);
- * // => '1,2,3'
- */
-function toString(value) {
-  return value == null ? '' : _baseToString(value);
-}
-
-var toString_1 = toString;
-
-/**
- * Casts `value` to a path array if it's not one.
- *
- * @private
- * @param {*} value The value to inspect.
- * @param {Object} [object] The object to query keys on.
- * @returns {Array} Returns the cast property path array.
- */
-function castPath(value, object) {
-  if (isArray_1(value)) {
-    return value;
-  }
-  return _isKey(value, object) ? [value] : _stringToPath(toString_1(value));
-}
-
-var _castPath = castPath;
-
-/** Used as references for various `Number` constants. */
-var INFINITY$1 = 1 / 0;
-
-/**
- * Converts `value` to a string key if it's not a string or symbol.
- *
- * @private
- * @param {*} value The value to inspect.
- * @returns {string|symbol} Returns the key.
- */
-function toKey(value) {
-  if (typeof value == 'string' || isSymbol_1(value)) {
-    return value;
-  }
-  var result = (value + '');
-  return (result == '0' && (1 / value) == -INFINITY$1) ? '-0' : result;
-}
-
-var _toKey = toKey;
-
-/**
- * The base implementation of `_.get` without support for default values.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Array|string} path The path of the property to get.
- * @returns {*} Returns the resolved value.
- */
-function baseGet(object, path) {
-  path = _castPath(path, object);
-
-  var index = 0,
-      length = path.length;
-
-  while (object != null && index < length) {
-    object = object[_toKey(path[index++])];
-  }
-  return (index && index == length) ? object : undefined;
-}
-
-var _baseGet = baseGet;
-
-/**
- * Gets the value at `path` of `object`. If the resolved value is
- * `undefined`, the `defaultValue` is returned in its place.
- *
- * @static
- * @memberOf _
- * @since 3.7.0
- * @category Object
- * @param {Object} object The object to query.
- * @param {Array|string} path The path of the property to get.
- * @param {*} [defaultValue] The value returned for `undefined` resolved values.
- * @returns {*} Returns the resolved value.
- * @example
- *
- * var object = { 'a': [{ 'b': { 'c': 3 } }] };
- *
- * _.get(object, 'a[0].b.c');
- * // => 3
- *
- * _.get(object, ['a', '0', 'b', 'c']);
- * // => 3
- *
- * _.get(object, 'a.b.c', 'default');
- * // => 'default'
- */
-function get$1(object, path, defaultValue) {
-  var result = object == null ? undefined : _baseGet(object, path);
-  return result === undefined ? defaultValue : result;
-}
-
-var get_1 = get$1;
+  }]);
+  return DeckContent;
+}(React__default.Component);
 
 var DeckQueue = function (_React$Component) {
   inherits(DeckQueue, _React$Component);
@@ -2098,6 +1454,11 @@ var DeckQueue = function (_React$Component) {
           });
         });
       }
+    }, _this.urlFor = function (source) {
+      var client = _this.props.client;
+
+      var builder = imageUrlBuilder(client);
+      return builder.image(source);
     }, _temp), possibleConstructorReturn(_this, _ret);
   }
 
@@ -2113,7 +1474,8 @@ var DeckQueue = function (_React$Component) {
         Row,
         null,
         this.state.data && this.state.data.map(function (row, index) {
-          var thumbnailURL = get_1(row, 'thumbnail.asset.url', _this2.props.defaultImage);
+          // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
+          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? _this2.urlFor(row.thumbnail.asset).url() : _this2.props.defaultImage;
           return React__default.createElement(
             Col,
             { key: index, md: 12, lg: lgVar, style: { display: 'flex', flex: '1 0 auto' } },
@@ -2213,7 +1575,15 @@ var DeckQueue = function (_React$Component) {
 
 var ThumbnailCard = function ThumbnailCard(_ref) {
   var size = _ref.size,
-      mediaData = _ref.mediaData;
+      mediaData = _ref.mediaData,
+      client = _ref.client,
+      defaultImage = _ref.defaultImage;
+
+  var builder = imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
 
   return React__default.createElement(
     'div',
@@ -2222,7 +1592,13 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
       return React__default.createElement(
         Media,
         { className: 'mb-3 thumbnail-card' },
-        React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail.asset.url, alt: 'Generic placeholder' }),
+        React__default.createElement('img', {
+          width: size,
+          height: size,
+          className: 'mr-3',
+          src: item.thumbnail && item.thumbnail.asset ? urlFor(item.thumbnail.asset).url() : defaultImage,
+          alt: 'Generic placeholder'
+        }),
         React__default.createElement(
           Media.Body,
           null,
@@ -2248,8 +1624,15 @@ var TaxonomyCard = function TaxonomyCard(props) {
       _props$icon = props.icon,
       icon = _props$icon === undefined ? false : _props$icon,
       data = props.dataRecord,
-      defaultImage = props.defaultImage;
+      defaultImage = props.defaultImage,
+      client = props.client;
+
+
+  var builder = imageUrlBuilder(client);
 
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
 
   var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
 
@@ -2270,8 +1653,7 @@ var TaxonomyCard = function TaxonomyCard(props) {
         } else {
           lgVar = 6;
         }
-        var thumbnailURL = get_1(row, 'thumbnail.asset.url', defaultImage);
-
+        var thumbnailURL = row.thumbnail && row.thumbnail.asset ? urlFor(row.thumbnail.asset).url() : defaultImage;
         return React__default.createElement(
           Col,
           { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
@@ -2326,7 +1708,8 @@ var TaxonomyCard = function TaxonomyCard(props) {
                     top: '50%',
                     transform: 'translateY(-50%) translateX(50px)',
                     transition: 'all .25s',
-                    pointerEvents: 'none' } },
+                    pointerEvents: 'none'
+                  } },
                 '\u2192'
               )
             )
@@ -3083,7 +2466,7 @@ var NavDvm = function NavDvm(props) {
     ),
     React__default.createElement(
       Navbar,
-      { className: 'bottom-nav', variant: 'dark', expand: 'lg', bg: 'primary', sticky: 'top' },
+      { className: 'bottom-nav', variant: 'dark', expand: 'xl', bg: 'primary', sticky: 'top' },
       React__default.createElement(
         Container,
         { className: 'position-relative' },
@@ -3146,7 +2529,7 @@ var NavDvm = function NavDvm(props) {
     React__default.createElement(
       'style',
       { jsx: true },
-      '\n        .mobile-logo{\n          display: none;\n          position: absolute;\n          left: 50%;\n          top: 0;\n          height: 40px;\n          transform: translateX(-50%);\n        }\n        .mobile-logo img{\n          height: 100%;\n        }\n        @media screen and (max-width: 991px){\n          .mobile-logo{\n            display: block;\n          }\n          \n          .top-nav{\n            display: none;\n          }\n        }\n      '
+      '\n        .mobile-logo{\n          display: none;\n          position: absolute;\n          left: 50%;\n          top: 0;\n          height: 40px;\n          transform: translateX(-50%);\n        }\n        .mobile-logo img{\n          height: 100%;\n        }\n        @media screen and (max-width: 1199px){\n          .mobile-logo{\n            display: block;\n          }\n          .top-nav{\n            display: none;\n          }\n        }\n      '
     )
   );
 };
@@ -5803,30 +5186,40 @@ var AD300x250x600 = function AD300x250x600(_ref) {
 
 var FigureComponent = function FigureComponent(_ref) {
   var caption = _ref.caption,
-      asset = _ref.asset;
+      asset = _ref.asset,
+      client = _ref.client;
 
-  if (asset && asset.url) {
-    return React__default.createElement(
-      'div',
-      { style: { textAlign: 'center', marginTop: '1em', marginBottom: '1em' } },
-      React__default.createElement(
-        reactBootstrap.Figure,
+  var builder = imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
+
+  return React__default.createElement(
+    'div',
+    { style: { textAlign: 'center', marginTop: '1em', marginBottom: '1em' } },
+    React__default.createElement(
+      reactBootstrap.Figure,
+      null,
+      React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(asset).url() }),
+      caption && React__default.createElement(
+        reactBootstrap.Figure.Caption,
         null,
-        React__default.createElement(reactBootstrap.Figure.Image, { alt: asset ? asset.originalFilename : '', src: asset.url }),
-        caption && React__default.createElement(
-          reactBootstrap.Figure.Caption,
-          null,
-          caption
-        )
+        caption
       )
-    );
-  }
-  return null;
+    )
+  );
 };
 
 var Slideshow = function Slideshow(_ref) {
-  var slides = _ref.slides;
+  var slides = _ref.slides,
+      client = _ref.client;
+
+  var builder = imageUrlBuilder(client);
 
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
   return React__default.createElement(
     'div',
     { style: { marginTop: '1em', marginBottom: '1em' } },
@@ -5837,14 +5230,14 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           reactBootstrap.Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { style: { width: '100%' }, src: slide.asset.url ? slide.asset.url : '/placeholder.jpg', alt: slide.asset ? slide.asset.originalFilename : '' })
+          React__default.createElement('img', { src: urlFor(slide.asset).url(), style: { width: '100%' } })
         );
       })
     )
   );
 };
 
-var isArray$1 = Array.isArray;
+var isArray = Array.isArray;
 var keyList = Object.keys;
 var hasProp = Object.prototype.hasOwnProperty;
 
@@ -5852,8 +5245,8 @@ var fastDeepEqual = function equal(a, b) {
   if (a === b) return true;
 
   if (a && b && typeof a == 'object' && typeof b == 'object') {
-    var arrA = isArray$1(a)
-      , arrB = isArray$1(b)
+    var arrA = isArray(a)
+      , arrB = isArray(b)
       , i
       , length
       , key;
@@ -6935,7 +6328,7 @@ function format(f) {
     }
   });
   for (var x = args[i]; i < len; x = args[++i]) {
-    if (isNull(x) || !isObject$1(x)) {
+    if (isNull(x) || !isObject(x)) {
       str += ' ' + x;
     } else {
       str += ' ' + inspect(x);
@@ -7086,7 +6479,7 @@ function formatValue(ctx, value, recurseTimes) {
   // Check that value is an object with an inspect function on it
   if (ctx.customInspect &&
       value &&
-      isFunction$1(value.inspect) &&
+      isFunction(value.inspect) &&
       // Filter out the util module, it's inspect function is special
       value.inspect !== inspect &&
       // Also filter out any prototype objects using the circular check.
@@ -7121,7 +6514,7 @@ function formatValue(ctx, value, recurseTimes) {
 
   // Some type of object without properties can be shortcutted.
   if (keys.length === 0) {
-    if (isFunction$1(value)) {
+    if (isFunction(value)) {
       var name = value.name ? ': ' + value.name : '';
       return ctx.stylize('[Function' + name + ']', 'special');
     }
@@ -7139,13 +6532,13 @@ function formatValue(ctx, value, recurseTimes) {
   var base = '', array = false, braces = ['{', '}'];
 
   // Make Array say that they are Array
-  if (isArray$2(value)) {
+  if (isArray$1(value)) {
     array = true;
     braces = ['[', ']'];
   }
 
   // Make functions say that they are functions
-  if (isFunction$1(value)) {
+  if (isFunction(value)) {
     var n = value.name ? ': ' + value.name : '';
     base = ' [Function' + n + ']';
   }
@@ -7221,7 +6614,7 @@ function formatError(value) {
 function formatArray(ctx, value, recurseTimes, visibleKeys, keys) {
   var output = [];
   for (var i = 0, l = value.length; i < l; ++i) {
-    if (hasOwnProperty$4(value, String(i))) {
+    if (hasOwnProperty(value, String(i))) {
       output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,
           String(i), true));
     } else {
@@ -7252,7 +6645,7 @@ function formatProperty(ctx, value, recurseTimes, visibleKeys, key, array) {
       str = ctx.stylize('[Setter]', 'special');
     }
   }
-  if (!hasOwnProperty$4(visibleKeys, key)) {
+  if (!hasOwnProperty(visibleKeys, key)) {
     name = '[' + key + ']';
   }
   if (!str) {
@@ -7318,7 +6711,7 @@ function reduceToSingleString(output, base, braces) {
 
 // NOTE: These type checking functions intentionally don't use `instanceof`
 // because it is fragile and can be easily faked with `Object.create()`.
-function isArray$2(ar) {
+function isArray$1(ar) {
   return Array.isArray(ar);
 }
 
@@ -7342,7 +6735,7 @@ function isString(arg) {
   return typeof arg === 'string';
 }
 
-function isSymbol$1(arg) {
+function isSymbol(arg) {
   return typeof arg === 'symbol';
 }
 
@@ -7351,23 +6744,23 @@ function isUndefined(arg) {
 }
 
 function isRegExp(re) {
-  return isObject$1(re) && objectToString$1(re) === '[object RegExp]';
+  return isObject(re) && objectToString(re) === '[object RegExp]';
 }
 
-function isObject$1(arg) {
+function isObject(arg) {
   return typeof arg === 'object' && arg !== null;
 }
 
 function isDate(d) {
-  return isObject$1(d) && objectToString$1(d) === '[object Date]';
+  return isObject(d) && objectToString(d) === '[object Date]';
 }
 
 function isError(e) {
-  return isObject$1(e) &&
-      (objectToString$1(e) === '[object Error]' || e instanceof Error);
+  return isObject(e) &&
+      (objectToString(e) === '[object Error]' || e instanceof Error);
 }
 
-function isFunction$1(arg) {
+function isFunction(arg) {
   return typeof arg === 'function';
 }
 
@@ -7384,7 +6777,7 @@ function isBuffer(maybeBuf) {
   return Buffer.isBuffer(maybeBuf);
 }
 
-function objectToString$1(o) {
+function objectToString(o) {
   return Object.prototype.toString.call(o);
 }
 
@@ -7414,7 +6807,7 @@ function log() {
 
 function _extend(origin, add) {
   // Don't do anything if add isn't an object
-  if (!add || !isObject$1(add)) return origin;
+  if (!add || !isObject(add)) return origin;
 
   var keys = Object.keys(add);
   var i = keys.length;
@@ -7423,7 +6816,7 @@ function _extend(origin, add) {
   }
   return origin;
 }
-function hasOwnProperty$4(obj, prop) {
+function hasOwnProperty(obj, prop) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
 
@@ -7433,19 +6826,19 @@ var util = {
   log: log,
   isBuffer: isBuffer,
   isPrimitive: isPrimitive,
-  isFunction: isFunction$1,
+  isFunction: isFunction,
   isError: isError,
   isDate: isDate,
-  isObject: isObject$1,
+  isObject: isObject,
   isRegExp: isRegExp,
   isUndefined: isUndefined,
-  isSymbol: isSymbol$1,
+  isSymbol: isSymbol,
   isString: isString,
   isNumber: isNumber,
   isNullOrUndefined: isNullOrUndefined,
   isNull: isNull,
   isBoolean: isBoolean,
-  isArray: isArray$2,
+  isArray: isArray$1,
   inspect: inspect,
   deprecate: deprecate,
   format: format,
@@ -7454,7 +6847,7 @@ var util = {
 
 var require$$2 = {};
 
-var node = createCommonjsModule(function (module, exports) {
+var node$1 = createCommonjsModule(function (module, exports) {
 /**
  * Module dependencies.
  */
@@ -7704,14 +7097,14 @@ function init (debug$$1) {
 
 exports.enable(load());
 });
-var node_1 = node.init;
-var node_2 = node.log;
-var node_3 = node.formatArgs;
-var node_4 = node.save;
-var node_5 = node.load;
-var node_6 = node.useColors;
-var node_7 = node.colors;
-var node_8 = node.inspectOpts;
+var node_1 = node$1.init;
+var node_2 = node$1.log;
+var node_3 = node$1.formatArgs;
+var node_4 = node$1.save;
+var node_5 = node$1.load;
+var node_6 = node$1.useColors;
+var node_7 = node$1.colors;
+var node_8 = node$1.inspectOpts;
 
 var src = createCommonjsModule(function (module) {
 /**
@@ -7722,7 +7115,7 @@ var src = createCommonjsModule(function (module) {
 if (typeof process !== 'undefined' && process.type === 'renderer') {
   module.exports = browser;
 } else {
-  module.exports = node;
+  module.exports = node$1;
 }
 });
 
@@ -8474,7 +7867,7 @@ object-assign
 */
 /* eslint-disable no-unused-vars */
 var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty$5 = Object.prototype.hasOwnProperty;
+var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
 function toObject(val) {
@@ -8524,580 +7917,43 @@ function shouldUseNative() {
 
 		return true;
 	} catch (err) {
-		// We don't expect any of the above to throw, but better to be safe.
-		return false;
-	}
-}
-
-var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
-	var from;
-	var to = toObject(target);
-	var symbols;
-
-	for (var s = 1; s < arguments.length; s++) {
-		from = Object(arguments[s]);
-
-		for (var key in from) {
-			if (hasOwnProperty$5.call(from, key)) {
-				to[key] = from[key];
-			}
-		}
-
-		if (getOwnPropertySymbols) {
-			symbols = getOwnPropertySymbols(from);
-			for (var i = 0; i < symbols.length; i++) {
-				if (propIsEnumerable.call(from, symbols[i])) {
-					to[symbols[i]] = from[symbols[i]];
-				}
-			}
-		}
-	}
-
-	return to;
-};
-
-var baseUrl = 'https://docs.sanity.io/help/';
-
-var generateHelpUrl = function generateHelpUrl(slug) {
-  return baseUrl + slug
-};
-
-var parseAssetId_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-var example = 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg';
-function parseAssetId(ref) {
-    var _a = ref.split('-'), id = _a[1], dimensionString = _a[2], format = _a[3];
-    if (!id || !dimensionString || !format) {
-        throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
-    }
-    var _b = dimensionString.split('x'), imgWidthStr = _b[0], imgHeightStr = _b[1];
-    var width = +imgWidthStr;
-    var height = +imgHeightStr;
-    var isValidAssetId = isFinite(width) && isFinite(height);
-    if (!isValidAssetId) {
-        throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
-    }
-    return { id: id, width: width, height: height, format: format };
-}
-exports.default = parseAssetId;
-
-});
-
-unwrapExports(parseAssetId_1);
-
-var parseSource_1 = createCommonjsModule(function (module, exports) {
-var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var isRef = function (src) {
-    var source = src;
-    return source ? typeof source._ref === 'string' : false;
-};
-var isAsset = function (src) {
-    var source = src;
-    return source ? typeof source._id === 'string' : false;
-};
-var isAssetStub = function (src) {
-    var source = src;
-    return source && source.asset ? typeof source.asset.url === 'string' : false;
-};
-// Convert an asset-id, asset or image to an image record suitable for processing
-// eslint-disable-next-line complexity
-function parseSource(source) {
-    if (!source) {
-        return null;
-    }
-    var image;
-    if (typeof source === 'string' && isUrl(source)) {
-        // Someone passed an existing image url?
-        image = {
-            asset: { _ref: urlToId(source) }
-        };
-    }
-    else if (typeof source === 'string') {
-        // Just an asset id
-        image = {
-            asset: { _ref: source }
-        };
-    }
-    else if (isRef(source)) {
-        // We just got passed an asset directly
-        image = {
-            asset: source
-        };
-    }
-    else if (isAsset(source)) {
-        // If we were passed an image asset document
-        image = {
-            asset: {
-                _ref: source._id || ''
-            }
-        };
-    }
-    else if (isAssetStub(source)) {
-        // If we were passed a partial asset (`url`, but no `_id`)
-        image = {
-            asset: {
-                _ref: urlToId(source.asset.url)
-            }
-        };
-    }
-    else if (typeof source.asset === 'object') {
-        // Probably an actual image with materialized asset
-        image = source;
-    }
-    else {
-        // We got something that does not look like an image, or it is an image
-        // that currently isn't sporting an asset.
-        return null;
-    }
-    var img = source;
-    if (img.crop) {
-        image.crop = img.crop;
-    }
-    if (img.hotspot) {
-        image.hotspot = img.hotspot;
-    }
-    return applyDefaults(image);
-}
-exports.default = parseSource;
-function isUrl(url) {
-    return /^https?:\/\//.test("" + url);
-}
-function urlToId(url) {
-    var parts = url.split('/').slice(-1);
-    return ("image-" + parts[0]).replace(/\.([a-z]+)$/, '-$1');
-}
-// Mock crop and hotspot if image lacks it
-function applyDefaults(image) {
-    if (image.crop && image.hotspot) {
-        return image;
-    }
-    // We need to pad in default values for crop or hotspot
-    var result = __assign({}, image);
-    if (!result.crop) {
-        result.crop = {
-            left: 0,
-            top: 0,
-            bottom: 0,
-            right: 0
-        };
-    }
-    if (!result.hotspot) {
-        result.hotspot = {
-            x: 0.5,
-            y: 0.5,
-            height: 1.0,
-            width: 1.0
-        };
-    }
-    return result;
-}
-
-});
-
-unwrapExports(parseSource_1);
-
-var urlForImage_1 = createCommonjsModule(function (module, exports) {
-var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var parseAssetId_1$$1 = __importDefault(parseAssetId_1);
-var parseSource_1$$1 = __importDefault(parseSource_1);
-exports.parseSource = parseSource_1$$1.default;
-exports.SPEC_NAME_TO_URL_NAME_MAPPINGS = [
-    ['width', 'w'],
-    ['height', 'h'],
-    ['format', 'fm'],
-    ['download', 'dl'],
-    ['blur', 'blur'],
-    ['sharpen', 'sharp'],
-    ['invert', 'invert'],
-    ['orientation', 'or'],
-    ['minHeight', 'min-h'],
-    ['maxHeight', 'max-h'],
-    ['minWidth', 'min-w'],
-    ['maxWidth', 'max-w'],
-    ['quality', 'q'],
-    ['fit', 'fit'],
-    ['crop', 'crop'],
-    ['auto', 'auto'],
-    ['dpr', 'dpr']
-];
-function urlForImage(options) {
-    var spec = __assign({}, (options || {}));
-    var source = spec.source;
-    delete spec.source;
-    var image = parseSource_1$$1.default(source);
-    if (!image) {
-        return null;
-    }
-    var id = image.asset._ref || image.asset._id || '';
-    var asset = parseAssetId_1$$1.default(id);
-    // Compute crop rect in terms of pixel coordinates in the raw source image
-    var cropLeft = Math.round(image.crop.left * asset.width);
-    var cropTop = Math.round(image.crop.top * asset.height);
-    var crop = {
-        left: cropLeft,
-        top: cropTop,
-        width: Math.round(asset.width - image.crop.right * asset.width - cropLeft),
-        height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
-    };
-    // Compute hot spot rect in terms of pixel coordinates
-    var hotSpotVerticalRadius = (image.hotspot.height * asset.height) / 2;
-    var hotSpotHorizontalRadius = (image.hotspot.width * asset.width) / 2;
-    var hotSpotCenterX = image.hotspot.x * asset.width;
-    var hotSpotCenterY = image.hotspot.y * asset.height;
-    var hotspot = {
-        left: hotSpotCenterX - hotSpotHorizontalRadius,
-        top: hotSpotCenterY - hotSpotVerticalRadius,
-        right: hotSpotCenterX + hotSpotHorizontalRadius,
-        bottom: hotSpotCenterY + hotSpotVerticalRadius
-    };
-    // If irrelevant, or if we are requested to: don't perform crop/fit based on
-    // the crop/hotspot.
-    if (!(spec.rect || spec.focalPoint || spec.ignoreImageParams || spec.crop)) {
-        spec = __assign({}, spec, fit({ crop: crop, hotspot: hotspot }, spec));
-    }
-    return specToImageUrl(__assign({}, spec, { asset: asset }));
-}
-exports.default = urlForImage;
-// eslint-disable-next-line complexity
-function specToImageUrl(spec) {
-    var cdnUrl = spec.baseUrl || 'https://cdn.sanity.io';
-    var filename = spec.asset.id + "-" + spec.asset.width + "x" + spec.asset.height + "." + spec.asset.format;
-    var baseUrl = cdnUrl + "/images/" + spec.projectId + "/" + spec.dataset + "/" + filename;
-    var params = [];
-    if (spec.rect) {
-        // Only bother url with a crop if it actually crops anything
-        var _a = spec.rect, left = _a.left, top_1 = _a.top, width = _a.width, height = _a.height;
-        var isEffectiveCrop = left !== 0 || top_1 !== 0 || height !== spec.asset.height || width !== spec.asset.width;
-        if (isEffectiveCrop) {
-            params.push("rect=" + left + "," + top_1 + "," + width + "," + height);
-        }
-    }
-    if (spec.bg) {
-        params.push("bg=" + spec.bg);
-    }
-    if (spec.focalPoint) {
-        params.push("fp-x=" + spec.focalPoint.x);
-        params.push("fp-x=" + spec.focalPoint.y);
-    }
-    var flip = [spec.flipHorizontal && 'h', spec.flipVertical && 'v'].filter(Boolean).join('');
-    if (flip) {
-        params.push("flip=" + flip);
-    }
-    // Map from spec name to url param name, and allow using the actual param name as an alternative
-    exports.SPEC_NAME_TO_URL_NAME_MAPPINGS.forEach(function (mapping) {
-        var specName = mapping[0], param = mapping[1];
-        if (typeof spec[specName] !== 'undefined') {
-            params.push(param + "=" + encodeURIComponent(spec[specName]));
-        }
-        else if (typeof spec[param] !== 'undefined') {
-            params.push(param + "=" + encodeURIComponent(spec[param]));
-        }
-    });
-    if (params.length === 0) {
-        return baseUrl;
-    }
-    return baseUrl + "?" + params.join('&');
-}
-function fit(source, spec) {
-    var cropRect;
-    var imgWidth = spec.width;
-    var imgHeight = spec.height;
-    // If we are not constraining the aspect ratio, we'll just use the whole crop
-    if (!(imgWidth && imgHeight)) {
-        return { width: imgWidth, height: imgHeight, rect: source.crop };
-    }
-    var crop = source.crop;
-    var hotspot = source.hotspot;
-    // If we are here, that means aspect ratio is locked and fitting will be a bit harder
-    var desiredAspectRatio = imgWidth / imgHeight;
-    var cropAspectRatio = crop.width / crop.height;
-    if (cropAspectRatio > desiredAspectRatio) {
-        // The crop is wider than the desired aspect ratio. That means we are cutting from the sides
-        var height = crop.height;
-        var width = height * desiredAspectRatio;
-        var top_2 = crop.top;
-        // Center output horizontally over hotspot
-        var hotspotXCenter = (hotspot.right - hotspot.left) / 2 + hotspot.left;
-        var left = hotspotXCenter - width / 2;
-        // Keep output within crop
-        if (left < crop.left) {
-            left = crop.left;
-        }
-        else if (left + width > crop.left + crop.width) {
-            left = crop.left + crop.width - width;
-        }
-        cropRect = {
-            left: Math.round(left),
-            top: Math.round(top_2),
-            width: Math.round(width),
-            height: Math.round(height)
-        };
-    }
-    else {
-        // The crop is taller than the desired ratio, we are cutting from top and bottom
-        var width = crop.width;
-        var height = width / desiredAspectRatio;
-        var left = crop.left;
-        // Center output vertically over hotspot
-        var hotspotYCenter = (hotspot.bottom - hotspot.top) / 2 + hotspot.top;
-        var top_3 = hotspotYCenter - height / 2;
-        // Keep output rect within crop
-        if (top_3 < crop.top) {
-            top_3 = crop.top;
-        }
-        else if (top_3 + height > crop.top + crop.height) {
-            top_3 = crop.top + crop.height - height;
-        }
-        cropRect = {
-            left: Math.max(0, Math.floor(left)),
-            top: Math.max(0, Math.floor(top_3)),
-            width: Math.round(width),
-            height: Math.round(height)
-        };
-    }
-    return {
-        width: imgWidth,
-        height: imgHeight,
-        rect: cropRect
-    };
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
 }
 
-});
-
-unwrapExports(urlForImage_1);
-var urlForImage_2 = urlForImage_1.parseSource;
-var urlForImage_3 = urlForImage_1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
 
-var builder = createCommonjsModule(function (module, exports) {
-var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var urlForImage_1$$1 = __importStar(urlForImage_1);
-var validFits = ['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min'];
-var validCrops = ['top', 'bottom', 'left', 'right', 'center', 'focalpoint', 'entropy'];
-var validAutoModes = ['format'];
-function isSanityClient(client) {
-    return client ? typeof client.clientConfig === 'object' : false;
-}
-function rewriteSpecName(key) {
-    var specs = urlForImage_1$$1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
-    for (var _i = 0, specs_1 = specs; _i < specs_1.length; _i++) {
-        var entry = specs_1[_i];
-        var specName = entry[0], param = entry[1];
-        if (key === specName || key === param) {
-            return specName;
-        }
-    }
-    return key;
-}
-function urlBuilder(options) {
-    // Did we get a SanityClient?
-    var client = options;
-    if (isSanityClient(client)) {
-        // Inherit config from client
-        var _a = client.clientConfig, apiHost = _a.apiHost, projectId = _a.projectId, dataset = _a.dataset;
-        return new ImageUrlBuilder(null, {
-            baseUrl: apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),
-            projectId: projectId,
-            dataset: dataset
-        });
-    }
-    // Or just accept the options as given
-    return new ImageUrlBuilder(null, options);
-}
-exports.default = urlBuilder;
-var ImageUrlBuilder = /** @class */ (function () {
-    function ImageUrlBuilder(parent, options) {
-        this.options = parent
-            ? __assign({}, (parent.options || {}), (options || {})) : __assign({}, (options || {})); // Copy options
-    }
-    ImageUrlBuilder.prototype.withOptions = function (options) {
-        var baseUrl = options.baseUrl || '';
-        var newOptions = { baseUrl: baseUrl };
-        for (var key in options) {
-            if (options.hasOwnProperty(key)) {
-                var specKey = rewriteSpecName(key);
-                newOptions[specKey] = options[key];
-            }
-        }
-        return new ImageUrlBuilder(this, __assign({ baseUrl: baseUrl }, newOptions));
-    };
-    // The image to be represented. Accepts a Sanity 'image'-document, 'asset'-document or
-    // _id of asset. To get the benefit of automatic hot-spot/crop integration with the content
-    // studio, the 'image'-document must be provided.
-    ImageUrlBuilder.prototype.image = function (source) {
-        return this.withOptions({ source: source });
-    };
-    // Specify the dataset
-    ImageUrlBuilder.prototype.dataset = function (dataset) {
-        return this.withOptions({ dataset: dataset });
-    };
-    // Specify the projectId
-    ImageUrlBuilder.prototype.projectId = function (projectId) {
-        return this.withOptions({ projectId: projectId });
-    };
-    // Specify background color
-    ImageUrlBuilder.prototype.bg = function (bg) {
-        return this.withOptions({ bg: bg });
-    };
-    // Set DPR scaling factor
-    ImageUrlBuilder.prototype.dpr = function (dpr) {
-        return this.withOptions({ dpr: dpr });
-    };
-    // Specify the width of the image in pixels
-    ImageUrlBuilder.prototype.width = function (width) {
-        return this.withOptions({ width: width });
-    };
-    // Specify the height of the image in pixels
-    ImageUrlBuilder.prototype.height = function (height) {
-        return this.withOptions({ height: height });
-    };
-    // Specify focal point in fraction of image dimensions. Each component 0.0-1.0
-    ImageUrlBuilder.prototype.focalPoint = function (x, y) {
-        return this.withOptions({ focalPoint: { x: x, y: y } });
-    };
-    ImageUrlBuilder.prototype.maxWidth = function (maxWidth) {
-        return this.withOptions({ maxWidth: maxWidth });
-    };
-    ImageUrlBuilder.prototype.minWidth = function (minWidth) {
-        return this.withOptions({ minWidth: minWidth });
-    };
-    ImageUrlBuilder.prototype.maxHeight = function (maxHeight) {
-        return this.withOptions({ maxHeight: maxHeight });
-    };
-    ImageUrlBuilder.prototype.minHeight = function (minHeight) {
-        return this.withOptions({ minHeight: minHeight });
-    };
-    // Specify width and height in pixels
-    ImageUrlBuilder.prototype.size = function (width, height) {
-        return this.withOptions({ width: width, height: height });
-    };
-    // Specify blur between 0 and 100
-    ImageUrlBuilder.prototype.blur = function (blur) {
-        return this.withOptions({ blur: blur });
-    };
-    ImageUrlBuilder.prototype.sharpen = function (sharpen) {
-        return this.withOptions({ sharpen: sharpen });
-    };
-    // Specify the desired rectangle of the image
-    ImageUrlBuilder.prototype.rect = function (left, top, width, height) {
-        return this.withOptions({ rect: { left: left, top: top, width: width, height: height } });
-    };
-    // Specify the image format of the image. 'jpg', 'pjpg', 'png', 'webp'
-    ImageUrlBuilder.prototype.format = function (format) {
-        return this.withOptions({ format: format });
-    };
-    ImageUrlBuilder.prototype.invert = function (invert) {
-        return this.withOptions({ invert: invert });
-    };
-    // Rotation in degrees 0, 90, 180, 270
-    ImageUrlBuilder.prototype.orientation = function (orientation) {
-        return this.withOptions({ orientation: orientation });
-    };
-    // Compression quality 0-100
-    ImageUrlBuilder.prototype.quality = function (quality) {
-        return this.withOptions({ quality: quality });
-    };
-    // Make it a download link. Parameter is default filename.
-    ImageUrlBuilder.prototype.forceDownload = function (download) {
-        return this.withOptions({ download: download });
-    };
-    // Flip image horizontally
-    ImageUrlBuilder.prototype.flipHorizontal = function () {
-        return this.withOptions({ flipHorizontal: true });
-    };
-    // Flip image verically
-    ImageUrlBuilder.prototype.flipVertical = function () {
-        return this.withOptions({ flipVertical: true });
-    };
-    // Ignore crop/hotspot from image record, even when present
-    ImageUrlBuilder.prototype.ignoreImageParams = function () {
-        return this.withOptions({ ignoreImageParams: true });
-    };
-    ImageUrlBuilder.prototype.fit = function (value) {
-        if (validFits.indexOf(value) === -1) {
-            throw new Error("Invalid fit mode \"" + value + "\"");
-        }
-        return this.withOptions({ fit: value });
-    };
-    ImageUrlBuilder.prototype.crop = function (value) {
-        if (validCrops.indexOf(value) === -1) {
-            throw new Error("Invalid crop mode \"" + value + "\"");
-        }
-        return this.withOptions({ crop: value });
-    };
-    ImageUrlBuilder.prototype.auto = function (value) {
-        if (validAutoModes.indexOf(value) === -1) {
-            throw new Error("Invalid auto mode \"" + value + "\"");
-        }
-        return this.withOptions({ auto: value });
-    };
-    // Gets the url based on the submitted parameters
-    ImageUrlBuilder.prototype.url = function () {
-        return urlForImage_1$$1.default(this.options);
-    };
-    // Synonym for url()
-    ImageUrlBuilder.prototype.toString = function () {
-        return this.url();
-    };
-    return ImageUrlBuilder;
-}());
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
 
-});
+		for (var key in from) {
+			if (hasOwnProperty$1.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
 
-unwrapExports(builder);
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
 
-var node$1 = createCommonjsModule(function (module) {
-var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+	return to;
 };
-var builder_1 = __importDefault(builder);
-module.exports = builder_1.default;
 
-});
+var baseUrl = 'https://docs.sanity.io/help/';
 
-unwrapExports(node$1);
+var generateHelpUrl = function generateHelpUrl(slug) {
+  return baseUrl + slug
+};
 
 var enc = encodeURIComponent;
 var materializeError = "You must either:\n  - Pass `projectId` and `dataset` to the block renderer\n  - Materialize images to include the `url` field.\n\nFor more information, see ".concat(generateHelpUrl('block-content-image-materializing'));
@@ -9117,11 +7973,11 @@ var getQueryString = function getQueryString(options) {
 };
 
 var buildUrl = function buildUrl(props) {
-  var node = props.node,
+  var node$$1 = props.node,
       options = props.options;
   var projectId = options.projectId,
       dataset = options.dataset;
-  var asset = node.asset;
+  var asset = node$$1.asset;
 
   if (!asset) {
     throw new Error('Image does not have required `asset` property');
@@ -9141,10 +7997,10 @@ var buildUrl = function buildUrl(props) {
     throw new Error('Invalid image reference in block, no `_ref` found on `asset`');
   }
 
-  return node$1(objectAssign({
+  return node(objectAssign({
     projectId: projectId,
     dataset: dataset
-  }, options.imageOptions || {})).image(node).toString();
+  }, options.imageOptions || {})).image(node$$1).toString();
 };
 
 var getImageUrl = buildUrl;
@@ -9914,7 +8770,7 @@ var Sidebar = function Sidebar(_ref) {
 
   return React__default.createElement(
     reactBootstrap.Card,
-    { style: { maxWidth: '50%', float: 'right' } },
+    { className: 'sidebar' },
     React__default.createElement(
       reactBootstrap.Card.Body,
       null,
@@ -9928,6 +8784,61 @@ var Sidebar = function Sidebar(_ref) {
   );
 };
 
+var TableShow = function TableShow(_ref) {
+  var rows = _ref.rows;
+
+  return React__default.createElement(
+    reactBootstrap.Table,
+    { bordered: true, hover: true, responsive: true },
+    React__default.createElement(
+      'tbody',
+      null,
+      rows && rows.map(function (row) {
+        return React__default.createElement(
+          'tr',
+          { key: row._key },
+          row.cells && row.cells.map(function (cell, index) {
+            return React__default.createElement(
+              'td',
+              { key: index },
+              cell
+            );
+          })
+        );
+      })
+    )
+  );
+};
+
+var Media$1 = function Media$$1(_ref) {
+  var uploadDoc = _ref.uploadDoc,
+      poster = _ref.poster,
+      client = _ref.client,
+      blank = _ref.blank,
+      caption = _ref.caption;
+
+  var builder = imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
+
+  return React__default.createElement(
+    reactBootstrap.Figure,
+    null,
+    uploadDoc ? React__default.createElement(
+      'a',
+      { href: urlFor(poster.asset).url(), target: blank ? '_blank' : '_self' },
+      React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(poster.asset).url() })
+    ) : React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(poster.asset).url() }),
+    caption && React__default.createElement(
+      reactBootstrap.Figure.Caption,
+      null,
+      caption
+    )
+  );
+};
+
 var getSerializers$1 = function getSerializers(client) {
   return {
     types: {
@@ -9942,13 +8853,13 @@ var getSerializers$1 = function getSerializers(client) {
         var asset = node.asset,
             caption = node.caption;
 
-        return React__default.createElement(FigureComponent, { caption: caption, asset: asset });
+        return React__default.createElement(FigureComponent, { caption: caption, asset: asset, client: client });
       },
       slideshow: function slideshow(_ref3) {
         var node = _ref3.node;
         var slides = node.slides;
 
-        return React__default.createElement(Slideshow, { slides: slides });
+        return React__default.createElement(Slideshow, { slides: slides, client: client });
       },
       sidebar: function sidebar(_ref4) {
         var node = _ref4.node;
@@ -9956,6 +8867,21 @@ var getSerializers$1 = function getSerializers(client) {
             content = node.content;
 
         return React__default.createElement(Sidebar, { caption: caption, content: content });
+      },
+      table: function table(_ref5) {
+        var node = _ref5.node;
+        var rows = node.rows;
+
+        return React__default.createElement(TableShow, { rows: rows });
+      },
+      media: function media(_ref6) {
+        var node = _ref6.node;
+        var upload_doc = node.upload_doc,
+            poster = node.poster,
+            caption = node.caption,
+            blank = node.blank;
+
+        return React__default.createElement(Media$1, { uploadDoc: upload_doc, poster: poster, blank: blank, client: client, caption: caption });
       }
     }
   };