@mjhls/mjh-framework 1.0.49 → 1.0.51

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, createElement, createContext } from 'react';
+import React__default, { Component, useState, createContext, createElement } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
@@ -17,7 +17,7 @@ import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import { withRouter } from 'next/router';
 import PropTypes from 'prop-types';
-import { Figure, Carousel, Card as Card$1 } from 'react-bootstrap';
+import { Figure, Carousel, Card as Card$1, Table } from 'react-bootstrap';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -674,7 +674,7 @@ var DeckContent = function (_React$Component) {
     }, _this.renderCardImage = function (row, page) {
       if (row.thumbnail && row.thumbnail.asset) {
         return row.thumbnail.asset.url;
-        /*} else if (page === 'videos' && row.youtubeURL) {
+        /*} else if (page === 'videos' && row.youtubeURL) {
           return `https://img.youtube.com/vi/${getYouTubeId(row.youtubeURL)}/0.jpg`*/
       } else {
         return _this.defaultImage;
@@ -3076,7 +3076,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' },
@@ -3139,7 +3139,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      '
     )
   );
 };
@@ -5772,20 +5772,12 @@ AD.propTypes = {
   minInViewPercent: PropTypes.number
 };
 
-var AD300x100 = function AD300x100(_ref) {
-  var networkID = _ref.networkID,
-      adUnit = _ref.adUnit,
-      targeting = _ref.targeting;
-
-  return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, targeting: targeting, className: 'AD300x100', sizes: [[300, 100]] });
-};
-
 var AD300x250 = function AD300x250(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,
       targeting = _ref.targeting;
 
-  return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, targeting: targeting, className: 'AD300x250', sizes: [[300, 250]] });
+  return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, targeting: targeting, className: 'AD300x250', sizes: [[300, 250], [300, 100]] });
 };
 
 var AD300x250x600 = function AD300x250x600(_ref) {
@@ -5798,281 +5790,828 @@ var AD300x250x600 = function AD300x250x600(_ref) {
     adUnit: adUnit,
     className: 'AD300x250',
     targeting: targeting,
-    sizes: [[300, 250], [300, 600]]
+    sizes: [[300, 250], [300, 600], [300, 100]]
   });
 };
 
-var FigureComponent = function FigureComponent(_ref) {
-  var caption = _ref.caption,
-      asset = _ref.asset;
+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;
 
-  if (asset && asset.url) {
-    return React__default.createElement(
-      'div',
-      { style: { textAlign: 'center', marginTop: '1em', marginBottom: '1em' } },
-      React__default.createElement(
-        Figure,
-        null,
-        React__default.createElement(Figure.Image, { alt: asset ? asset.originalFilename : '', src: asset.url }),
-        caption && React__default.createElement(
-          Figure.Caption,
-          null,
-          caption
-        )
-      )
-    );
-  }
-  return null;
-};
+});
 
-var Slideshow = function Slideshow(_ref) {
-  var slides = _ref.slides;
+unwrapExports(parseAssetId_1);
 
-  return React__default.createElement(
-    'div',
-    { style: { marginTop: '1em', marginBottom: '1em' } },
-    React__default.createElement(
-      Carousel,
-      null,
-      slides && slides.map(function (slide) {
-        return React__default.createElement(
-          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 : '' })
-        );
-      })
-    )
-  );
+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 isArray$1 = Array.isArray;
-var keyList = Object.keys;
-var hasProp = Object.prototype.hasOwnProperty;
-
-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)
-      , i
-      , length
-      , key;
-
-    if (arrA && arrB) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (!equal(a[i], b[i])) return false;
-      return true;
+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;
     }
-
-    if (arrA != arrB) return false;
-
-    var dateA = a instanceof Date
-      , dateB = b instanceof Date;
-    if (dateA != dateB) return false;
-    if (dateA && dateB) return a.getTime() == b.getTime();
-
-    var regexpA = a instanceof RegExp
-      , regexpB = b instanceof RegExp;
-    if (regexpA != regexpB) return false;
-    if (regexpA && regexpB) return a.toString() == b.toString();
-
-    var keys = keyList(a);
-    length = keys.length;
-
-    if (length !== keyList(b).length)
-      return false;
-
-    for (i = length; i-- !== 0;)
-      if (!hasProp.call(b, keys[i])) return false;
-
-    for (i = length; i-- !== 0;) {
-      key = keys[i];
-      if (!equal(a[key], b[key])) return false;
+    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;
+}
 
