pageflow 15.1.0 → 15.2.2

data/entry_types/scrolled/package/frontend.js

@@ -1,6 +1,8 @@
 import React, { useRef, useLayoutEffect, useEffect, useReducer, useMemo, useContext, useState, useCallback } from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 import ReactTooltip from 'react-tooltip';
+import I18n from 'i18n-js';
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -59,61 +61,6 @@ 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";
 
@@ -268,6 +215,9 @@ function reducer(state, action) {
 
 function init(items) {
   var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  items = items.filter(function (item) {
+    return item[keyAttribute];
+  });
   return {
     order: items.map(function (item) {
       return item[keyAttribute];
@@ -338,6 +288,7 @@ function useEntryStateDispatch() {
  * metaData // =>
  *   {
  *     id: 5,
+ *     locale: 'en',
  *     shareProviders: {email: false, facebook: true},
  *     share_url: 'http://test.host/test',
  *     credits: 'Credits: Pageflow'
@@ -727,6 +678,43 @@ function useEntryStructure() {
     return chapters;
   }, [entryState]);
 }
+/**
+ * Returns a nested data structure representing the content elements
+ * of section.
+ *
+ * @param {Object} options
+ * @param {number} options.sectionPermaId
+ *
+ * @example
+ *
+ * const section = useSectionStructure({sectionPermaId: 4});
+ * section // =>
+ *   {
+ *     permaId: 4,
+ *     transition: 'scroll',
+ *     foreground: [
+ *       {
+ *         type: 'heading',
+ *         props: {
+ *           children: 'Heading'
+ *         }
+ *       },
+ *       {
+ *         type: 'textBlock',
+ *         props: {
+ *           children: 'Some text'
+ *         }
+ *       }
+ *     ]
+ *   }
+ */
+
+function useSectionStructure(_ref) {
+  var sectionPermaId = _ref.sectionPermaId;
+  var entryState = useEntryState();
+  var section = getItem(entryState.collections, 'sections', sectionPermaId);
+  return sectionStructure(entryState.collections, section);
+}
 
 function sectionStructure(collections, section) {
   return section && _objectSpread$1({
@@ -736,6 +724,7 @@ function sectionStructure(collections, section) {
       return item.sectionId === section.id;
     }).map(function (item) {
       return {
+        id: item.id,
         type: item.typeName,
         position: item.configuration.position,
         props: item.configuration
@@ -813,6 +802,9 @@ function pad(string, size) {
  *     urls: {
  *       large: 'https://...'
  *     },
+ *     configuration: {
+ *       alt: '...'
+ *     }
  *   }
  */
 
@@ -840,9 +832,13 @@ function useFileRights() {
   var entryState = useEntryState();
   var defaultFileRights = entryState.config.defaultFileRights;
   var imageFiles = getItems(entryState.collections, 'imageFiles');
-  var imageFileRights = imageFiles.map(function (imageConfig) {
-    return imageConfig.rights ? imageConfig.rights.trim() : undefined;
-  }).filter(Boolean).join(', ');
+  var imageFileRights = imageFiles.reduce(function (result, imageConfig) {
+    if (imageConfig && imageConfig.rights) {
+      result.push(imageConfig.rights.trim());
+    }
+
+    return result;
+  }, []).filter(Boolean).join(', ');
   var fileRights = !!imageFileRights ? imageFileRights : defaultFileRights.trim();
   var fileRightsString = !!fileRights ? 'Bildrechte: ' + fileRights : '';
   return fileRightsString;
@@ -923,8 +919,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css = "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  top: 12px;\n  left: 15px;\n  width: 80px;\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_navigationTooltip__1EvCy {\n  opacity: 1 !important;\n  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\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_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 = {"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","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","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"};
+var css = "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_contextIcons__23I_3 {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  width: 80px;\n  height: 50px;\n  padding: 0px 12px;\n}\n\n.AppHeader-module_contextIcon__157kW {\n  float: right;\n  width: 40px;\n  height: 50px;\n}\n\n.AppHeader-module_wdrLogo__3XGNI {\n  top: 12px;\n  left: 15px;\n  width: 80px;\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_navigationTooltip__1EvCy {\n  opacity: 1 !important;\n  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\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_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: 14%;\n    margin: 0 43%;\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_chapterListItem__28zrc p {\n    margin-top: 0;\n  }\n\n  .AppHeader-module_progressBar__17IVu {\n    height: 10px;\n  }\n}\n";
+var styles = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","contextIcons":"AppHeader-module_contextIcons__23I_3","contextIcon":"AppHeader-module_contextIcon__157kW","wdrLogo":"AppHeader-module_wdrLogo__3XGNI","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA"};
 styleInject(css);
 
 var css$1 = ".HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n  display: none;\n}\n\n.HamburgerIcon-module_burgerMenuIcon__24t-5 {\n  top: 12px;\n  left: 12px;\n  outline: none;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n    display: block;\n  }\n}\n";
@@ -939,7 +935,7 @@ function HamburgerIcon(props) {
   return React.createElement("div", {
     className: styles$1.burgerMenuIconContainer
   }, React.createElement("button", {
-    className: classnames(styles.menuIcon, styles$1.burgerMenuIcon, hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, hamburgerIconStyles['is-active'], !props.mobileNavHidden)),
+    className: classNames(styles.menuIcon, styles$1.burgerMenuIcon, hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, hamburgerIconStyles['is-active'], !props.mobileNavHidden)),
     type: "button",
     onClick: props.onClick
   }, React.createElement("span", {
@@ -949,24 +945,76 @@ function HamburgerIcon(props) {
   }))));
 }
 
-var css$3 = ".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  height: 48px;\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$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5"};
+var css$3 = ".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  height: 50px;\n}\n\n.ChapterLink-module_chapterLink__v5VRl:hover,\n.ChapterLink-module_chapterLinkActive__jl4h5 {\n  color: #e10028;\n}\n\n.ChapterLink-module_summary__17aoW {\n  display: none;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .ChapterLink-module_summary__17aoW {\n    display: block;\n  }\n}";
+var styles$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5","summary":"ChapterLink-module_summary__17aoW"};
 styleInject(css$3);
 
 var css$4 = ".ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n  border-bottom: 3px solid #e10028;\n  width: 200px;\n}\n\n.ChapterLinkTooltip-module_tooltipHeadline__reew_ {\n  margin: 5px 0 0px;\n  color: #e10028;\n}\n\n@media (max-width: 780px) {\n  .ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n    display: none !important;\n  }\n}\n";
 var styles$3 = {"chapterLinkTooltip":"ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw","tooltipHeadline":"ChapterLinkTooltip-module_tooltipHeadline__reew_"};
 styleInject(css$4);
 
+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; }
+function setupI18n(_ref) {
+  var defaultLocale = _ref.defaultLocale,
+      locale = _ref.locale,
+      translations = _ref.translations;
+  I18n.defaultLocale = defaultLocale;
+  I18n.locale = locale;
+  I18n.translations = translations;
+}
+/**
+ * Use translations in frontend elements. Uses the configured locale
+ * of the current entry by default. Note that only translation keys
+ * from the `pageflow_scrolled.public` scope are universally
+ * available.
+ *
+ * to render translations for inline editing controls in the editor
+ * preview, you can pass `"ui"` as `locale` option and use
+ * translations from the `pageflow_scrolled.inline_editing` scope.
+ *
+ * @param {Object} [options]
+ * @param {string} [locale="entry"] -
+ *   Pass `"ui"` to use the locale of the editor interface instead.
+ *
+ * @example
+ * const {t} = useI18n();
+ * t('pageflow_scrolled.public.some.key')
+ *
+ * const {t} = useI18n({locale: 'ui'});
+ * t('pageflow_scrolled.inline_editing.some.key')
+ */
+
+function useI18n() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      scope = _ref2.locale;
+
+  var _useEntryMetadata = useEntryMetadata(),
+      locale = _useEntryMetadata.locale;
+
+  return {
+    t: function t(key, options) {
+      return I18n.t(key, _objectSpread$3({}, options, {
+        locale: scope !== 'ui' && locale
+      }));
+    }
+  };
+}
+
 function ChapterLinkTooltip(props) {
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
   return React.createElement(ReactTooltip, {
     id: props.chapterLinkId,
     type: "light",
     place: "bottom",
     effect: "solid",
-    className: classnames(styles.navigationTooltip, styles$3.chapterLinkTooltip)
+    className: classNames(styles.navigationTooltip, styles$3.chapterLinkTooltip)
   }, React.createElement("div", null, React.createElement("h3", {
     className: styles$3.tooltipHeadline
-  }, "Kapitel ", props.chapterIndex), React.createElement("p", {
+  }, t('pageflow_scrolled.public.navigation.chapter'), " ", props.chapterIndex), React.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.summary
     }
@@ -975,20 +1023,25 @@ function ChapterLinkTooltip(props) {
 
 function ChapterLink(props) {
   return React.createElement("div", null, React.createElement("a", {
-    className: classnames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
+    className: classNames(styles$2.chapterLink, _defineProperty({}, styles$2.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(ChapterLinkTooltip, Object.assign({
+  }, props.title), React.createElement("p", {
+    className: styles$2.summary,
+    dangerouslySetInnerHTML: {
+      __html: props.summary
+    }
+  }), React.createElement(ChapterLinkTooltip, Object.assign({
     chapterIndex: props.chapterIndex,
     chapterLinkId: props.chapterLinkId
   }, props)));
 }
 
-var css$5 = ".LegalInfoMenu-module_infoIcon__1kTnt {\n  top: 12px;\n  right: 55px;\n  width: 26px;\n}\n\n";
+var css$5 = ".LegalInfoMenu-module_infoIcon__1kTnt svg {\n  width: 26px;\n  height: 26px;\n  margin: 12px 0px;\n}\n\n";
 var styles$4 = {"infoIcon":"LegalInfoMenu-module_infoIcon__1kTnt"};
 styleInject(css$5);
 
@@ -1023,7 +1076,7 @@ var InfoIcon = (function (_ref) {
   }));
 });
 
-var css$6 = ".LegalInfoTooltip-module_legalInfoTooltip__ChzOS {\n  width: 200px;\n  max-width: 200px;\n  text-align: left;\n  margin-top: 12px !important;\n  margin-bottom: 12px !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS:after {\n  left: 90% !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS p {\n  margin: 0 0 0.5em;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS a {\n  color: #e10028;\n}\n";
+var css$6 = ".LegalInfoTooltip-module_legalInfoTooltip__ChzOS {\n  width: 200px;\n  max-width: 200px;\n  text-align: left;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS:after {\n  left: 90% !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS p {\n  margin: 0 0 0.5em;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS a {\n  color: #e10028;\n}\n";
 var styles$5 = {"legalInfoTooltip":"LegalInfoTooltip-module_legalInfoTooltip__ChzOS"};
 styleInject(css$6);
 
@@ -1050,10 +1103,9 @@ function LegalInfoTooltip() {
     globalEventOff: 'click',
     clickable: true,
     offset: {
-      bottom: 5,
       right: -97
     },
-    className: classnames(styles.navigationTooltip, styles$5.legalInfoTooltip)
+    className: classNames(styles.navigationTooltip, styles$5.legalInfoTooltip)
   }, React.createElement("div", {
     onMouseLeave: function onMouseLeave() {
       ReactTooltip.hide();
@@ -1067,7 +1119,7 @@ function LegalInfoTooltip() {
 
 function LegalInfoMenu(props) {
   return React.createElement("div", null, React.createElement("a", {
-    className: classnames(styles.menuIcon, styles$4.infoIcon),
+    className: classNames(styles.contextIcon, styles$4.infoIcon),
     "data-tip": true,
     "data-for": 'legalInfoTooltip',
     onMouseEnter: function onMouseEnter() {
@@ -1076,7 +1128,7 @@ function LegalInfoMenu(props) {
   }, React.createElement(InfoIcon, null)), React.createElement(LegalInfoTooltip, null));
 }
 
-var css$7 = ".SharingMenu-module_shareIcon__1AlDL {\n  top: 5px;\n  right: 10px;\n  width: 40px;\n}";
+var css$7 = ".SharingMenu-module_shareIcon__1AlDL svg {\n  width: 40px;\n  height: 40px;\n  margin: 5px 0px;\n}";
 var styles$6 = {"shareIcon":"SharingMenu-module_shareIcon__1AlDL"};
 styleInject(css$7);
 
@@ -1109,7 +1161,7 @@ var ShareIcon = (function (_ref) {
   }));
 });
 
-var css$8 = "header .share svg {\n  fill: rgb(0, 55, 90);\n}\n\nheader .share:hover svg {\n  fill: #e10028;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv {\n  width: 160px;\n  padding: 0 !important;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv:after {\n  left: 90% !important;\n}\n\n.SharingTooltip-module_shareLinkContainer__2MnKN {\n  float: left;\n  width: 80px;\n  height: 60px;\n  cursor: pointer;\n  color: transparent;\n  text-align: center;\n}\n\n.SharingTooltip-module_shareLink__2ySSX {\n  position: relative;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n}\n\n.SharingTooltip-module_shareLink__2ySSX:hover {\n  color: #e10028;\n}\n\n.SharingTooltip-module_shareIcon__3igrs {\n  width: 80px;\n  height: 25px;\n  margin-top: 5px;\n  margin-bottom: 3px;\n}\n";
+var css$8 = "header .share svg {\n  fill: rgb(0, 55, 90);\n}\n\nheader .share:hover svg {\n  fill: #e10028;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv {\n  width: 160px;\n  padding: 0 !important;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv:after {\n  left: 90% !important;\n}\n\n.SharingTooltip-module_shareLinkContainer__2MnKN {\n  display: inline-block;\n  width: 80px;\n  height: 60px;\n  cursor: pointer;\n  color: transparent;\n  text-align: center;\n}\n\n.SharingTooltip-module_shareLink__2ySSX {\n  position: relative;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n}\n\n.SharingTooltip-module_shareLink__2ySSX:hover {\n  color: #e10028;\n}\n\n.SharingTooltip-module_shareIcon__3igrs {\n  width: 80px;\n  height: 25px;\n  margin-top: 5px;\n  margin-bottom: 3px;\n}\n";
 var styles$7 = {"sharingTooltip":"SharingTooltip-module_sharingTooltip__1cljv","shareLinkContainer":"SharingTooltip-module_shareLinkContainer__2MnKN","shareLink":"SharingTooltip-module_shareLink__2ySSX","shareIcon":"SharingTooltip-module_shareIcon__3igrs"};
 styleInject(css$8);
 
@@ -1124,7 +1176,7 @@ function SharingTooltip() {
         key: shareProvider.name,
         className: styles$7.shareLinkContainer
       }, React.createElement("a", {
-        className: classnames('share', styles$7.shareLink),
+        className: classNames('share', styles$7.shareLink),
         href: shareProvider.url.replace('%{url}', shareUrl),
         target: '_blank'
       }, React.createElement(Icon, {
@@ -1143,7 +1195,7 @@ function SharingTooltip() {
     offset: {
       right: -64
     },
-    className: classnames(styles.navigationTooltip, styles$7.sharingTooltip)
+    className: classNames(styles.navigationTooltip, styles$7.sharingTooltip)
   }, React.createElement("div", {
     onMouseLeave: function onMouseLeave() {
       ReactTooltip.hide();
@@ -1152,14 +1204,20 @@ function SharingTooltip() {
 }
 
 function SharingMenu() {
-  return React.createElement("div", null, React.createElement("a", {
-    className: classnames(styles.menuIcon, styles$6.shareIcon),
-    "data-tip": true,
-    "data-for": 'sharingTooltip',
-    onMouseEnter: function onMouseEnter() {
-      ReactTooltip.hide();
-    }
-  }, React.createElement(ShareIcon, null)), React.createElement(SharingTooltip, null));
+  var shareProviders = useShareProviders();
+
+  if (shareProviders.length > 0) {
+    return React.createElement("div", null, React.createElement("a", {
+      className: classNames(styles.contextIcon, styles$6.shareIcon),
+      "data-tip": true,
+      "data-for": 'sharingTooltip',
+      onMouseEnter: function onMouseEnter() {
+        ReactTooltip.hide();
+      }
+    }, React.createElement(ShareIcon, null)), React.createElement(SharingTooltip, null));
+  } else {
+    return null;
+  }
 }
 
 function _extends$8() {
@@ -1252,7 +1310,9 @@ function AppHeader(props) {
   }
 
   function renderChapterLinks(chapters) {
-    return chapters.map(function (chapter, index) {
+    return chapters.filter(function (chapterConfiguration) {
+      return chapterConfiguration.title && chapterConfiguration.summary;
+    }).map(function (chapter, index) {
       var chapterIndex = index + 1;
       var chapterLinkId = "chapterLink".concat(chapterIndex);
       return React.createElement("li", {
@@ -1267,21 +1327,23 @@ function AppHeader(props) {
     });
   }
   return React.createElement("header", {
-    className: classnames(styles.navigationBar, _defineProperty({}, styles.navigationBarExpanded, navExpanded))
+    className: classNames(styles.navigationBar, _defineProperty({}, styles.navigationBarExpanded, navExpanded))
   }, React.createElement("div", {
     className: styles.navigationBarContentWrapper
   }, React.createElement(HamburgerIcon, {
     onClick: handleBurgerMenuClick,
     mobileNavHidden: mobileNavHidden
   }), React.createElement(WDRlogo, {
-    className: classnames(styles.menuIcon, styles.wdrLogo)
+    className: classNames(styles.menuIcon, styles.wdrLogo)
   }), React.createElement("nav", {
-    className: classnames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
+    className: classNames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
     role: "navigation",
     ref: ref
   }, React.createElement("ul", {
     className: styles.chapterList
-  }, renderChapterLinks(chapters))), React.createElement(LegalInfoMenu, null), React.createElement(SharingMenu, null)), React.createElement("div", {
+  }, renderChapterLinks(chapters))), React.createElement("div", {
+    className: classNames(styles.contextIcons)
+  }, React.createElement(SharingMenu, null), React.createElement(LegalInfoMenu, null))), React.createElement("div", {
     className: styles.progressBar,
     onMouseEnter: handleProgressBarMouseEnter
   }, React.createElement("span", {
@@ -1359,7 +1421,7 @@ function Image(props) {
     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$9.root, _defineProperty({}, styles$9.portrait, props.mobile)),
+      className: classNames(styles$9.root, _defineProperty({}, styles$9.portrait, props.mobile)),
       role: "img",
       style: {
         backgroundImage: "url(".concat(image.urls.large, ")"),
@@ -1420,11 +1482,16 @@ function Video(props) {
   var videoRef = useRef();
   var state = props.state;
   var mutedSettings = useContext(MutedContext);
-  var mediaOff = mutedSettings.mediaOff;
   useEffect(function () {
     var video = videoRef.current;
 
-    if (video && !mediaOff) {
+    if (!video) {
+      return;
+    }
+
+    video.muted = mutedSettings.muted;
+
+    if (!mutedSettings.mediaOff && props.autoplay !== false) {
       if (state === 'active') {
         if (video.readyState > 0) {
           video.play();
@@ -1442,21 +1509,21 @@ function Video(props) {
     function play() {
       video.play();
     }
-  }, [state, videoRef, mediaOff]);
+  }, [state, mutedSettings.mediaOff, mutedSettings.muted, props.autoplay]);
   return React.createElement("div", {
     className: styles$a.root
   }, React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
     return React.createElement("video", {
+      role: "img",
       src: videoUrl,
       ref: videoRef,
-      className: classnames(styles$a.video, _defineProperty({}, styles$a.backdrop, !props.interactive)),
+      className: classNames(styles$a.video, _defineProperty({}, styles$a.backdrop, !props.interactive)),
       controls: props.controls,
       playsInline: true,
       onEnded: function onEnded() {
         return props.nextSectionOnEnd && scrollToSection('next');
       },
       loop: !props.interactive,
-      muted: mutedSettings.muted,
       poster: posterUrl
     });
   }));
@@ -1495,7 +1562,7 @@ var MotifArea = React.forwardRef(function MotifArea(props, ref) {
 
   return React.createElement("div", {
     ref: ref,
-    className: classnames(styles$c.root, _defineProperty({}, styles$c.active, props.active)),
+    className: classNames(styles$c.root, _defineProperty({}, styles$c.active, props.active)),
     style: position(props, image),
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave
@@ -1675,1118 +1742,391 @@ var videos = {
   }
 };
 
-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 css$e = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
+var styles$d = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
+styleInject(css$e);
 
-  var requestAnimationFrame = globalWindow.requestAnimationFrame || globalWindow.mozRequestAnimationFrame || globalWindow.webkitRequestAnimationFrame || function (fn) {
-    return globalWindow.setTimeout(fn, 20);
-  };
+function Backdrop(props) {
+  var _useDimension = useDimension(),
+      _useDimension2 = _slicedToArray(_useDimension, 2),
+      containerDimension = _useDimension2[0],
+      setContainerRef = _useDimension2[1];
 
-  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;
+  return React.createElement("div", {
+    className: classNames(styles$d.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$d.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: {}
+};
 
-    if (isCollectionTyped) {
-      for (; i < j; i++) {
-        callback(elements[i]);
-      }
-    } else {
-      callback(elements);
-    }
+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 {
+    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
+    }));
   }
+}
 
-  function getElementSize(element) {
-    if (!element.getBoundingClientRect) {
-      return {
-        width: element.offsetWidth,
-        height: element.offsetHeight
-      };
+var Context$1 = React.createContext({});
+function EditorStateProvider(props) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selection = _useState2[0],
+      setSelectionState = _useState2[1];
+
+  var setSelection = useCallback(function (selection) {
+    if (window.parent !== window) {
+      window.parent.postMessage({
+        type: 'SELECTED',
+        payload: selection || {}
+      }, window.location.origin);
     }
 
-    var rect = element.getBoundingClientRect();
-    return {
-      width: Math.round(rect.width),
-      height: Math.round(rect.height)
-    };
-  }
+    setSelectionState(selection);
+  }, []);
+  var value = useMemo(function () {
+    return props.active ? {
+      selection: selection,
+      setSelection: setSelection
+    } : {};
+  }, [props.active, setSelection, selection]);
+  return React.createElement(Context$1.Provider, {
+    value: value
+  }, props.children);
+}
+function useEditorSelection(options) {
+  var _useContext = useContext(Context$1),
+      selection = _useContext.selection,
+      setSelection = _useContext.setSelection;
+
+  var resetSelection = useCallback(function () {
+    setSelection(null);
+  }, [setSelection]);
+  var select = useCallback(function (selection) {
+    setSelection(selection || options);
+  }, [setSelection, options]);
+  return useMemo(function () {
+    return setSelection ? {
+      isSelected: selection && options && selection.id === options.id && selection.type === options.type,
+      isSelectable: !selection || selection.type === 'contentElement',
+      select: select,
+      resetSelection: resetSelection
+    } : {};
+  }, [options, selection, setSelection, select, resetSelection]);
+}
 
-  function setStyle(element, style) {
-    Object.keys(style).forEach(function (key) {
-      element.style[key] = style[key];
-    });
-  }
+var css$f = ".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$e = {"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$f);
 
-  var ResizeSensor = function ResizeSensor(element, callback) {
-    function EventQueue() {
-      var q = [];
+function Foreground(props) {
+  var _useEditorSelection = useEditorSelection(),
+      resetSelection = _useEditorSelection.resetSelection;
 
-      this.add = function (ev) {
-        q.push(ev);
-      };
+  return React.createElement("div", {
+    className: className(props),
+    onClick: resetSelection
+  }, props.children);
+}
 
-      var i, j;
+function className(props) {
+  var _classNames;
 
-      this.call = function (sizeInfo) {
-        for (i = 0, j = q.length; i < j; i++) {
-          q[i].call(this, sizeInfo);
-        }
-      };
+  return classNames(styles$e.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$e["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$e.hidden, props.hidden), _defineProperty(_classNames, styles$e.enlarge, props.hidden && !props.disableEnlarge), _classNames));
+}
 
-      this.remove = function (ev) {
-        var newQueue = [];
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }
 
-        for (i = 0, j = q.length; i < j; i++) {
-          if (q[i] !== ev) newQueue.push(q[i]);
-        }
+    return arr2;
+  }
+}
 
-        q = newQueue;
-      };
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
 
-      this.length = function () {
-        return q.length;
-      };
-    }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
 
-    function attachResizeEvent(element, resized) {
-      if (!element) return;
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
 
-      if (element.resizedAttached) {
-        element.resizedAttached.add(resized);
-        return;
-      }
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
 
-      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';
-      }
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
 
-      var 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;
-      };
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
 
-      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;
-          }
-        }
+/**
+ * Register new types of content elements.
+ * @name frontend_contentElementTypes
+ */
+var ContentElementTypeRegistry =
+/*#__PURE__*/
+function () {
+  function ContentElementTypeRegistry() {
+    _classCallCheck(this, ContentElementTypeRegistry);
 
-        resetExpandShrink();
-      };
+    this.types = {};
+  }
+  /**
+   * Register a new type of content element.
+   *
+   * @param {string} typeName - Name of the content element type.
+   * @param {Object} options
+   * @param {React.Component} options.component
+   * @memberof frontend_contentElementTypes
+   *
+   * @example
+   *
+   * // frontend.js
+   *
+   * import {frontend} from 'pageflow-scrolled/frontend';
+   * import {InlineImage} from './InlineImage';
+   *
+   * frontend.contentElementTypes.register('inlineImage', {
+   *   component: InlineImage
+   * });
+   */
+
+
+  _createClass(ContentElementTypeRegistry, [{
+    key: "register",
+    value: function register(typeName, options) {
+      this.types[typeName] = options;
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent(typeName) {
+      if (!this.types[typeName]) {
+        throw new Error("Unknown content element type name \"".concat(typeName, "\""));
+      }
 
-      element.resizeSensor.resetSensor = reset;
+      return this.types[typeName].component;
+    }
+  }]);
 
-      var onResized = function onResized() {
-        rafId = 0;
-        if (!dirty) return;
-        lastWidth = size.width;
-        lastHeight = size.height;
+  return ContentElementTypeRegistry;
+}();
 
-        if (element.resizedAttached) {
-          element.resizedAttached.call(size);
-        }
-      };
+var api = {
+  contentElementTypes: new ContentElementTypeRegistry()
+};
 
-      var onScroll = function onScroll() {
-        size = getElementSize(element);
-        dirty = size.width !== lastWidth || size.height !== lastHeight;
+var css$g = ".ContentElement-module_outer__3ZsNV {\n  position: relative;\n}\n\n.ContentElement-module_selectable__2oRzN {\n  position: relative;\n}\n\n.ContentElement-module_selectable__2oRzN:after {\n  content: '';\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  right: -5px;\n  bottom: -5px;\n}\n\n.ContentElement-module_bl__2w5xM,\n.ContentElement-module_br__3v-_l,\n.ContentElement-module_tr__l_gbk,\n.ContentElement-module_tl__NrB8G {\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  opacity: 0;\n}\n\n.ContentElement-module_selected__1uFZP .ContentElement-module_bl__2w5xM,\n.ContentElement-module_selected__1uFZP .ContentElement-module_br__3v-_l,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tr__l_gbk,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tl__NrB8G {\n  border-width: 3px\n}\n\n.ContentElement-module_selected__1uFZP .ContentElement-module_bl__2w5xM,\n.ContentElement-module_selected__1uFZP .ContentElement-module_br__3v-_l,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tr__l_gbk,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tl__NrB8G,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_bl__2w5xM,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_br__3v-_l,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_tr__l_gbk,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_tl__NrB8G {\n  opacity: 0.8;\n}\n\n.ContentElement-module_bl__2w5xM {\n  bottom: -6px;\n  left: -6px;\n  border-bottom: solid 1px currentColor;\n  border-left: solid 1px currentColor;\n}\n\n.ContentElement-module_br__3v-_l {\n  bottom: -6px;\n  right: -6px;\n  border-bottom: solid 1px currentColor;\n  border-right: solid 1px currentColor;\n}\n\n.ContentElement-module_tr__l_gbk {\n  top: -6px;\n  right: -6px;\n  border-top: solid 1px currentColor;\n  border-right: solid 1px currentColor;\n}\n\n.ContentElement-module_tl__NrB8G {\n  top: -6px;\n  left: -6px;\n  border-top: solid 1px currentColor;\n  border-left: solid 1px currentColor;\n}\n\n.ContentElement-module_selected__1uFZP:hover:after,\n.ContentElement-module_selected__1uFZP:after {\n  border: solid 1px currentColor;\n  opacity: 0.8;\n  pointer-events: none;\n}\n";
+var styles$f = {"selectionWidth":"1px","selectionPadding":"-6px","selectionPadding2":"-5px","outer":"ContentElement-module_outer__3ZsNV","selectable":"ContentElement-module_selectable__2oRzN","bl":"ContentElement-module_bl__2w5xM","br":"ContentElement-module_br__3v-_l","tr":"ContentElement-module_tr__l_gbk","tl":"ContentElement-module_tl__NrB8G","selected":"ContentElement-module_selected__1uFZP"};
+styleInject(css$g);
 
-        if (dirty && !rafId) {
-          rafId = requestAnimationFrame(onResized);
-        }
+var css$h = "\n\n.InsertContentElementIndicator-module_root__2KRRn {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  text-align: center;\n  cursor: pointer;\n  opacity: 0;\n}\n\n.InsertContentElementIndicator-module_before__1EEFz {\n  bottom: 100%;\n}\n\n.InsertContentElementIndicator-module_after__2YmaD {\n  top: 100%;\n}\n\n.InsertContentElementIndicator-module_root__2KRRn:hover {\n  opacity: 1;\n}\n\n.InsertContentElementIndicator-module_box__3EIMv svg {\n  vertical-align: middle;\n  oopacity: 0.8;\n}\n\n.InsertContentElementIndicator-module_bar__c-Ifz {\n  background-color: currentColor;\n  position: absolute;\n  top: 50%;\n  height: 1px;\n  oopacity: 0.5;\n  width: calc(50% - 15px);\n}\n\n.InsertContentElementIndicator-module_left__13U3P {\n  left: -6px;\n}\n\n.InsertContentElementIndicator-module_right__lSfoH {\n  right: -6px;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q.InsertContentElementIndicator-module_root__2KRRn {\n  opacity: 0.8;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_right__lSfoH,\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_left__13U3P {\n  width: 13px;\n  background-color: currentColor;\n  oopacity: 0.8;\n  height: 5px;\n  top: calc(50% - 2px);\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_right__lSfoH {\n  right: -6px;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_left__13U3P {\n  left: -6px;\n}\n\n.InsertContentElementIndicator-module_middle__2TTQX {\n  opacity: 0;\n  width: 100%;\n  left: 0;\n  top: 50%;\n  height: 1px;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_middle__2TTQX {\n  opacity: 1;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_box__3EIMv {\n  opacity: 0;\n}\n";
+var styles$g = {"selectionColor":"#1c86fe","backgroundColor":"rgba(0, 0, 0, 0.8)","borderColor":"rgba(255, 255, 255, 0.2)","root":"InsertContentElementIndicator-module_root__2KRRn","before":"InsertContentElementIndicator-module_before__1EEFz","after":"InsertContentElementIndicator-module_after__2YmaD","box":"InsertContentElementIndicator-module_box__3EIMv","bar":"InsertContentElementIndicator-module_bar__c-Ifz","left":"InsertContentElementIndicator-module_left__13U3P InsertContentElementIndicator-module_bar__c-Ifz","right":"InsertContentElementIndicator-module_right__lSfoH InsertContentElementIndicator-module_bar__c-Ifz","selected":"InsertContentElementIndicator-module_selected__3sk0q","middle":"InsertContentElementIndicator-module_middle__2TTQX InsertContentElementIndicator-module_bar__c-Ifz"};
+styleInject(css$h);
 
-        reset();
-      };
+function _extends$9() {
+  _extends$9 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-      var addEvent = function addEvent(el, name, cb) {
-        if (el.attachEvent) {
-          el.attachEvent('on' + name, cb);
-        } else {
-          el.addEventListener(name, cb);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
         }
-      };
+      }
+    }
 
-      addEvent(expand, 'scroll', onScroll);
-      addEvent(shrink, 'scroll', onScroll); // Fix for custom Elements
+    return target;
+  };
 
-      requestAnimationFrame(reset);
-    }
+  return _extends$9.apply(this, arguments);
+}
+var PlusIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-    forEachElement(element, function (elem) {
-      attachResizeEvent(elem, callback);
-    });
+  return React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, props), React.createElement("path", {
+    d: "M256 0C114.844 0 0 114.839 0 256s114.844 256 256 256 256-114.839 256-256S397.156 0 256 0zm133.594 272.699H272.699v116.895c0 9.225-7.48 16.699-16.699 16.699-9.219 0-16.699-7.475-16.699-16.699V272.699H122.406c-9.219 0-16.699-7.475-16.699-16.699 0-9.225 7.48-16.699 16.699-16.699h116.895V122.406c0-9.225 7.48-16.699 16.699-16.699 9.219 0 16.699 7.475 16.699 16.699v116.895h116.895c9.219 0 16.699 7.475 16.699 16.699.001 9.225-7.48 16.699-16.699 16.699z"
+  }));
+});
 
-    this.detach = function (ev) {
-      ResizeSensor.detach(element, ev);
-    };
+function InsertContentElementIndicator(_ref) {
+  var contentElementId = _ref.contentElementId,
+      selected = _ref.selected,
+      position = _ref.position;
 
-    this.reset = function () {
-      element.resizeSensor.resetSensor();
-    };
-  };
+  var _useEditorSelection = useEditorSelection({
+    id: contentElementId,
+    type: position
+  }),
+      isSelected = _useEditorSelection.isSelected,
+      select = _useEditorSelection.select;
 
-  ResizeSensor.reset = function (element) {
-    forEachElement(element, function (elem) {
-      elem.resizeSensor.resetSensor();
-    });
-  };
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
 
-  ResizeSensor.detach = function (element, ev) {
-    forEachElement(element, function (elem) {
-      if (!elem) return;
+  function handleClick(event) {
+    event.stopPropagation();
+    select();
+  }
 
-      if (elem.resizedAttached && typeof ev === "function") {
-        elem.resizedAttached.remove(ev);
-        if (elem.resizedAttached.length()) return;
-      }
+  return React.createElement("div", {
+    className: classNames(styles$g.root, styles$g[position], _defineProperty({}, styles$g.selected, isSelected)),
+    title: t('pageflow_scrolled.inline_editing.insert_content_element'),
+    onClick: handleClick
+  }, React.createElement("div", {
+    className: styles$g.box
+  }, React.createElement(PlusIcon, {
+    width: 20,
+    height: 20,
+    fill: "currentColor"
+  })), React.createElement("div", {
+    className: styles$g.left
+  }), React.createElement("div", {
+    className: styles$g.right
+  }), React.createElement("div", {
+    className: styles$g.middle
+  }));
+}
 
-      if (elem.resizeSensor) {
-        if (elem.contains(elem.resizeSensor)) {
-          elem.removeChild(elem.resizeSensor);
-        }
+function ContentElement(props) {
+  var Component = api.contentElementTypes.getComponent(props.type);
 
-        delete elem.resizeSensor;
-        delete elem.resizedAttached;
-      }
-    });
-  };
+  var _useEditorSelection = useEditorSelection({
+    id: props.id,
+    type: 'contentElement'
+  }),
+      isSelected = _useEditorSelection.isSelected,
+      isSelectable = _useEditorSelection.isSelectable,
+      select = _useEditorSelection.select,
+      resetSelection = _useEditorSelection.resetSelection;
 
-  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]);
-            }
-          }
-        }
+  if (select) {
+    var _classNames;
+
+    return React.createElement("div", {
+      className: classNames(styles$f.outer)
+    }, props.first && React.createElement(InsertContentElementIndicator, {
+      position: "before",
+      contentElementId: props.id
+    }), React.createElement("div", {
+      className: classNames((_classNames = {}, _defineProperty(_classNames, styles$f.selected, isSelected), _defineProperty(_classNames, styles$f.selectable, isSelectable), _classNames)),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        isSelectable ? select() : resetSelection();
       }
-    });
-    document.addEventListener("DOMContentLoaded", function (event) {
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
+    }, React.createElement(Component, {
+      sectionProps: props.sectionProps,
+      configuration: props.itemProps,
+      contentElementId: props.id
+    }), React.createElement("div", {
+      className: styles$f.tl
+    }), React.createElement("div", {
+      className: styles$f.bl
+    }), React.createElement("div", {
+      className: styles$f.tr
+    }), React.createElement("div", {
+      className: styles$f.br
+    })), React.createElement(InsertContentElementIndicator, {
+      position: "after",
+      contentElementId: props.id
+    }));
+  } else {
+    return React.createElement(Component, {
+      sectionProps: props.sectionProps,
+      configuration: props.itemProps
     });
   }
+}
 
-  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$e = ".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$d = {"container":"BeforeAfter-module_container__38Dru","shake":"BeforeAfter-module_shake__3iLe8"};
-styleInject(css$e);
-
-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$d.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$f = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
-var styles$e = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
-styleInject(css$f);
-
-function Backdrop(props) {
-  var _useDimension = useDimension(),
-      _useDimension2 = _slicedToArray(_useDimension, 2),
-      containerDimension = _useDimension2[0],
-      setContainerRef = _useDimension2[1];
-
-  return React.createElement("div", {
-    className: classnames(styles$e.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$e.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$g = ".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$f = {"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$g);
-
-function Foreground(props) {
-  return React.createElement("div", {
-    className: className(props)
-  }, props.children);
-}
-
-function className(props) {
-  var _classNames;
-
-  return classnames(styles$f.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$f["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$f.hidden, props.hidden), _defineProperty(_classNames, styles$f.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$h = "\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$g = {"text-l":"40px","text-xl":"66px","text-2xl":"110px","Heading":"Heading-module_Heading__1YSiy","first":"Heading-module_first__1yPxD"};
-styleInject(css$h);
-
-function Heading(props) {
-  return React.createElement("h1", {
-    className: classnames(styles$g.Heading, _defineProperty({}, styles$g.first, props.first)),
-    style: props.style
-  }, props.children);
-}
-
-var css$i = "\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$h = {"text-base":"22px","TextBlock":"TextBlock-module_TextBlock__5Zpj7","dummy":"TextBlock-module_dummy__3W5ls"};
-styleInject(css$i);
-
-function TextBlock(props) {
-  return React.createElement("div", {
-    className: classnames(styles$h.TextBlock, _defineProperty({}, styles$h.dummy, props.dummy)),
-    style: props.style,
-    dangerouslySetInnerHTML: {
-      __html: props.children
-    }
-  });
-}
-
-var css$j = ".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$i = {"text-base":"22px","root":"InlineCaption-module_root__1R8Ib"};
-styleInject(css$j);
-
-function InlineCaption(props) {
-  if (props.text) {
-    return React.createElement("div", {
-      className: styles$i.root
-    }, props.text);
-  } else {
-    return null;
-  }
-}
-
-var css$k = ".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$j = {"root":"InlineImage-module_root__1DvUb","container":"InlineImage-module_container__Pui7E","spacer":"InlineImage-module_spacer__2rMkE","inner":"InlineImage-module_inner__2AMK-"};
-styleInject(css$k);
-
-function InlineImage(props) {
-  return React.createElement("div", {
-    className: classnames(styles$j.root)
-  }, React.createElement("div", {
-    className: styles$j.container
-  }, React.createElement("div", {
-    className: styles$j.spacer
-  }, React.createElement("div", {
-    className: styles$j.inner
-  }, React.createElement(Image, props)))), React.createElement(InlineCaption, {
-    text: props.caption
-  }));
-}
-
-var css$l = ".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$k = {"root":"InlineVideo-module_root__2UD3D","inner":"InlineVideo-module_inner__H81_g"};
-styleInject(css$l);
-
-function InlineVideo(props) {
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
-  return React.createElement("div", {
-    ref: ref,
-    className: classnames(styles$k.root)
-  }, React.createElement("div", {
-    style: {
-      paddingTop: props.wideFormat ? '41.15%' : '56.25%'
-    }
-  }, React.createElement("div", {
-    className: styles$k.inner
-  }, React.createElement(Video, Object.assign({}, props, {
-    state: onScreen ? 'active' : 'inactive',
-    interactive: true
-  })))));
-}
-
-var css$m = ".InlineBeforeAfter-module_root__2O9F8 {\n  position: relative;\n  margin: 0 auto;\n}\n";
-var styles$l = {"root":"InlineBeforeAfter-module_root__2O9F8"};
-styleInject(css$m);
-
-function InlineBeforeAfter(props) {
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
-  return React.createElement("div", {
-    ref: ref,
-    className: styles$l.root
-  }, React.createElement(BeforeAfter, Object.assign({}, props, {
-    state: onScreen ? 'active' : 'inactive'
-  })));
-}
-
-var css$n = ".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$m = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__1sAiH"};
-styleInject(css$n);
-
-function UnmuteButton() {
-  return React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
-    return React.createElement("div", {
-      className: classnames(styles$m.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) {
+function ContentElements(props) {
   return React.createElement(React.Fragment, null, props.items.map(function (item, index) {
-    return props.children(item, React.createElement(ForegroundItem, {
-      key: index,
+    return props.children(item, React.createElement(ContentElement, {
+      key: item.id,
+      id: item.id,
       type: item.type,
+      first: index === 0,
       position: item.position,
-      itemProps: item.props
+      itemProps: item.props,
+      sectionProps: props.sectionProps
     }));
   }));
 }
-ForegroundItems.defaultProps = {
+ContentElements.defaultProps = {
   children: function children(item, child) {
     return child;
   }
 };
 
-var css$o = ".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$n = {"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$o);
+var css$i = ".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$h = {"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$i);
 
 var availablePositions = ['inline', 'sticky', 'full'];
 function TwoColumn(props) {
   return React.createElement("div", {
-    className: classnames(styles$n.root, styles$n[props.align])
+    className: classNames(styles$h.root, styles$h[props.align])
   }, React.createElement("div", {
-    className: styles$n.inline,
+    className: styles$h.inline,
     ref: props.contentAreaRef
   }), renderItems(props));
 }
@@ -2798,7 +2138,7 @@ function renderItems(props) {
   return groupItemsByPosition(props.items).map(function (group, index) {
     return React.createElement("div", {
       key: index,
-      className: classnames(styles$n.group, styles$n["group-".concat(group.position)])
+      className: classNames(styles$h.group, styles$h["group-".concat(group.position)])
     }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'));
   });
 }
@@ -2806,8 +2146,9 @@ function renderItems(props) {
 function renderItemGroup(props, group, position) {
   if (group[position].length) {
     return React.createElement("div", {
-      className: styles$n[position]
-    }, props.children(React.createElement(ForegroundItems, {
+      className: styles$h[position]
+    }, props.children(React.createElement(ContentElements, {
+      sectionProps: props.sectionProps,
       items: group[position]
     })));
   }
@@ -2835,33 +2176,34 @@ function groupItemsByPosition(items) {
   return groups;
 }
 
-var css$p = ".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$o = {"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$p);
+var css$j = ".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$i = {"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$j);
 
 function Center(props) {
   return React.createElement("div", {
-    className: classnames(styles$o.root)
+    className: classNames(styles$i.root)
   }, React.createElement("div", {
     ref: props.contentAreaRef
-  }), React.createElement(ForegroundItems, {
+  }), React.createElement(ContentElements, {
+    sectionProps: props.sectionProps,
     items: props.items
   }, function (item, child) {
     return React.createElement("div", {
       key: item.index,
-      className: classnames(styles$o.outer, styles$o["outer-".concat(item.position)])
+      className: classNames(styles$i.outer, styles$i["outer-".concat(item.position)])
     }, React.createElement("div", {
-      className: classnames(styles$o.item, styles$o["item-".concat(item.position)])
+      className: classNames(styles$i.item, styles$i["item-".concat(item.position)])
     }, props.children(React.createElement("div", {
-      className: styles$o["inner-".concat(item.position)]
+      className: styles$i["inner-".concat(item.position)]
     }, child))));
   }));
 }
 
 function Layout(props) {
-  if (props.layout === 'center') {
+  if (props.sectionProps.layout === 'center') {
     return React.createElement(Center, props);
-  } else if (props.layout === 'right') {
+  } else if (props.sectionProps.layout === 'right') {
     return React.createElement(TwoColumn, Object.assign({
       align: "right"
     }, props));
@@ -2937,79 +2279,79 @@ function useScrollTarget(ref, isScrollTarget) {
   }, [ref, isScrollTarget]);
 }
 
-var css$q = ".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$p = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
-styleInject(css$q);
+var css$k = ".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$j = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
+styleInject(css$k);
 
-var css$r = "\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 css$l = "\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$r);
+styleInject(css$l);
 
-var css$s = "\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 css$m = "\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$s);
+styleInject(css$m);
 
-var css$t = "\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 css$n = "\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$t);
+styleInject(css$n);
 
-var css$u = "\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 css$o = "\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$u);
+styleInject(css$o);
 
-var css$v = "\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 css$p = "\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$v);
+styleInject(css$p);
 
-var css$w = "\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 css$q = "\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$w);
+styleInject(css$q);
 
-var css$x = "\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 css$r = "\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$x);
+styleInject(css$r);
 
-var css$y = "\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 css$s = "\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$y);
+styleInject(css$s);
 
-var css$z = ".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 css$t = ".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$z);
+styleInject(css$t);
 
-var css$A = "\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 css$u = "\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$A);
+styleInject(css$u);
 
-var css$B = "\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 css$v = "\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$B);
+styleInject(css$v);
 
-var css$C = ".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 css$w = ".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$C);
+styleInject(css$w);
 
-var css$D = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
+var css$x = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
 var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
-styleInject(css$D);
+styleInject(css$x);
 
-var css$E = "\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 css$y = "\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$E);
+styleInject(css$y);
 
-var css$F = "\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 css$z = "\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$F);
+styleInject(css$z);
 
-var css$G = ".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 css$A = ".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$G);
+styleInject(css$A);
 
-var css$H = ".previewScrollOut-module_scene__W9bDl {\n  height: 100%;\n}\n\n.previewScrollOut-module_backdrop__2-Bl_ {\n  position: absolute;\n  top: 0;\n}\n";
+var css$B = ".previewScrollOut-module_scene__W9bDl {\n  height: 100%;\n}\n\n.previewScrollOut-module_backdrop__2-Bl_ {\n  position: absolute;\n  top: 0;\n}\n";
 var previewScrollOut = {"scene":"previewScrollOut-module_scene__W9bDl","backdrop":"previewScrollOut-module_backdrop__2-Bl_"};
-styleInject(css$H);
+styleInject(css$B);
 
-var styles$q = {
+var styles$k = {
   fadeInBgConceal: fadeInBgConceal,
   fadeInBgFadeOut: fadeInBgFadeOut,
   fadeInBgFadeOutBg: fadeInBgFadeOutBg,
@@ -3050,11 +2392,11 @@ function getTransitionStyles(section, previousSection, nextSection) {
   var exitTransition = exitTransitions[nextSection ? nextSection.transition : 'scroll'];
   var name = "".concat(enterTransition).concat(capitalize(exitTransition));
 
-  if (!styles$q[name]) {
+  if (!styles$k[name]) {
     throw new Error("Unknown transition ".concat(name));
   }
 
-  return styles$q[name];
+  return styles$k[name];
 }
 
 function capitalize(string) {
@@ -3065,18 +2407,18 @@ function NoOpShadow(props) {
   return React.createElement("div", null, props.children);
 }
 
-var css$I = ".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$r = {"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$I);
+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$l = {"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$r.root, styles$r["align-".concat(props.align)], _defineProperty({}, styles$r.intersecting, props.intersecting))
+    className: classNames(styles$l.root, styles$l["align-".concat(props.align)], _defineProperty({}, styles$l.intersecting, props.intersecting))
   }, React.createElement("div", {
-    className: styles$r.shadow,
+    className: styles$l.shadow,
     style: {
       opacity: props.opacity * Math.round(opacityFactor * 10) / 10
     }
@@ -3091,38 +2433,38 @@ function NoOpBoxWrapper(props) {
   return React.createElement("div", null, props.children);
 }
 
-var css$J = ".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$s = {"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$J);
+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$m = {"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$s.root, (_classNames = {}, _defineProperty(_classNames, styles$s.gradient, padding > 0), _defineProperty(_classNames, styles$s["long"], props.coverInvisibleNextSection), _classNames)),
+    className: classNames(styles$m.root, (_classNames = {}, _defineProperty(_classNames, styles$m.gradient, padding > 0), _defineProperty(_classNames, styles$m["long"], props.coverInvisibleNextSection), _classNames)),
     style: {
       paddingTop: padding
     }
   }, React.createElement("div", {
-    className: styles$s.wrapper
+    className: styles$m.wrapper
   }, React.createElement("div", {
-    className: classnames(styles$s.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
+    className: classNames(styles$m.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
     style: {
       top: padding,
       opacity: props.opacity
     }
   }), React.createElement("div", {
-    className: styles$s.content
+    className: styles$m.content
   }, props.children)));
 }
 GradientBox.defaultProps = {
   opacity: 1
 };
 
-var css$K = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
-var styles$t = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
-styleInject(css$K);
+var css$E = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
+var styles$n = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
+styleInject(css$E);
 
 function CardBox(props) {
   var padding = props.active ? props.padding : 0;
@@ -3131,23 +2473,23 @@ function CardBox(props) {
       paddingTop: padding
     }
   }, React.createElement("div", {
-    className: styles$t.wrapper
+    className: styles$n.wrapper
   }, React.createElement("div", {
     style: {
       top: padding
     }
   }), React.createElement("div", {
-    className: styles$t.content
+    className: styles$n.content
   }, props.children)));
 }
 
-var css$L = ".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$u = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
-styleInject(css$L);
+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$o = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
+styleInject(css$F);
 
 function CardBoxWrapper(props) {
   return React.createElement("div", {
-    className: styles$u.cardBg
+    className: styles$o.cardBg
   }, props.children);
 }
 
@@ -3165,6 +2507,10 @@ function Section(props) {
   var ref = useRef();
   var onScreen = useOnScreen(ref, '0px 0px 0px 0px');
   useScrollTarget(ref, props.isScrollTarget);
+  var sectionProperties = {
+    layout: props.layout,
+    invert: props.invert
+  };
 
   var _useBoundingClientRec = useBoundingClientRect(),
       _useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
@@ -3213,10 +2559,10 @@ function Section(props) {
   return React.createElement("section", {
     id: "section-".concat(props.permaId),
     ref: ref,
-    className: classnames(styles$p.Section, transitionStyles.section, _defineProperty({}, styles$p.invert, props.invert))
+    className: classNames(styles$j.Section, transitionStyles.section, _defineProperty({}, styles$j.invert, props.invert))
   }, React.createElement("div", {
     ref: activityProbeRef,
-    className: styles$p.activityProbe
+    className: styles$j.activityProbe
   }), React.createElement(Backdrop, Object.assign({}, props.backdrop, {
     motifAreaRef: setMotifAreaRefs,
     onScreen: onScreen,
@@ -3250,7 +2596,7 @@ function Section(props) {
     items: indexItems(props.foreground),
     appearance: props.appearance,
     contentAreaRef: setContentAreaRef,
-    layout: props.layout
+    sectionProps: sectionProperties
   }, function (children) {
     return React.createElement(BoxWrapper, null, children);
   }))));
@@ -3300,9 +2646,9 @@ function renderSections(sections, currentSectionIndex, setCurrentSectionIndex, s
   });
 }
 
-var css$M = "\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$v = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
-styleInject(css$M);
+var css$G = ".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 entryStyles = {"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),
@@ -3315,6 +2661,9 @@ function Entry(props) {
       scrollTargetSectionIndex = _useState4[0],
       setScrollTargetSectionIndex = _useState4[1];
 
+  var _useEditorSelection = useEditorSelection(),
+      select = _useEditorSelection.select;
+
   var _useState5 = useState(true),
       _useState6 = _slicedToArray(_useState5, 2),
       muted = _useState6[0],
@@ -3335,7 +2684,7 @@ function Entry(props) {
     setCurrentSectionIndexState(index);
   }, [setCurrentSectionIndexState]);
   useEffect(function () {
-    if (window.parent) {
+    if (window.parent !== window) {
       window.addEventListener('message', receive);
       window.parent.postMessage({
         type: 'READY'
@@ -3352,10 +2701,12 @@ function Entry(props) {
           dispatch(message.data.payload);
         } else if (message.data.type === 'SCROLL_TO_SECTION') {
           setScrollTargetSectionIndex(message.data.payload.index);
+        } else if (message.data.type === 'SELECT') {
+          select(message.data.payload);
         }
       }
     }
-  }, [dispatch]);
+  }, [dispatch, select]);
 
   function scrollToSection(index) {
     if (index === 'next') {
@@ -3366,7 +2717,7 @@ function Entry(props) {
   }
 
   return React.createElement("div", {
-    className: styles$v.Entry
+    className: entryStyles.Entry
   }, React.createElement(MutedContext.Provider, {
     value: {
       muted: muted,
@@ -3391,14 +2742,138 @@ function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIn
   });
 }
 
-var css$N = "body {\n  margin: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
-styleInject(css$N);
+var css$H = "body {\n  margin: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
+styleInject(css$H);
+
+var css$I = ".Text-module_h2__34chJ {\n  font-size: 66px;\n  font-weight: 700;\n}\n\n.Text-module_h1__2_5kX {\n  font-size: 110px;\n  line-height: 1;\n}\n\n.Text-module_body__4oWD- {\n  font-size: 22px;\n  line-height: 1.4;\n}\n\n.Text-module_caption__3_6Au {\n  font-size: 20px;\n  line-height: 1.4;\n}\n\n@media (max-width: 600px) {\n  .Text-module_h2__34chJ {\n    font-size: 40px;\n  }\n\n  .Text-module_h1__2_5kX {\n    font-size: 66px;\n  }\n}\n";
+var styles$p = {"text-s":"20px","text-base":"22px","text-l":"40px","text-xl":"66px","text-2xl":"110px","h2":"Text-module_h2__34chJ","h1":"Text-module_h1__2_5kX","body":"Text-module_body__4oWD-","caption":"Text-module_caption__3_6Au"};
+styleInject(css$I);
+
+/**
+ * Render some text using the default typography scale.
+ *
+ * @param {Object} props
+ * @param {string} props.scaleCategory - One of the styles `'h1'`, `'h2'`, `'body'`, `'caption'`.
+ * @param {string} [props.inline] - Render a span instread of a div.
+ * @param {string} props.children - Nodes to render with specified typography.
+ */
+
+function Text(_ref) {
+  var inline = _ref.inline,
+      scaleCategory = _ref.scaleCategory,
+      children = _ref.children;
+  return React.createElement(inline ? 'span' : 'div', {
+    className: styles$p[scaleCategory]
+  }, children);
+}
+
+var css$J = ".InlineCaption-module_root__1R8Ib {\n  padding: 3px 10px 5px;\n  background-color: #fff;\n  color: #222;\n  text-shadow: none;\n}\n";
+var styles$q = {"root":"InlineCaption-module_root__1R8Ib"};
+styleInject(css$J);
+
+/**
+ * Render a caption text attached to a content element.
+ *
+ * @param {Object} props
+ * @param {string} props.text - The text to be displayed.
+ */
+
+function InlineCaption(_ref) {
+  var text = _ref.text;
+
+  if (text) {
+    return React.createElement("div", {
+      className: styles$q.root,
+      role: "caption"
+    }, React.createElement(Text, {
+      scaleCategory: "caption"
+    }, text));
+  } else {
+    return null;
+  }
+}
+
+/**
+ * Read and change media settings of the entry.
+ *
+ * @example
+ * const mediaSettings = useMediaSettings();
+ * mediaSettings // =>
+ *   {
+ *      muted: true,            // All media elements should be played without sound.
+ *      setMuted: muted => {},  // Enable sound for all media elements.
+ *      mediaOff: false         // Playing media is not allowed. Will be true when
+ *                              // rendering section thumbnails in the editor.
+ *   }
+ */
+
+function useMediaSettings() {
+  return useContext(MutedContext);
+}
+
+var css$K = ".SectionThumbnail-module_crop__Q1nZj {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.SectionThumbnail-module_scale__2tKDG {\n  transform: scale(0.2);\n  transform-origin: 0 0;\n  width: 500%;\n}\n";
+var styles$r = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
+styleInject(css$K);
+
+function SectionThumbnail(_ref) {
+  var seed = _ref.seed,
+      props = _objectWithoutProperties(_ref, ["seed"]);
+
+  return React.createElement(EntryStateProvider, {
+    seed: seed
+  }, React.createElement(Inner, props));
+}
+
+function Inner(_ref2) {
+  var sectionPermaId = _ref2.sectionPermaId,
+      subscribe = _ref2.subscribe;
+  var dispatch = useEntryStateDispatch();
+  useEffect(function () {
+    return subscribe(dispatch);
+  }, [subscribe, dispatch]);
+  var section = useSectionStructure({
+    sectionPermaId: sectionPermaId
+  });
+
+  if (section) {
+    return React.createElement("div", {
+      className: styles$r.crop
+    }, React.createElement("div", {
+      className: styles$r.scale
+    }, React.createElement("div", {
+      className: entryStyles.Entry
+    }, React.createElement(Section, Object.assign({
+      state: "active"
+    }, section, {
+      transition: "preview"
+    })))));
+  } else {
+    return React.createElement("div", {
+      className: styles$r.root
+    }, "Not found.");
+  }
+}
+
+Inner.defaultProps = {
+  subscribe: function subscribe() {}
+};
+
+var editMode = window.location.pathname.indexOf('/editor/entries') === 0;
+
+window.pageflowScrolledRender = function (seed) {
+  setupI18n(seed.i18n);
+  ReactDOM.render(React.createElement(Root, {
+    seed: seed
+  }), document.getElementById('root'));
+};
 
-function Root() {
-  return React.createElement(React.Fragment, null, React.createElement(EntryStateProvider, {
-    seed: window.pageflowScrolledSeed
-  }, React.createElement(AppHeader, null), React.createElement(Entry, null)));
+function Root(_ref) {
+  var seed = _ref.seed;
+  return React.createElement(React.Fragment, null, React.createElement(EditorStateProvider, {
+    active: editMode
+  }, React.createElement(EntryStateProvider, {
+    seed: seed
+  }, React.createElement(AppHeader, null), React.createElement(Entry, null))));
 }
-ReactDOM.render(React.createElement(Root, null), document.getElementById('root'));
 
-export default Root;
+export { Entry, EntryStateProvider, Image, InlineCaption, SectionThumbnail, Text, Video, api as frontend, setupI18n, useEditorSelection, useFile, useI18n, useMediaSettings, useOnScreen };