pageflow 15.1.2 → 15.2.0

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb

@@ -21,12 +21,15 @@ module PageflowScrolled
       def editor_pack
         create_file 'app/javascript/packs/pageflow-scrolled-editor.js', <<-JS
           import 'pageflow-scrolled/editor';
+          import 'pageflow-scrolled/contentElements-editor';
+          import 'pageflow-scrolled/contentElements-frontend';
         JS
       end
 
       def frontend_pack
         create_file 'app/javascript/packs/pageflow-scrolled-frontend.js', <<-JS
           import 'pageflow-scrolled/frontend';
+          import 'pageflow-scrolled/contentElements-frontend';
         JS
       end
     end

data/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb

@@ -102,8 +102,14 @@ module PageflowScrolled
     end
 
     def create_content_element(section, content_element_config, position, image_files_by_name)
-      if %w[stickyImage inlineImage].include?(content_element_config['type'])
-        rewrite_file_references!(content_element_config['props'], ['id'], image_files_by_name)
+      if %w[stickyImage inlineImage inlineBeforeAfter].include?(
+        content_element_config['type']
+      )
+        rewrite_file_references!(
+          content_element_config['props'],
+          ['id', 'before_id', 'after_id'],
+          image_files_by_name
+        )
       end
 
       section.content_elements.create!(
@@ -126,8 +132,7 @@ module PageflowScrolled
 
     def non_image_reference?(value)
       value.starts_with?('#') ||
-        value.starts_with?('video') ||
-        value.starts_with?('beforeAfter')
+        value.starts_with?('video')
     end
   end
 end

data/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake

@@ -0,0 +1,96 @@
+namespace :pageflow_scrolled do
+  desc 'Generate dummy app for current Rails version.'
+  task :dummy do
+    require 'pageflow/support'
+    Pageflow::Dummy.setup
+  end
+
+  namespace :storybook do
+    namespace :seed do
+      task :setup, [:output] => [:destroy_entry, :create_entry, :generate_json]
+
+      desc 'Destroy entry to generate Storybook entry JSON seed from'
+      task destroy_entry: :environment do
+        entry = Pageflow::Entry.find_by_title('Storybook seed')
+
+        if entry
+          puts "Destroying entry 'Storybook seed'"
+          entry.destroy
+        end
+      end
+
+      desc 'Create entry to generate Storybook entry JSON seed from'
+      task create_entry: :environment do
+        seeds = Module.new do
+          extend Pageflow::Seeds
+          extend PageflowScrolled::Seeds
+        end
+
+        if ENV['PAGEFLOW_PAPERCLIP_S3_ROOT']
+          Pageflow.config.paperclip_s3_root = ENV['PAGEFLOW_PAPERCLIP_S3_ROOT']
+        end
+
+        if ENV['PAGEFLOW_SCROLLED_DB_SEED_SKIP_FILES'] == 'true'
+          puts 'Skipping file uploads to S3.'
+          Paperclip::Storage::S3.class_eval { def flush_writes; end }
+        end
+
+        account = seeds.account(name: 'Storybook seed')
+        seeds.sample_scrolled_entry(title: 'Storybook seed',
+                                    account: account,
+                                    chapters: [],
+                                    image_files: {
+                                      turtle: {
+                                        url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/04_turtle.jpg',
+                                        configuration: {
+                                          focusX: 24,
+                                          focusY: 40,
+                                          testReferenceName: 'turtle'
+                                        }
+                                      }.stringify_keys,
+                                      churchAfter: {
+                                        url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/17_haldern_church_after.jpg',
+                                        configuration: {
+                                          testReferenceName: 'churchAfter'
+                                        }
+                                      }.stringify_keys,
+                                      churchBefore: {
+                                        url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/16_haldern_church_before.jpg',
+                                        configuration: {
+                                          testReferenceName: 'churchBefore'
+                                        }
+                                      }.stringify_keys
+                                    })
+      end
+
+      desc 'Generate Storybook entry JSON seed'
+      task :generate_json, [:output] => :environment do |_t, args|
+        entry = Pageflow::Entry.find_by_title('Storybook seed')
+
+        unless entry
+          puts 'Seed entry does not exist. Run pageflow_scrolled:storybook:seed:create_entry first.'
+          exit 1
+        end
+
+        draft_entry = Pageflow::DraftEntry.new(entry)
+
+        seed =
+          I18n.with_locale(draft_entry.locale) do
+            PageflowScrolled::EntriesController
+              .render(inline: 'scrolled_entry_json_seed(json, entry)',
+                      type: :jbuilder,
+                      locals: {entry: draft_entry})
+          end
+
+        if args[:output].blank?
+          puts 'Missing argument: Pass output path via '\
+            '`rake pageflow_scrolled:storybook:seed:setup[some/path/seed.json]`'
+          exit 1
+        end
+
+        File.write(args[:output], seed)
+        puts "Wrote #{args[:output]}"
+      end
+    end
+  end
+end

data/entry_types/scrolled/package/editor.js

@@ -1,12 +1,14 @@
 import * as globalInterop from 'pageflow/editor';
-import { configurationContainer, delayedDestroying, entryTypeEditorControllerUrls, failureTracking, ForeignKeySubsetCollection, orderedCollection, Configuration, editor, Entry, modelLifecycleTrackingView, EditConfigurationView, FileInputView, ColorInputView } from 'pageflow/editor';
+import { configurationContainer, delayedDestroying, entryTypeEditorControllerUrls, failureTracking, ForeignKeySubsetCollection, orderedCollection, Configuration, editor as editor$1, Entry, modelLifecycleTrackingView, EditConfigurationView, FileInputView, ColorInputView, CollectionView, BackButtonDecoratorView } from 'pageflow/editor';
 import Backbone$1 from 'backbone';
 import Marionette from 'backbone.marionette';
 import I18n from 'i18n-js';
-import { cssModulesUtils, SortableCollectionView, TextInputView, TextAreaInputView, SelectInputView, CheckBoxInputView } from 'pageflow/ui';
-import React, { useReducer, useMemo, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { cssModulesUtils, SortableCollectionView, ConfigurationEditorTabView, SelectInputView, TextInputView, TextAreaInputView, CheckBoxInputView } from 'pageflow/ui';
+import React from 'react';
 import ReactDOM from 'react-dom';
+import { SectionThumbnail } from 'pageflow-scrolled/frontend';
 import $ from 'jquery';
+import { editor as editor$2 } from 'pageflow-scrolled/editor';
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -40,12 +42,23 @@ var Chapter = Backbone$1.Model.extend({
       foreignKeyAttribute: 'chapterId',
       parentReferenceAttribute: 'chapter'
     });
+    this.entry = options.entry;
   },
   addSection: function addSection(attributes) {
-    this.sections.create(_objectSpread({
+    var section = this.sections.create(_objectSpread({
       position: this.sections.length,
       chapterId: this.id
-    }, attributes));
+    }, attributes), {
+      contentElements: this.entry.contentElements
+    });
+    section.once('sync', function () {
+      section.contentElements.create({
+        typeName: 'heading',
+        configuration: {
+          children: 'Neuer Abschnitt'
+        }
+      });
+    });
   }
 });
 
@@ -98,7 +111,7 @@ var FileSelectionHandler = function FileSelectionHandler(options) {
     return '/scrolled/sections/' + contentElement.id;
   };
 };