-    return true;
-  }
-
-  return a!==a && b!==b;
-};
-
-var Sister;
-
-/**
-* @link https://github.com/gajus/sister for the canonical source repository
-* @license https://github.com/gajus/sister/blob/master/LICENSE BSD 3-Clause
-*/
-Sister = function () {
-    var sister = {},
-        events = {};
+});
 
-    /**
-     * @name handler
-     * @function
-     * @param {Object} data Event data.
-     */
+unwrapExports(parseSource_1);
 
-    /**
-     * @param {String} name Event name.
-     * @param {handler} handler
-     * @return {listener}
-     */
-    sister.on = function (name, handler) {
-        var listener = {name: name, handler: handler};
-        events[name] = events[name] || [];
-        events[name].unshift(listener);
-        return listener;
+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;
     };
-
-    /**
-     * @param {listener}
-     */
-    sister.off = function (listener) {
-        var index = events[listener.name].indexOf(listener);
-
-        if (index !== -1) {
-            events[listener.name].splice(index, 1);
+    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
     };
+}
 
-    /**
-     * @param {String} name Event name.
-     * @param {Object} data Event data.
-     */
-    sister.trigger = function (name, data) {
-        var listeners = events[name],
-            i;
+});
 
-        if (listeners) {
-            i = listeners.length;
-            while (i--) {
-                listeners[i].handler(data);
-            }
+unwrapExports(urlForImage_1);
+var urlForImage_2 = urlForImage_1.parseSource;
+var urlForImage_3 = urlForImage_1.SPEC_NAME_TO_URL_NAME_MAPPINGS;
+
+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 sister;
+    return __assign.apply(this, arguments);
 };
-
-var sister = Sister;
-
-var loadScript = function load (src, opts, cb) {
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var script = document.createElement('script');
-
-  if (typeof opts === 'function') {
-    cb = opts;
-    opts = {};
-  }
-
-  opts = opts || {};
-  cb = cb || function() {};
-
-  script.type = opts.type || 'text/javascript';
-  script.charset = opts.charset || 'utf8';
-  script.async = 'async' in opts ? !!opts.async : true;
-  script.src = src;
-
-  if (opts.attrs) {
-    setAttributes(script, opts.attrs);
-  }
-
-  if (opts.text) {
-    script.text = '' + opts.text;
-  }
-
-  var onend = 'onload' in script ? stdOnEnd : ieOnEnd;
-  onend(script, cb);
-
-  // some good legacy browsers (firefox) fail the 'in' detection above
-  // so as a fallback we always set onload
-  // old IE will ignore this and new IE will set onload
-  if (!script.onload) {
-    stdOnEnd(script, cb);
-  }
-
-  head.appendChild(script);
+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;
 };
-
-function setAttributes(script, attrs) {
-  for (var attr in attrs) {
-    script.setAttribute(attr, attrs[attr]);
-  }
-}
-
-function stdOnEnd (script, cb) {
-  script.onload = function () {
-    this.onerror = this.onload = null;
-    cb(null, script);
-  };
-  script.onerror = function () {
-    // this.onload = null here is necessary
-    // because even IE9 works not like others
-    this.onerror = this.onload = null;
-    cb(new Error('Failed to load ' + this.src), script);
-  };
+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 ieOnEnd (script, cb) {
-  script.onreadystatechange = function () {
-    if (this.readyState != 'complete' && this.readyState != 'loaded') return
-    this.onreadystatechange = null;
-    cb(null, script); // there is no way to catch loading errors in IE8
-  };
+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 loadYouTubeIframeApi = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
 });
 
+unwrapExports(builder);
 
+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;
 
-var _loadScript2 = _interopRequireDefault(loadScript);
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var imageUrlBuilder = unwrapExports(node);
 
