pageflow 15.1.0.beta4 → 15.1.0.beta5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 166c3182b0589a880c80558131b53ef1ff295d2328465426ed3c092a70fc97cb
-  data.tar.gz: 55f8c842860cc5341fac1f229d74d129b0cfcccbcda396bba1e6939668172d95
+  metadata.gz: cdd026a04cce5cafe6995a71e8b6787e47ce7f6bc3e8e3442707b7eeb8bc4f2b
+  data.tar.gz: 2eb3e985022e4a89e07cea935844d140c8bfde32d24847ca8e6d083d73587947
 SHA512:
-  metadata.gz: 7e27a7162ef41977486a8f2b2ac7d8bf94711e71a44ca57add29b417ce5aadd4b5a971c265e4d151e5638e04564f8402ed30c99dc130540f4bad024646a6d557
-  data.tar.gz: 37b2612f199d9fdfcf6da88de329e4b9ebbad72c50ff11db1ded1b5c714a7157e9b2e9e951712fdd6726dfebf01aadbf2f8c64421aeb04faba52e71e8680ba7d
+  metadata.gz: cfc0cca465ec6f3d6e97db760d9cd32868e99576e6cc6e1750ed9b9ebb0820b3dab7b40151e393b75dbc259f1e9a1821dd79e64599b672e4355aea16a2b1012f
+  data.tar.gz: f08aaef98881ada85734829e70c25b004afb4c7cd8d3cb197d1066d5c38bca7d5f7caab0e0716cd9d8da32cd2fb93c497eca3c18efeb373801a1048e4d739a49

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+### Version 15.1.0.beta5
+
+2020-01-29
+
+[Compare changes](https://github.com/codevise/pageflow/compare/v15.1.0.beta4...v15.1.0.beta5)
+
+Include `pageflow` and `pageflow-scrolled` packages in gem to allow a
+host application setup where Yarn uses packages from the gem directory
+managed by bundler.
+
 ### Version 15.1.0.beta4
 
 2020-01-29
@@ -18,8 +28,20 @@ Forgot to build assets before doing previous release.
 
 ##### Host Application
 
-- Updated active admin to 2.5.0
+- Updated Active Admin to 2.5.0
   ([#1280](https://github.com/codevise/pageflow/pull/1280))
+
+  Starting with Active Admin 2.0, using `unshift` (or any other
+  mutating method) to add load paths no longer work reliably (see
+  [activeadmin/activeadmin#5995](https://github.com/activeadmin/activeadmin/issues/5995).
+  Apply the following change to your host application's
+  `active_admin.rb` initializer:
+
+  ```diff
+  - ActiveAdmin.application.unshift(Pageflow.active_admin_load_path)
+  + ActiveAdmin.application.load_paths +=[Pageflow.active_admin_load_path]
+  ```
+
 - Improve support for Webpack setup in host appplication
   ([#1276](https://github.com/codevise/pageflow/pull/1276),
    [#1279](https://github.com/codevise/pageflow/pull/1279))

data/entry_types/scrolled/package/editor.js

@@ -0,0 +1,315 @@
+import * as globalInterop from 'pageflow/editor';
+import { Entry } from 'pageflow/editor';
+import Backbone from 'backbone';
+import Marionette from 'backbone.marionette';
+import $ from 'jquery';
+import { cssModulesUtils } from 'pageflow/ui';
+import React from 'react';
+
+var Chapter = Backbone.Model.extend({
+  initialize: function initialize() {
+    this.configuration = new Backbone.Model(this.get('configuration'));
+    this.listenTo(this.configuration, 'change', function () {
+      this.trigger('change:configuration', this);
+    });
+  }
+});
+
+var ChaptersCollection = Backbone.Collection.extend({
+  model: Chapter
+});
+
+var Section = Backbone.Model.extend({
+  initialize: function initialize() {
+    this.configuration = new Backbone.Model(this.get('configuration'));
+    this.listenTo(this.configuration, 'change', function () {
+      this.trigger('change:configuration', this);
+    });
+  }
+});
+
+var SectionsCollection = Backbone.Collection.extend({
+  model: Section
+});
+
+var ContentElement = Backbone.Model.extend({
+  initialize: function initialize() {
+    this.configuration = new Backbone.Model(this.get('configuration'));
+    this.listenTo(this.configuration, 'change', function () {
+      this.trigger('change:configuration', this);
+    });
+  }
+});
+
+var ContentElementsCollection = Backbone.Collection.extend({
+  model: ContentElement
+});
+
+var ScrolledEntry = Entry.extend({
+  setupFromEntryTypeSeed: function setupFromEntryTypeSeed(seed) {
+    this.chapters = new ChaptersCollection(seed.collections.chapters);
+    this.sections = new SectionsCollection(seed.collections.sections);
+    this.contentElements = new ContentElementsCollection(seed.collections.contentElements);
+  }
+});
+
+var EntryOutlineView = Marionette.View.extend({
+  className: 'entry_outline',
+  render: function render() {
+    this.$el.text('Outline');
+  }
+});
+
+var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
+var RESET = "".concat(PREFIX, "_RESET");
+var ADD = "".concat(PREFIX, "_ADD");
+var CHANGE = "".concat(PREFIX, "_CHANGE");
+var REMOVE = "".concat(PREFIX, "_REMOVE");
+var SORT = "".concat(PREFIX, "_SORT");
+
+function watchCollection(collection, _ref2) {
+  var name = _ref2.name,
+      dispatch = _ref2.dispatch,
+      attributes = _ref2.attributes,
+      includeConfiguration = _ref2.includeConfiguration,
+      _ref2$keyAttribute = _ref2.keyAttribute,
+      keyAttribute = _ref2$keyAttribute === void 0 ? 'id' : _ref2$keyAttribute;
+  var options = {
+    attributeNames: attributes,
+    includeConfiguration: includeConfiguration
+  };
+  var watchedAttributeNames = getWatchedAttributeNames(attributes);
+  dispatch({
+    type: RESET,
+    payload: {
+      collectionName: name,
+      keyAttribute: keyAttribute,
+      items: collection.map(function (model) {
+        return getAttributes(model, options);
+      })
+    }
+  });
+  collection.on('add change:id', function (model) {
+    if (!model.isNew()) {
+      dispatch({
+        type: ADD,
+        payload: {
+          collectionName: name,
+          keyAttribute: keyAttribute,
+          order: collection.pluck(keyAttribute),
+          attributes: getAttributes(model, options)
+        }
+      });
+    }
+  });
+  collection.on('change', function (model) {
+    if (hasChangedAttributes(model, watchedAttributeNames)) {
+      dispatch({
+        type: CHANGE,
+        payload: {
+          collectionName: name,
+          keyAttribute: keyAttribute,
+          attributes: getAttributes(model, options)
+        }
+      });
+    }
+  });
+
+  if (includeConfiguration) {
+    collection.on('change:configuration', function (model) {
+      return dispatch({
+        type: CHANGE,
+        payload: {
+          collectionName: name,
+          keyAttribute: keyAttribute,
+          attributes: getAttributes(model, options)
+        }
+      });
+    });
+  }
+
+  collection.on('remove', function (model) {
+    return dispatch({
+      type: REMOVE,
+      payload: {
+        collectionName: name,
+        order: collection.pluck(keyAttribute),
+        key: model.attributes[keyAttribute]
+      }
+    });
+  });
+  collection.on('sort', function (model) {
+    return dispatch({
+      type: SORT,
+      payload: {
+        collectionName: name,
+        order: collection.pluck(keyAttribute)
+      }
+    });
+  });
+}
+
+function hasChangedAttributes(model, attributeNames) {
+  return attributeNames.some(function (attributeName) {
+    return model.hasChanged(attributeName);
+  });
+}
+
+function getWatchedAttributeNames(attributeNames) {
+  return attributeNames.map(function (attributeName) {
+    return typeof attributeName == 'object' ? mappedAttributeSource(attributeName) : attributeName;
+  });
+}
+
+function mappedAttributeSource(attributeName) {
+  return attributeName[Object.keys(attributeName)[0]];
+}
+
+function getAttributes(model, _ref3) {
+  var attributeNames = _ref3.attributeNames,
+      includeConfiguration = _ref3.includeConfiguration;
+  var result = attributeNames.reduce(function (result, attributeName) {
+    if (typeof attributeName == 'object') {
+      var key = Object.keys(attributeName)[0];
+      var value = attributeName[key];
+      result[key] = model.get(value);
+    } else {
+      result[attributeName] = model.get(attributeName);
+    }
+
+    return result;
+  }, {});
+
+  if (includeConfiguration) {
+    result.configuration = model.configuration.attributes;
+  }
+  return result;
+}
+
+var Context = React.createContext();
+
+function watchCollections(_ref, _ref2) {
+  var chapters = _ref.chapters,
+      sections = _ref.sections,
+      contentElements = _ref.contentElements,
+      files = _ref.files;
+  var dispatch = _ref2.dispatch;
+  watchCollection(chapters, {
+    name: 'chapters',
+    attributes: ['id', 'permaId'],
+    includeConfiguration: true,
+    dispatch: dispatch
+  });
+  watchCollection(sections, {
+    name: 'sections',
+    attributes: ['id', 'permaId', 'chapterId'],
+    includeConfiguration: true,
+    dispatch: dispatch
+  });
+  watchCollection(contentElements, {
+    name: 'contentElements',
+    attributes: ['id', 'permaId', 'typeName', 'sectionId'],
+    keyAttribute: 'permaId',
+    includeConfiguration: true,
+    dispatch: dispatch
+  });
+  Object.keys(files).forEach(function (collectionName) {
+    watchCollection(files[collectionName], {
+      name: camelize(collectionName),
+      attributes: ['id', {
+        permaId: 'perma_id'
+      }, 'width', 'height', 'basename'],
+      keyAttribute: 'permaId',
+      includeConfiguration: true,
+      dispatch: dispatch
+    });
+  });
+}
+
+function camelize(snakeCase) {
+  return snakeCase.replace(/_[a-z]/g, function (match) {
+    return match[1].toUpperCase();
+  });
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = ".EntryPreviewView-module_root__1Nb6e {\n  height: 100%;\n}\n\n.EntryPreviewView-module_iframe__1leJC {\n  border: none;\n  width: 100%;\n  height: 100%;\n}\n";
+var styles = {"root":"EntryPreviewView-module_root__1Nb6e","iframe":"EntryPreviewView-module_iframe__1leJC"};
+styleInject(css);
+
+var EntryPreviewView = Marionette.ItemView.extend({
+  template: function template() {
+    return "\n     <iframe class=\"".concat(styles.iframe, "\" />\n  ");
+  },
+  className: styles.root,
+  ui: cssModulesUtils.ui(styles, 'iframe'),
+  initialize: function initialize() {
+    this.messageListener = this.onMessage.bind(this);
+  },
+  onShow: function onShow() {
+    window.addEventListener('message', this.messageListener);
+    inject(this.ui.iframe[0], unescape($('[data-template="iframe_seed"]').html()));
+  },
+  onClose: function onClose() {
+    window.removeEventListener('message', this.messageListener);
+  },
+  onMessage: function onMessage(message) {
+    var _this = this;
+
+    if (window.location.href.indexOf(message.origin) === 0 && message.data.type === 'READY') {
+      watchCollections(this.model, {
+        dispatch: function dispatch(action) {
+          return _this.ui.iframe[0].contentWindow.postMessage({
+            type: 'ACTION',
+            payload: action
+          }, window.location.origin);
+        }
+      });
+    }
+  }
+});
+
+function inject(iframe, html) {
+  var doc = iframe.document || iframe.contentDocument || iframe.contentWindow.document;
+  doc.open();
+  doc.writeln(html);
+  doc.close();
+}
+
+function unescape(text) {
+  return text.replace(/<\\\//g, '</');
+}
+
+/*global pageflow*/
+Object.assign(pageflow, globalInterop);
+pageflow.editor.registerEntryType('scrolled', {
+  entryModel: ScrolledEntry,
+  previewView: EntryPreviewView,
+  outlineView: EntryOutlineView
+});

data/entry_types/scrolled/package/frontend.js

@@ -0,0 +1,2892 @@
+import React, { useRef, useLayoutEffect, useEffect, useReducer, useMemo, useContext, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import ReactTooltip from 'react-tooltip';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
+  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"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
+				}
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if ( module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+// from https://github.com/n8tb1t/use-scroll-position
+var isBrowser = typeof window !== "undefined";
+
+function getScrollPosition(_ref) {
+  var element = _ref.element,
+      useWindow = _ref.useWindow;
+  if (!isBrowser) return {
+    x: 0,
+    y: 0
+  };
+  var target = element ? element.current : document.body;
+  var position = target.getBoundingClientRect();
+  return useWindow ? {
+    x: window.scrollX,
+    y: window.scrollY
+  } : {
+    x: position.left,
+    y: position.top
+  };
+}
+
+function useScrollPosition(effect, deps, element, useWindow, wait) {
+  var position = useRef(getScrollPosition({
+    useWindow: useWindow
+  }));
+  var throttleTimeout = null;
+
+  var callBack = function callBack() {
+    var currPos = getScrollPosition({
+      element: element,
+      useWindow: useWindow
+    });
+    effect({
+      prevPos: position.current,
+      currPos: currPos
+    });
+    position.current = currPos;
+    throttleTimeout = null;
+  };
+
+  useLayoutEffect(function () {
+    if (!isBrowser) {
+      return;
+    }
+
+    var handleScroll = function handleScroll() {
+      if (wait) {
+        if (throttleTimeout === null) {
+          // Todo: store in useRef hook?
+          throttleTimeout = setTimeout(callBack, wait);
+        }
+      } else {
+        callBack();
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, deps);
+}
+useScrollPosition.defaultProps = {
+  deps: [],
+  element: false,
+  useWindow: false,
+  wait: null
+};
+
+function useNativeScrollPrevention(ref) {
+  useEffect(function () {
+    function preventNativeScroll(e) {
+      e.preventDefault();
+    }
+
+    var current = ref.current;
+
+    if (current) {
+      current.addEventListener('touchmove', preventNativeScroll);
+      current.addEventListener('mousewheel', preventNativeScroll);
+    }
+
+    return function () {
+      if (current) {
+        current.removeEventListener('touchmove', preventNativeScroll);
+        current.removeEventListener('mousewheel', preventNativeScroll);
+      }
+    };
+  }, [ref]);
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = ".ChapterLink-module_chapterLink__v5VRl {\n  line-height: 3rem;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n  position: relative;\n  display: block;\n  font-family: inherit;\n  font-weight: 700;\n  font-size: 1rem;\n}\n\n.ChapterLink-module_chapterLink__v5VRl:hover,\n.ChapterLink-module_chapterLinkActive__jl4h5 {\n  color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .ChapterLink-module_chapterLink__v5VRl,\n  .ChapterLink-module_chapterLink__v5VRl:hover {\n    padding: 10px 0px;\n  }\n}";
+var styles = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5"};
+styleInject(css);
+
+var css$1 = ".navigationTooltip {\n  opacity: 1 !important;\n  border-bottom: 3px solid #e10028;\n  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\n  width: 200px;\n}\n\n.AppHeaderTooltip-module_tooltipHeadline__pul87 {\n  margin: 5px 0 0px;\n  color: #e10028;\n}\n\n@media (max-width: 780px) {\n  .navigationTooltip {\n    display: none !important;\n  }\n}\n";
+var styles$1 = {"tooltipHeadline":"AppHeaderTooltip-module_tooltipHeadline__pul87"};
+styleInject(css$1);
+
+function AppHeaderTooltip(props) {
+  return React.createElement(ReactTooltip, {
+    id: props.chapterLinkId,
+    type: "light",
+    effect: "solid",
+    className: "navigationTooltip",
+    overridePosition: function overridePosition(_ref) {
+      var left = _ref.left,
+          top = _ref.top;
+      top = 48;
+      return {
+        top: top,
+        left: left
+      };
+    }
+  }, React.createElement("div", null, React.createElement("h3", {
+    className: styles$1.tooltipHeadline
+  }, "Kapitel ", props.chapterIndex), React.createElement("p", null, props.summary)));
+}
+
+function ChapterLink(props) {
+  return React.createElement("div", null, React.createElement("a", {
+    className: classnames(styles.chapterLink, _defineProperty({}, styles.chapterLinkActive, props.active)),
+    href: "#chapter-".concat(props.permaId),
+    onClick: function onClick() {
+      return props.handleMenuClick(props.chapterLinkId);
+    },
+    "data-tip": true,
+    "data-for": props.chapterLinkId
+  }, props.title), React.createElement(AppHeaderTooltip, Object.assign({
+    chapterIndex: props.chapterIndex,
+    chapterLinkId: props.chapterLinkId
+  }, props)));
+}
+
+var css$2 = "/*!\n * Hamburgers\n * @description Tasty CSS-animated hamburgers\n * @author Jonathan Suh @jonsuh\n * @site https://jonsuh.com/hamburgers\n * @link https://github.com/jonsuh/hamburgers\n */\n.hamburgerIcons-module_hamburger__3XwKv {\n  display: inline-block;\n  cursor: pointer;\n  transition-property: opacity, filter;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n}\n\n.hamburgerIcons-module_hamburger__3XwKv.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj,\n.hamburgerIcons-module_hamburger__3XwKv.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::before,\n.hamburgerIcons-module_hamburger__3XwKv.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  background-color: #e10028;\n}\n\n.hamburgerIcons-module_hamburger-box__38Ldp {\n  width: 40px;\n  height: 24px;\n  display: inline-block;\n  position: relative;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj {\n  display: block;\n  top: 50%;\n  margin-top: -2px;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj, .hamburgerIcons-module_hamburger-inner__2Colj::before, .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  width: 30px;\n  height: 4px;\n  background-color: rgb(0, 55, 90);\n  border-radius: 4px;\n  position: absolute;\n  transition-property: transform;\n  transition-duration: 0.15s;\n  transition-timing-function: ease;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj::before, .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  content: \"\";\n  display: block;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj::before {\n  top: -10px;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj::after {\n  bottom: -10px;\n}\n\n/*\n * Collapse\n */\n.hamburgerIcons-module_hamburger--collapse__3Dqee .hamburgerIcons-module_hamburger-inner__2Colj {\n  top: auto;\n  bottom: 0;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  top: -20px;\n  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee .hamburgerIcons-module_hamburger-inner__2Colj::before {\n  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj {\n  transform: translate3d(0, -10px, 0) rotate(-45deg);\n  transition-delay: 0.22s;\n  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  top: 0;\n  opacity: 0;\n  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::before {\n  top: 0;\n  transform: rotate(-90deg);\n  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n";
+var hamburgerIcons = {"hamburger":"hamburgerIcons-module_hamburger__3XwKv","is-active":"hamburgerIcons-module_is-active__3OTNl","hamburger-inner":"hamburgerIcons-module_hamburger-inner__2Colj","hamburger-box":"hamburgerIcons-module_hamburger-box__38Ldp","hamburger--collapse":"hamburgerIcons-module_hamburger--collapse__3Dqee"};
+styleInject(css$2);
+
+var css$3 = "header svg {\n  fill: #c2c2c2;\n  cursor: pointer;\n}\n\nheader svg:hover {\n  fill: rgb(0, 55, 90);;\n}\n\n.AppHeader-module_navigationBar__2EFHw {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  position: sticky;\n  top: -50px;\n  transition: top .15s;\n  z-index: 10000;\n  width: 100%;\n  text-align: center;\n}\n\n.AppHeader-module_navigationBarExpanded__18nbf {\n  top: 0;\n}\n\n.AppHeader-module_navigationBarContentWrapper__2Sf8y {\n  position: relative;\n  z-index: 2;\n  background-color: #fff;\n  height: 50px;\n}\n\n.AppHeader-module_menuIcon__5JKuj {\n  position: absolute;\n}\n\n.AppHeader-module_wdrLogo__3XGNI {\n  position: absolute;\n  top: 12px;\n  left: 15px;\n  width: 80px;\n}\n\n.AppHeader-module_burgerMenuIcon__3isKe {\n  display: none;\n  top: 12px;\n  left: 12px;\n  outline: none;\n}\n\n.AppHeader-module_infoIcon__XMTFH {\n  top: 12px;\n  right: 55px;\n  width: 26px;\n}\n\n.AppHeader-module_shareIcon__2lPNl {\n  top: 5px;\n  right: 10px;\n  width: 40px;\n}\n\n.AppHeader-module_chapterList__2lMMD {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.AppHeader-module_chapterListItem__28zrc {\n  position: relative;\n  display: inline-block;\n  padding: 0 15px;\n  border-right: 1px solid #e9e9e9;\n}\n\n.AppHeader-module_chapterListItem__28zrc:last-of-type {\n  border-right: none;\n}\n\n.AppHeader-module_progressBar__17IVu {\n  background-color: rgba(194,194,194,0.8);\n  height: 8px;\n  width: 100%;\n}\n\n.AppHeader-module_progressIndicator__3SlYz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0vw;\n  height: 100%;\n  background-color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .AppHeader-module_burgerMenuIcon__3isKe {\n    display: block;\n  }\n\n  .AppHeader-module_wdrLogo__3XGNI {\n    position: inherit;\n  }\n\n  .AppHeader-module_navigationChapters__1dzyV {\n    touch-action: none;\n    display: block;\n    position: fixed;\n    top: 60px;\n    left: 0px;\n    background: rgba(255, 255, 255, 0.95);\n    width: 100vw;\n    height: 100vh;\n  }\n\n  .AppHeader-module_navigationChaptersHidden__8AEPA {\n    display: none;\n  }\n\n  .AppHeader-module_chapterList__2lMMD {\n    margin-top: 50px;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc {\n    display: list-item;\n    width: 80vw;\n    padding: 25px 10vw;\n    border-right: none;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc::before,\n  .AppHeader-module_chapterListItem__28zrc::after {\n    display: table;\n    content: \" \";\n    border-top: 1px solid rgb(100, 100, 100);\n    width: 30%;\n    margin: 0 35%;\n    transition: width .15s, margin .15s;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc:hover::before,\n  .AppHeader-module_chapterListItem__28zrc:hover::after {\n    border-top: 1px solid rgb(0, 55, 90);\n    width: 80%;\n    margin: 0 10%;\n  }\n\n  .AppHeader-module_chapterLink__1Q-ee,\n  .AppHeader-module_chapterLink__1Q-ee:hover {\n    padding: 10px 0px;\n  }\n\n  .AppHeader-module_progressBar__17IVu {\n    height: 10px;\n  }\n}\n";
+var styles$2 = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","wdrLogo":"AppHeader-module_wdrLogo__3XGNI","burgerMenuIcon":"AppHeader-module_burgerMenuIcon__3isKe","infoIcon":"AppHeader-module_infoIcon__XMTFH","shareIcon":"AppHeader-module_shareIcon__2lPNl","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA","chapterLink":"AppHeader-module_chapterLink__1Q-ee"};
+styleInject(css$3);
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+var WDRlogo = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends({
+    viewBox: "-0.445 -0.445 51.921 15.721"
+  }, props), React.createElement("path", {
+    d: "M31.189 14.83h3.731v-4.772h.285c.425 0 1.496-.023 2.079.919l2.292 3.854h4.015l-2.088-3.509c-.69-1.176-1.258-1.806-1.704-2.13v-.039c1.259-.446 2.636-1.522 2.636-3.715 0-2.716-1.946-4.116-5.394-4.116H31.19v4.689h-.038c-.708-2.829-3.095-4.689-7.453-4.689h-8.253l-1.257 5.516a42.42 42.42 0 00-.488 2.578h-.04s-.284-1.603-.547-2.74l-1.077-5.354h-4.53L6.43 6.676c-.264 1.137-.547 2.74-.547 2.74H5.84s-.222-1.442-.486-2.578L4.097 1.322H0L3.61 14.83h4.121L9.78 6.169h.041l2.048 8.662h4.056L18.93 3.614h.04v11.217h4.606c4.42 0 6.86-2.028 7.577-4.927h.036v4.927zm-7.309-3.062h-1.135V4.384h1.034c2.475 0 3.59 1.095 3.59 3.612 0 2.473-1.115 3.772-3.489 3.772m13.08-4.565h-2.04V4.182h1.918c1.278 0 1.806.506 1.806 1.52 0 .934-.548 1.501-1.684 1.501m12.003-2.317V1.404L45.48 2.66v.865l1.153-.418v2.616l2.33-.838zM47.573 0a3.469 3.469 0 013.459 3.478 3.468 3.468 0 01-3.46 3.477 3.468 3.468 0 01-3.458-3.478A3.469 3.469 0 0147.573 0m0 .51a2.96 2.96 0 00-2.951 2.967 2.96 2.96 0 002.95 2.968 2.96 2.96 0 002.953-2.967A2.96 2.96 0 0047.573.51",
+    fill: "#00375a"
+  }));
+});
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+var ShareIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 96 96"
+  }, props), React.createElement("path", {
+    d: "M67.5 18c-5.1 0-9.3 4.2-9.3 9.3 0 .5.1 1.1.2 1.6l-23 12.9c-1.7-1.8-4.1-3-6.8-3-5.1 0-9.3 4.1-9.3 9.3 0 5.1 4.1 9.3 9.3 9.3 2.7 0 5.2-1.2 6.9-3.1l22.8 13.4c0 .4-.1.7-.1 1.1 0 5.1 4.1 9.3 9.3 9.3 5.1 0 9.3-4.1 9.3-9.3 0-5.1-4.1-9.3-9.3-9.3-2.8 0-5.4 1.3-7.1 3.3L37.7 49.4c.1-.4.1-.9.1-1.3 0-.5 0-1-.1-1.5l23.1-13c1.7 1.8 4.1 3 6.8 3 5.1 0 9.3-4.1 9.3-9.3-.1-5.1-4.3-9.3-9.4-9.3z"
+  }));
+});
+
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$2.apply(this, arguments);
+}
+var InfoIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 330 330"
+  }, props), React.createElement("path", {
+    d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
+  }), React.createElement("path", {
+    d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
+  }));
+});
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
+var RESET = "".concat(PREFIX, "_RESET");
+var ADD = "".concat(PREFIX, "_ADD");
+var CHANGE = "".concat(PREFIX, "_CHANGE");
+var REMOVE = "".concat(PREFIX, "_REMOVE");
+var SORT = "".concat(PREFIX, "_SORT");
+function useCollections() {
+  var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      keyAttribute = _ref.keyAttribute;
+
+  return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
+    result[key] = init(seed[key], keyAttribute);
+    return result;
+  }, {}));
+}
+
+function reducer(state, action) {
+  var collectionName = action.payload.collectionName;
+  var keyAttribute = action.payload.keyAttribute;
+
+  switch (action.type) {
+    case RESET:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
+
+    case ADD:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
+      }));
+
+    case CHANGE:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: state[collectionName].order,
+        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
+      }));
+
+    case REMOVE:
+      var clonedItems = _objectSpread({}, state[collectionName].items);
+
+      delete clonedItems[action.payload.key];
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: clonedItems
+      }));
+
+    case SORT:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: state[collectionName].items
+      }));
+
+    default:
+      return state;
+  }
+}
+
+function init(items) {
+  var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  return {
+    order: items.map(function (item) {
+      return item[keyAttribute];
+    }),
+    items: items.reduce(function (result, item) {
+      result[item[keyAttribute]] = item;
+      return result;
+    }, {})
+  };
+}
+
+function getItems(state, collectionName) {
+  if (state[collectionName]) {
+    var items = state[collectionName].items;
+    return state[collectionName].order.map(function (key) {
+      return items[key];
+    });
+  } else {
+    return [];
+  }
+}
+function getItem(state, collectionName, key) {
+  if (state[collectionName]) {
+    return state[collectionName].items[key];
+  }
+}
+
+var Context = React.createContext();
+function EntryStateProvider(_ref) {
+  var seed = _ref.seed,
+      children = _ref.children;
+
+  var _useCollections = useCollections(seed.collections, {
+    keyAttribute: 'permaId'
+  }),
+      _useCollections2 = _slicedToArray(_useCollections, 2),
+      collections = _useCollections2[0],
+      dispatch = _useCollections2[1];
+
+  var value = useMemo(function () {
+    return {
+      entryState: {
+        collections: collections,
+        config: seed.config
+      },
+      dispatch: dispatch
+    };
+  }, [collections, dispatch, seed]);
+  return React.createElement(Context.Provider, {
+    value: value
+  }, children);
+}
+function useEntryState() {
+  var value = useContext(Context);
+  return value.entryState;
+}
+function useEntryStateDispatch() {
+  var value = useContext(Context);
+  return value.dispatch;
+}
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Returns a nested data structure representing the chapters, sections
+ * and content elements of the entry.
+ *
+ * @example
+ *
+ * const structure = useEntryStructure();
+ * structure // =>
+ *   [
+ *     {
+ *       permaId: 5,
+ *       title: 'Chapter 1',
+ *       summary: 'An introductory chapter',
+ *       sections: [
+ *         {
+ *           permaId: 101,
+ *           sectionIndex: 0,
+ *           transition: 'scroll',
+ *
+ *           // references to adjacent section objects
+ *           previousSection: { ... },
+ *           nextSection: { ... },
+ *
+ *           foreground: [
+ *             {
+ *               type: 'heading',
+ *               props: {
+ *                 children: 'Heading'
+ *               }
+ *             },
+ *             {
+ *               type: 'textBlock',
+ *               props: {
+ *                 children: 'Some text'
+ *               }
+ *             }
+ *           ]
+ *         }
+ *       ],
+ *     }
+ *   ]
+ */
+
+function useEntryStructure() {
+  var entryState = useEntryState();
+  return useMemo(function () {
+    var sections = [];
+    var chapters = getItems(entryState.collections, 'chapters').map(function (chapter) {
+      return _objectSpread$1({
+        permaId: chapter.permaId
+      }, chapter.configuration, {
+        sections: getItems(entryState.collections, 'sections').filter(function (item) {
+          return item.chapterId === chapter.id;
+        }).map(function (section) {
+          var result = sectionStructure(entryState.collections, section);
+          sections.push(result);
+          return result;
+        })
+      });
+    });
+    sections.forEach(function (section, index) {
+      section.sectionIndex = index;
+      section.previousSection = sections[index - 1];
+      section.nextSection = sections[index + 1];
+    });
+    return chapters;
+  }, [entryState]);
+}
+
+function sectionStructure(collections, section) {
+  return section && _objectSpread$1({
+    permaId: section.permaId
+  }, section.configuration, {
+    foreground: getItems(collections, 'contentElements').filter(function (item) {
+      return item.sectionId === section.id;
+    }).map(function (item) {
+      return {
+        type: item.typeName,
+        position: item.configuration.position,
+        props: item.configuration
+      };
+    })
+  });
+}
+
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function expandUrls(collectionName, file, urlTemplates) {
+  if (!file) {
+    return null;
+  }
+
+  if (!urlTemplates[collectionName]) {
+    throw new Error("No file url templates found for ".concat(collectionName));
+  }
+
+  var variants = file.variants || Object.keys(urlTemplates[collectionName]);
+  var urls = variants.reduce(function (result, variant) {
+    var url = getFileUrl(collectionName, file, variant, urlTemplates);
+
+    if (url) {
+      result[variant] = url;
+    }
+
+    return result;
+  }, {});
+  return _objectSpread$2({
+    urls: urls
+  }, file);
+}
+
+function getFileUrl(collectionName, file, quality, urlTemplates) {
+  var templates = urlTemplates[collectionName];
+  var template = templates[quality];
+
+  if (template) {
+    return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
+  }
+}
+
+function idPartition(id) {
+  return partition(pad(id, 9));
+}
+
+function partition(string, separator) {
+  return string.replace(/./g, function (c, i, a) {
+    return i && (a.length - i) % 3 === 0 ? '/' + c : c;
+  });
+}
+
+function pad(string, size) {
+  return (Array(size).fill(0).join('') + string).slice(-size);
+}
+
+/**
+ * Look up a file by its collection and perma id.
+ *
+ * @param {Object} options
+ * @param {String} options.collectionName - Collection name of file type to look for (in camel case).
+ * @param {String} options.permaId - Perma id of file look up
+ *
+ * @example
+ * const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
+ * imageFile // =>
+ *   {
+ *     id: 102,
+ *     permaId: 5,
+ *     width: 1000,
+ *     height: 500,
+ *     urls: {
+ *       large: 'https://...'
+ *     },
+ *   }
+ */
+
+function useFile(_ref) {
+  var collectionName = _ref.collectionName,
+      permaId = _ref.permaId;
+  var entryState = useEntryState();
+  return expandUrls(collectionName, getItem(entryState.collections, collectionName, permaId), entryState.config.fileUrlTemplates);
+}
+
+function AppHeader(props) {
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      navExpanded = _useState2[0],
+      setNavExpanded = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mobileNavHidden = _useState4[0],
+      setMobileNavHidden = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      readingProgress = _useState6[0],
+      setReadingProgress = _useState6[1];
+
+  var _useState7 = useState('chapterLink1'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      activeChapterLink = _useState8[0],
+      setActiveChapterLink = _useState8[1];
+
+  var entryStructure = useEntryStructure();
+  var ref = useRef();
+  useNativeScrollPrevention(ref);
+  var chapters = entryStructure.map(function (chapter) {
+    return {
+      permaId: chapter.permaId,
+      title: chapter.title,
+      summary: chapter.summary
+    };
+  });
+  useScrollPosition(function (_ref) {
+    var prevPos = _ref.prevPos,
+        currPos = _ref.currPos;
+    var expand = currPos.y > prevPos.y;
+    if (expand !== navExpanded) setNavExpanded(expand);
+  }, [navExpanded]);
+  useScrollPosition(function (_ref2) {
+    var prevPos = _ref2.prevPos,
+        currPos = _ref2.currPos;
+    var current = currPos.y * -1; // Todo: Memoize and update on window resize
+
+    var total = document.body.clientHeight - window.innerHeight;
+    var progress = Math.abs(current / total) * 100;
+    setReadingProgress(progress);
+  }, [readingProgress], null, false, 1);
+
+  function handleProgressBarMouseEnter() {
+    setNavExpanded(true);
+  }
+
+  function handleBurgerMenuClick() {
+    setMobileNavHidden(!mobileNavHidden);
+  }
+
+  function handleMenuClick(chapterLinkId) {
+    setActiveChapterLink(chapterLinkId);
+    setMobileNavHidden(true);
+  }
+
+  function renderMenuLinks(chapters) {
+    return chapters.map(function (chapter, index) {
+      var chapterIndex = index + 1;
+      var chapterLinkId = "chapterLink".concat(chapterIndex);
+      return React.createElement("li", {
+        key: index,
+        className: styles$2.chapterListItem
+      }, React.createElement(ChapterLink, Object.assign({}, chapter, {
+        chapterIndex: chapterIndex,
+        chapterLinkId: chapterLinkId,
+        active: activeChapterLink === chapterLinkId,
+        handleMenuClick: handleMenuClick
+      })));
+    });
+  }
+  return React.createElement("header", {
+    className: classnames(styles$2.navigationBar, _defineProperty({}, styles$2.navigationBarExpanded, navExpanded))
+  }, React.createElement("div", {
+    className: styles$2.navigationBarContentWrapper
+  }, React.createElement("button", {
+    className: classnames(styles$2.menuIcon, styles$2.burgerMenuIcon, hamburgerIcons.hamburger, hamburgerIcons['hamburger--collapse'], _defineProperty({}, hamburgerIcons['is-active'], !mobileNavHidden)),
+    type: "button",
+    onClick: handleBurgerMenuClick
+  }, React.createElement("span", {
+    className: hamburgerIcons['hamburger-box']
+  }, React.createElement("span", {
+    className: hamburgerIcons['hamburger-inner']
+  }))), React.createElement(WDRlogo, {
+    className: classnames(styles$2.wdrLogo)
+  }), React.createElement("nav", {
+    className: classnames(styles$2.navigationChapters, _defineProperty({}, styles$2.navigationChaptersHidden, mobileNavHidden)),
+    role: "navigation",
+    ref: ref
+  }, React.createElement("ul", {
+    className: styles$2.chapterList
+  }, renderMenuLinks(chapters))), React.createElement("a", {
+    className: classnames(styles$2.menuIcon, styles$2.infoIcon)
+  }, React.createElement(InfoIcon, null)), React.createElement("a", {
+    className: classnames(styles$2.menuIcon, styles$2.shareIcon)
+  }, React.createElement(ShareIcon, null))), React.createElement("div", {
+    className: styles$2.progressBar,
+    onMouseEnter: handleProgressBarMouseEnter
+  }, React.createElement("span", {
+    className: styles$2.progressIndicator,
+    style: {
+      width: readingProgress + '%'
+    }
+  })));
+}
+
+function useOnScreen(ref) {
+  var rootMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0px';
+  var cb = arguments.length > 2 ? arguments[2] : undefined;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIntersecting = _useState2[0],
+      setIntersecting = _useState2[1];
+
+  useEffect(function () {
+    var current = ref.current;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      setIntersecting(entry.isIntersecting);
+
+      if (entry.isIntersecting && cb) {
+        cb();
+      }
+    }, {
+      rootMargin: rootMargin
+    });
+
+    if (ref.current) {
+      observer.observe(current);
+    }
+
+    return function () {
+      observer.unobserve(current);
+    };
+  }, [ref, rootMargin, cb]);
+  return isIntersecting;
+}
+
+var css$4 = ".Fullscreen-module_root__1N3CI {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  overflow: hidden;\n}\n";
+var styles$3 = {"root":"Fullscreen-module_root__1N3CI"};
+styleInject(css$4);
+
+var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
+  return React.createElement("div", {
+    ref: ref,
+    className: styles$3.root
+  }, props.children);
+});
+
+var css$5 = ".Image-module_root__1ef3j {\n  background-size: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n@media (orientation: landscape) {\n  .Image-module_portrait__1mRha {\n    display: none;\n  }\n}\n\n@media (orientation: portrait) {\n  .Image-module_portrait__1mRha {\n    display: block;\n  }\n}";
+var styles$4 = {"root":"Image-module_root__1ef3j","portrait":"Image-module_portrait__1mRha"};
+styleInject(css$5);
+
+/**
+ * Render an image file.
+ *
+ * @param {Object} props
+ * @param {number} props.id - Perma id of the image file.
+ */
+
+function Image(props) {
+  var image = useFile({
+    collectionName: 'imageFiles',
+    permaId: props.id
+  });
+
+  if (image) {
+    var focusX = typeof image.configuration.focusX === 'undefined' ? 50 : image.configuration.focusX;
+    var focusY = typeof image.configuration.focusY === 'undefined' ? 50 : image.configuration.focusY;
+    return React.createElement("div", {
+      className: classnames(styles$4.root, _defineProperty({}, styles$4.portrait, props.mobile)),
+      role: "img",
+      style: {
+        backgroundImage: "url(".concat(image.urls.large, ")"),
+        backgroundPosition: "".concat(focusX, "% ").concat(focusY, "%")
+      }
+    });
+  }
+
+  return null;
+}
+
+var ScrollToSectionContext = React.createContext();
+
+var MutedContext = React.createContext();
+
+var css$6 = ".Video-module_root__30u0y {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.Video-module_video__3FJvj {\n  width: 100%;\n  height: 100%;\n  transition: transform ease 0.2s;\n  outline: none;\n}\n\n.Video-module_video__3FJvj:focus {\n  outline: none;\n}\n\n.Video-module_backdrop__1R7f4 {\n  object-fit: cover;\n}\n";
+var styles$5 = {"root":"Video-module_root__30u0y","video":"Video-module_video__3FJvj","backdrop":"Video-module_backdrop__1R7f4"};
+styleInject(css$6);
+
+function Video(props) {
+  var awsBucket = '//s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/presentation-videos/';
+  var videoBoatSunset = awsBucket + 'floodplain-clean.mp4';
+  var poster_videoBoatSunset = awsBucket + 'posterframes/poster_katerchen.jpeg';
+  var videoBoatDark = awsBucket + 'floodplain-dirty.mp4';
+  var poster_videoBoatDark = awsBucket + 'posterframes/poster_katerchen.jpeg';
+  var videoKaterchen = awsBucket + 'katerchen.mp4';
+  var poster_videoKaterchen = awsBucket + 'posterframes/poster_katerchen.jpeg';
+  var videoGarzweilerLoop1 = awsBucket + 'braunkohle_loop1.mp4';
+  var poster_videoGarzweilerLoop1 = awsBucket + 'posterframes/poster_braunkohle_loop1.jpeg';
+  var videoGarzweilerLoop2 = awsBucket + 'braunkohle_loop2.mp4';
+  var poster_videoGarzweilerLoop2 = awsBucket + 'posterframes/poster_braunkohle_loop2.jpeg';
+  var videoGarzweilerDrohne = awsBucket + 'braunkohle_drone.mp4';
+  var poster_videoGarzweilerDrohne = awsBucket + 'posterframes/poster_braunkohle_drone.jpeg';
+  var videoInselInterviewToni = awsBucket + 'pageflow_insel_interview_toni02.mp4';
+  var poster_videoInselInterviewToni = awsBucket + 'posterframes/poster_pageflow_insel_interview_toni02.jpg';
+  var videoUrl = {
+    videoBoatSunset: videoBoatSunset,
+    videoBoatDark: videoBoatDark,
+    videoKaterchen: videoKaterchen,
+    videoGarzweilerLoop1: videoGarzweilerLoop1,
+    videoGarzweilerLoop2: videoGarzweilerLoop2,
+    videoGarzweilerDrohne: videoGarzweilerDrohne,
+    videoInselInterviewToni: videoInselInterviewToni
+  }[props.id];
+  var posterUrl = {
+    poster_videoBoatSunset: poster_videoBoatSunset,
+    poster_videoBoatDark: poster_videoBoatDark,
+    poster_videoKaterchen: poster_videoKaterchen,
+    poster_videoGarzweilerLoop1: poster_videoGarzweilerLoop1,
+    poster_videoGarzweilerLoop2: poster_videoGarzweilerLoop2,
+    poster_videoGarzweilerDrohne: poster_videoGarzweilerDrohne,
+    poster_videoInselInterviewToni: poster_videoInselInterviewToni
+  }['poster_' + props.id];
+  var videoRef = useRef();
+  var state = props.state;
+  useEffect(function () {
+    var video = videoRef.current;
+
+    if (video) {
+      if (state === 'active') {
+        if (video.readyState > 0) {
+          video.play();
+        } else {
+          video.addEventListener('loadedmetadata', play);
+          return function () {
+            return video.removeEventListener('loadedmetadata', play);
+          };
+        }
+      } else {
+        video.pause();
+      }
+    }
+
+    function play() {
+      video.play();
+    }
+  }, [state, videoRef]);
+  return React.createElement("div", {
+    className: styles$5.root
+  }, React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
+    return React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
+      return React.createElement("video", {
+        src: videoUrl,
+        ref: videoRef,
+        className: classnames(styles$5.video, _defineProperty({}, styles$5.backdrop, !props.interactive)),
+        controls: props.controls,
+        playsInline: true,
+        onEnded: function onEnded() {
+          return props.nextSectionOnEnd && scrollToSection('next');
+        },
+        loop: !props.interactive,
+        muted: mutedSettings.muted,
+        poster: posterUrl
+      });
+    });
+  }));
+}
+Video.defaultProps = {
+  interactive: false,
+  controls: false
+};
+
+var css$7 = ".FillColor-module_FillColor__S1uEG {\n  width: 100%;\n  height: 100vh;\n}\n";
+var styles$6 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
+styleInject(css$7);
+
+function FillColor(props) {
+  return React.createElement("div", {
+    className: styles$6.FillColor,
+    style: {
+      backgroundColor: props.color
+    }
+  });
+}
+
+var css$8 = ".MotifArea-module_root__1_ACd {\n  position: absolute;\n  background: hsla(0, 0%, 100%, 0.2);\n  z-index: 2;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.MotifArea-module_active__1q4z2 {\n  opacity: 1;\n}\n\n.MotifArea-module_corner__3hB5t {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n}\n\n.MotifArea-module_topLeft__3vHHi {\n  border-top: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_topRight__2gNmC {\n  right: 0;\n  border-top: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n\n.MotifArea-module_bottomLeft__2qEqb {\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_bottomRight__3OjTb {\n  right: 0;\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n";
+var styles$7 = {"root":"MotifArea-module_root__1_ACd","active":"MotifArea-module_active__1q4z2","corner":"MotifArea-module_corner__3hB5t","topLeft":"MotifArea-module_topLeft__3vHHi MotifArea-module_corner__3hB5t","topRight":"MotifArea-module_topRight__2gNmC MotifArea-module_corner__3hB5t","bottomLeft":"MotifArea-module_bottomLeft__2qEqb MotifArea-module_corner__3hB5t","bottomRight":"MotifArea-module_bottomRight__3OjTb MotifArea-module_corner__3hB5t"};
+styleInject(css$8);
+
+var MotifArea = React.forwardRef(function MotifArea(props, ref) {
+  var image = useFile({
+    collectionName: 'imageFiles',
+    permaId: props.imageId
+  });
+
+  if (!image) {
+    return null;
+  }
+
+  return React.createElement("div", {
+    ref: ref,
+    className: classnames(styles$7.root, _defineProperty({}, styles$7.active, props.active)),
+    style: position(props, image),
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave
+  }, React.createElement("div", {
+    className: styles$7.topLeft
+  }), React.createElement("div", {
+    className: styles$7.topRight
+  }), React.createElement("div", {
+    className: styles$7.bottomLeft
+  }), React.createElement("div", {
+    className: styles$7.bottomRight
+  }));
+});
+
+function position(props, image) {
+  var originalRatio = image.width / image.height;
+  var containerRatio = props.containerWidth / props.containerHeight;
+  var scale = containerRatio > originalRatio ? props.containerWidth / image.width : props.containerHeight / image.height;
+  var contentWidth = image.width * scale;
+  var contentHeight = image.height * scale;
+  var focusX = image.configuration.focusX === undefined ? 50 : image.configuration.focusX;
+  var focusY = image.configuration.focusY === undefined ? 50 : image.configuration.focusY;
+  var cropLeft = (contentWidth - props.containerWidth) * focusX / 100;
+  var cropTop = (contentHeight - props.containerHeight) * focusY / 100;
+  var motifArea = image.configuration.motifArea || {
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  };
+  return {
+    top: contentHeight * motifArea.top / 100 - cropTop,
+    left: contentWidth * motifArea.left / 100 - cropLeft,
+    width: contentWidth * motifArea.width / 100,
+    height: contentHeight * motifArea.height / 100
+  };
+}
+
+function getSize(el) {
+  if (!el) {
+    return {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0
+    };
+  }
+
+  return {
+    left: el.offsetLeft,
+    top: el.offsetTop,
+    width: el.offsetWidth,
+    height: el.offsetHeight
+  };
+}
+
+function useDimension() {
+  var _useState = useState(getSize(null)),
+      _useState2 = _slicedToArray(_useState, 2),
+      componentSize = _useState2[0],
+      setComponentSize = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentNode = _useState4[0],
+      setCurrentNode = _useState4[1];
+
+  var measuredRef = useCallback(function (node) {
+    setCurrentNode(node);
+    setComponentSize(getSize(node));
+  }, []);
+  useEffect(function () {
+    function handleResize() {
+      setComponentSize(getSize(currentNode));
+    }
+
+    if (!currentNode) {
+      return;
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [currentNode]);
+  return [componentSize, measuredRef];
+}
+
+var videos = {
+  videoBoatSunset: {
+    id: "videoBoatSunset",
+    width: 960,
+    height: 406,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    },
+    focusX: 50,
+    focusY: 50
+  },
+  videoBoatDark: {
+    id: "videoBoatDark",
+    width: 960,
+    height: 406,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    },
+    focusX: 50,
+    focusY: 50
+  },
+  videoKaterchen: {
+    id: "videoKaterchen",
+    width: 1920,
+    height: 1080,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    },
+    focusX: 50,
+    focusY: 50
+  },
+  videoGarzweilerLoop1: {
+    id: "videoGarzweilerLoop1",
+    width: 3840,
+    height: 2160,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 1,
+      height: 1
+    },
+    focusX: 50,
+    focusY: 50
+  },
+  videoGarzweilerLoop2: {
+    id: "videoGarzweilerLoop2",
+    width: 1920,
+    height: 1080,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 1,
+      height: 1
+    },
+    focusX: 15,
+    focusY: 20
+  },
+  videoGarzweilerDrohne: {
+    id: "videoGarzweilerDrohne",
+    width: 1920,
+    height: 1080,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
+  },
+  videoInselInterviewToni: {
+    id: "videoInselInterviewToni",
+    width: 1920,
+    height: 1080,
+    motiveArea: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
+  }
+};
+
+var ResizeSensor = createCommonjsModule(function (module, exports) {
+// Copyright (c) 2013 Marc J. Schmidt
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+// Originally based on version 1.2.1,
+// https://github.com/marcj/css-element-queries/tree/1.2.1
+// Some lines removed for compatibility.
+(function (root, factory) {
+  {
+    module.exports = factory();
+  }
+})(typeof window !== 'undefined' ? window : commonjsGlobal, function () {
+  // Make sure it does not throw in a SSR (Server Side Rendering) situation
+  if (typeof window === "undefined") {
+    return null;
+  } // https://github.com/Semantic-Org/Semantic-UI/issues/3855
+  // https://github.com/marcj/css-element-queries/issues/257
+
+
+  var globalWindow = window; // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
+  // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
+  // would generate too many unnecessary events.
+
+  var requestAnimationFrame = globalWindow.requestAnimationFrame || globalWindow.mozRequestAnimationFrame || globalWindow.webkitRequestAnimationFrame || function (fn) {
+    return globalWindow.setTimeout(fn, 20);
+  };
+
+  function forEachElement(elements, callback) {
+    var elementsType = Object.prototype.toString.call(elements);
+    var isCollectionTyped = '[object Array]' === elementsType || '[object NodeList]' === elementsType || '[object HTMLCollection]' === elementsType || '[object Object]' === elementsType;
+    var i = 0,
+        j = elements.length;
+
+    if (isCollectionTyped) {
+      for (; i < j; i++) {
+        callback(elements[i]);
+      }
+    } else {
+      callback(elements);
+    }
+  }
+
+  function getElementSize(element) {
+    if (!element.getBoundingClientRect) {
+      return {
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      };
+    }
+
+    var rect = element.getBoundingClientRect();
+    return {
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    };
+  }
+
+  function setStyle(element, style) {
+    Object.keys(style).forEach(function (key) {
+      element.style[key] = style[key];
+    });
+  }
+
+  var ResizeSensor = function ResizeSensor(element, callback) {
+    function EventQueue() {
+      var q = [];
+
+      this.add = function (ev) {
+        q.push(ev);
+      };
+
+      var i, j;
+
+      this.call = function (sizeInfo) {
+        for (i = 0, j = q.length; i < j; i++) {
+          q[i].call(this, sizeInfo);
+        }
+      };
+
+      this.remove = function (ev) {
+        var newQueue = [];
+
+        for (i = 0, j = q.length; i < j; i++) {
+          if (q[i] !== ev) newQueue.push(q[i]);
+        }
+
+        q = newQueue;
+      };
+
+      this.length = function () {
+        return q.length;
+      };
+    }
+
+    function attachResizeEvent(element, resized) {
+      if (!element) return;
+
+      if (element.resizedAttached) {
+        element.resizedAttached.add(resized);
+        return;
+      }
+
+      element.resizedAttached = new EventQueue();
+      element.resizedAttached.add(resized);
+      element.resizeSensor = document.createElement('div');
+      element.resizeSensor.dir = 'ltr';
+      element.resizeSensor.className = 'resize-sensor';
+      var style = {
+        pointerEvents: 'none',
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        overflow: 'hidden',
+        zIndex: '-1',
+        visibility: 'hidden',
+        maxWidth: '100%'
+      };
+      var styleChild = {
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        transition: '0s'
+      };
+      setStyle(element.resizeSensor, style);
+      var expand = document.createElement('div');
+      expand.className = 'resize-sensor-expand';
+      setStyle(expand, style);
+      var expandChild = document.createElement('div');
+      setStyle(expandChild, styleChild);
+      expand.appendChild(expandChild);
+      var shrink = document.createElement('div');
+      shrink.className = 'resize-sensor-shrink';
+      setStyle(shrink, style);
+      var shrinkChild = document.createElement('div');
+      setStyle(shrinkChild, styleChild);
+      setStyle(shrinkChild, {
+        width: '200%',
+        height: '200%'
+      });
+      shrink.appendChild(shrinkChild);
+      element.resizeSensor.appendChild(expand);
+      element.resizeSensor.appendChild(shrink);
+      element.appendChild(element.resizeSensor);
+      var computedStyle = window.getComputedStyle(element);
+      var position = computedStyle ? computedStyle.getPropertyValue('position') : null;
+
+      if ('absolute' !== position && 'relative' !== position && 'fixed' !== position) {
+        element.style.position = 'relative';
+      }
+
+      var dirty, rafId;
+      var size = getElementSize(element);
+      var lastWidth = 0;
+      var lastHeight = 0;
+      var initialHiddenCheck = true;
+      var lastAnimationFrame = 0;
+
+      var resetExpandShrink = function resetExpandShrink() {
+        var width = element.offsetWidth;
+        var height = element.offsetHeight;
+        expandChild.style.width = width + 10 + 'px';
+        expandChild.style.height = height + 10 + 'px';
+        expand.scrollLeft = width + 10;
+        expand.scrollTop = height + 10;
+        shrink.scrollLeft = width + 10;
+        shrink.scrollTop = height + 10;
+      };
+
+      var reset = function reset() {
+        // Check if element is hidden
+        if (initialHiddenCheck) {
+          var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
+
+          if (invisible) {
+            // Check in next frame
+            if (!lastAnimationFrame) {
+              lastAnimationFrame = requestAnimationFrame(function () {
+                lastAnimationFrame = 0;
+                reset();
+              });
+            }
+
+            return;
+          } else {
+            // Stop checking
+            initialHiddenCheck = false;
+          }
+        }
+
+        resetExpandShrink();
+      };
+
+      element.resizeSensor.resetSensor = reset;
+
+      var onResized = function onResized() {
+        rafId = 0;
+        if (!dirty) return;
+        lastWidth = size.width;
+        lastHeight = size.height;
+
+        if (element.resizedAttached) {
+          element.resizedAttached.call(size);
+        }
+      };
+
+      var onScroll = function onScroll() {
+        size = getElementSize(element);
+        dirty = size.width !== lastWidth || size.height !== lastHeight;
+
+        if (dirty && !rafId) {
+          rafId = requestAnimationFrame(onResized);
+        }
+
+        reset();
+      };
+
+      var addEvent = function addEvent(el, name, cb) {
+        if (el.attachEvent) {
+          el.attachEvent('on' + name, cb);
+        } else {
+          el.addEventListener(name, cb);
+        }
+      };
+
+      addEvent(expand, 'scroll', onScroll);
+      addEvent(shrink, 'scroll', onScroll); // Fix for custom Elements
+
+      requestAnimationFrame(reset);
+    }
+
+    forEachElement(element, function (elem) {
+      attachResizeEvent(elem, callback);
+    });
+
+    this.detach = function (ev) {
+      ResizeSensor.detach(element, ev);
+    };
+
+    this.reset = function () {
+      element.resizeSensor.resetSensor();
+    };
+  };
+
+  ResizeSensor.reset = function (element) {
+    forEachElement(element, function (elem) {
+      elem.resizeSensor.resetSensor();
+    });
+  };
+
+  ResizeSensor.detach = function (element, ev) {
+    forEachElement(element, function (elem) {
+      if (!elem) return;
+
+      if (elem.resizedAttached && typeof ev === "function") {
+        elem.resizedAttached.remove(ev);
+        if (elem.resizedAttached.length()) return;
+      }
+
+      if (elem.resizeSensor) {
+        if (elem.contains(elem.resizeSensor)) {
+          elem.removeChild(elem.resizeSensor);
+        }
+
+        delete elem.resizeSensor;
+        delete elem.resizedAttached;
+      }
+    });
+  };
+
+  if (typeof MutationObserver !== "undefined") {
+    var observer = new MutationObserver(function (mutations) {
+      for (var i in mutations) {
+        if (mutations.hasOwnProperty(i)) {
+          var items = mutations[i].addedNodes;
+
+          for (var j = 0; j < items.length; j++) {
+            if (items[j].resizeSensor) {
+              ResizeSensor.reset(items[j]);
+            }
+          }
+        }
+      }
+    });
+    document.addEventListener("DOMContentLoaded", function (event) {
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    });
+  }
+
+  return ResizeSensor;
+});
+});
+
+var cssElementQueries = {
+  ResizeSensor: ResizeSensor
+};
+var cssElementQueries_1 = cssElementQueries.ResizeSensor;
+
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var defaultProps = {
+  handleSize: 40,
+  handle: null,
+  hover: false,
+  leftImageAlt: '',
+  leftImageCss: {},
+  leftImageLabel: null,
+  onSliderPositionChange: function onSliderPositionChange() {},
+  rightImageAlt: '',
+  rightImageCss: {},
+  rightImageLabel: null,
+  skeleton: null,
+  sliderLineColor: '#ffffff',
+  sliderLineWidth: 2,
+  sliderPositionPercentage: 0.5
+};
+
+function ReactCompareImage(props) {
+  var handleSize = props.handleSize,
+      handle = props.handle,
+      hover = props.hover,
+      leftImage = props.leftImage,
+      leftImageAlt = props.leftImageAlt,
+      leftImageCss = props.leftImageCss,
+      leftImageLabel = props.leftImageLabel,
+      onSliderPositionChange = props.onSliderPositionChange,
+      rightImage = props.rightImage,
+      rightImageAlt = props.rightImageAlt,
+      rightImageCss = props.rightImageCss,
+      rightImageLabel = props.rightImageLabel,
+      skeleton = props.skeleton,
+      sliderLineColor = props.sliderLineColor,
+      sliderLineWidth = props.sliderLineWidth,
+      sliderPositionPercentage = props.sliderPositionPercentage,
+      sliderPosition = props.sliderPosition,
+      setSliderPosition = props.setSliderPosition,
+      isSliding = props.isSliding,
+      setIsSliding = props.setIsSliding,
+      classicMode = props.classicMode,
+      wiggle = props.wiggle;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      containerWidth = _useState2[0],
+      setContainerWidth = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      leftImgLoaded = _useState4[0],
+      setLeftImgLoaded = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      rightImgLoaded = _useState6[0],
+      setRightImgLoaded = _useState6[1];
+
+  var containerRef = useRef();
+  var rightImageRef = useRef();
+  var leftImageRef = useRef(); // keep track container's width in local state
+
+  useEffect(function () {
+    var updateContainerWidth = function updateContainerWidth() {
+      var currentContainerWidth = containerRef.current.getBoundingClientRect().width;
+      setContainerWidth(currentContainerWidth);
+    }; // initial execution must be done manually
+
+
+    updateContainerWidth(); // update local state if container size is changed
+
+    var containerElement = containerRef.current;
+    var resizeSensor = new cssElementQueries_1(containerElement, function () {
+      updateContainerWidth();
+    });
+    return function () {
+      resizeSensor.detach(containerElement);
+    };
+  }, []);
+  useEffect(function () {
+    // consider the case where loading image is completed immediately
+    // due to the cache etc.
+    var alreadyDone = leftImageRef.current.complete;
+    alreadyDone && setLeftImgLoaded(true);
+    return function () {
+      // when the left image source is changed
+      setLeftImgLoaded(false);
+    };
+  }, [leftImage]);
+  useEffect(function () {
+    // consider the case where loading image is completed immediately
+    // due to the cache etc.
+    var alreadyDone = rightImageRef.current.complete;
+    alreadyDone && setRightImgLoaded(true);
+    return function () {
+      // when the right image source is changed
+      setRightImgLoaded(false);
+    };
+  }, [rightImage]);
+  var allImagesLoaded = rightImgLoaded && leftImgLoaded;
+  useEffect(function () {
+    var handleSliding = function handleSliding(event) {
+      var e = event || window.event; // Calc Cursor Position from the left edge of the viewport
+
+      var cursorXfromViewport = e.touches ? e.touches[0].pageX : e.pageX; // Calc Cursor Position from the left edge of the window (consider any page scrolling)
+
+      var cursorXfromWindow = cursorXfromViewport - window.pageXOffset; // Calc Cursor Position from the left edge of the image
+
+      var imagePosition = rightImageRef.current.getBoundingClientRect();
+      var pos = cursorXfromWindow - imagePosition.left; // Set minimum and maximum values to prevent the slider from overflowing
+
+      var minPos = 0 + sliderLineWidth / 2;
+      var maxPos = containerWidth - sliderLineWidth / 2;
+      if (pos < minPos) pos = minPos;
+      if (pos > maxPos) pos = maxPos;
+      setSliderPosition(pos / containerWidth); // If there's a callback function, invoke it everytime the slider changes
+
+      if (onSliderPositionChange) {
+        onSliderPositionChange(pos / containerWidth);
+      }
+    };
+
+    var startSliding = function startSliding(e) {
+      setIsSliding(true); // Prevent default behavior other than mobile scrolling
+
+      if (!('touches' in e)) {
+        e.preventDefault();
+      } // Slide the image even if you just click or tap (not drag)
+
+
+      handleSliding(e);
+      window.addEventListener('mousemove', handleSliding); // 07
+
+      window.addEventListener('touchmove', handleSliding); // 08
+    };
+
+    var finishSliding = function finishSliding() {
+      setIsSliding(false);
+      window.removeEventListener('mousemove', handleSliding);
+      window.removeEventListener('touchmove', handleSliding);
+    };
+
+    var containerElement = containerRef.current;
+
+    if (allImagesLoaded) {
+      if (classicMode) {
+        // it's necessary to reset event handlers each time the canvasWidth changes
+        // for mobile
+        containerElement.addEventListener('touchstart', startSliding); // 01
+
+        window.addEventListener('touchend', finishSliding); // 02
+        // for desktop
+
+        if (hover) {
+          containerElement.addEventListener('mousemove', handleSliding); // 03
+
+          containerElement.addEventListener('mouseleave', finishSliding); // 04
+        } else {
+          containerElement.addEventListener('mousedown', startSliding); // 05
+
+          window.addEventListener('mouseup', finishSliding); // 06
+        }
+      }
+    }
+
+    return function () {
+      if (classicMode) {
+        // cleanup all event resteners
+        containerElement.removeEventListener('touchstart', startSliding); // 01
+
+        window.removeEventListener('touchend', finishSliding); // 02
+
+        containerElement.removeEventListener('mousemove', handleSliding); // 03
+
+        containerElement.removeEventListener('mouseleave', finishSliding); // 04
+
+        containerElement.removeEventListener('mousedown', startSliding); // 05
+
+        window.removeEventListener('mouseup', finishSliding); // 06
+
+        window.removeEventListener('mousemove', handleSliding); // 07
+
+        window.removeEventListener('touchmove', handleSliding); // 08
+      }
+    };
+  }, [allImagesLoaded, containerWidth, hover, sliderLineWidth]); // eslint-disable-line
+  // Image size set as follows.
+  //
+  // 1. right(under) image:
+  //     width  = 100% of container width
+  //     height = auto
+  //
+  // 2. left(over) imaze:
+  //     width  = 100% of container width
+  //     height = right image's height
+  //              (protrudes is hidden by css 'object-fit: hidden')
+
+  var styles = {
+    container: {
+      boxSizing: 'border-box',
+      position: 'relative',
+      width: '100%',
+      overflow: 'hidden'
+    },
+    rightImage: _objectSpread$3({
+      display: 'block',
+      height: 'auto',
+      // Respect the aspect ratio
+      width: '100%'
+    }, rightImageCss),
+    leftImage: _objectSpread$3({
+      clip: "rect(auto, ".concat(containerWidth * sliderPosition, "px, auto, auto)"),
+      display: 'block',
+      height: '100%',
+      // fit to the height of right(under) image
+      objectFit: 'cover',
+      // protrudes is hidden
+      position: 'absolute',
+      top: 0,
+      width: '100%'
+    }, leftImageCss),
+    slider: {
+      alignItems: 'center',
+      cursor: !hover && 'ew-resize',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      justifyContent: 'center',
+      left: "".concat(containerWidth * sliderPosition - handleSize / 2, "px"),
+      position: 'absolute',
+      top: 0,
+      width: "".concat(handleSize, "px")
+    },
+    line: {
+      background: sliderLineColor,
+      boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
+      flex: '0 1 auto',
+      height: '100%',
+      width: "".concat(sliderLineWidth, "px")
+    },
+    handleCustom: {
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flex: '1 0 auto',
+      height: 'auto',
+      justifyContent: 'center',
+      width: 'auto'
+    },
+    handleDefault: {
+      alignItems: 'center',
+      border: "".concat(sliderLineWidth, "px solid ").concat(sliderLineColor),
+      borderRadius: '100%',
+      boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flex: '1 0 auto',
+      height: "".concat(handleSize, "px"),
+      justifyContent: 'center',
+      width: "".concat(handleSize, "px")
+    },
+    leftArrow: {
+      border: "inset ".concat(handleSize * 0.15, "px rgba(0,0,0,0)"),
+      borderRight: "".concat(handleSize * 0.15, "px solid ").concat(sliderLineColor),
+      height: '0px',
+      marginLeft: "-".concat(handleSize * 0.25, "px"),
+      // for IE11
+      marginRight: "".concat(handleSize * 0.25, "px"),
+      width: '0px'
+    },
+    rightArrow: {
+      border: "inset ".concat(handleSize * 0.15, "px rgba(0,0,0,0)"),
+      borderLeft: "".concat(handleSize * 0.15, "px solid ").concat(sliderLineColor),
+      height: '0px',
+      marginRight: "-".concat(handleSize * 0.25, "px"),
+      // for IE11
+      width: '0px'
+    },
+    leftLabel: {
+      background: 'rgba(0, 0, 0, 0.5)',
+      color: 'white',
+      left: '5%',
+      opacity: isSliding ? 0 : 1,
+      padding: '10px 20px',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translate(0,-50%)',
+      transition: 'opacity 0.1s ease-out 0.5s',
+      maxWidth: '30%',
+      WebkitUserSelect: 'none',
+      WebkitTouchCallout: 'none'
+    },
+    rightLabel: {
+      background: 'rgba(0, 0, 0, 0.5)',
+      color: 'white',
+      opacity: isSliding ? 0 : 1,
+      padding: '10px 20px',
+      position: 'absolute',
+      right: '5%',
+      top: '50%',
+      transform: 'translate(0,-50%)',
+      transition: 'opacity 0.1s ease-out 0.5s',
+      maxWidth: '30%',
+      WebkitUserSelect: 'none',
+      WebkitTouchCallout: 'none'
+    }
+  };
+  return React.createElement(React.Fragment, null, skeleton && !allImagesLoaded && React.createElement("div", {
+    style: _objectSpread$3({}, styles.container)
+  }, skeleton), React.createElement("div", {
+    style: _objectSpread$3({}, styles.container, {
+      display: allImagesLoaded ? 'block' : 'none'
+    }),
+    ref: containerRef,
+    "data-testid": "container"
+  }, React.createElement("img", {
+    onLoad: function onLoad() {
+      return setRightImgLoaded(true);
+    },
+    alt: rightImageAlt,
+    "data-testid": "right-image",
+    ref: rightImageRef,
+    src: rightImage,
+    style: styles.rightImage
+  }), React.createElement("img", {
+    onLoad: function onLoad() {
+      return setLeftImgLoaded(true);
+    },
+    alt: leftImageAlt,
+    "data-testid": "left-image",
+    ref: leftImageRef,
+    src: leftImage,
+    style: styles.leftImage
+  }), React.createElement("div", {
+    style: styles.slider,
+    className: classnames(_defineProperty({}, 'wiggle', wiggle))
+  }, React.createElement("div", {
+    style: styles.line
+  }), handle ? React.createElement("div", {
+    style: styles.handleCustom
+  }, handle) : React.createElement("div", {
+    style: styles.handleDefault
+  }, React.createElement("div", {
+    style: styles.leftArrow
+  }), React.createElement("div", {
+    style: styles.rightArrow
+  })), React.createElement("div", {
+    style: styles.line
+  })), leftImageLabel && React.createElement("div", {
+    style: styles.leftLabel
+  }, leftImageLabel), rightImageLabel && React.createElement("div", {
+    style: styles.rightLabel
+  }, rightImageLabel)));
+}
+
+ReactCompareImage.defaultProps = defaultProps;
+
+var css$9 = ".BeforeAfter-module_container__38Dru {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.wiggle {\n  animation: BeforeAfter-module_shake__3iLe8 1.5s cubic-bezier(.36,.07,.19,.97) both;\n}\n\n@keyframes BeforeAfter-module_shake__3iLe8 {\n  10%, 90% {\n    transform: translate3d(-20%, 0, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(40%, 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(-80%, 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(80%, 0, 0);\n  }\n}";
+var styles$8 = {"container":"BeforeAfter-module_container__38Dru","shake":"BeforeAfter-module_shake__3iLe8"};
+styleInject(css$9);
+
+var BeforeAfter = (function (_ref) {
+  var state = _ref.state,
+      leftImageLabel = _ref.leftImageLabel,
+      rightImageLabel = _ref.rightImageLabel,
+      _ref$startPos = _ref.startPos,
+      startPos = _ref$startPos === void 0 ? 0 : _ref$startPos,
+      _ref$slideMode = _ref.slideMode,
+      slideMode = _ref$slideMode === void 0 ? 'both' : _ref$slideMode;
+
+  var _useState = useState({
+    pos: window.pageYOffset || document.documentElement.scrollTop,
+    dir: 'unknown'
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      scrollPos = _useState2[0],
+      setScrollPos = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isSliding = _useState4[0],
+      setIsSliding = _useState4[1];
+
+  var _useState5 = useState(startPos),
+      _useState6 = _slicedToArray(_useState5, 2),
+      beforeAfterPos = _useState6[0],
+      setBeforeAfterPos = _useState6[1];
+
+  var beforeAfterRef = useRef();
+  var slideOnScroll = slideMode === 'both' || slideMode === 'scroll';
+  var slideClassic = slideMode === 'both' || slideMode === 'classic';
+  var current = beforeAfterRef.current;
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      wiggle = _useState8[0],
+      setWiggle = _useState8[1];
+
+  useEffect(function () {
+    var node = current;
+
+    if (node) {
+      setWiggle(state === 'active');
+    }
+  }, [state, current]);
+  useEffect(function () {
+    var node = current;
+
+    function handler() {
+      if (node) {
+        setScrollPos(function (prevPos) {
+          var currPos = window.pageYOffset || document.documentElement.scrollTop;
+
+          if (currPos > prevPos['pos']) {
+            return {
+              pos: currPos,
+              dir: 'down'
+            };
+          }
+
+          if (currPos < prevPos['pos']) {
+            return {
+              pos: currPos,
+              dir: 'up'
+            };
+          }
+
+          return prevPos;
+        });
+
+        if (slideOnScroll) {
+          if (scrollPos['dir'] === 'down' && beforeAfterPos < 1) {
+            setBeforeAfterPos(function (prev) {
+              return prev + 0.025;
+            });
+            setIsSliding(true);
+            setTimeout(function () {
+              return setIsSliding(false);
+            }, 200);
+          } else if (scrollPos['dir'] === 'up' && beforeAfterPos > 0) {
+            setBeforeAfterPos(function (prev) {
+              return prev - 0.025;
+            });
+            setIsSliding(true);
+            setTimeout(function () {
+              return setIsSliding(false);
+            }, 250);
+          } else {
+            setIsSliding(false);
+          }
+        }
+      }
+    }
+
+    if (!node) {
+      return;
+    }
+
+    setTimeout(handler, 0);
+
+    if (state === 'active') {
+      window.addEventListener('scroll', handler);
+      return function () {
+        window.removeEventListener('scroll', handler);
+      };
+    }
+  }, [current, setBeforeAfterPos, scrollPos, state, setIsSliding]);
+  var awsBucket = '//s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/presentation-images/';
+  var beforeImage = awsBucket + 'before_after/haldern_church1.jpg';
+  var afterImage = awsBucket + 'before_after/haldern_church2.jpg';
+  return React.createElement("div", {
+    ref: beforeAfterRef,
+    className: styles$8.container
+  }, React.createElement(ReactCompareImage, {
+    leftImage: beforeImage,
+    rightImage: afterImage,
+    sliderPosition: beforeAfterPos,
+    setSliderPosition: setBeforeAfterPos,
+    isSliding: isSliding,
+    setIsSliding: setIsSliding,
+    leftImageLabel: leftImageLabel,
+    rightImageLabel: rightImageLabel,
+    classicMode: slideClassic,
+    wiggle: wiggle
+  }));
+});
+
+var css$a = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
+var styles$9 = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
+styleInject(css$a);
+
+function Backdrop(props) {
+  var _useDimension = useDimension(),
+      _useDimension2 = _slicedToArray(_useDimension, 2),
+      containerDimension = _useDimension2[0],
+      setContainerRef = _useDimension2[1];
+
+  return React.createElement("div", {
+    className: classnames(styles$9.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$9.offScreen, props.offScreen))
+  }, React.createElement("div", {
+    className: props.transitionStyles.backdropInner
+  }, React.createElement("div", {
+    className: props.transitionStyles.backdropInner2
+  }, props.children(renderContent(props, containerDimension, setContainerRef)))));
+}
+Backdrop.defaultProps = {
+  transitionStyles: {}
+};
+
+function renderContent(props, containerDimension, setContainerRef) {
+  if (props.image.toString().startsWith('#')) {
+    return React.createElement(FillColor, {
+      color: props.image
+    });
+  } else if (props.image.toString().startsWith('video')) {
+    var video = videos[props.image];
+    return React.createElement(Fullscreen, {
+      ref: setContainerRef
+    }, React.createElement(Video, {
+      state: props.onScreen ? 'active' : 'inactive',
+      id: props.image,
+      offset: props.offset,
+      interactive: props.interactive,
+      nextSectionOnEnd: props.nextSectionOnEnd
+    }), React.createElement(MotifArea, {
+      ref: props.motifAreaRef,
+      image: video,
+      containerWidth: containerDimension.width,
+      containerHeight: containerDimension.height
+    }));
+  } else if (props.image.toString().startsWith('beforeAfter')) {
+    return React.createElement(Fullscreen, {
+      ref: setContainerRef
+    }, React.createElement(BeforeAfter, {
+      state: props.state,
+      leftImageLabel: props.leftImageLabel,
+      rightImageLabel: props.rightImageLabel,
+      startPos: props.startPos,
+      slideMode: props.slideMode
+    }));
+  } else {
+    return React.createElement(Fullscreen, {
+      ref: setContainerRef
+    }, React.createElement(Image, {
+      id: props.image
+    }), React.createElement(Image, {
+      id: props.imageMobile,
+      mobile: true
+    }), React.createElement(MotifArea, {
+      ref: props.motifAreaRef,
+      imageId: props.image,
+      containerWidth: containerDimension.width,
+      containerHeight: containerDimension.height
+    }));
+  }
+}
+
+var css$b = ".Foreground-module_Foreground__13ODU {\n  position: relative;\n  z-index: 3;\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx {\n  min-height: 51vh;\n}\n\n.Foreground-module_fullHeight__1vMXb {\n  min-height: 100vh;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx.Foreground-module_enlarge__14Plm,\n.Foreground-module_fullHeight__1vMXb.Foreground-module_enlarge__14Plm {\n  min-height: 130vh;\n}\n\n.Foreground-module_hidden__2dmAx {\n  visibility: hidden;\n}\n";
+var styles$a = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","enlarge":"Foreground-module_enlarge__14Plm","hidden":"Foreground-module_hidden__2dmAx"};
+styleInject(css$b);
+
+function Foreground(props) {
+  return React.createElement("div", {
+    className: className(props)
+  }, props.children);
+}
+
+function className(props) {
+  var _classNames;
+
+  return classnames(styles$a.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$a["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$a.hidden, props.hidden), _defineProperty(_classNames, styles$a.enlarge, props.hidden && !props.disableEnlarge), _classNames));
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }
+
+    return arr2;
+  }
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+var css$c = "\n\n.Heading-module_Heading__1YSiy {\n  font-size: 66px;\n  font-weight: 700;\n  margin-top: 0;\n  margin-bottom: 0.5em;\n  padding-top: 0.5em;\n}\n\n.Heading-module_first__1yPxD {\n  font-size: 110px;\n  line-height: 1;\n}\n\n@media (orientation: landscape) {\n  .Heading-module_first__1yPxD {\n    padding-top: 25%;\n  }\n}\n\n@media (max-width: 600px) {\n  .Heading-module_Heading__1YSiy {\n    font-size: 40px;\n  }\n\n  .Heading-module_first__1yPxD {\n    font-size: 66px;\n  }\n}\n";
+var styles$b = {"text-l":"40px","text-xl":"66px","text-2xl":"110px","Heading":"Heading-module_Heading__1YSiy","first":"Heading-module_first__1yPxD"};
+styleInject(css$c);
+
+function Heading(props) {
+  return React.createElement("h1", {
+    className: classnames(styles$b.Heading, _defineProperty({}, styles$b.first, props.first)),
+    style: props.style
+  }, props.children);
+}
+
+var css$d = "\n\n.TextBlock-module_TextBlock__5Zpj7 {\n  font-size: 22px;\n  line-height: 1.4;\n\n  padding: 1em 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  text-shadow: none;\n}\n\n.TextBlock-module_dummy__3W5ls {\n  opacity: 0.7;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 a {\n  color: #fff;\n  word-wrap: break-word;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 ol,\n.TextBlock-module_TextBlock__5Zpj7 ul {\n  padding-left: 20px;\n}\n";
+var styles$c = {"text-base":"22px","TextBlock":"TextBlock-module_TextBlock__5Zpj7","dummy":"TextBlock-module_dummy__3W5ls"};
+styleInject(css$d);
+
+function TextBlock(props) {
+  return React.createElement("div", {
+    className: classnames(styles$c.TextBlock, _defineProperty({}, styles$c.dummy, props.dummy)),
+    style: props.style,
+    dangerouslySetInnerHTML: {
+      __html: props.children
+    }
+  });
+}
+
+var css$e = ".InlineCaption-module_root__1R8Ib {\n  padding: 3px 10px 5px;\n  background-color: #fff;\n  color: #222;\n  font-size: text-s;\n  line-height: 1.4;\n  text-shadow: none;\n}\n";
+var styles$d = {"text-base":"22px","root":"InlineCaption-module_root__1R8Ib"};
+styleInject(css$e);
+
+function InlineCaption(props) {
+  if (props.text) {
+    return React.createElement("div", {
+      className: styles$d.root
+    }, props.text);
+  } else {
+    return null;
+  }
+}
+
+var css$f = ".InlineImage-module_root__1DvUb {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_container__Pui7E {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_spacer__2rMkE {\n  padding-top: 75%;\n}\n\n.InlineImage-module_inner__2AMK- {\n  border: solid 2px #fff;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
+var styles$e = {"root":"InlineImage-module_root__1DvUb","container":"InlineImage-module_container__Pui7E","spacer":"InlineImage-module_spacer__2rMkE","inner":"InlineImage-module_inner__2AMK-"};
+styleInject(css$f);
+
+function InlineImage(props) {
+  return React.createElement("div", {
+    className: classnames(styles$e.root)
+  }, React.createElement("div", {
+    className: styles$e.container
+  }, React.createElement("div", {
+    className: styles$e.spacer
+  }, React.createElement("div", {
+    className: styles$e.inner
+  }, React.createElement(Image, props)))), React.createElement(InlineCaption, {
+    text: props.caption
+  }));
+}
+
+var css$g = ".InlineVideo-module_root__2UD3D {\n  position: relative;\n  max-height: 98vh;\n}\n\n.InlineVideo-module_inner__H81_g {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
+var styles$f = {"root":"InlineVideo-module_root__2UD3D","inner":"InlineVideo-module_inner__H81_g"};
+styleInject(css$g);
+
+function InlineVideo(props) {
+  var ref = useRef();
+  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
+  return React.createElement("div", {
+    ref: ref,
+    className: classnames(styles$f.root)
+  }, React.createElement("div", {
+    style: {
+      paddingTop: props.wideFormat ? '41.15%' : '56.25%'
+    }
+  }, React.createElement("div", {
+    className: styles$f.inner
+  }, React.createElement(Video, Object.assign({}, props, {
+    state: onScreen ? 'active' : 'inactive',
+    interactive: true
+  })))));
+}
+
+var css$h = ".InlineBeforeAfter-module_root__2O9F8 {\n  position: relative;\n  margin: 0 auto;\n}\n";
+var styles$g = {"root":"InlineBeforeAfter-module_root__2O9F8"};
+styleInject(css$h);
+
+function InlineBeforeAfter(props) {
+  var ref = useRef();
+  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
+  return React.createElement("div", {
+    ref: ref,
+    className: styles$g.root
+  }, React.createElement(BeforeAfter, Object.assign({}, props, {
+    state: onScreen ? 'active' : 'inactive'
+  })));
+}
+
+var css$i = ".SoundDisclaimer-module_soundDisclaimer__1sAiH {\n  text-align: center;\n  border: 1px solid white;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: inherit;\n}\n\n.SoundDisclaimer-module_soundDisclaimer__1sAiH:hover {\n  background: rgba(255, 255, 255, 0.25);\n}";
+var styles$h = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__1sAiH"};
+styleInject(css$i);
+
+function UnmuteButton() {
+  return React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
+    return React.createElement("div", {
+      className: classnames(styles$h.soundDisclaimer),
+      onClick: function onClick() {
+        return mutedSettings.setMuted(false);
+      }
+    }, React.createElement("p", null, "Dieser Artikel wirkt am besten mit eingeschaltetem Ton.", React.createElement("br", null), "Klicken Sie einmal in dieses Feld, um den Ton f\xFCr die gesamte Geschichte zu aktivieren."));
+  });
+}
+
+var loremIpsum1 = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ';
+var loremIpsum2 = 'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
+var loremIpsum3 = 'Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.';
+
+var templates = {
+  heading: {
+    name: 'Überschrift',
+    component: Heading
+  },
+  textBlock: {
+    name: 'Text Block',
+    component: TextBlock
+  },
+  soundDisclaimer: {
+    name: 'Sound Disclaimer',
+    component: UnmuteButton
+  },
+  loremIpsum1: {
+    name: 'Blindtext 1',
+    component: TextBlock,
+    props: {
+      children: loremIpsum1
+    }
+  },
+  loremIpsum2: {
+    name: 'Blindtext 2',
+    component: TextBlock,
+    props: {
+      children: loremIpsum2
+    }
+  },
+  loremIpsum3: {
+    name: 'Blindtext 3',
+    component: TextBlock,
+    props: {
+      children: loremIpsum3
+    }
+  },
+  inlineImage: {
+    name: 'Inline Bild',
+    component: InlineImage,
+    inlinePositioning: true
+  },
+  inlineVideo: {
+    name: 'Inline Video',
+    component: InlineVideo,
+    inlinePositioning: true
+  },
+  inlineBeforeAfter: {
+    name: 'Inline Before/After',
+    component: InlineBeforeAfter,
+    inlinePositioning: true
+  },
+  stickyImage: {
+    name: 'Sticky Bild',
+    component: InlineImage,
+    inlinePositioning: true
+  }
+};
+
+function ForegroundItem(props) {
+  var template = templates[props.type];
+  var Component = template.component;
+  return React.createElement(Component, Object.assign({}, template.props, props.itemProps));
+}
+
+function ForegroundItems(props) {
+  return React.createElement(React.Fragment, null, props.items.map(function (item, index) {
+    return props.children(item, React.createElement(ForegroundItem, {
+      key: index,
+      type: item.type,
+      position: item.position,
+      itemProps: item.props
+    }));
+  }));
+}
+ForegroundItems.defaultProps = {
+  children: function children(item, child) {
+    return child;
+  }
+};
+
+var css$j = ".TwoColumn-module_root__37EqL {\n}\n\n.TwoColumn-module_group__3Hg2y {\n  clear: right;\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.TwoColumn-module_group-full__2OT4o {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.TwoColumn-module_sticky__4LCDO,\n.TwoColumn-module_inline__1fPfM {\n  max-width: 500px;\n}\n\n.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM {\n  margin-left: auto;\n}\n\n@media (max-width: 949px) {\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    margin-left: auto;\n  }\n}\n\n@media (min-width: 950px) {\n  .TwoColumn-module_sticky__4LCDO {\n    position: sticky;\n    float: right;\n    top: 33%;\n    width: 30%;\n    max-width: 600px;\n  }\n\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    float: left;\n  }\n}\n";
+var styles$i = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a"};
+styleInject(css$j);
+
+var availablePositions = ['inline', 'sticky', 'full'];
+function TwoColumn(props) {
+  return React.createElement("div", {
+    className: classnames(styles$i.root, styles$i[props.align])
+  }, React.createElement("div", {
+    className: styles$i.inline,
+    ref: props.contentAreaRef
+  }), renderItems(props));
+}
+TwoColumn.defaultProps = {
+  align: 'left'
+};
+
+function renderItems(props) {
+  return groupItemsByPosition(props.items).map(function (group, index) {
+    return React.createElement("div", {
+      key: index,
+      className: classnames(styles$i.group, styles$i["group-".concat(group.position)])
+    }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'));
+  });
+}
+
+function renderItemGroup(props, group, position) {
+  if (group[position].length) {
+    return React.createElement("div", {
+      className: styles$i[position]
+    }, props.children(React.createElement(ForegroundItems, {
+      items: group[position]
+    })));
+  }
+}
+
+function groupItemsByPosition(items) {
+  var groups = [];
+  var currentGroup;
+  items.reduce(function (previousItemPosition, item, index) {
+    var position = availablePositions.indexOf(item.position) >= 0 ? item.position : 'inline';
+
+    if (!previousItemPosition || previousItemPosition !== position && (previousItemPosition !== 'sticky' || position !== 'inline')) {
+      currentGroup = {
+        position: position,
+        sticky: [],
+        inline: [],
+        full: []
+      };
+      groups = [].concat(_toConsumableArray(groups), [currentGroup]);
+    }
+
+    currentGroup[position].push(item);
+    return position;
+  }, null);
+  return groups;
+}
+
+var css$k = ".Center-module_outer__3Rr0H {\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.Center-module_outer-full__3dknO {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.Center-module_item__1KSs3 {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 700px;\n}\n\n.Center-module_item-full__1cEuv {\n  margin-left: 0;\n  margin-right: 0;\n  max-width: none;\n}\n\n@media (min-width: 950px) {\n  .Center-module_inner-left__2z9Ea {\n    float: left;\n    width: 60%;\n    margin-left: -10%;\n    margin-right: 1em;\n    margin-bottom: 1em;\n  }\n\n  .Center-module_inner-right__KBkVt {\n    float: right;\n    width: 60%;\n    margin-right: -10%;\n    margin-left: 1em;\n    margin-bottom: 1em;\n  }\n}\n";
+var styles$j = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
+styleInject(css$k);
+
+function Center(props) {
+  return React.createElement("div", {
+    className: classnames(styles$j.root)
+  }, React.createElement("div", {
+    ref: props.contentAreaRef
+  }), React.createElement(ForegroundItems, {
+    items: props.items
+  }, function (item, child) {
+    return React.createElement("div", {
+      key: item.index,
+      className: classnames(styles$j.outer, styles$j["outer-".concat(item.position)])
+    }, React.createElement("div", {
+      className: classnames(styles$j.item, styles$j["item-".concat(item.position)])
+    }, props.children(React.createElement("div", {
+      className: styles$j["inner-".concat(item.position)]
+    }, child))));
+  }));
+}
+
+function Layout(props) {
+  if (props.layout === 'center') {
+    return React.createElement(Center, props);
+  } else if (props.layout === 'right') {
+    return React.createElement(TwoColumn, Object.assign({
+      align: "right"
+    }, props));
+  } else {
+    return React.createElement(TwoColumn, props);
+  }
+}
+Layout.defaultProps = {
+  layout: 'left'
+};
+
+function isIntersectingX(rectA, rectB) {
+  return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
+}
+
+function getBoundingClientRect(el) {
+  if (!el) {
+    return {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    };
+  }
+
+  return el.getBoundingClientRect();
+}
+
+function useBoundingClientRect() {
+  var _useState = useState(getBoundingClientRect(null)),
+      _useState2 = _slicedToArray(_useState, 2),
+      boundingClientRect = _useState2[0],
+      setBoundingClientRect = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentNode = _useState4[0],
+      setCurrentNode = _useState4[1];
+
+  var measureRef = useCallback(function (node) {
+    setCurrentNode(node);
+    setBoundingClientRect(getBoundingClientRect(node));
+  }, []);
+  useEffect(function () {
+    function handler() {
+      setBoundingClientRect(getBoundingClientRect(currentNode));
+    }
+
+    if (!currentNode) {
+      return;
+    }
+
+    window.addEventListener('resize', handler);
+    window.addEventListener('scroll', handler);
+    return function () {
+      window.removeEventListener('resize', handler);
+      window.removeEventListener('scroll', handler);
+    };
+  }, [currentNode]);
+  return [boundingClientRect, measureRef];
+}
+
+function useScrollTarget(ref, isScrollTarget) {
+  useEffect(function () {
+    if (ref.current && isScrollTarget) {
+      window.scrollTo({
+        top: ref.current.getBoundingClientRect().top + window.scrollY - window.innerHeight * 0.25,
+        behavior: 'smooth'
+      });
+    }
+  }, [ref, isScrollTarget]);
+}
+
+var css$l = ".Section-module_Section__Yo58b {\n  position: relative;\n}\n\n.Section-module_invert__3_p7F {\n  color: #222;\n}\n\n.Section-module_activityProbe__Fsklh {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 2px;\n  width: 1px;\n}\n";
+var styles$k = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
+styleInject(css$l);
+
+var css$m = "\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgConceal-module_backdropInner__1IAYD {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgConceal-module_backdrop-below__3E6Uk {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
+styleInject(css$m);
+
+var css$n = "\n\n.fadeInBgFadeOut-module_backdrop__r0YXp {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOut-module_backdropInner__IQp87 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,\n.fadeInBgFadeOut-module_foreground__Q2vkT {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOut-module_foreground-above__3pmz9,\n.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOut-module_bbackdrop__1thge::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOut-module_bbackdrop-below__yaeMc::before {\n  visibility: hidden;\n}\n";
+var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","bbackdrop":"fadeInBgFadeOut-module_bbackdrop__1thge","bbackdrop-below":"fadeInBgFadeOut-module_bbackdrop-below__yaeMc"};
+styleInject(css$n);
+
+var css$o = "\n\n.fadeInBgFadeOutBg-module_backdrop__15ocl {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow__xUKyj,\n.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E,\n.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop__25Ux-::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj::before {\n  visibility: hidden;\n}\n";
+var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6","bbackdrop":"fadeInBgFadeOutBg-module_bbackdrop__25Ux-","bbackdrop-below":"fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj"};
+styleInject(css$o);
+
+var css$p = "\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInBgScrollOut-module_backdropInner__3JZBG {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_backdropInner2__q-00L {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_foreground__1ODH9 {\n  min-height: 100vh;\n}\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgScrollOut-module_backdrop-below__2Dbkr {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
+styleInject(css$p);
+
+var css$q = "\n\n.fadeInConceal-module_backdrop__1zaRO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInConceal-module_backdropInner__1AIvq {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInConceal-module_backdrop__1zaRO,\n.fadeInConceal-module_foreground__3giM9 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInConceal-module_backdrop-below__AWyQe,\n.fadeInConceal-module_foreground-below__2z5Op {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","foreground":"fadeInConceal-module_foreground__3giM9","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
+styleInject(css$q);
+
+var css$r = "\n\n.fadeInFadeOut-module_backdrop__Y4xOA {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOut-module_backdropInner__1oRfP {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground__1eleZ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOut-module_foreground-above__249wa,\n.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground-below__3mE6f {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOut-module_bbackdrop__WJjFl::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOut-module_bbackdrop-below__1Htkz::before {\n  visibility: hidden;\n}\n";
+var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f","bbackdrop":"fadeInFadeOut-module_bbackdrop__WJjFl","bbackdrop-below":"fadeInFadeOut-module_bbackdrop-below__1Htkz"};
+styleInject(css$r);
+
+var css$s = "\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOutBg-module_backdropInner__3r_bo {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow__3x7Ki,\n.fadeInFadeOutBg-module_foreground__24f_M {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow-above__3T2K5,\n.fadeInFadeOutBg-module_foreground-below__3pTRc {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOutBg-module_bbackdrop__MVdvw::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOutBg-module_bbackdrop-below__30mpF::before {\n  visibility: hidden;\n}\n";
+var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","foreground":"fadeInFadeOutBg-module_foreground__24f_M","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc","bbackdrop":"fadeInFadeOutBg-module_bbackdrop__MVdvw","bbackdrop-below":"fadeInFadeOutBg-module_bbackdrop-below__30mpF"};
+styleInject(css$s);
+
+var css$t = "\n\n.fadeInScrollOut-module_backdrop__2FhBb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInScrollOut-module_backdropInner__1OfNZ {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_backdropInner2__5bNPT {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_foreground__3h0EX {\n  min-height: 100vh;\n}\n\n.fadeInScrollOut-module_backdrop__2FhBb,\n.fadeInScrollOut-module_foreground__3h0EX {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInScrollOut-module_backdrop-below__3cRLH,\n.fadeInScrollOut-module_foreground-below__1Jcql {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql"};
+styleInject(css$t);
+
+var css$u = ".revealConceal-module_backdrop__dLUhU {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 100%;\n}\n\n.revealConceal-module_backdropInner__2k1Z- {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n";
+var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
+styleInject(css$u);
+
+var css$v = "\n\n.revealFadeOut-module_backdrop___Q1QF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOut-module_backdropInner__17qRn {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOut-module_foreground__1GzBs {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.revealFadeOut-module_foreground-above__3GxOf {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
+styleInject(css$v);
+
+var css$w = "\n\n.revealFadeOutBg-module_backdrop__30OCF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOutBg-module_backdropInner__3v3tM {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOutBg-module_boxShadow__1NZRz {\n  transition: opacity 1s ease, visibility 1s;\n}\n\n.revealFadeOutBg-module_boxShadow-above__2r4ov {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
+styleInject(css$w);
+
+var css$x = ".revealScrollOut-module_backdrop__2yOXd {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.revealScrollOut-module_backdropInner__211p3 {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealScrollOut-module_backdropInner2__v6WqM {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.revealScrollOut-module_foreground__3z-hw {\n}\n";
+var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
+styleInject(css$x);
+
+var css$y = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
+var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
+styleInject(css$y);
+
+var css$z = "\n\n.scrollInFadeOut-module_backdrop__1vXJd {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOut-module_foreground__3Ikxb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOut-module_foreground-above__6ipm- {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOut-module_bbackdrop__2C-bf::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOut-module_bbackdrop-below__3tq0M::before {\n  visibility: hidden;\n}\n";
+var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-","bbackdrop":"scrollInFadeOut-module_bbackdrop__2C-bf","bbackdrop-below":"scrollInFadeOut-module_bbackdrop-below__3tq0M"};
+styleInject(css$z);
+
+var css$A = "\n\n.scrollInFadeOutBg-module_backdrop__zw95c {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOutBg-module_boxShadow__3UxCQ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOutBg-module_boxShadow-above__3kfau {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOutBg-module_bbackdrop__2pO9o::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOutBg-module_bbackdrop-below__1Ky2w::before {\n  visibility: hidden;\n}\n";
+var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau","bbackdrop":"scrollInFadeOutBg-module_bbackdrop__2pO9o","bbackdrop-below":"scrollInFadeOutBg-module_bbackdrop-below__1Ky2w"};
+styleInject(css$A);
+
+var css$B = ".scrollInScrollOut-module_backdrop__XzCge {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n}\n\n.scrollInScrollOut-module_foreground__1yyY8 {\n  margin-top: -100vh;\n}\n";
+var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
+styleInject(css$B);
+
+var styles$l = {
+  fadeInBgConceal: fadeInBgConceal,
+  fadeInBgFadeOut: fadeInBgFadeOut,
+  fadeInBgFadeOutBg: fadeInBgFadeOutBg,
+  fadeInBgScrollOut: fadeInBgScrollOut,
+  fadeInConceal: fadeInConceal,
+  fadeInFadeOut: fadeInFadeOut,
+  fadeInFadeOutBg: fadeInFadeOutBg,
+  fadeInScrollOut: fadeInScrollOut,
+  revealConceal: revealConceal,
+  revealFadeOut: revealFadeOut,
+  revealFadeOutBg: revealFadeOutBg,
+  revealScrollOut: revealScrollOut,
+  scrollInConceal: scrollInConceal,
+  scrollInFadeOut: scrollInFadeOut,
+  scrollInFadeOutBg: scrollInFadeOutBg,
+  scrollInScrollOut: scrollInScrollOut
+};
+var enterTransitions = {
+  fade: 'fadeIn',
+  fadeBg: 'fadeInBg',
+  scroll: 'scrollIn',
+  scrollOver: 'scrollIn',
+  reveal: 'reveal',
+  beforeAfter: 'reveal'
+};
+var exitTransitions = {
+  fade: 'fadeOut',
+  fadeBg: 'fadeOutBg',
+  scroll: 'scrollOut',
+  scrollOver: 'conceal',
+  reveal: 'scrollOut',
+  beforeAfter: 'conceal'
+};
+function getTransitionStyles(section, previousSection, nextSection) {
+  var enterTransition = enterTransitions[section.transition];
+  var exitTransition = exitTransitions[nextSection ? nextSection.transition : 'scroll'];
+  var name = "".concat(enterTransition).concat(capitalize(exitTransition));
+
+  if (!styles$l[name]) {
+    throw new Error("Unknown transition ".concat(name));
+  }
+
+  return styles$l[name];
+}
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function NoOpShadow(props) {
+  return React.createElement("div", null, props.children);
+}
+
+var css$C = ".GradientShadow-module_shadow__2UiDH {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  z-index: 1;\n  transition: opacity 1s ease;\n}\n\n.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadow__2UiDH {\n  background: linear-gradient(to right, #000 0%,rgba(0, 0, 0, 0) 100%);\n}\n\n@media (min-width: 950px) {\n  .GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH {\n    background: linear-gradient(to left, #000 0%,rgba(0, 0, 0, 0) 100%);\n  }\n}\n\n.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadow__2UiDH {\n  background: #000;\n}\n";
+var styles$m = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl"};
+styleInject(css$C);
+
+function GradientShadow(props) {
+  var maxOpacityOverlap = props.motifAreaRect.height / 2;
+  var motifAreaOverlap = Math.min(maxOpacityOverlap, props.motifAreaRect.bottom - props.contentAreaRect.top);
+  var opacityFactor = props.intersecting && props.motifAreaRect.height > 0 ? motifAreaOverlap / maxOpacityOverlap : 1;
+  return React.createElement("div", {
+    className: classnames(styles$m.root, styles$m["align-".concat(props.align)], _defineProperty({}, styles$m.intersecting, props.intersecting))
+  }, React.createElement("div", {
+    className: styles$m.shadow,
+    style: {
+      opacity: props.opacity * Math.round(opacityFactor * 10) / 10
+    }
+  }), props.children);
+}
+GradientShadow.defaultProps = {
+  opacity: 0.7,
+  align: 'left'
+};
+
+function NoOpBoxWrapper(props) {
+  return React.createElement("div", null, props.children);
+}
+
+var css$D = ".GradientBox-module_wrapper__1Jj7N {\n  padding-bottom: 50px;\n}\n\n.GradientBox-module_shadow__2XilX {\n  --background: rgba(0, 0, 0, 0.7);\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX {\n  bottom: -100vh;\n}\n\n.GradientBox-module_gradient__31tJ- {\n  text-shadow: 0px 1px 5px black;\n}\n\n.GradientBox-module_gradient__31tJ- .GradientBox-module_shadow__2XilX {\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.3) 100px,rgba(0, 0, 0, 0.3) 100%);\n}\n\n.GradientBox-module_content__96lDk {\n  position: relative;\n}\n";
+var styles$n = {"wrapper":"GradientBox-module_wrapper__1Jj7N","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","content":"GradientBox-module_content__96lDk"};
+styleInject(css$D);
+
+function GradientBox(props) {
+  var _classNames;
+
+  var padding = props.active ? props.padding : 0;
+  return React.createElement("div", {
+    className: classnames(styles$n.root, (_classNames = {}, _defineProperty(_classNames, styles$n.gradient, padding > 0), _defineProperty(_classNames, styles$n["long"], props.coverInvisibleNextSection), _classNames)),
+    style: {
+      paddingTop: padding
+    }
+  }, React.createElement("div", {
+    className: styles$n.wrapper
+  }, React.createElement("div", {
+    className: classnames(styles$n.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
+    style: {
+      top: padding,
+      opacity: props.opacity
+    }
+  }), React.createElement("div", {
+    className: styles$n.content
+  }, props.children)));
+}
+GradientBox.defaultProps = {
+  opacity: 1
+};
+
+var css$E = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
+var styles$o = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
+styleInject(css$E);
+
+function CardBox(props) {
+  var padding = props.active ? props.padding : 0;
+  return React.createElement("div", {
+    style: {
+      paddingTop: padding
+    }
+  }, React.createElement("div", {
+    className: styles$o.wrapper
+  }, React.createElement("div", {
+    style: {
+      top: padding
+    }
+  }), React.createElement("div", {
+    className: styles$o.content
+  }, props.children)));
+}
+
+var css$F = ".CardBoxWrapper-module_cardBg__154o2 {\n  background: white;\n  color: black;\n  padding: 4%;\n  margin: 0 -4% 50px 0;\n  border-radius: 15px;\n  opacity: 1;\n}\n";
+var styles$p = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
+styleInject(css$F);
+
+function CardBoxWrapper(props) {
+  return React.createElement("div", {
+    className: styles$p.cardBg
+  }, props.children);
+}
+
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var OnScreenContext = React.createContext({
+  center: false,
+  top: false,
+  bottom: false
+});
+function Section(props) {
+  var activityProbeRef = useRef();
+  useOnScreen(activityProbeRef, '-50% 0px -50% 0px', props.onActivate);
+  var ref = useRef();
+  var onScreen = useOnScreen(ref, '0px 0px 0px 0px');
+  useScrollTarget(ref, props.isScrollTarget);
+
+  var _useBoundingClientRec = useBoundingClientRect(),
+      _useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
+      motifAreaRect = _useBoundingClientRec2[0],
+      setMotifAreaRectRect = _useBoundingClientRec2[1];
+
+  var _useDimension = useDimension(),
+      _useDimension2 = _slicedToArray(_useDimension, 2),
+      motifAreaDimension = _useDimension2[0],
+      setMotifAreaDimensionRef = _useDimension2[1];
+
+  var setMotifAreaRefs = useCallback(function (node) {
+    setMotifAreaRectRect(node);
+    setMotifAreaDimensionRef(node);
+  }, [setMotifAreaRectRect, setMotifAreaDimensionRef]);
+
+  var _useBoundingClientRec3 = useBoundingClientRect(props.layout),
+      _useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
+      contentAreaRect = _useBoundingClientRec4[0],
+      setContentAreaRef = _useBoundingClientRec4[1];
+
+  var intersecting = isIntersectingX(motifAreaRect, contentAreaRect);
+  var heightOffset = 0; //(props.backdrop.first || props.transition === 'scrollOver') ? 0 : (window.innerHeight / 3);
+
+  var transitionStyles = getTransitionStyles(props, props.previousSection, props.nextSection);
+  var appearance = {
+    shadow: {
+      background: GradientShadow,
+      foreground: GradientBox,
+      foregroundWrapper: NoOpBoxWrapper
+    },
+    transparent: {
+      background: NoOpShadow,
+      foreground: CardBox,
+      foregroundWrapper: NoOpBoxWrapper
+    },
+    cards: {
+      background: NoOpShadow,
+      foreground: CardBox,
+      foregroundWrapper: CardBoxWrapper
+    }
+  }[props.appearance || 'shadow'];
+  var Shadow = appearance.background;
+  var Box = appearance.foreground;
+  var BoxWrapper = appearance.foregroundWrapper;
+  return React.createElement("section", {
+    ref: ref,
+    className: classnames(styles$k.Section, transitionStyles.section, _defineProperty({}, styles$k.invert, props.invert))
+  }, React.createElement("div", {
+    ref: activityProbeRef,
+    className: styles$k.activityProbe
+  }), React.createElement(Backdrop, Object.assign({}, props.backdrop, {
+    motifAreaRef: setMotifAreaRefs,
+    onScreen: onScreen,
+    offset: Math.max(0, Math.max(1, -contentAreaRect.top / 200)),
+    state: props.state,
+    transitionStyles: transitionStyles,
+    nextSectionOnEnd: props.nextSectionOnEnd,
+    interactive: props.interactiveBackdrop
+  }), function (children) {
+    return props.interactiveBackdrop ? children : React.createElement(Shadow, {
+      align: props.layout,
+      intersecting: intersecting,
+      opacity: props.shadowOpacity >= 0 ? props.shadowOpacity / 100 : 0.7,
+      motifAreaRect: motifAreaRect,
+      contentAreaRect: contentAreaRect
+    }, children);
+  }), React.createElement(Foreground, {
+    transitionStyles: transitionStyles,
+    hidden: props.interactiveBackdrop,
+    disableEnlarge: props.disableEnlarge,
+    state: props.state,
+    heightMode: heightMode(props)
+  }, React.createElement(Box, {
+    active: intersecting,
+    coverInvisibleNextSection: props.nextSection && props.nextSection.transition.startsWith('fade'),
+    transitionStyles: transitionStyles,
+    state: props.state,
+    padding: Math.max(0, motifAreaDimension.top + motifAreaDimension.height - heightOffset),
+    opacity: props.shadowOpacity
+  }, React.createElement(Layout, {
+    items: indexItems(props.foreground),
+    appearance: props.appearance,
+    contentAreaRef: setContentAreaRef,
+    layout: props.layout
+  }, function (children) {
+    return React.createElement(BoxWrapper, null, children);
+  }))));
+}
+
+function indexItems(items) {
+  return items.map(function (item, index) {
+    return _objectSpread$4({}, item, {
+      index: index
+    });
+  });
+}
+
+function heightMode(props) {
+  if (props.fullHeight) {
+    if (props.transition.startsWith('fade') || props.nextSection && props.nextSection.transition.startsWith('fade')) {
+      return 'fullFade';
+    } else {
+      return 'full';
+    }
+  }
+
+  return 'dynamic';
+}
+
+function Chapter(props) {
+  return React.createElement("div", {
+    id: "chapter-".concat(props.permaId)
+  }, renderSections(props.sections, props.currentSectionIndex, props.setCurrentSectionIndex, props.scrollTargetSectionIndex, props.setScrollTargetSectionIndex));
+}
+
+function renderSections(sections, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
+  function _onActivate(sectionIndex) {
+    setCurrentSectionIndex(sectionIndex);
+    setScrollTargetSectionIndex(null);
+  }
+
+  return sections.map(function (section) {
+    return React.createElement(Section, Object.assign({
+      key: section.permaId,
+      state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
+      isScrollTarget: section.sectionIndex === scrollTargetSectionIndex,
+      onActivate: function onActivate() {
+        return _onActivate(section.sectionIndex);
+      }
+    }, section));
+  });
+}
+
+var css$G = "\n\n.Entry-module_Entry__1nDGh {\n  font-family: 'Source Sans Pro', sans-serif;\n  background-color: #000;\n  color: #fff;\n}\n\n.Entry-module_exampleSelect__1uAJs {\n  position: absolute;\n  top: 5px;\n  left: 50%;\n  z-index: 10;\n  transform: translateX(-50%);\n}\n";
+var styles$q = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
+styleInject(css$G);
+
+function Entry(props) {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSectionIndex = _useState2[0],
+      setCurrentSectionIndex = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrollTargetSectionIndex = _useState4[0],
+      setScrollTargetSectionIndex = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      muted = _useState6[0],
+      setMuted = _useState6[1];
+
+  var dispatch = useEntryStateDispatch();
+  var entryStructure = useEntryStructure();
+  useEffect(function () {
+    if (window.parent) {
+      window.addEventListener('message', receive);
+      window.parent.postMessage({
+        type: 'READY'
+      }, window.location.origin);
+    }
+
+    return function () {
+      return window.removeEventListener('message', receive);
+    };
+
+    function receive(message) {
+      if (window.location.href.indexOf(message.origin) === 0 && message.data.type === 'ACTION') {
+        dispatch(message.data.payload);
+      }
+    }
+  }, [dispatch]);
+
+  function scrollToSection(index) {
+    if (index === 'next') {
+      index = currentSectionIndex + 1;
+    }
+
+    setScrollTargetSectionIndex(index);
+  }
+
+  return React.createElement("div", {
+    className: styles$q.Entry
+  }, React.createElement(MutedContext.Provider, {
+    value: {
+      muted: muted,
+      setMuted: setMuted
+    }
+  }, React.createElement(ScrollToSectionContext.Provider, {
+    value: scrollToSection
+  }, renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex))));
+}
+
+function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
+  return entryStructure.map(function (chapter, index) {
+    return React.createElement(Chapter, {
+      key: index,
+      permaId: chapter.permaId,
+      sections: chapter.sections,
+      currentSectionIndex: currentSectionIndex,
+      setCurrentSectionIndex: setCurrentSectionIndex,
+      scrollTargetSectionIndex: scrollTargetSectionIndex,
+      setScrollTargetSectionIndex: setScrollTargetSectionIndex
+    });
+  });
+}
+
+var css$H = "body {\n  margin: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
+styleInject(css$H);
+
+function Root() {
+  return React.createElement(React.Fragment, null, React.createElement(EntryStateProvider, {
+    seed: window.pageflowScrolledSeed
+  }, React.createElement(AppHeader, null), React.createElement(Entry, null)));
+}
+ReactDOM.render(React.createElement(Root, null), document.getElementById('root'));
+
+export default Root;