-editor.registerFileSelectionHandler('sectionConfiguration', FileSelectionHandler);
+editor$1.registerFileSelectionHandler('sectionConfiguration', FileSelectionHandler);
 
 var Section = Backbone$1.Model.extend({
   mixins: [configurationContainer({
@@ -108,6 +121,14 @@ var Section = Backbone$1.Model.extend({
   }), delayedDestroying, entryTypeEditorControllerUrls.forModel({
     resources: 'sections'
   }), failureTracking],
+  initialize: function initialize(attributes, options) {
+    this.contentElements = new ForeignKeySubsetCollection({
+      parent: options.contentElements,
+      parentModel: this,
+      foreignKeyAttribute: 'sectionId',
+      parentReferenceAttribute: 'section'
+    });
+  },
   chapterPosition: function chapterPosition() {
     return this.chapter && this.chapter.has('position') ? this.chapter.get('position') : -1;
   }
@@ -134,16 +155,21 @@ var SectionsCollection = Backbone$1.Collection.extend({
 });
 
 var ContentElement = Backbone$1.Model.extend({
-  initialize: function initialize() {
-    this.configuration = new Backbone$1.Model(this.get('configuration'));
-    this.listenTo(this.configuration, 'change', function () {
-      this.trigger('change:configuration', this);
-    });
-  }
+  paramRoot: 'content_element',
+  mixins: [configurationContainer({
+    autoSave: true,
+    includeAttributesInJSON: ['position', 'typeName']
+  }), delayedDestroying, entryTypeEditorControllerUrls.forModel({
+    resources: 'content_elements'
+  }), failureTracking]
 });
 
 var ContentElementsCollection = Backbone$1.Collection.extend({
-  model: ContentElement
+  model: ContentElement,
+  mixins: [entryTypeEditorControllerUrls.forCollection({
+    resources: 'content_elements'
+  })],
+  comparator: 'position'
 });
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -152,144 +178,85 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 var ScrolledEntry = Entry.extend({
   setupFromEntryTypeSeed: function setupFromEntryTypeSeed(seed) {
     this.contentElements = new ContentElementsCollection(seed.collections.contentElements);
-    this.sections = new SectionsCollection(seed.collections.sections);
+    this.sections = new SectionsCollection(seed.collections.sections, {
+      contentElements: this.contentElements
+    });
     this.chapters = new ChaptersCollection(seed.collections.chapters, {
-      sections: this.sections
+      sections: this.sections,
+      entry: this
     });
     this.chapters.parentModel = this;
     this.sections.sort();
-    editor.failures.watch(this.contentElements);
-    editor.failures.watch(this.sections);
-    editor.failures.watch(this.chapters);
-    editor.savingRecords.watch(this.contentElements);
-    editor.savingRecords.watch(this.sections);
-    editor.savingRecords.watch(this.chapters);
+    editor$1.failures.watch(this.contentElements);
+    editor$1.failures.watch(this.sections);
+    editor$1.failures.watch(this.chapters);
+    editor$1.savingRecords.watch(this.contentElements);
+    editor$1.savingRecords.watch(this.sections);
+    editor$1.savingRecords.watch(this.chapters);
     this.scrolledSeed = seed;
   },
   addChapter: function addChapter(attributes) {
     this.chapters.create(_objectSpread$1({
       position: this.chapters.length
     }, attributes), {
+      entry: this,
       sections: this.sections
     });
-  }
-});
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
+  },
+  insertContentElement: function insertContentElement(attributes, _ref, defaultConfig) {
+    var _this = this;
 
-function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
+    var position = _ref.position,
+        id = _ref.id;
+    var sibling = this.contentElements.get(id);
+    var section = sibling.section;
+    defaultConfig = defaultConfig || {};
+    var delta = 0;
+    section.contentElements.each(function (contentElement, index) {
+      if (contentElement === sibling && position === 'before') {
+        delta = 1;
+      }
 
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
+      contentElement.set('position', index + delta);
 
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+      if (contentElement === sibling && position === 'after') {
+        delta = 1;
+      }
+    });
+    var newContentElement = section.contentElements.create(_objectSpread$1({
+      position: sibling.get('position') + (position === 'before' ? -1 : 1)
+    }, attributes, {
+      configuration: _objectSpread$1({}, defaultConfig, {
+        position: sibling.configuration.get('position')
+      })
+    }));
+    section.contentElements.sort();
+    newContentElement.once('sync', function () {
+      section.contentElements.saveOrder();
 
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
+      _this.trigger('selectContentElement', newContentElement);
+    });
   }
+});
 
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
+var ContentElementFileSelectionHandler = function ContentElementFileSelectionHandler(options) {
+  var contentElement = options.entry.contentElements.get(options.id);
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
+  this.call = function (file) {
+    contentElement.configuration.setReference(options.attributeName, file);
+  };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  this.getReferer = function () {
+    return '/scrolled/content_elements/' + contentElement.id;
+  };
+};
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
 var RESET = "".concat(PREFIX, "_RESET");
 var ADD = "".concat(PREFIX, "_ADD");
 var CHANGE = "".concat(PREFIX, "_CHANGE");
 var REMOVE = "".concat(PREFIX, "_REMOVE");
 var SORT = "".concat(PREFIX, "_SORT");
-function useCollections() {
-  var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      keyAttribute = _ref.keyAttribute;
-
-  return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
-    result[key] = init(seed[key], keyAttribute);
-    return result;
-  }, {}));
-}
-
-function reducer(state, action) {
-  var collectionName = action.payload.collectionName;
-  var keyAttribute = action.payload.keyAttribute;
-
-  switch (action.type) {
-    case RESET:
-      return _objectSpread$2({}, state, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
-
-    case ADD:
-      return _objectSpread$2({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: _objectSpread$2({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
-      }));
-
-    case CHANGE:
-      return _objectSpread$2({}, state, _defineProperty({}, collectionName, {
-        order: state[collectionName].order,
-        items: _objectSpread$2({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
-      }));
-
-    case REMOVE:
-      var clonedItems = _objectSpread$2({}, state[collectionName].items);
-
-      delete clonedItems[action.payload.key];
-      return _objectSpread$2({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: clonedItems
-      }));
-
-    case SORT:
-      return _objectSpread$2({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: state[collectionName].items
-      }));
-
-    default:
-      return state;
-  }
-}
-
-function init(items) {
-  var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  return {
-    order: items.map(function (item) {
-      return item[keyAttribute];
-    }),
-    items: items.reduce(function (result, item) {
-      result[item[keyAttribute]] = item;
-      return result;
-    }, {})
-  };
-}
 
 function watchCollection(collection, _ref2) {
   var name = _ref2.name,
@@ -298,10 +265,12 @@ function watchCollection(collection, _ref2) {
       includeConfiguration = _ref2.includeConfiguration,
       _ref2$keyAttribute = _ref2.keyAttribute,
       keyAttribute = _ref2$keyAttribute === void 0 ? 'id' : _ref2$keyAttribute;
+  var handle = {};
   var options = {
     attributeNames: attributes,
     includeConfiguration: includeConfiguration
   };
+  var tearingDown = false;
   var watchedAttributeNames = getWatchedAttributeNames(attributes);
   dispatch({
     type: RESET,
@@ -325,7 +294,7 @@ function watchCollection(collection, _ref2) {
         }
       });
     }
-  });
+  }, handle);
   collection.on('change', function (model) {
     if (hasChangedAttributes(model, watchedAttributeNames)) {
       dispatch({
@@ -337,7 +306,7 @@ function watchCollection(collection, _ref2) {
         }
       });
     }
-  });
+  }, handle);
 
   if (includeConfiguration) {
     collection.on('change:configuration', function (model) {
@@ -349,19 +318,21 @@ function watchCollection(collection, _ref2) {
           attributes: getAttributes(model, options)
         }
       });
-    });
+    }, handle);
   }
 
   collection.on('remove', function (model) {
-    return dispatch({
-      type: REMOVE,
-      payload: {
-        collectionName: name,
-        order: collection.pluck(keyAttribute),
-        key: model.attributes[keyAttribute]
-      }
-    });
-  });
+    if (!tearingDown) {
+      dispatch({
+        type: REMOVE,
+        payload: {
+          collectionName: name,
+          order: collection.pluck(keyAttribute),
+          key: model.attributes[keyAttribute]
+        }
+      });
+    }
+  }, handle);
   collection.on('sort', function (model) {
     return dispatch({
       type: SORT,
@@ -370,7 +341,11 @@ function watchCollection(collection, _ref2) {
         order: collection.pluck(keyAttribute).filter(Boolean)
       }
     });
-  });
+  }, handle);
+  return function () {
+    tearingDown = true;
+    collection.off(null, null, handle);
+  };
 }
 
 function hasChangedAttributes(model, attributeNames) {
@@ -396,7 +371,12 @@ function getAttributes(model, _ref3) {
     if (typeof attributeName == 'object') {
       var key = Object.keys(attributeName)[0];
       var value = attributeName[key];
-      result[key] = model.get(value);
+
+      if (typeof value == 'function') {
+        result[key] = value();
+      } else {
+        result[key] = model.get(value);
+      }
     } else {
       result[attributeName] = model.get(attributeName);
     }
@@ -410,225 +390,7 @@ function getAttributes(model, _ref3) {
   return result;
 }
 
-function getItems(state, collectionName) {
-  if (state[collectionName]) {
-    var items = state[collectionName].items;
-    return state[collectionName].order.map(function (key) {
-      return items[key];
-    });
-  } else {
-    return [];
-  }
-}
-function getItem(state, collectionName, key) {
-  if (state[collectionName]) {
-    return state[collectionName].items[key];
-  }
-}
-
 var Context = React.createContext();
-function EntryStateProvider(_ref) {
-  var seed = _ref.seed,
-      children = _ref.children;
-
-  var _useCollections = useCollections(seed.collections, {
-    keyAttribute: 'permaId'
-  }),
-      _useCollections2 = _slicedToArray(_useCollections, 2),
-      collections = _useCollections2[0],
-      dispatch = _useCollections2[1];
-
-  var value = useMemo(function () {
-    return {
-      entryState: {
-        collections: collections,
-        config: seed.config
-      },
-      dispatch: dispatch
-    };
-  }, [collections, dispatch, seed]);
-  return React.createElement(Context.Provider, {
-    value: value
-  }, children);
-}
-function useEntryState() {
-  var value = useContext(Context);
-  return value.entryState;
-}
-function useEntryStateDispatch() {
-  var value = useContext(Context);
-  return value.dispatch;
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function 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; }
-/**
- * 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$3({
-    permaId: section.permaId
-  }, section.configuration, {
-    foreground: getItems(collections, 'contentElements').filter(function (item) {
-      return item.sectionId === section.id;
-    }).map(function (item) {
-      return {
-        type: item.typeName,
-        position: item.configuration.position,
-        props: item.configuration
-      };
-    })
-  });
-}
-
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function expandUrls(collectionName, file, urlTemplates) {
-  if (!file) {
-    return null;
-  }
-
-  if (!urlTemplates[collectionName]) {
-    throw new Error("No file url templates found for ".concat(collectionName));
-  }
-
-  var variants = file.variants || Object.keys(urlTemplates[collectionName]);
-  var urls = variants.reduce(function (result, variant) {
-    var url = getFileUrl(collectionName, file, variant, urlTemplates);
-
-    if (url) {
-      result[variant] = url;
-    }
-
-    return result;
-  }, {});
-  return _objectSpread$4({
-    urls: urls
-  }, file);
-}
-
-function getFileUrl(collectionName, file, quality, urlTemplates) {
-  var templates = urlTemplates[collectionName];
-  var template = templates[quality];
-
-  if (template) {
-    return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
-  }
-}
-
-function idPartition(id) {
-  return partition(pad(id, 9));
-}
-
-function partition(string, separator) {
-  return string.replace(/./g, function (c, i, a) {
-    return i && (a.length - i) % 3 === 0 ? '/' + c : c;
-  });
-}
-
-function pad(string, size) {
-  return (Array(size).fill(0).join('') + string).slice(-size);
-}
-
-/**
- * Look up a file by its collection and perma id.
- *
- * @param {Object} options
- * @param {String} options.collectionName - Collection name of file type to look for (in camel case).
- * @param {String} options.permaId - Perma id of file look up
- *
- * @example
- * const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
- * imageFile // =>
- *   {
- *     id: 102,
- *     permaId: 5,
- *     width: 1000,
- *     height: 500,
- *     urls: {
- *       large: 'https://...'
- *     },
- *   }
- */
-
-function useFile(_ref) {
-  var collectionName = _ref.collectionName,
-      permaId = _ref.permaId;
-  var entryState = useEntryState();
-  return expandUrls(collectionName, getItem(entryState.collections, collectionName, permaId), entryState.config.fileUrlTemplates);
-}
 
 function watchCollections(entry, _ref) {
   var dispatch = _ref.dispatch;
@@ -636,38 +398,45 @@ function watchCollections(entry, _ref) {
       sections = entry.sections,
       contentElements = entry.contentElements,
       files = entry.files;
-  watchCollection(new Backbone.Collection([entry.metadata]), {
+  var teardownFns = [];
+  teardownFns.push(watchCollection(new Backbone.Collection([entry.metadata]), {
     name: 'entries',
-    attributes: ['id', {
+    attributes: ['locale', {
+      permaId: function permaId() {
+        return entry.id;
+      }
+    }, // Make sure key attribute is present
+    {
       shareProviders: 'share_providers'
     }, {
       shareUrl: 'share_url'
     }, 'credits'],
+    keyAttribute: 'permaId',
     dispatch: dispatch
-  });
-  watchCollection(chapters, {
+  }));
+  teardownFns.push(watchCollection(chapters, {
     name: 'chapters',
     attributes: ['id', 'permaId'],
     keyAttribute: 'permaId',
     includeConfiguration: true,
     dispatch: dispatch
-  });
-  watchCollection(sections, {
+  }));
+  teardownFns.push(watchCollection(sections, {
     name: 'sections',
     attributes: ['id', 'permaId', 'chapterId'],
     keyAttribute: 'permaId',
     includeConfiguration: true,
     dispatch: dispatch
-  });
-  watchCollection(contentElements, {
+  }));
+  teardownFns.push(watchCollection(contentElements, {
     name: 'contentElements',
     attributes: ['id', 'permaId', 'typeName', 'sectionId'],
     keyAttribute: 'permaId',
     includeConfiguration: true,
     dispatch: dispatch
-  });
+  }));
   Object.keys(files).forEach(function (collectionName) {
-    watchCollection(files[collectionName], {
+    teardownFns.push(watchCollection(files[collectionName], {
       name: camelize(collectionName),
       attributes: ['id', {
         permaId: 'perma_id'
@@ -675,8 +444,13 @@ function watchCollections(entry, _ref) {
       keyAttribute: 'permaId',
       includeConfiguration: true,
       dispatch: dispatch
-    });
+    }));
   });
+  return function () {
+    teardownFns.forEach(function (fn) {
+      return fn();
+    });
+  };
 }
 
 function camelize(snakeCase) {
@@ -685,96 +459,6 @@ function camelize(snakeCase) {
   });
 }
 
-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;
-	}
-}());
-});
-
-function useOnScreen(ref) {
-  var rootMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0px';
-  var cb = arguments.length > 2 ? arguments[2] : undefined;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isIntersecting = _useState2[0],
-      setIntersecting = _useState2[1];
-
-  useEffect(function () {
-    var current = ref.current;
-    var observer = new IntersectionObserver(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 1),
-          entry = _ref2[0];
-
-      setIntersecting(entry.isIntersecting);
-
-      if (entry.isIntersecting && cb) {
-        cb();
-      }
-    }, {
-      rootMargin: rootMargin
-    });
-
-    if (ref.current) {
-      observer.observe(current);
-    }
-
-    return function () {
-      observer.unobserve(current);
-    };
-  }, [ref, rootMargin, cb]);
-  return isIntersecting;
-}
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -802,2106 +486,120 @@ function styleInject(css, ref) {
   }
 }
 
-var css = ".Fullscreen-module_root__1N3CI {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  overflow: hidden;\n}\n";
-var styles = {"root":"Fullscreen-module_root__1N3CI"};
+var css = ".icons-module_icon__16IVx::before {\n  font-family: \"entypo\";\n}.icons-module_arrowsCcw__3_nrJ,\n.icons-module_attention__1sssG,\n.icons-module_plusCircled__20FlJ,\n.icons-module_rightOpen__9vsOG,\n.icons-module_trash__DH1EH {\n}.icons-module_arrowsCcw__3_nrJ::before {\n  content: \"\\1F504\";\n}.icons-module_attention__1sssG::before {\n  content: \"\\26A0\";\n}.icons-module_plusCircled__20FlJ::before {\n  content: \"\\2795\";\n}.icons-module_rightOpen__9vsOG::before {\n  content: \"\\E75E\"\n}.icons-module_trash__DH1EH::before {\n  content: \"\\E729\";\n}@keyframes animations-module_blink__32C5j {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}.animations-module_blink__32C5j {\n  animation: animations-module_blink__32C5j 1.5s ease infinite;\n}.outline-module_indicator__2dw_X {\n  display: none;\n  position: absolute;\n  right: 14px;\n  top: 7px;\n  width: 30px;\n  height: 30px;\n  font-size: 19px;\n  color: #888;\n}.outline-module_creatingIndicator__3O7Rw {\n}.outline-module_destroyingIndicator__2-mKh {\n}.outline-module_failedIndicator__2QK1F {\n  color: #d00;\n}\n\n.SectionItemView-module_root__1Pp0d {\n  position: relative;\n  border: solid 3px transparent;\n  padding: 3px 3px 0 3px;\n  margin-bottom: 4px;\n  max-width: 270px;\n  text-align: right;\n  background-color: #eee;\n}\n\n.SectionItemView-module_active__1tLN5 {\n  border: solid 3px #1c86fe;\n}\n\n.SectionItemView-module_thumbnailContainer__1Xe7C {\n  position: relative;\n}\n\n.SectionItemView-module_thumbnail__1ecBT {\n  border: solid 1px #888;\n  padding-top: 50%;\n  position: relative;\n  text-align: initial;\n}\n\n.SectionItemView-module_clickMask__2JYEH {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  cursor: pointer;\n}\n\n.SectionItemView-module_editLink__2mHqk {\n  display: inline-block;\n  position: relative;\n  width: 30px;\n  height: 25px;\n}\n\n.SectionItemView-module_editLink__2mHqk::before {\n  font-family: 'entypo';\n  content: \"\\270E\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  color: #555;\n  font-size: 15px;\n}\n\n.SectionItemView-module_creating__3Pjx9 .SectionItemView-module_creatingIndicator__1GnKq     { display: block; }\n.SectionItemView-module_destroying__1m53s .SectionItemView-module_destroyingIndicator__HtKWF { display: block; }\n.SectionItemView-module_failed__1CR2R .SectionItemView-module_failedIndicator__1HVHn         { display: block; }\n\n.SectionItemView-module_creatingIndicator__1GnKq   { }\n.SectionItemView-module_destroyingIndicator__HtKWF {  }\n.SectionItemView-module_failedIndicator__1HVHn     { }\n";
+var styles = {"selectionColor":"#1c86fe","selectionWidth":"3px","root":"SectionItemView-module_root__1Pp0d","active":"SectionItemView-module_active__1tLN5","thumbnailContainer":"SectionItemView-module_thumbnailContainer__1Xe7C","thumbnail":"SectionItemView-module_thumbnail__1ecBT","clickMask":"SectionItemView-module_clickMask__2JYEH","editLink":"SectionItemView-module_editLink__2mHqk","creating":"SectionItemView-module_creating__3Pjx9","creatingIndicator":"SectionItemView-module_creatingIndicator__1GnKq outline-module_creatingIndicator__3O7Rw outline-module_indicator__2dw_X icons-module_arrowsCcw__3_nrJ icons-module_icon__16IVx animations-module_blink__32C5j","destroying":"SectionItemView-module_destroying__1m53s","destroyingIndicator":"SectionItemView-module_destroyingIndicator__HtKWF outline-module_destroyingIndicator__2-mKh outline-module_indicator__2dw_X icons-module_trash__DH1EH icons-module_icon__16IVx animations-module_blink__32C5j","failed":"SectionItemView-module_failed__1CR2R","failedIndicator":"SectionItemView-module_failedIndicator__1HVHn outline-module_failedIndicator__2QK1F outline-module_indicator__2dw_X icons-module_attention__1sssG icons-module_icon__16IVx"};
 styleInject(css);
 