-exports.default = function (emitter) {
-  /**
-   * A promise that is resolved when window.onYouTubeIframeAPIReady is called.
-   * The promise is resolved with a reference to window.YT object.
-   */
-  var iframeAPIReady = new Promise(function (resolve) {
-    if (window.YT && window.YT.Player && window.YT.Player instanceof Function) {
-      resolve(window.YT);
+var FigureComponent = function FigureComponent(_ref) {
+  var caption = _ref.caption,
+      asset = _ref.asset,
+      client = _ref.client;
 
-      return;
-    } else {
-      var protocol = window.location.protocol === 'http:' ? 'http:' : 'https:';
+  var builder = imageUrlBuilder(client);
 
-      (0, _loadScript2.default)(protocol + '//www.youtube.com/iframe_api', function (error) {
-        if (error) {
-          emitter.trigger('error', error);
-        }
-      });
-    }
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
 
-    var previous = window.onYouTubeIframeAPIReady;
+  return React__default.createElement(
+    'div',
+    { style: { textAlign: 'center', marginTop: '1em', marginBottom: '1em' } },
+    React__default.createElement(
+      Figure,
+      null,
+      React__default.createElement(Figure.Image, { src: urlFor(asset).url() }),
+      caption && React__default.createElement(
+        Figure.Caption,
+        null,
+        caption
+      )
+    )
+  );
+};
 
-    // The API will call this function when page has finished downloading
-    // the JavaScript for the player API.
-    window.onYouTubeIframeAPIReady = function () {
-      if (previous) {
-        previous();
-      }
+var Slideshow = function Slideshow(_ref) {
+  var slides = _ref.slides,
+      client = _ref.client;
 
-      resolve(window.YT);
-    };
-  });
+  var builder = imageUrlBuilder(client);
 
-  return iframeAPIReady;
+  var urlFor = function urlFor(source) {
+    return builder.image(source);
+  };
+  return React__default.createElement(
+    'div',
+    { style: { marginTop: '1em', marginBottom: '1em' } },
+    React__default.createElement(
+      Carousel,
+      null,
+      slides && slides.map(function (slide) {
+        return React__default.createElement(
+          Carousel.Item,
+          { key: slide._key },
+          React__default.createElement('img', { src: urlFor(slide.asset).url(), style: { width: '100%' } })
+        );
+      })
+    )
+  );
 };
 
-module.exports = exports['default'];
+var isArray$1 = Array.isArray;
+var keyList = Object.keys;
+var hasProp = Object.prototype.hasOwnProperty;
+
+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)
+      , i
+      , length
+      , key;
+
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (!equal(a[i], b[i])) return false;
+      return true;
+    }
+
+    if (arrA != arrB) return false;
+
+    var dateA = a instanceof Date
+      , dateB = b instanceof Date;
+    if (dateA != dateB) return false;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+
+    var regexpA = a instanceof RegExp
+      , regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return false;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+
+    var keys = keyList(a);
+    length = keys.length;
+
+    if (length !== keyList(b).length)
+      return false;
+
+    for (i = length; i-- !== 0;)
+      if (!hasProp.call(b, keys[i])) return false;
+
+    for (i = length; i-- !== 0;) {
+      key = keys[i];
+      if (!equal(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  return a!==a && b!==b;
+};
+
+var Sister;
+
+/**
+* @link https://github.com/gajus/sister for the canonical source repository
+* @license https://github.com/gajus/sister/blob/master/LICENSE BSD 3-Clause
+*/
+Sister = function () {
+    var sister = {},
+        events = {};
+
+    /**
+     * @name handler
+     * @function
+     * @param {Object} data Event data.
+     */
+
+    /**
+     * @param {String} name Event name.
+     * @param {handler} handler
+     * @return {listener}
+     */
+    sister.on = function (name, handler) {
+        var listener = {name: name, handler: handler};
+        events[name] = events[name] || [];
+        events[name].unshift(listener);
+        return listener;
+    };
+
+    /**
+     * @param {listener}
+     */
+    sister.off = function (listener) {
+        var index = events[listener.name].indexOf(listener);
+
+        if (index !== -1) {
+            events[listener.name].splice(index, 1);
+        }
+    };
+
+    /**
+     * @param {String} name Event name.
+     * @param {Object} data Event data.
+     */
+    sister.trigger = function (name, data) {
+        var listeners = events[name],
+            i;
+
+        if (listeners) {
+            i = listeners.length;
+            while (i--) {
+                listeners[i].handler(data);
+            }
+        }
+    };
+
+    return sister;
+};
+
+var sister = Sister;
+
+var loadScript = function load (src, opts, cb) {
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var script = document.createElement('script');
+
+  if (typeof opts === 'function') {
+    cb = opts;
+    opts = {};
+  }
+
+  opts = opts || {};
+  cb = cb || function() {};
+
+  script.type = opts.type || 'text/javascript';
+  script.charset = opts.charset || 'utf8';
+  script.async = 'async' in opts ? !!opts.async : true;
+  script.src = src;
+
+  if (opts.attrs) {
+    setAttributes(script, opts.attrs);
+  }
+
+  if (opts.text) {
+    script.text = '' + opts.text;
+  }
+
+  var onend = 'onload' in script ? stdOnEnd : ieOnEnd;
+  onend(script, cb);
+
+  // some good legacy browsers (firefox) fail the 'in' detection above
+  // so as a fallback we always set onload
+  // old IE will ignore this and new IE will set onload
+  if (!script.onload) {
+    stdOnEnd(script, cb);
+  }
+
+  head.appendChild(script);
+};
+
+function setAttributes(script, attrs) {
+  for (var attr in attrs) {
+    script.setAttribute(attr, attrs[attr]);
+  }
+}
+
+function stdOnEnd (script, cb) {
+  script.onload = function () {
+    this.onerror = this.onload = null;
+    cb(null, script);
+  };
+  script.onerror = function () {
+    // this.onload = null here is necessary
+    // because even IE9 works not like others
+    this.onerror = this.onload = null;
+    cb(new Error('Failed to load ' + this.src), script);
+  };
+}
+
+function ieOnEnd (script, cb) {
+  script.onreadystatechange = function () {
+    if (this.readyState != 'complete' && this.readyState != 'loaded') return
+    this.onreadystatechange = null;
+    cb(null, script); // there is no way to catch loading errors in IE8
+  };
+}
+
+var loadYouTubeIframeApi = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+
+
+var _loadScript2 = _interopRequireDefault(loadScript);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = function (emitter) {
+  /**
+   * A promise that is resolved when window.onYouTubeIframeAPIReady is called.
+   * The promise is resolved with a reference to window.YT object.
+   */
+  var iframeAPIReady = new Promise(function (resolve) {
+    if (window.YT && window.YT.Player && window.YT.Player instanceof Function) {
+      resolve(window.YT);
+
+      return;
+    } else {
+      var protocol = window.location.protocol === 'http:' ? 'http:' : 'https:';
+
+      (0, _loadScript2.default)(protocol + '//www.youtube.com/iframe_api', function (error) {
+        if (error) {
+          emitter.trigger('error', error);
+        }
+      });
+    }
+
+    var previous = window.onYouTubeIframeAPIReady;
+
+    // The API will call this function when page has finished downloading
+    // the JavaScript for the player API.
+    window.onYouTubeIframeAPIReady = function () {
+      if (previous) {
+        previous();
+      }
+
+      resolve(window.YT);
+    };
+  });
+
+  return iframeAPIReady;
+};
+
+module.exports = exports['default'];
 });
 
 unwrapExports(loadYouTubeIframeApi);
@@ -7455,7 +7994,7 @@ var util = {
 
 var require$$2 = {};
 
-var node = createCommonjsModule(function (module, exports) {
+var node$1 = createCommonjsModule(function (module, exports) {
 /**
  * Module dependencies.
  */
@@ -7705,14 +8244,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) {
 /**
@@ -7723,7 +8262,7 @@ var src = createCommonjsModule(function (module) {
 if (typeof process !== 'undefined' && process.type === 'renderer') {
   module.exports = browser;
 } else {
-  module.exports = node;
+  module.exports = node$1;
 }
 });
 
@@ -8526,579 +9065,42 @@ 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
-    };
+		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$5.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'));
@@ -9118,11 +9120,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');
@@ -9142,10 +9144,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;
@@ -9915,7 +9917,7 @@ var Sidebar = function Sidebar(_ref) {
 
   return React__default.createElement(
     Card$1,
-    { style: { maxWidth: '50%', float: 'right' } },
+    { className: 'sidebar' },
     React__default.createElement(
       Card$1.Body,
       null,
@@ -9929,6 +9931,61 @@ var Sidebar = function Sidebar(_ref) {
   );
 };
 
+var TableShow = function TableShow(_ref) {
+  var rows = _ref.rows;
+
+  return React__default.createElement(
+    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(
+    Figure,
+    null,
+    uploadDoc ? React__default.createElement(
+      'a',
+      { href: urlFor(poster.asset).url(), target: blank ? '_blank' : '_self' },
+      React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url() })
+    ) : React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url() }),
+    caption && React__default.createElement(
+      Figure.Caption,
+      null,
+      caption
+    )
+  );
+};
+
 var getSerializers$1 = function getSerializers(client) {
   return {
     types: {
@@ -9943,13 +10000,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;
@@ -9957,10 +10014,25 @@ 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 });
       }
     }
   };
 };
 
-export { DeckContent, DeckQueue, ThumbnailCard, TaxonomyCard, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x100, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search$1 as Search };
+export { DeckContent, DeckQueue, ThumbnailCard, TaxonomyCard, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search$1 as Search };
 //# sourceMappingURL=index.es.js.map