-var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
-  return React.createElement("div", {
-    ref: ref,
-    className: styles.root
-  }, props.children);
-});
+var _events;
+var SectionItemView = Marionette.ItemView.extend({
+  tagName: 'li',
+  className: styles.root,
+  mixins: [modelLifecycleTrackingView({
+    classNames: styles
+  })],
+  template: function template(data) {
+    return "\n    <div class=\"".concat(styles.thumbnailContainer, "\">\n      <div class=\"").concat(styles.thumbnail, "\"></div>\n      <div class=\"").concat(styles.clickMask, "\"></div>\n    </div>\n       <span class=\"").concat(styles.creatingIndicator, "\" />\n       <span class=\"").concat(styles.destroyingIndicator, "\" />\n       <span class=\"").concat(styles.failedIndicator, "\"\n             title=\"").concat(I18n.t('pageflow_scrolled.editor.section_item.save_error'), "\" />\n    <a href=\"\" class=\"").concat(styles.editLink, "\" title=\"").concat(I18n.t('pageflow_scrolled.editor.section_item.edit'), "\"></a>\n  ");
+  },
+  ui: cssModulesUtils.ui(styles, 'thumbnail'),
+  events: (_events = {}, _defineProperty(_events, "click .".concat(styles.clickMask), function click() {
+    this.options.entry.trigger('scrollToSection', this.model);
+  }), _defineProperty(_events, "click .".concat(styles.editLink), function click() {
+    if (!this.model.isNew() && !this.model.isDestroying()) {
+      this.options.entry.trigger('scrollToSection', this.model);
+      editor$1.navigate("/scrolled/sections/".concat(this.model.id), {
+        trigger: true
+      });
+    }
 
-var css$1 = ".Image-module_root__1ef3j {\n  background-size: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n@media (orientation: landscape) {\n  .Image-module_portrait__1mRha {\n    display: none;\n  }\n}\n\n@media (orientation: portrait) {\n  .Image-module_portrait__1mRha {\n    display: block;\n  }\n}";
-var styles$1 = {"root":"Image-module_root__1ef3j","portrait":"Image-module_portrait__1mRha"};
-styleInject(css$1);
+    return false;
+  }), _events),
+  modelEvents: {
+    'change:id': 'renderThumbnail'
+  },
+  initialize: function initialize() {
+    var _this = this;
 
-/**
- * Render an image file.
- *
- * @param {Object} props
- * @param {number} props.id - Perma id of the image file.
- */
+    this.listenTo(this.options.entry, 'change:currentSectionIndex', function () {
+      var active = _this.options.entry.sections.indexOf(_this.model) === _this.options.entry.get('currentSectionIndex');
 
-function Image(props) {
-  var image = useFile({
-    collectionName: 'imageFiles',
-    permaId: props.id
-  });
+      _this.$el.toggleClass(styles.active, active);
 
-  if (image) {
-    var focusX = typeof image.configuration.focusX === 'undefined' ? 50 : image.configuration.focusX;
-    var focusY = typeof image.configuration.focusY === 'undefined' ? 50 : image.configuration.focusY;
-    return React.createElement("div", {
-      className: classnames(styles$1.root, _defineProperty({}, styles$1.portrait, props.mobile)),
-      role: "img",
-      style: {
-        backgroundImage: "url(".concat(image.urls.large, ")"),
-        backgroundPosition: "".concat(focusX, "% ").concat(focusY, "%")
+      if (active) {
+        _this.$el[0].scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
       }
     });
-  }
-
-  return null;
-}
-
-var ScrollToSectionContext = React.createContext(function () {});
+  },
+  onRender: function onRender() {
+    var _this2 = this;
 
-var MutedContext = React.createContext({
-  muted: true,
-  setMuted: function setMuted() {},
-  mediaOff: true
+    this.timeout = setTimeout(function () {
+      _this2.renderThumbnail();
+    }, 100);
+  },
+  onClose: function onClose() {
+    clearTimeout(this.timeout);
+    ReactDOM.unmountComponentAtNode(this.ui.thumbnail[0]);
+  },
+  renderThumbnail: function renderThumbnail() {
+    var _this3 = this;
+
+    if (!this.model.isNew()) {
+      ReactDOM.render(React.createElement(SectionThumbnail, {
+        sectionPermaId: this.model.get('permaId'),
+        seed: this.options.entry.scrolledSeed,
+        subscribe: function subscribe(dispatch) {
+          return watchCollections(_this3.options.entry, {
+            dispatch: dispatch
+          });
+        }
+      }), this.ui.thumbnail[0]);
+    }
+  }
 });
 
-var css$2 = ".Video-module_root__30u0y {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.Video-module_video__3FJvj {\n  width: 100%;\n  height: 100%;\n  transition: transform ease 0.2s;\n  outline: none;\n}\n\n.Video-module_video__3FJvj:focus {\n  outline: none;\n}\n\n.Video-module_backdrop__1R7f4 {\n  object-fit: cover;\n}\n";
-var styles$2 = {"root":"Video-module_root__30u0y","video":"Video-module_video__3FJvj","backdrop":"Video-module_backdrop__1R7f4"};
-styleInject(css$2);
+var css$1 = ".icons-module_icon__16IVx::before {\n  font-family: \"entypo\";\n}.icons-module_arrowsCcw__3_nrJ,\n.icons-module_attention__1sssG,\n.icons-module_plusCircled__20FlJ,\n.icons-module_rightOpen__9vsOG,\n.icons-module_trash__DH1EH {\n}.icons-module_arrowsCcw__3_nrJ::before {\n  content: \"\\1F504\";\n}.icons-module_attention__1sssG::before {\n  content: \"\\26A0\";\n}.icons-module_plusCircled__20FlJ::before {\n  content: \"\\2795\";\n}.icons-module_rightOpen__9vsOG::before {\n  content: \"\\E75E\"\n}.icons-module_trash__DH1EH::before {\n  content: \"\\E729\";\n}@keyframes animations-module_blink__32C5j {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}.animations-module_blink__32C5j {\n  animation: animations-module_blink__32C5j 1.5s ease infinite;\n}.outline-module_indicator__2dw_X {\n  display: none;\n  position: absolute;\n  right: 14px;\n  top: 7px;\n  width: 30px;\n  height: 30px;\n  font-size: 19px;\n  color: #888;\n}.outline-module_creatingIndicator__3O7Rw {\n}.outline-module_destroyingIndicator__2-mKh {\n}.outline-module_failedIndicator__2QK1F {\n  color: #d00;\n}.buttons-module_iconButton__3ZSFV {\n  /* see app/assets/stylesheets/pageflow/editor/composable.scss */\n}.buttons-module_addButton__2pN-g {\n}\n\n.ChapterItemView-module_root__19GIF {\n  background-color: #fff;\n  margin-bottom: 10px;\n  padding: 0 10px 10px 10px;\n}\n\n.ChapterItemView-module_link__2dj_z {\n  display: block;\n  position: relative;\n  margin: 0 -10px 0 -10px;\n  padding: 10px 10px 10px 30px;\n  background-color: #efefef;\n}\n\n.ChapterItemView-module_link__2dj_z::before {\n  position: absolute;\n  right: 7px;\n  top: 7px;\n  font-size: 19px;\n  color: #888;\n}\n\n.ChapterItemView-module_number__1GjyC {\n  font-weight: bold;\n}\n\n.ChapterItemView-module_title__3jVXE {}\n\n.ChapterItemView-module_sections__3zg2a {\n  margin: 10px 0 10px 0;\n  min-height: 20px;\n}\n\n.ChapterItemView-module_creating__c1q2b .ChapterItemView-module_creatingIndicator__2zOEN     { display: block; }\n.ChapterItemView-module_destroying__2PP1l .ChapterItemView-module_destroyingIndicator__2YZaB { display: block; }\n.ChapterItemView-module_failed__2MtQW .ChapterItemView-module_failedIndicator__2s6Xk         { display: block; }\n\n\n.ChapterItemView-module_creatingIndicator__2zOEN   { }\n.ChapterItemView-module_destroyingIndicator__2YZaB {  }\n.ChapterItemView-module_failedIndicator__2s6Xk     { }\n\n.ChapterItemView-module_addSection__3XQvI {\n}\n";
+var styles$1 = {"indicatorIconColor":"#888","root":"ChapterItemView-module_root__19GIF","link":"ChapterItemView-module_link__2dj_z icons-module_rightOpen__9vsOG icons-module_icon__16IVx","number":"ChapterItemView-module_number__1GjyC","title":"ChapterItemView-module_title__3jVXE","sections":"ChapterItemView-module_sections__3zg2a","creating":"ChapterItemView-module_creating__c1q2b","creatingIndicator":"ChapterItemView-module_creatingIndicator__2zOEN outline-module_creatingIndicator__3O7Rw outline-module_indicator__2dw_X icons-module_arrowsCcw__3_nrJ icons-module_icon__16IVx animations-module_blink__32C5j","destroying":"ChapterItemView-module_destroying__2PP1l","destroyingIndicator":"ChapterItemView-module_destroyingIndicator__2YZaB outline-module_destroyingIndicator__2-mKh outline-module_indicator__2dw_X icons-module_trash__DH1EH icons-module_icon__16IVx animations-module_blink__32C5j","failed":"ChapterItemView-module_failed__2MtQW","failedIndicator":"ChapterItemView-module_failedIndicator__2s6Xk outline-module_failedIndicator__2QK1F outline-module_indicator__2dw_X icons-module_attention__1sssG icons-module_icon__16IVx","addSection":"ChapterItemView-module_addSection__3XQvI buttons-module_addButton__2pN-g buttons-module_iconButton__3ZSFV icon_button icons-module_plusCircled__20FlJ icons-module_icon__16IVx"};
+styleInject(css$1);
 
-function Video(props) {
-  var awsBucket = '//s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/presentation-videos/';
-  var videoBoatSunset = awsBucket + 'floodplain-clean.mp4';
-  var poster_videoBoatSunset = awsBucket + 'posterframes/poster_katerchen.jpeg';
-  var videoBoatDark = awsBucket + 'floodplain-dirty.mp4';
-  var poster_videoBoatDark = awsBucket + 'posterframes/poster_katerchen.jpeg';
-  var videoKaterchen = awsBucket + 'katerchen.mp4';
-  var poster_videoKaterchen = awsBucket + 'posterframes/poster_katerchen.jpeg';
-  var videoGarzweilerLoop1 = awsBucket + 'braunkohle_loop1.mp4';
-  var poster_videoGarzweilerLoop1 = awsBucket + 'posterframes/poster_braunkohle_loop1.jpeg';
-  var videoGarzweilerLoop2 = awsBucket + 'braunkohle_loop2.mp4';
-  var poster_videoGarzweilerLoop2 = awsBucket + 'posterframes/poster_braunkohle_loop2.jpeg';
-  var videoGarzweilerDrohne = awsBucket + 'braunkohle_drone.mp4';
-  var poster_videoGarzweilerDrohne = awsBucket + 'posterframes/poster_braunkohle_drone.jpeg';
-  var videoInselInterviewToni = awsBucket + 'pageflow_insel_interview_toni02.mp4';
-  var poster_videoInselInterviewToni = awsBucket + 'posterframes/poster_pageflow_insel_interview_toni02.jpg';
-  var videoUrl = {
-    videoBoatSunset: videoBoatSunset,
-    videoBoatDark: videoBoatDark,
-    videoKaterchen: videoKaterchen,
-    videoGarzweilerLoop1: videoGarzweilerLoop1,
-    videoGarzweilerLoop2: videoGarzweilerLoop2,
-    videoGarzweilerDrohne: videoGarzweilerDrohne,
-    videoInselInterviewToni: videoInselInterviewToni
-  }[props.id];
-  var posterUrl = {
-    poster_videoBoatSunset: poster_videoBoatSunset,
-    poster_videoBoatDark: poster_videoBoatDark,
-    poster_videoKaterchen: poster_videoKaterchen,
-    poster_videoGarzweilerLoop1: poster_videoGarzweilerLoop1,
-    poster_videoGarzweilerLoop2: poster_videoGarzweilerLoop2,
-    poster_videoGarzweilerDrohne: poster_videoGarzweilerDrohne,
-    poster_videoInselInterviewToni: poster_videoInselInterviewToni
-  }['poster_' + props.id];
-  var videoRef = useRef();
-  var state = props.state;
-  var mutedSettings = useContext(MutedContext);
-  var mediaOff = mutedSettings.mediaOff;
-  useEffect(function () {
-    var video = videoRef.current;
-
-    if (video && !mediaOff) {
-      if (state === 'active') {
-        if (video.readyState > 0) {
-          video.play();
-        } else {
-          video.addEventListener('loadedmetadata', play);
-          return function () {
-            return video.removeEventListener('loadedmetadata', play);
-          };
-        }
-      } else {
-        video.pause();
+var ChapterItemView = Marionette.Layout.extend({
+  tagName: 'li',
+  className: styles$1.root,
+  mixins: [modelLifecycleTrackingView({
+    classNames: styles$1
+  })],
+  template: function template() {
+    return "\n     <a class=\"".concat(styles$1.link, "\" href=\"\">\n       <span class=\"").concat(styles$1.number, "\"></span>\n       <span class=\"").concat(styles$1.title, "\"></span>\n       <span class=\"").concat(styles$1.creatingIndicator, "\" />\n       <span class=\"").concat(styles$1.destroyingIndicator, "\" />\n       <span class=\"").concat(styles$1.failedIndicator, "\"\n             title=\"").concat(I18n.t('pageflow_scrolled.editor.chapter_item.save_error'), "\" />\n     </a>\n\n     <ul class=\"").concat(styles$1.sections, "\"></ul>\n\n     <a href=\"\" class=\"").concat(styles$1.addSection, "\">").concat(I18n.t('pageflow_scrolled.editor.chapter_item.add_section'), "</a>\n  ");
+  },
+  ui: cssModulesUtils.ui(styles$1, 'title', 'number', 'sections'),
+  events: cssModulesUtils.events(styles$1, {
+    'click addSection': function clickAddSection() {
+      this.model.addSection();
+    },
+    'click link': function clickLink() {
+      if (!this.model.isNew() && !this.model.isDestroying()) {
+        editor$1.navigate('/scrolled/chapters/' + this.model.get('id'), {
+          trigger: true
+        });
       }
-    }
 
-    function play() {
-      video.play();
+      return false;
     }
-  }, [state, videoRef, mediaOff]);
-  return React.createElement("div", {
-    className: styles$2.root
-  }, React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
-    return React.createElement("video", {
-      src: videoUrl,
-      ref: videoRef,
-      className: classnames(styles$2.video, _defineProperty({}, styles$2.backdrop, !props.interactive)),
-      controls: props.controls,
-      playsInline: true,
-      onEnded: function onEnded() {
-        return props.nextSectionOnEnd && scrollToSection('next');
+  }),
+  modelEvents: {
+    change: 'update'
+  },
+  onRender: function onRender() {
+    this.subview(new SortableCollectionView({
+      el: this.ui.sections,
+      collection: this.model.sections,
+      itemViewConstructor: SectionItemView,
+      itemViewOptions: {
+        entry: this.options.entry
       },
-      loop: !props.interactive,
-      muted: mutedSettings.muted,
-      poster: posterUrl
-    });
-  }));
-}
-Video.defaultProps = {
-  interactive: false,
-  controls: false
-};
-
-var css$3 = ".FillColor-module_FillColor__S1uEG {\n  width: 100%;\n  height: 100vh;\n}\n";
-var styles$3 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
-styleInject(css$3);
-
-function FillColor(props) {
-  return React.createElement("div", {
-    className: styles$3.FillColor,
-    style: {
-      backgroundColor: props.color
-    }
-  });
-}
-
-var css$4 = ".MotifArea-module_root__1_ACd {\n  position: absolute;\n  background: hsla(0, 0%, 100%, 0.2);\n  z-index: 2;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.MotifArea-module_active__1q4z2 {\n  opacity: 1;\n}\n\n.MotifArea-module_corner__3hB5t {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n}\n\n.MotifArea-module_topLeft__3vHHi {\n  border-top: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_topRight__2gNmC {\n  right: 0;\n  border-top: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n\n.MotifArea-module_bottomLeft__2qEqb {\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_bottomRight__3OjTb {\n  right: 0;\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n";
-var styles$4 = {"root":"MotifArea-module_root__1_ACd","active":"MotifArea-module_active__1q4z2","corner":"MotifArea-module_corner__3hB5t","topLeft":"MotifArea-module_topLeft__3vHHi MotifArea-module_corner__3hB5t","topRight":"MotifArea-module_topRight__2gNmC MotifArea-module_corner__3hB5t","bottomLeft":"MotifArea-module_bottomLeft__2qEqb MotifArea-module_corner__3hB5t","bottomRight":"MotifArea-module_bottomRight__3OjTb MotifArea-module_corner__3hB5t"};
-styleInject(css$4);
-
-var MotifArea = React.forwardRef(function MotifArea(props, ref) {
-  var image = useFile({
-    collectionName: 'imageFiles',
-    permaId: props.imageId
-  });
-
-  if (!image) {
-    return null;
-  }
-
-  return React.createElement("div", {
-    ref: ref,
-    className: classnames(styles$4.root, _defineProperty({}, styles$4.active, props.active)),
-    style: position(props, image),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave
-  }, React.createElement("div", {
-    className: styles$4.topLeft
-  }), React.createElement("div", {
-    className: styles$4.topRight
-  }), React.createElement("div", {
-    className: styles$4.bottomLeft
-  }), React.createElement("div", {
-    className: styles$4.bottomRight
-  }));
-});
-
-function position(props, image) {
-  var originalRatio = image.width / image.height;
-  var containerRatio = props.containerWidth / props.containerHeight;
-  var scale = containerRatio > originalRatio ? props.containerWidth / image.width : props.containerHeight / image.height;
-  var contentWidth = image.width * scale;
-  var contentHeight = image.height * scale;
-  var focusX = image.configuration.focusX === undefined ? 50 : image.configuration.focusX;
-  var focusY = image.configuration.focusY === undefined ? 50 : image.configuration.focusY;
-  var cropLeft = (contentWidth - props.containerWidth) * focusX / 100;
-  var cropTop = (contentHeight - props.containerHeight) * focusY / 100;
-  var motifArea = image.configuration.motifArea || {
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0
-  };
-  return {
-    top: contentHeight * motifArea.top / 100 - cropTop,
-    left: contentWidth * motifArea.left / 100 - cropLeft,
-    width: contentWidth * motifArea.width / 100,
-    height: contentHeight * motifArea.height / 100
-  };
-}
-
-function getSize(el) {
-  if (!el) {
-    return {
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0
-    };
-  }
-
-  return {
-    left: el.offsetLeft,
-    top: el.offsetTop,
-    width: el.offsetWidth,
-    height: el.offsetHeight
-  };
-}
-
-function useDimension() {
-  var _useState = useState(getSize(null)),
-      _useState2 = _slicedToArray(_useState, 2),
-      componentSize = _useState2[0],
-      setComponentSize = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentNode = _useState4[0],
-      setCurrentNode = _useState4[1];
-
-  var measuredRef = useCallback(function (node) {
-    setCurrentNode(node);
-    setComponentSize(getSize(node));
-  }, []);
-  useEffect(function () {
-    function handleResize() {
-      setComponentSize(getSize(currentNode));
-    }
-
-    if (!currentNode) {
-      return;
-    }
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [currentNode]);
-  return [componentSize, measuredRef];
-}
-
-var videos = {
-  videoBoatSunset: {
-    id: "videoBoatSunset",
-    width: 960,
-    height: 406,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoBoatDark: {
-    id: "videoBoatDark",
-    width: 960,
-    height: 406,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoKaterchen: {
-    id: "videoKaterchen",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoGarzweilerLoop1: {
-    id: "videoGarzweilerLoop1",
-    width: 3840,
-    height: 2160,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 1,
-      height: 1
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoGarzweilerLoop2: {
-    id: "videoGarzweilerLoop2",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 1,
-      height: 1
-    },
-    focusX: 15,
-    focusY: 20
-  },
-  videoGarzweilerDrohne: {
-    id: "videoGarzweilerDrohne",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    }
-  },
-  videoInselInterviewToni: {
-    id: "videoInselInterviewToni",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    }
-  }
-};
-
-var ResizeSensor = createCommonjsModule(function (module, exports) {
-// Copyright (c) 2013 Marc J. Schmidt
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-// Originally based on version 1.2.1,
-// https://github.com/marcj/css-element-queries/tree/1.2.1
-// Some lines removed for compatibility.
-(function (root, factory) {
-  {
-    module.exports = factory();
-  }
-})(typeof window !== 'undefined' ? window : commonjsGlobal, function () {
-  // Make sure it does not throw in a SSR (Server Side Rendering) situation
-  if (typeof window === "undefined") {
-    return null;
-  } // https://github.com/Semantic-Org/Semantic-UI/issues/3855
-  // https://github.com/marcj/css-element-queries/issues/257
-
-
-  var globalWindow = window; // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
-  // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
-  // would generate too many unnecessary events.
-
-  var requestAnimationFrame = globalWindow.requestAnimationFrame || globalWindow.mozRequestAnimationFrame || globalWindow.webkitRequestAnimationFrame || function (fn) {
-    return globalWindow.setTimeout(fn, 20);
-  };
-
-  function forEachElement(elements, callback) {
-    var elementsType = Object.prototype.toString.call(elements);
-    var isCollectionTyped = '[object Array]' === elementsType || '[object NodeList]' === elementsType || '[object HTMLCollection]' === elementsType || '[object Object]' === elementsType;
-    var i = 0,
-        j = elements.length;
-
-    if (isCollectionTyped) {
-      for (; i < j; i++) {
-        callback(elements[i]);
-      }
-    } else {
-      callback(elements);
-    }
-  }
-
-  function getElementSize(element) {
-    if (!element.getBoundingClientRect) {
-      return {
-        width: element.offsetWidth,
-        height: element.offsetHeight
-      };
-    }
-
-    var rect = element.getBoundingClientRect();
-    return {
-      width: Math.round(rect.width),
-      height: Math.round(rect.height)
-    };
-  }
-
-  function setStyle(element, style) {
-    Object.keys(style).forEach(function (key) {
-      element.style[key] = style[key];
-    });
-  }
-
-  var ResizeSensor = function ResizeSensor(element, callback) {
-    function EventQueue() {
-      var q = [];
-
-      this.add = function (ev) {
-        q.push(ev);
-      };
-
-      var i, j;
-
-      this.call = function (sizeInfo) {
-        for (i = 0, j = q.length; i < j; i++) {
-          q[i].call(this, sizeInfo);
-        }
-      };
-
-      this.remove = function (ev) {
-        var newQueue = [];
-
-        for (i = 0, j = q.length; i < j; i++) {
-          if (q[i] !== ev) newQueue.push(q[i]);
-        }
-
-        q = newQueue;
-      };
-
-      this.length = function () {
-        return q.length;
-      };
-    }
-
-    function attachResizeEvent(element, resized) {
-      if (!element) return;
-
-      if (element.resizedAttached) {
-        element.resizedAttached.add(resized);
-        return;
-      }
-
-      element.resizedAttached = new EventQueue();
-      element.resizedAttached.add(resized);
-      element.resizeSensor = document.createElement('div');
-      element.resizeSensor.dir = 'ltr';
-      element.resizeSensor.className = 'resize-sensor';
-      var style = {
-        pointerEvents: 'none',
-        position: 'absolute',
-        left: '0px',
-        top: '0px',
-        right: '0px',
-        bottom: '0px',
-        overflow: 'hidden',
-        zIndex: '-1',
-        visibility: 'hidden',
-        maxWidth: '100%'
-      };
-      var styleChild = {
-        position: 'absolute',
-        left: '0px',
-        top: '0px',
-        transition: '0s'
-      };
-      setStyle(element.resizeSensor, style);
-      var expand = document.createElement('div');
-      expand.className = 'resize-sensor-expand';
-      setStyle(expand, style);
-      var expandChild = document.createElement('div');
-      setStyle(expandChild, styleChild);
-      expand.appendChild(expandChild);
-      var shrink = document.createElement('div');
-      shrink.className = 'resize-sensor-shrink';
-      setStyle(shrink, style);
-      var shrinkChild = document.createElement('div');
-      setStyle(shrinkChild, styleChild);
-      setStyle(shrinkChild, {
-        width: '200%',
-        height: '200%'
-      });
-      shrink.appendChild(shrinkChild);
-      element.resizeSensor.appendChild(expand);
-      element.resizeSensor.appendChild(shrink);
-      element.appendChild(element.resizeSensor);
-      var computedStyle = window.getComputedStyle(element);
-      var position = computedStyle ? computedStyle.getPropertyValue('position') : null;
-
-      if ('absolute' !== position && 'relative' !== position && 'fixed' !== position) {
-        element.style.position = 'relative';
-      }
-
-      var dirty, rafId;
-      var size = getElementSize(element);
-      var lastWidth = 0;
-      var lastHeight = 0;
-      var initialHiddenCheck = true;
-      var lastAnimationFrame = 0;
-
-      var resetExpandShrink = function resetExpandShrink() {
-        var width = element.offsetWidth;
-        var height = element.offsetHeight;
-        expandChild.style.width = width + 10 + 'px';
-        expandChild.style.height = height + 10 + 'px';
-        expand.scrollLeft = width + 10;
-        expand.scrollTop = height + 10;
-        shrink.scrollLeft = width + 10;
-        shrink.scrollTop = height + 10;
-      };
-
-      var reset = function reset() {
-        // Check if element is hidden
-        if (initialHiddenCheck) {
-          var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
-
-          if (invisible) {
-            // Check in next frame
-            if (!lastAnimationFrame) {
-              lastAnimationFrame = requestAnimationFrame(function () {
-                lastAnimationFrame = 0;
-                reset();
-              });
-            }
-
-            return;
-          } else {
-            // Stop checking
-            initialHiddenCheck = false;
-          }
-        }
-
-        resetExpandShrink();
-      };
-
-      element.resizeSensor.resetSensor = reset;
-
-      var onResized = function onResized() {
-        rafId = 0;
-        if (!dirty) return;
-        lastWidth = size.width;
-        lastHeight = size.height;
-
-        if (element.resizedAttached) {
-          element.resizedAttached.call(size);
-        }
-      };
-
-      var onScroll = function onScroll() {
-        size = getElementSize(element);
-        dirty = size.width !== lastWidth || size.height !== lastHeight;
-
-        if (dirty && !rafId) {
-          rafId = requestAnimationFrame(onResized);
-        }
-
-        reset();
-      };
-
-      var addEvent = function addEvent(el, name, cb) {
-        if (el.attachEvent) {
-          el.attachEvent('on' + name, cb);
-        } else {
-          el.addEventListener(name, cb);
-        }
-      };
-
-      addEvent(expand, 'scroll', onScroll);
-      addEvent(shrink, 'scroll', onScroll); // Fix for custom Elements
-
-      requestAnimationFrame(reset);
-    }
-
-    forEachElement(element, function (elem) {
-      attachResizeEvent(elem, callback);
-    });
-
-    this.detach = function (ev) {
-      ResizeSensor.detach(element, ev);
-    };
-
-    this.reset = function () {
-      element.resizeSensor.resetSensor();
-    };
-  };
-
-  ResizeSensor.reset = function (element) {
-    forEachElement(element, function (elem) {
-      elem.resizeSensor.resetSensor();
-    });
-  };
-
-  ResizeSensor.detach = function (element, ev) {
-    forEachElement(element, function (elem) {
-      if (!elem) return;
-
-      if (elem.resizedAttached && typeof ev === "function") {
-        elem.resizedAttached.remove(ev);
-        if (elem.resizedAttached.length()) return;
-      }
-
-      if (elem.resizeSensor) {
-        if (elem.contains(elem.resizeSensor)) {
-          elem.removeChild(elem.resizeSensor);
-        }
-
-        delete elem.resizeSensor;
-        delete elem.resizedAttached;
-      }
-    });
-  };
-
-  if (typeof MutationObserver !== "undefined") {
-    var observer = new MutationObserver(function (mutations) {
-      for (var i in mutations) {
-        if (mutations.hasOwnProperty(i)) {
-          var items = mutations[i].addedNodes;
-
-          for (var j = 0; j < items.length; j++) {
-            if (items[j].resizeSensor) {
-              ResizeSensor.reset(items[j]);
-            }
-          }
-        }
-      }
-    });
-    document.addEventListener("DOMContentLoaded", function (event) {
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-    });
-  }
-
-  return ResizeSensor;
-});
-});
-
-var cssElementQueries = {
-  ResizeSensor: ResizeSensor
-};
-var cssElementQueries_1 = cssElementQueries.ResizeSensor;
-
-function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(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$5({
-      display: 'block',
-      height: 'auto',
-      // Respect the aspect ratio
-      width: '100%'
-    }, rightImageCss),
-    leftImage: _objectSpread$5({
-      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$5({}, styles.container)
-  }, skeleton), React.createElement("div", {
-    style: _objectSpread$5({}, 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$5 = ".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$5 = {"container":"BeforeAfter-module_container__38Dru","shake":"BeforeAfter-module_shake__3iLe8"};
-styleInject(css$5);
-
-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$5.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$6 = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
-var styles$6 = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
-styleInject(css$6);
-
-function Backdrop(props) {
-  var _useDimension = useDimension(),
-      _useDimension2 = _slicedToArray(_useDimension, 2),
-      containerDimension = _useDimension2[0],
-      setContainerRef = _useDimension2[1];
-
-  return React.createElement("div", {
-    className: classnames(styles$6.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$6.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$7 = ".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$7 = {"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$7);
-
-function Foreground(props) {
-  return React.createElement("div", {
-    className: className(props)
-  }, props.children);
-}
-
-function className(props) {
-  var _classNames;
-
-  return classnames(styles$7.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$7["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$7.hidden, props.hidden), _defineProperty(_classNames, styles$7.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$8 = "\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$8 = {"text-l":"40px","text-xl":"66px","text-2xl":"110px","Heading":"Heading-module_Heading__1YSiy","first":"Heading-module_first__1yPxD"};
-styleInject(css$8);
-
-function Heading(props) {
-  return React.createElement("h1", {
-    className: classnames(styles$8.Heading, _defineProperty({}, styles$8.first, props.first)),
-    style: props.style
-  }, props.children);
-}
-
-var css$9 = "\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$9 = {"text-base":"22px","TextBlock":"TextBlock-module_TextBlock__5Zpj7","dummy":"TextBlock-module_dummy__3W5ls"};
-styleInject(css$9);
-
-function TextBlock(props) {
-  return React.createElement("div", {
-    className: classnames(styles$9.TextBlock, _defineProperty({}, styles$9.dummy, props.dummy)),
-    style: props.style,
-    dangerouslySetInnerHTML: {
-      __html: props.children
-    }
-  });
-}
-
-var css$a = ".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$a = {"text-base":"22px","root":"InlineCaption-module_root__1R8Ib"};
-styleInject(css$a);
-
-function InlineCaption(props) {
-  if (props.text) {
-    return React.createElement("div", {
-      className: styles$a.root
-    }, props.text);
-  } else {
-    return null;
-  }
-}
-
-var css$b = ".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$b = {"root":"InlineImage-module_root__1DvUb","container":"InlineImage-module_container__Pui7E","spacer":"InlineImage-module_spacer__2rMkE","inner":"InlineImage-module_inner__2AMK-"};
-styleInject(css$b);
-
-function InlineImage(props) {
-  return React.createElement("div", {
-    className: classnames(styles$b.root)
-  }, React.createElement("div", {
-    className: styles$b.container
-  }, React.createElement("div", {
-    className: styles$b.spacer
-  }, React.createElement("div", {
-    className: styles$b.inner
-  }, React.createElement(Image, props)))), React.createElement(InlineCaption, {
-    text: props.caption
-  }));
-}
-
-var css$c = ".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$c = {"root":"InlineVideo-module_root__2UD3D","inner":"InlineVideo-module_inner__H81_g"};
-styleInject(css$c);
-
-function InlineVideo(props) {
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
-  return React.createElement("div", {
-    ref: ref,
-    className: classnames(styles$c.root)
-  }, React.createElement("div", {
-    style: {
-      paddingTop: props.wideFormat ? '41.15%' : '56.25%'
-    }
-  }, React.createElement("div", {
-    className: styles$c.inner
-  }, React.createElement(Video, Object.assign({}, props, {
-    state: onScreen ? 'active' : 'inactive',
-    interactive: true
-  })))));
-}
-
-var css$d = ".InlineBeforeAfter-module_root__2O9F8 {\n  position: relative;\n  margin: 0 auto;\n}\n";
-var styles$d = {"root":"InlineBeforeAfter-module_root__2O9F8"};
-styleInject(css$d);
-
-function InlineBeforeAfter(props) {
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
-  return React.createElement("div", {
-    ref: ref,
-    className: styles$d.root
-  }, React.createElement(BeforeAfter, Object.assign({}, props, {
-    state: onScreen ? 'active' : 'inactive'
-  })));
-}
-
-var css$e = ".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$e = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__1sAiH"};
-styleInject(css$e);
-
-function UnmuteButton() {
-  return React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
-    return React.createElement("div", {
-      className: classnames(styles$e.soundDisclaimer),
-      onClick: function onClick() {
-        return mutedSettings.setMuted(false);
-      }
-    }, React.createElement("p", null, "Dieser Artikel wirkt am besten mit eingeschaltetem Ton.", React.createElement("br", null), "Klicken Sie einmal in dieses Feld, um den Ton f\xFCr die gesamte Geschichte zu aktivieren."));
-  });
-}
-
-var loremIpsum1 = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ';
-var loremIpsum2 = 'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
-var loremIpsum3 = 'Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.';
-
-var templates = {
-  heading: {
-    name: 'Überschrift',
-    component: Heading
-  },
-  textBlock: {
-    name: 'Text Block',
-    component: TextBlock
-  },
-  soundDisclaimer: {
-    name: 'Sound Disclaimer',
-    component: UnmuteButton
-  },
-  loremIpsum1: {
-    name: 'Blindtext 1',
-    component: TextBlock,
-    props: {
-      children: loremIpsum1
-    }
-  },
-  loremIpsum2: {
-    name: 'Blindtext 2',
-    component: TextBlock,
-    props: {
-      children: loremIpsum2
-    }
-  },
-  loremIpsum3: {
-    name: 'Blindtext 3',
-    component: TextBlock,
-    props: {
-      children: loremIpsum3
-    }
-  },
-  inlineImage: {
-    name: 'Inline Bild',
-    component: InlineImage,
-    inlinePositioning: true
-  },
-  inlineVideo: {
-    name: 'Inline Video',
-    component: InlineVideo,
-    inlinePositioning: true
-  },
-  inlineBeforeAfter: {
-    name: 'Inline Before/After',
-    component: InlineBeforeAfter,
-    inlinePositioning: true
-  },
-  stickyImage: {
-    name: 'Sticky Bild',
-    component: InlineImage,
-    inlinePositioning: true
-  }
-};
-
-function ForegroundItem(props) {
-  var template = templates[props.type];
-  var Component = template.component;
-  return React.createElement(Component, Object.assign({}, template.props, props.itemProps));
-}
-
-function ForegroundItems(props) {
-  return React.createElement(React.Fragment, null, props.items.map(function (item, index) {
-    return props.children(item, React.createElement(ForegroundItem, {
-      key: index,
-      type: item.type,
-      position: item.position,
-      itemProps: item.props
-    }));
-  }));
-}
-ForegroundItems.defaultProps = {
-  children: function children(item, child) {
-    return child;
-  }
-};
-
-var css$f = ".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$f = {"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$f);
-
-var availablePositions = ['inline', 'sticky', 'full'];
-function TwoColumn(props) {
-  return React.createElement("div", {
-    className: classnames(styles$f.root, styles$f[props.align])
-  }, React.createElement("div", {
-    className: styles$f.inline,
-    ref: props.contentAreaRef
-  }), renderItems(props));
-}
-TwoColumn.defaultProps = {
-  align: 'left'
-};
-
-function renderItems(props) {
-  return groupItemsByPosition(props.items).map(function (group, index) {
-    return React.createElement("div", {
-      key: index,
-      className: classnames(styles$f.group, styles$f["group-".concat(group.position)])
-    }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'));
-  });
-}
-
-function renderItemGroup(props, group, position) {
-  if (group[position].length) {
-    return React.createElement("div", {
-      className: styles$f[position]
-    }, props.children(React.createElement(ForegroundItems, {
-      items: group[position]
-    })));
-  }
-}
-
-function groupItemsByPosition(items) {
-  var groups = [];
-  var currentGroup;
-  items.reduce(function (previousItemPosition, item, index) {
-    var position = availablePositions.indexOf(item.position) >= 0 ? item.position : 'inline';
-
-    if (!previousItemPosition || previousItemPosition !== position && (previousItemPosition !== 'sticky' || position !== 'inline')) {
-      currentGroup = {
-        position: position,
-        sticky: [],
-        inline: [],
-        full: []
-      };
-      groups = [].concat(_toConsumableArray(groups), [currentGroup]);
-    }
-
-    currentGroup[position].push(item);
-    return position;
-  }, null);
-  return groups;
-}
-
-var css$g = ".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$g = {"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$g);
-
-function Center(props) {
-  return React.createElement("div", {
-    className: classnames(styles$g.root)
-  }, React.createElement("div", {
-    ref: props.contentAreaRef
-  }), React.createElement(ForegroundItems, {
-    items: props.items
-  }, function (item, child) {
-    return React.createElement("div", {
-      key: item.index,
-      className: classnames(styles$g.outer, styles$g["outer-".concat(item.position)])
-    }, React.createElement("div", {
-      className: classnames(styles$g.item, styles$g["item-".concat(item.position)])
-    }, props.children(React.createElement("div", {
-      className: styles$g["inner-".concat(item.position)]
-    }, child))));
-  }));
-}
-
-function Layout(props) {
-  if (props.layout === 'center') {
-    return React.createElement(Center, props);
-  } else if (props.layout === 'right') {
-    return React.createElement(TwoColumn, Object.assign({
-      align: "right"
-    }, props));
-  } else {
-    return React.createElement(TwoColumn, props);
-  }
-}
-Layout.defaultProps = {
-  layout: 'left'
-};
-
-function isIntersectingX(rectA, rectB) {
-  return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
-}
-
-function getBoundingClientRect(el) {
-  if (!el) {
-    return {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      width: 0,
-      height: 0
-    };
-  }
-
-  return el.getBoundingClientRect();
-}
-
-function useBoundingClientRect() {
-  var _useState = useState(getBoundingClientRect(null)),
-      _useState2 = _slicedToArray(_useState, 2),
-      boundingClientRect = _useState2[0],
-      setBoundingClientRect = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentNode = _useState4[0],
-      setCurrentNode = _useState4[1];
-
-  var measureRef = useCallback(function (node) {
-    setCurrentNode(node);
-    setBoundingClientRect(getBoundingClientRect(node));
-  }, []);
-  useEffect(function () {
-    function handler() {
-      setBoundingClientRect(getBoundingClientRect(currentNode));
-    }
-
-    if (!currentNode) {
-      return;
-    }
-
-    window.addEventListener('resize', handler);
-    window.addEventListener('scroll', handler);
-    return function () {
-      window.removeEventListener('resize', handler);
-      window.removeEventListener('scroll', handler);
-    };
-  }, [currentNode]);
-  return [boundingClientRect, measureRef];
-}
-
-function useScrollTarget(ref, isScrollTarget) {
-  useEffect(function () {
-    if (ref.current && isScrollTarget) {
-      window.scrollTo({
-        top: ref.current.getBoundingClientRect().top + window.scrollY - window.innerHeight * 0.25,
-        behavior: 'smooth'
-      });
-    }
-  }, [ref, isScrollTarget]);
-}
-
-var css$h = ".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$h = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
-styleInject(css$h);
-
-var css$i = "\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$i);
-
-var css$j = "\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$j);
-
-var css$k = "\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$k);
-
-var css$l = "\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$l);
-
-var css$m = "\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$m);
-
-var css$n = "\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$n);
-
-var css$o = "\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$o);
-
-var css$p = "\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$p);
-
-var css$q = ".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$q);
-
-var css$r = "\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$r);
-
-var css$s = "\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$s);
-
-var css$t = ".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$t);
-
-var css$u = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
-var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
-styleInject(css$u);
-
-var css$v = "\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$v);
-
-var css$w = "\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$w);
-
-var css$x = ".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$x);
-
-var css$y = ".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$y);
-
-var styles$i = {
-  fadeInBgConceal: fadeInBgConceal,
-  fadeInBgFadeOut: fadeInBgFadeOut,
-  fadeInBgFadeOutBg: fadeInBgFadeOutBg,
-  fadeInBgScrollOut: fadeInBgScrollOut,
-  fadeInConceal: fadeInConceal,
-  fadeInFadeOut: fadeInFadeOut,
-  fadeInFadeOutBg: fadeInFadeOutBg,
-  fadeInScrollOut: fadeInScrollOut,
-  revealConceal: revealConceal,
-  revealFadeOut: revealFadeOut,
-  revealFadeOutBg: revealFadeOutBg,
-  revealScrollOut: revealScrollOut,
-  scrollInConceal: scrollInConceal,
-  scrollInFadeOut: scrollInFadeOut,
-  scrollInFadeOutBg: scrollInFadeOutBg,
-  scrollInScrollOut: scrollInScrollOut,
-  previewScrollOut: previewScrollOut
-};
-var enterTransitions = {
-  fade: 'fadeIn',
-  fadeBg: 'fadeInBg',
-  scroll: 'scrollIn',
-  scrollOver: 'scrollIn',
-  reveal: 'reveal',
-  beforeAfter: 'reveal',
-  preview: 'preview'
-};
-var exitTransitions = {
-  fade: 'fadeOut',
-  fadeBg: 'fadeOutBg',
-  scroll: 'scrollOut',
-  scrollOver: 'conceal',
-  reveal: 'scrollOut',
-  beforeAfter: 'conceal'
-};
-function getTransitionStyles(section, previousSection, nextSection) {
-  var enterTransition = enterTransitions[section.transition];
-  var exitTransition = exitTransitions[nextSection ? nextSection.transition : 'scroll'];
-  var name = "".concat(enterTransition).concat(capitalize(exitTransition));
-
-  if (!styles$i[name]) {
-    throw new Error("Unknown transition ".concat(name));
-  }
-
-  return styles$i[name];
-}
-
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-function NoOpShadow(props) {
-  return React.createElement("div", null, props.children);
-}
-
-var css$z = ".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$j = {"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$z);
-
-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$j.root, styles$j["align-".concat(props.align)], _defineProperty({}, styles$j.intersecting, props.intersecting))
-  }, React.createElement("div", {
-    className: styles$j.shadow,
-    style: {
-      opacity: props.opacity * Math.round(opacityFactor * 10) / 10
-    }
-  }), props.children);
-}
-GradientShadow.defaultProps = {
-  opacity: 0.7,
-  align: 'left'
-};
-
-function NoOpBoxWrapper(props) {
-  return React.createElement("div", null, props.children);
-}
-
-var css$A = ".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$k = {"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$A);
-
-function GradientBox(props) {
-  var _classNames;
-
-  var padding = props.active ? props.padding : 0;
-  return React.createElement("div", {
-    className: classnames(styles$k.root, (_classNames = {}, _defineProperty(_classNames, styles$k.gradient, padding > 0), _defineProperty(_classNames, styles$k["long"], props.coverInvisibleNextSection), _classNames)),
-    style: {
-      paddingTop: padding
-    }
-  }, React.createElement("div", {
-    className: styles$k.wrapper
-  }, React.createElement("div", {
-    className: classnames(styles$k.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
-    style: {
-      top: padding,
-      opacity: props.opacity
-    }
-  }), React.createElement("div", {
-    className: styles$k.content
-  }, props.children)));
-}
-GradientBox.defaultProps = {
-  opacity: 1
-};
-
-var css$B = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
-var styles$l = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
-styleInject(css$B);
-
-function CardBox(props) {
-  var padding = props.active ? props.padding : 0;
-  return React.createElement("div", {
-    style: {
-      paddingTop: padding
-    }
-  }, React.createElement("div", {
-    className: styles$l.wrapper
-  }, React.createElement("div", {
-    style: {
-      top: padding
-    }
-  }), React.createElement("div", {
-    className: styles$l.content
-  }, props.children)));
-}
-
-var css$C = ".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$m = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
-styleInject(css$C);
-
-function CardBoxWrapper(props) {
-  return React.createElement("div", {
-    className: styles$m.cardBg
-  }, props.children);
-}
-
-function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var OnScreenContext = React.createContext({
-  center: false,
-  top: false,
-  bottom: false
-});
-function Section$1(props) {
-  var activityProbeRef = useRef();
-  useOnScreen(activityProbeRef, '-50% 0px -50% 0px', props.onActivate);
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '0px 0px 0px 0px');
-  useScrollTarget(ref, props.isScrollTarget);
-
-  var _useBoundingClientRec = useBoundingClientRect(),
-      _useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
-      motifAreaRect = _useBoundingClientRec2[0],
-      setMotifAreaRectRect = _useBoundingClientRec2[1];
-
-  var _useDimension = useDimension(),
-      _useDimension2 = _slicedToArray(_useDimension, 2),
-      motifAreaDimension = _useDimension2[0],
-      setMotifAreaDimensionRef = _useDimension2[1];
-
-  var setMotifAreaRefs = useCallback(function (node) {
-    setMotifAreaRectRect(node);
-    setMotifAreaDimensionRef(node);
-  }, [setMotifAreaRectRect, setMotifAreaDimensionRef]);
-
-  var _useBoundingClientRec3 = useBoundingClientRect(props.layout),
-      _useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
-      contentAreaRect = _useBoundingClientRec4[0],
-      setContentAreaRef = _useBoundingClientRec4[1];
-
-  var intersecting = isIntersectingX(motifAreaRect, contentAreaRect);
-  var heightOffset = 0; //(props.backdrop.first || props.transition === 'scrollOver') ? 0 : (window.innerHeight / 3);
-
-  var transitionStyles = getTransitionStyles(props, props.previousSection, props.nextSection);
-  var appearance = {
-    shadow: {
-      background: GradientShadow,
-      foreground: GradientBox,
-      foregroundWrapper: NoOpBoxWrapper
-    },
-    transparent: {
-      background: NoOpShadow,
-      foreground: CardBox,
-      foregroundWrapper: NoOpBoxWrapper
-    },
-    cards: {
-      background: NoOpShadow,
-      foreground: CardBox,
-      foregroundWrapper: CardBoxWrapper
-    }
-  }[props.appearance || 'shadow'];
-  var Shadow = appearance.background;
-  var Box = appearance.foreground;
-  var BoxWrapper = appearance.foregroundWrapper;
-  return React.createElement("section", {
-    id: "section-".concat(props.permaId),
-    ref: ref,
-    className: classnames(styles$h.Section, transitionStyles.section, _defineProperty({}, styles$h.invert, props.invert))
-  }, React.createElement("div", {
-    ref: activityProbeRef,
-    className: styles$h.activityProbe
-  }), React.createElement(Backdrop, Object.assign({}, props.backdrop, {
-    motifAreaRef: setMotifAreaRefs,
-    onScreen: onScreen,
-    offset: Math.max(0, Math.max(1, -contentAreaRect.top / 200)),
-    state: props.state,
-    transitionStyles: transitionStyles,
-    nextSectionOnEnd: props.nextSectionOnEnd,
-    interactive: props.interactiveBackdrop
-  }), function (children) {
-    return props.interactiveBackdrop ? children : React.createElement(Shadow, {
-      align: props.layout,
-      intersecting: intersecting,
-      opacity: props.shadowOpacity >= 0 ? props.shadowOpacity / 100 : 0.7,
-      motifAreaRect: motifAreaRect,
-      contentAreaRect: contentAreaRect
-    }, children);
-  }), React.createElement(Foreground, {
-    transitionStyles: transitionStyles,
-    hidden: props.interactiveBackdrop,
-    disableEnlarge: props.disableEnlarge,
-    state: props.state,
-    heightMode: heightMode(props)
-  }, React.createElement(Box, {
-    active: intersecting,
-    coverInvisibleNextSection: props.nextSection && props.nextSection.transition.startsWith('fade'),
-    transitionStyles: transitionStyles,
-    state: props.state,
-    padding: Math.max(0, motifAreaDimension.top + motifAreaDimension.height - heightOffset),
-    opacity: props.shadowOpacity
-  }, React.createElement(Layout, {
-    items: indexItems(props.foreground),
-    appearance: props.appearance,
-    contentAreaRef: setContentAreaRef,
-    layout: props.layout
-  }, function (children) {
-    return React.createElement(BoxWrapper, null, children);
-  }))));
-}
-
-function indexItems(items) {
-  return items.map(function (item, index) {
-    return _objectSpread$6({}, item, {
-      index: index
-    });
-  });
-}
-
-function heightMode(props) {
-  if (props.fullHeight) {
-    if (props.transition.startsWith('fade') || props.nextSection && props.nextSection.transition.startsWith('fade')) {
-      return 'fullFade';
-    } else {
-      return 'full';
-    }
-  }
-
-  return 'dynamic';
-}
-
-var css$D = "\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 entryStyles = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
-styleInject(css$D);
-
-var css$E = ".SectionThumbnail-module_root__16zjY {\n  padding-top: 50%;\n  position: relative;\n  border: solid 1px #888;\n}\n\n.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$n = {"root":"SectionThumbnail-module_root__16zjY","crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
-styleInject(css$E);
-
-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$n.root
-    }, React.createElement("div", {
-      className: styles$n.crop
-    }, React.createElement("div", {
-      className: styles$n.scale
-    }, React.createElement("div", {
-      className: entryStyles.Entry
-    }, React.createElement(Section$1, Object.assign({
-      state: "active"
-    }, section, {
-      transition: "preview"
-    }))))));
-  } else {
-    return React.createElement("div", {
-      className: styles$n.root
-    }, "Not found.");
-  }
-}
-
-Inner.defaultProps = {
-  subscribe: function subscribe() {}
-};
-
-var css$F = ".icons-module_icon__16IVx::before {\n  font-family: \"entypo\";\n}.icons-module_arrowsCcw__3_nrJ,\n.icons-module_attention__1sssG,\n.icons-module_plusCircled__20FlJ,\n.icons-module_rightOpen__9vsOG,\n.icons-module_trash__DH1EH {\n}.icons-module_arrowsCcw__3_nrJ::before {\n  content: \"\\1F504\";\n}.icons-module_attention__1sssG::before {\n  content: \"\\26A0\";\n}.icons-module_plusCircled__20FlJ::before {\n  content: \"\\2795\";\n}.icons-module_rightOpen__9vsOG::before {\n  content: \"\\E75E\"\n}.icons-module_trash__DH1EH::before {\n  content: \"\\E729\";\n}@keyframes animations-module_blink__32C5j {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}.animations-module_blink__32C5j {\n  animation: animations-module_blink__32C5j 1.5s ease infinite;\n}.outline-module_indicator__2dw_X {\n  display: none;\n  position: absolute;\n  right: 14px;\n  top: 7px;\n  width: 30px;\n  height: 30px;\n  font-size: 19px;\n  color: #888;\n}.outline-module_creatingIndicator__3O7Rw {\n}.outline-module_destroyingIndicator__2-mKh {\n}.outline-module_failedIndicator__2QK1F {\n  color: #d00;\n}\n\n.SectionItemView-module_root__1Pp0d {\n  position: relative;\n  border: solid 3px transparent;\n  padding: 3px 3px 0 3px;\n  margin-bottom: 4px;\n  max-width: 270px;\n  text-align: right;\n  background-color: #eee;\n}\n\n.SectionItemView-module_active__1tLN5 {\n  border: solid 3px #1c86fe;\n}\n\n.SectionItemView-module_thumbnailContainer__1Xe7C {\n  position: relative;\n}\n\n.SectionItemView-module_thumbnail__1ecBT {}\n\n.SectionItemView-module_clickMask__2JYEH {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  cursor: pointer;\n}\n\n.SectionItemView-module_editLink__2mHqk {\n  display: inline-block;\n  position: relative;\n  width: 30px;\n  height: 25px;\n}\n\n.SectionItemView-module_editLink__2mHqk::before {\n  font-family: 'entypo';\n  content: \"\\270E\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  color: #555;\n  font-size: 15px;\n}\n\n.SectionItemView-module_creating__3Pjx9 .SectionItemView-module_creatingIndicator__1GnKq     { display: block; }\n.SectionItemView-module_destroying__1m53s .SectionItemView-module_destroyingIndicator__HtKWF { display: block; }\n.SectionItemView-module_failed__1CR2R .SectionItemView-module_failedIndicator__1HVHn         { display: block; }\n\n.SectionItemView-module_creatingIndicator__1GnKq   { }\n.SectionItemView-module_destroyingIndicator__HtKWF {  }\n.SectionItemView-module_failedIndicator__1HVHn     { }\n";
-var styles$o = {"selectionColor":"#1c86fe","selectionWidth":"3px","root":"SectionItemView-module_root__1Pp0d","active":"SectionItemView-module_active__1tLN5","thumbnailContainer":"SectionItemView-module_thumbnailContainer__1Xe7C","thumbnail":"SectionItemView-module_thumbnail__1ecBT","clickMask":"SectionItemView-module_clickMask__2JYEH","editLink":"SectionItemView-module_editLink__2mHqk","creating":"SectionItemView-module_creating__3Pjx9","creatingIndicator":"SectionItemView-module_creatingIndicator__1GnKq outline-module_creatingIndicator__3O7Rw outline-module_indicator__2dw_X icons-module_arrowsCcw__3_nrJ icons-module_icon__16IVx animations-module_blink__32C5j","destroying":"SectionItemView-module_destroying__1m53s","destroyingIndicator":"SectionItemView-module_destroyingIndicator__HtKWF outline-module_destroyingIndicator__2-mKh outline-module_indicator__2dw_X icons-module_trash__DH1EH icons-module_icon__16IVx animations-module_blink__32C5j","failed":"SectionItemView-module_failed__1CR2R","failedIndicator":"SectionItemView-module_failedIndicator__1HVHn outline-module_failedIndicator__2QK1F outline-module_indicator__2dw_X icons-module_attention__1sssG icons-module_icon__16IVx"};
-styleInject(css$F);
-
-var _events;
-var SectionItemView = Marionette.ItemView.extend({
-  tagName: 'li',
-  className: styles$o.root,
-  mixins: [modelLifecycleTrackingView({
-    classNames: styles$o
-  })],
-  template: function template(data) {
-    return "\n    <div class=\"".concat(styles$o.thumbnailContainer, "\">\n      <div class=\"").concat(styles$o.thumbnail, "\"></div>\n      <div class=\"").concat(styles$o.clickMask, "\"></div>\n    </div>\n       <span class=\"").concat(styles$o.creatingIndicator, "\" />\n       <span class=\"").concat(styles$o.destroyingIndicator, "\" />\n       <span class=\"").concat(styles$o.failedIndicator, "\"\n             title=\"").concat(I18n.t('pageflow_scrolled.editor.section_item.save_error'), "\" />\n    <a href=\"\" class=\"").concat(styles$o.editLink, "\" title=\"").concat(I18n.t('pageflow_scrolled.editor.section_item.edit'), "\"></a>\n  ");
-  },
-  ui: cssModulesUtils.ui(styles$o, 'thumbnail'),
-  events: (_events = {}, _defineProperty(_events, "click .".concat(styles$o.clickMask), function click() {
-    this.options.entry.trigger('scrollToSection', this.model);
-  }), _defineProperty(_events, "click .".concat(styles$o.editLink), function click() {
-    if (!this.model.isNew() && !this.model.isDestroying()) {
-      this.options.entry.trigger('scrollToSection', this.model);
-      editor.navigate("/scrolled/sections/".concat(this.model.id), {
-        trigger: true
-      });
-    }
-
-    return false;
-  }), _events),
-  initialize: function initialize() {
-    var _this = this;
-
-    this.listenTo(this.options.entry, 'change:currentSectionIndex', function () {
-      var active = _this.options.entry.sections.indexOf(_this.model) === _this.options.entry.get('currentSectionIndex');
-
-      _this.$el.toggleClass(styles$o.active, active);
-
-      if (active) {
-        _this.$el[0].scrollIntoView({
-          block: 'nearest',
-          behavior: 'smooth'
-        });
-      }
-    });
-  },
-  onRender: function onRender() {
-    var _this2 = this;
-
-    ReactDOM.render(React.createElement(SectionThumbnail, {
-      sectionPermaId: this.model.get('permaId'),
-      seed: this.options.entry.scrolledSeed,
-      subscribe: function subscribe(dispatch) {
-        return watchCollections(_this2.options.entry, {
-          dispatch: dispatch
-        });
-      }
-    }), this.ui.thumbnail[0]);
-  }
-});
-
-var css$G = ".icons-module_icon__16IVx::before {\n  font-family: \"entypo\";\n}.icons-module_arrowsCcw__3_nrJ,\n.icons-module_attention__1sssG,\n.icons-module_plusCircled__20FlJ,\n.icons-module_rightOpen__9vsOG,\n.icons-module_trash__DH1EH {\n}.icons-module_arrowsCcw__3_nrJ::before {\n  content: \"\\1F504\";\n}.icons-module_attention__1sssG::before {\n  content: \"\\26A0\";\n}.icons-module_plusCircled__20FlJ::before {\n  content: \"\\2795\";\n}.icons-module_rightOpen__9vsOG::before {\n  content: \"\\E75E\"\n}.icons-module_trash__DH1EH::before {\n  content: \"\\E729\";\n}@keyframes animations-module_blink__32C5j {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}.animations-module_blink__32C5j {\n  animation: animations-module_blink__32C5j 1.5s ease infinite;\n}.outline-module_indicator__2dw_X {\n  display: none;\n  position: absolute;\n  right: 14px;\n  top: 7px;\n  width: 30px;\n  height: 30px;\n  font-size: 19px;\n  color: #888;\n}.outline-module_creatingIndicator__3O7Rw {\n}.outline-module_destroyingIndicator__2-mKh {\n}.outline-module_failedIndicator__2QK1F {\n  color: #d00;\n}.buttons-module_iconButton__3ZSFV {\n  /* see app/assets/stylesheets/pageflow/editor/composable.scss */\n}.buttons-module_addButton__2pN-g {\n}\n\n.ChapterItemView-module_root__19GIF {\n  background-color: #fff;\n  margin-bottom: 10px;\n  padding: 0 10px 10px 10px;\n}\n\n.ChapterItemView-module_link__2dj_z {\n  display: block;\n  position: relative;\n  margin: 0 -10px 0 -10px;\n  padding: 10px 10px 10px 30px;\n  background-color: #efefef;\n}\n\n.ChapterItemView-module_link__2dj_z::before {\n  position: absolute;\n  right: 7px;\n  top: 7px;\n  font-size: 19px;\n  color: #888;\n}\n\n.ChapterItemView-module_number__1GjyC {\n  font-weight: bold;\n}\n\n.ChapterItemView-module_title__3jVXE {}\n\n.ChapterItemView-module_sections__3zg2a {\n  margin: 10px 0 10px 0;\n  min-height: 20px;\n}\n\n.ChapterItemView-module_creating__c1q2b .ChapterItemView-module_creatingIndicator__2zOEN     { display: block; }\n.ChapterItemView-module_destroying__2PP1l .ChapterItemView-module_destroyingIndicator__2YZaB { display: block; }\n.ChapterItemView-module_failed__2MtQW .ChapterItemView-module_failedIndicator__2s6Xk         { display: block; }\n\n\n.ChapterItemView-module_creatingIndicator__2zOEN   { }\n.ChapterItemView-module_destroyingIndicator__2YZaB {  }\n.ChapterItemView-module_failedIndicator__2s6Xk     { }\n\n.ChapterItemView-module_addSection__3XQvI {\n}\n";
-var styles$p = {"indicatorIconColor":"#888","root":"ChapterItemView-module_root__19GIF","link":"ChapterItemView-module_link__2dj_z icons-module_rightOpen__9vsOG icons-module_icon__16IVx","number":"ChapterItemView-module_number__1GjyC","title":"ChapterItemView-module_title__3jVXE","sections":"ChapterItemView-module_sections__3zg2a","creating":"ChapterItemView-module_creating__c1q2b","creatingIndicator":"ChapterItemView-module_creatingIndicator__2zOEN outline-module_creatingIndicator__3O7Rw outline-module_indicator__2dw_X icons-module_arrowsCcw__3_nrJ icons-module_icon__16IVx animations-module_blink__32C5j","destroying":"ChapterItemView-module_destroying__2PP1l","destroyingIndicator":"ChapterItemView-module_destroyingIndicator__2YZaB outline-module_destroyingIndicator__2-mKh outline-module_indicator__2dw_X icons-module_trash__DH1EH icons-module_icon__16IVx animations-module_blink__32C5j","failed":"ChapterItemView-module_failed__2MtQW","failedIndicator":"ChapterItemView-module_failedIndicator__2s6Xk outline-module_failedIndicator__2QK1F outline-module_indicator__2dw_X icons-module_attention__1sssG icons-module_icon__16IVx","addSection":"ChapterItemView-module_addSection__3XQvI buttons-module_addButton__2pN-g buttons-module_iconButton__3ZSFV icon_button icons-module_plusCircled__20FlJ icons-module_icon__16IVx"};
-styleInject(css$G);
-
-var ChapterItemView = Marionette.Layout.extend({
-  tagName: 'li',
-  className: styles$p.root,
-  mixins: [modelLifecycleTrackingView({
-    classNames: styles$p
-  })],
-  template: function template() {
-    return "\n     <a class=\"".concat(styles$p.link, "\" href=\"\">\n       <span class=\"").concat(styles$p.number, "\"></span>\n       <span class=\"").concat(styles$p.title, "\"></span>\n       <span class=\"").concat(styles$p.creatingIndicator, "\" />\n       <span class=\"").concat(styles$p.destroyingIndicator, "\" />\n       <span class=\"").concat(styles$p.failedIndicator, "\"\n             title=\"").concat(I18n.t('pageflow_scrolled.editor.chapter_item.save_error'), "\" />\n     </a>\n\n     <ul class=\"").concat(styles$p.sections, "\"></ul>\n\n     <a href=\"\" class=\"").concat(styles$p.addSection, "\">").concat(I18n.t('pageflow_scrolled.editor.chapter_item.add_section'), "</a>\n  ");
-  },
-  ui: cssModulesUtils.ui(styles$p, 'title', 'number', 'sections'),
-  events: cssModulesUtils.events(styles$p, {
-    'click addSection': function clickAddSection() {
-      this.model.addSection();
-    },
-    'click link': function clickLink() {
-      if (!this.model.isNew() && !this.model.isDestroying()) {
-        editor.navigate('/scrolled/chapters/' + this.model.get('id'), {
-          trigger: true
-        });
-      }
-
-      return false;
-    }
-  }),
-  modelEvents: {
-    change: 'update'
-  },
-  onRender: function onRender() {
-    this.subview(new SortableCollectionView({
-      el: this.ui.sections,
-      collection: this.model.sections,
-      itemViewConstructor: SectionItemView,
-      itemViewOptions: {
-        entry: this.options.entry
-      },
-      connectWith: cssModulesUtils.selector(styles$p, 'sections')
+      connectWith: cssModulesUtils.selector(styles$1, 'sections')
     }));
     this.update();
   },
@@ -2911,18 +609,18 @@ var ChapterItemView = Marionette.Layout.extend({
   }
 });
 
-var css$H = ".icons-module_icon__16IVx::before {\n  font-family: \"entypo\";\n}.icons-module_arrowsCcw__3_nrJ,\n.icons-module_attention__1sssG,\n.icons-module_plusCircled__20FlJ,\n.icons-module_rightOpen__9vsOG,\n.icons-module_trash__DH1EH {\n}.icons-module_arrowsCcw__3_nrJ::before {\n  content: \"\\1F504\";\n}.icons-module_attention__1sssG::before {\n  content: \"\\26A0\";\n}.icons-module_plusCircled__20FlJ::before {\n  content: \"\\2795\";\n}.icons-module_rightOpen__9vsOG::before {\n  content: \"\\E75E\"\n}.icons-module_trash__DH1EH::before {\n  content: \"\\E729\";\n}.buttons-module_iconButton__3ZSFV {\n  /* see app/assets/stylesheets/pageflow/editor/composable.scss */\n}.buttons-module_addButton__2pN-g {\n}\n\n.EntryOutlineView-module_root__3NBUB {}\n\n.EntryOutlineView-module_chapters__3Gr1l {}\n\n.EntryOutlineView-module_addChapter__3_M-b {\n}\n";
-var styles$q = {"root":"EntryOutlineView-module_root__3NBUB","chapters":"EntryOutlineView-module_chapters__3Gr1l","addChapter":"EntryOutlineView-module_addChapter__3_M-b buttons-module_addButton__2pN-g buttons-module_iconButton__3ZSFV icon_button icons-module_plusCircled__20FlJ icons-module_icon__16IVx"};
-styleInject(css$H);
+var css$2 = ".icons-module_icon__16IVx::before {\n  font-family: \"entypo\";\n}.icons-module_arrowsCcw__3_nrJ,\n.icons-module_attention__1sssG,\n.icons-module_plusCircled__20FlJ,\n.icons-module_rightOpen__9vsOG,\n.icons-module_trash__DH1EH {\n}.icons-module_arrowsCcw__3_nrJ::before {\n  content: \"\\1F504\";\n}.icons-module_attention__1sssG::before {\n  content: \"\\26A0\";\n}.icons-module_plusCircled__20FlJ::before {\n  content: \"\\2795\";\n}.icons-module_rightOpen__9vsOG::before {\n  content: \"\\E75E\"\n}.icons-module_trash__DH1EH::before {\n  content: \"\\E729\";\n}.buttons-module_iconButton__3ZSFV {\n  /* see app/assets/stylesheets/pageflow/editor/composable.scss */\n}.buttons-module_addButton__2pN-g {\n}\n\n.EntryOutlineView-module_root__3NBUB {}\n\n.EntryOutlineView-module_chapters__3Gr1l {}\n\n.EntryOutlineView-module_addChapter__3_M-b {\n}\n";
+var styles$2 = {"root":"EntryOutlineView-module_root__3NBUB","chapters":"EntryOutlineView-module_chapters__3Gr1l","addChapter":"EntryOutlineView-module_addChapter__3_M-b buttons-module_addButton__2pN-g buttons-module_iconButton__3ZSFV icon_button icons-module_plusCircled__20FlJ icons-module_icon__16IVx"};
+styleInject(css$2);
 
 var EntryOutlineView = Marionette.Layout.extend({
   tagName: 'nav',
-  className: styles$q.root,
+  className: styles$2.root,
   template: function template() {
-    return "\n    <h2>".concat(I18n.t('pageflow_scrolled.editor.entry_outline.header'), "</h2>\n    <ul class=\"").concat(styles$q.chapters, "\"></ul>\n\n    <a class=\"").concat(styles$q.addChapter, "\" href=\"\">\n      ").concat(I18n.t('pageflow_scrolled.editor.entry_outline.add_chapter'), "\n    </a>\n  ");
+    return "\n    <h2>".concat(I18n.t('pageflow_scrolled.editor.entry_outline.header'), "</h2>\n    <ul class=\"").concat(styles$2.chapters, "\"></ul>\n\n    <a class=\"").concat(styles$2.addChapter, "\" href=\"\">\n      ").concat(I18n.t('pageflow_scrolled.editor.entry_outline.add_chapter'), "\n    </a>\n  ");
   },
-  ui: cssModulesUtils.ui(styles$q, 'chapters'),
-  events: cssModulesUtils.events(styles$q, {
+  ui: cssModulesUtils.ui(styles$2, 'chapters'),
+  events: cssModulesUtils.events(styles$2, {
     'click addChapter': function clickAddChapter() {
       this.options.entry.addChapter();
     }
@@ -2939,16 +637,16 @@ var EntryOutlineView = Marionette.Layout.extend({
   }
 });
 
-var css$I = ".EntryPreviewView-module_root__1Nb6e {\n  height: 100%;\n}\n\n.EntryPreviewView-module_iframe__1leJC {\n  border: none;\n  width: 100%;\n  height: 100%;\n}\n";
-var styles$r = {"root":"EntryPreviewView-module_root__1Nb6e","iframe":"EntryPreviewView-module_iframe__1leJC"};
-styleInject(css$I);
+var css$3 = ".EntryPreviewView-module_root__1Nb6e {\n  height: 100%;\n}\n\n.EntryPreviewView-module_iframe__1leJC {\n  border: none;\n  width: 100%;\n  height: 100%;\n}\n";
+var styles$3 = {"root":"EntryPreviewView-module_root__1Nb6e","iframe":"EntryPreviewView-module_iframe__1leJC"};
+styleInject(css$3);
 
 var EntryPreviewView = Marionette.ItemView.extend({
   template: function template() {
-    return "\n     <iframe class=\"".concat(styles$r.iframe, "\" />\n  ");
+    return "\n     <iframe class=\"".concat(styles$3.iframe, "\" />\n  ");
   },
-  className: styles$r.root,
-  ui: cssModulesUtils.ui(styles$r, 'iframe'),
+  className: styles$3.root,
+  ui: cssModulesUtils.ui(styles$3, 'iframe'),
   initialize: function initialize() {
     this.messageListener = this.onMessage.bind(this);
   },
@@ -2984,8 +682,42 @@ var EntryPreviewView = Marionette.ItemView.extend({
             }
           });
         });
+        this.listenTo(this.model, 'selectContentElement', function (contentElement) {
+          return postMessage({
+            type: 'SELECT',
+            payload: {
+              id: contentElement.id,
+              type: 'contentElement'
+            }
+          });
+        });
+        this.listenTo(this.model, 'resetSelection', function (contentElement) {
+          return postMessage({
+            type: 'SELECT',
+            payload: null
+          });
+        });
       } else if (message.data.type === 'CHANGE_SECTION') {
         this.model.set('currentSectionIndex', message.data.payload.index);
+      } else if (message.data.type === 'SELECTED') {
+        var _message$data$payload = message.data.payload,
+            id = _message$data$payload.id,
+            type = _message$data$payload.type;
+        var editor = this.options.editor;
+
+        if (type === 'contentElement') {
+          editor.navigate("/scrolled/content_elements/".concat(id), {
+            trigger: true
+          });
+        } else if (type === 'before' || type === 'after') {
+          editor.navigate("/scrolled/content_elements/insert?position=".concat(type, "&id=").concat(id), {
+            trigger: true
+          });
+        } else {
+          editor.navigate('/', {
+            trigger: true
+          });
+        }
       }
     }
   }
@@ -3002,10 +734,24 @@ function unescape(text) {
   return text.replace(/<\\\//g, '</');
 }
 
+ConfigurationEditorTabView.groups.define('ContentElementPosition', function () {
+  this.input('position', SelectInputView, {
+    attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.common_content_element_attributes'],
+    values: ['inline', 'sticky', 'full']
+  });
+});
+ConfigurationEditorTabView.groups.define('ContentElementCaption', function () {
+  this.input('caption', TextInputView, {
+    attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.common_content_element_attributes']
+  });
+});
+
 var SideBarRouter = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/chapters/:id': 'chapter',
-    'scrolled/sections/:id': 'section'
+    'scrolled/sections/:id': 'section',
+    'scrolled/content_elements/insert?position=:position&id=:id': 'insertContentElement',
+    'scrolled/content_elements/:id': 'contentElement'
   }
 });
 
@@ -3025,9 +771,15 @@ var EditSectionView = EditConfigurationView.extend({
   translationKeyPrefix: 'pageflow_scrolled.editor.edit_section',
   configure: function configure(configurationEditor) {
     configurationEditor.tab('section', function () {
+      this.input('transition', SelectInputView, {
+        values: ['beforeAfter', 'fade', 'fadeBg', 'reveal', 'scroll', 'scrollOver']
+      });
       this.input('layout', SelectInputView, {
         values: ['left', 'right', 'center']
       });
+      this.input('appearance', SelectInputView, {
+        values: ['shadow', 'cards', 'transparent']
+      });
       this.input('backdropType', SelectInputView, {
         values: ['image', 'color'],
         texts: ['Bild', 'Farbe']
@@ -3042,11 +794,69 @@ var EditSectionView = EditConfigurationView.extend({
         visibleBinding: 'backdropType',
         visibleBindingValue: 'color'
       });
+      this.input('fullHeight', CheckBoxInputView);
       this.input('invert', CheckBoxInputView);
     });
   }
 });
 
+var EditContentElementView = EditConfigurationView.extend({
+  translationKeyPrefix: function translationKeyPrefix() {
+    return "pageflow_scrolled.editor.content_elements.".concat(this.model.get('typeName'));
+  },
+  configure: function configure(configurationEditor) {
+    this.options.editor.contentElementTypes.setupConfigurationEditor(this.model.get('typeName'), configurationEditor);
+  }
+});
+
+var css$4 = ".InsertContentElementView-module_item__1EIxA a {\n  display: block;\n  padding: 10px;\n  margin-bottom: 2px;\n  background-color: #efefef;\n}\n";
+var styles$4 = {"item":"InsertContentElementView-module_item__1EIxA"};
+styleInject(css$4);
+
+var InsertContentElementView = Marionette.ItemView.extend({
+  template: function template() {
+    return "\n    <h2>".concat(I18n.t('pageflow_scrolled.editor.insert_content_element.header'), "</h2>\n    <ul></ul>\n  ");
+  },
+  ui: {
+    items: 'ul'
+  },
+  onRender: function onRender() {
+    this.subview(new CollectionView({
+      el: this.ui.items,
+      collection: new Backbone$1.Collection(this.options.editor.contentElementTypes.toArray()),
+      itemViewConstructor: ItemView,
+      itemViewOptions: {
+        entry: this.options.entry,
+        insertOptions: this.options.insertOptions
+      }
+    }));
+  },
+  onGoBack: function onGoBack() {
+    this.options.entry.trigger('resetSelection');
+  }
+});
+var ItemView = Marionette.ItemView.extend({
+  tagName: 'li',
+  className: styles$4.item,
+  template: function template(_ref) {
+    var displayName = _ref.displayName;
+    return "\n    <a href=\"\">".concat(displayName, "</a>\n  ");
+  },
+  events: {
+    'click a': function clickA() {
+      this.options.entry.insertContentElement({
+        typeName: this.model.get('typeName')
+      }, this.options.insertOptions, this.model.get('defaultConfig'));
+    }
+  }
+});
+
+InsertContentElementView.create = function (options) {
+  return new BackButtonDecoratorView({
+    view: new InsertContentElementView(options)
+  });
+};
+
 var SideBarController = Marionette.Controller.extend({
   initialize: function initialize(options) {
     this.region = options.region;
@@ -3056,26 +866,153 @@ var SideBarController = Marionette.Controller.extend({
     this.region.show(new EditChapterView({
       entry: this.entry,
       model: this.entry.chapters.get(id),
-      api: editor
+      editor: editor$2
     }));
   },
   section: function section(id, tab) {
     this.region.show(new EditSectionView({
       entry: this.entry,
       model: this.entry.sections.get(id),
-      api: editor
+      editor: editor$2
+    }));
+  },
+  contentElement: function contentElement(id, tab) {
+    this.region.show(new EditContentElementView({
+      entry: this.entry,
+      model: this.entry.contentElements.get(id),
+      editor: editor$2
+    }));
+  },
+  insertContentElement: function insertContentElement(position, id) {
+    this.region.show(InsertContentElementView.create({
+      entry: this.entry,
+      insertOptions: {
+        position: position,
+        id: id
+      },
+      editor: editor$2
     }));
   }
 });
 
-/*global pageflow*/
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+/**
+ * Integrate new content types into the editor.
+ * @name editor_contentElementTypes
+ */
+
+var ContentElementTypeRegistry =
+/*#__PURE__*/
+function () {
+  function ContentElementTypeRegistry() {
+    _classCallCheck(this, ContentElementTypeRegistry);
+
+    this.contentElementTypes = {};
+  }
+  /**
+   * Register a new type of content element in the editor.
+   *
+   * @param {string} typeName - Name of the content element type.
+   * @param {Object} options
+   * @param {Function} options.configurationEditor -
+   *   Function that is evaluated in the context of a
+   *   `ConfigurationEditorView` (see `pageflow/ui`) which will
+   *   be used to edit the configuration of content elements of
+   *   this type.
+   * @param {Object} options.defaultConfig -
+   *   Object that is set as initial config for the content element.
+   * @memberof editor_contentElementTypes
+   *
+   * @example
+   *
+   * // editor.js
+   * editor.contentElementTypes.register('inlineImage', {
+   *   configurationEditor() {
+   *     this.tab('general', function() {
+   *       this.input('caption', TextInputView);
+   *     });
+   *   }
+   * });
+   */
+
+
+  _createClass(ContentElementTypeRegistry, [{
+    key: "register",
+    value: function register(typeName, options) {
+      this.contentElementTypes[typeName] = options;
+    }
+  }, {
+    key: "setupConfigurationEditor",
+    value: function setupConfigurationEditor(name, configurationEditorView, options) {
+      if (!this.contentElementTypes[name]) {
+        throw new Error("Unknown content element type ".concat(name));
+      }
+
+      return this.contentElementTypes[name].configurationEditor.call(configurationEditorView, options);
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      var _this = this;
+
+      return Object.keys(this.contentElementTypes).map(function (typeName) {
+        return {
+          typeName: typeName,
+          displayName: I18n.t("pageflow_scrolled.editor.content_elements.".concat(typeName, ".name")),
+          defaultConfig: _this.contentElementTypes[typeName].defaultConfig
+        };
+      });
+    }
+  }]);
+
+  return ContentElementTypeRegistry;
+}();
+
+function extend(api) {
+  return Object.assign(api, {
+    contentElementTypes: new ContentElementTypeRegistry()
+  });
+}
+var editor = extend(editor$1);
+
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 Object.assign(pageflow, globalInterop);
-pageflow.editor.registerEntryType('scrolled', {
+editor.registerEntryType('scrolled', {
   entryModel: ScrolledEntry,
-  previewView: EntryPreviewView,
+  previewView: function previewView(options) {
+    return new EntryPreviewView(_objectSpread$2({}, options, {
+      editor: editor
+    }));
+  },
   outlineView: EntryOutlineView
 });
-pageflow.editor.registerSideBarRouting({
+editor.registerSideBarRouting({
   router: SideBarRouter,
   controller: SideBarController
 });
+editor.registerFileSelectionHandler('contentElementConfiguration', ContentElementFileSelectionHandler);
+
+export { editor };