pageflow 15.1.0.beta6 → 15.1.0.rc0

data/entry_types/paged/app/views/layouts/pageflow_paged/application.html.erb

@@ -9,7 +9,8 @@
 
   <%= javascript_include_tag 'pageflow/vendor', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'pageflow/application', 'data-turbolinks-track' => true %>
-
+  
+  <meta charset="utf-8" />
   <%= csrf_meta_tags %>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

data/entry_types/paged/lib/pageflow_paged/engine.rb

@@ -4,6 +4,7 @@ module PageflowPaged
     isolate_namespace PageflowPaged
 
     config.paths.add('lib', eager_load: true)
+    config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
 
     initializer 'pageflow_paged.assets.precompile' do |app|
       app.config.assets.precompile += %w[

data/entry_types/scrolled/app/controllers/pageflow_scrolled/editor/chapters_controller.rb

@@ -31,7 +31,7 @@ module PageflowScrolled
       end
 
       def order
-        storyline = Storyline.all_for_revision(@entry.draft).find(params[:storyline_id])
+        storyline = find_storyline
         chapters = Chapter.all_for_revision(@entry.draft)
 
         params.require(:ids).each_with_index do |id, index|
@@ -51,6 +51,14 @@ module PageflowScrolled
               .permit(:position)
               .merge(configuration: configuration)
       end
+
+      def find_storyline
+        if params[:storyline_id]
+          Storyline.all_for_revision(@entry.draft).find(params[:storyline_id])
+        else
+          Storyline.all_for_revision(@entry.draft).first
+        end
+      end
     end
   end
 end

data/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb

@@ -6,6 +6,8 @@ module PageflowScrolled
     include Pageflow::ConfigHelper
     include Pageflow::RenderJsonHelper
     include Pageflow::FilesHelper
+    include Pageflow::EntriesHelper
+    include Pageflow::SocialShareLinksHelper
 
     def scrolled_entry_json_seed_script_tag(scrolled_entry, options = {})
       seed_json = render_json do |json|

data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder

@@ -7,10 +7,38 @@ json.config do
   json.file_model_types do
     config_file_model_types_seed(json, entry_config)
   end
+
+  json.pretty_url pretty_entry_url(entry)
+  json.share_url_templates share_provider_url_templates
+
+  json.default_file_rights entry.account.default_file_rights
+
+  json.legal_info do
+    theming = entry.theming
+    json.imprint do
+      json.label raw(theming.imprint_link_label)
+      json.url theming.imprint_link_url
+    end
+    json.copyright do
+      json.label raw(theming.copyright_link_label)
+      json.url theming.copyright_link_url
+    end
+    json.privacy do
+      json.label I18n.t('pageflow.public.privacy_notice')
+      json.url entry_privacy_link_url(entry)
+    end
+  end
 end
 
 unless options[:skip_collections]
   json.collections do
+    json.entries do
+      json.array!([entry]) do |entry|
+        json.call(entry, :id, :share_providers, :share_url, :credits)
+        json.permaId entry.id # required as keyAttribute in EntryStateProvider
+      end
+    end
+
     json.chapters do
       json.array!(chapters) do |chapter|
         json.partial! 'pageflow_scrolled/chapters/chapter', chapter: chapter

data/entry_types/scrolled/config/locales/new/de.yml

@@ -0,0 +1,46 @@
+de:
+  pageflow_scrolled:
+    editor:
+      entry_outline:
+        header: "Giederung"
+        add_chapter: "Neues Kapitel"
+      chapter_item:
+        add_section: "Neuer Abschnitt"
+        save_error: Beim Speichern des Kapitels ist ein Fehler aufgetreten.
+      section_item:
+        edit: "Abschnitt bearbeiten"
+        save_error: Beim Speichern des Abschnitts ist ein Fehler aufgetreten.
+      edit_chapter:
+        tabs:
+          chapter: Kapitel
+        attributes:
+          title:
+            label: Titel
+          summary:
+            label: Zusammenfassung
+        confirm_destroy: |-
+          Kapitel einschließlich ALLER enthaltener Abschnitte wirklich löschen?
+
+          Dieser Schritt kann nicht rückgängig gemacht werden.
+        save_error: Beim Speichern des Kapitels ist ein Fehler aufgetreten.
+      edit_section:
+        tabs:
+          section: Abschnitt
+        attributes:
+          backdropImage:
+            label: Hintergrund
+          backdropType:
+            label: Hintergrund-Typ
+          invert:
+            label: Text invertieren
+          layout:
+            label: Text-Ausrichtung
+            values:
+              left: "Links"
+              right: "Rechts"
+              center: "Mitte"
+        confirm_destroy: |-
+          Abschnitt einschließlich ALLER enthaltener Elemente wirklich löschen?
+
+          Dieser Schritt kann nicht rückgängig gemacht werden.
+        save_error: Beim Speichern des Abschnitts ist ein Fehler aufgetreten.

data/entry_types/scrolled/config/locales/new/en.yml

@@ -0,0 +1,46 @@
+en:
+  pageflow_scrolled:
+    editor:
+      entry_outline:
+        header: "Outline"
+        add_chapter: "New chapter"
+      chapter_item:
+        add_section: "New section"
+        save_error: There was an error while saving this chapter.
+      section_item:
+        edit: "Edit section"
+        save_error: There was an error while saving this section.
+      edit_chapter:
+        tabs:
+          chapter: Chapter
+        attributes:
+          title:
+            label: Title
+          summary:
+            label: Summary
+        confirm_destroy: |-
+          Really delete this chapter including ALL its sections?
+
+          This operation cannot be undone.
+        save_error: There was an error while saving this chapter.
+      edit_section:
+        tabs:
+          section: Section
+        attributes:
+          backdropImage:
+            label: Background
+          backdropType:
+            label: Background-Type
+          invert:
+            label: Invert text
+          layout:
+            label: Text alignment
+            values:
+              left: "Left"
+              right: "Right"
+              center: "Center"
+        confirm_destroy: |-
+          Really delete this section including ALL its elements?
+
+          This operation cannot be undone.
+        save_error: There was an error while saving this section.

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

@@ -4,5 +4,6 @@ module PageflowScrolled
     isolate_namespace PageflowScrolled
 
     config.paths.add('lib', eager_load: true)
+    config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
   end
 end

data/entry_types/scrolled/package/editor.js

@@ -1,71 +1,295 @@
 import * as globalInterop from 'pageflow/editor';
-import { Entry } from 'pageflow/editor';
-import Backbone from 'backbone';
+import { configurationContainer, delayedDestroying, entryTypeEditorControllerUrls, failureTracking, ForeignKeySubsetCollection, orderedCollection, Configuration, editor, Entry, modelLifecycleTrackingView, EditConfigurationView, FileInputView, ColorInputView } 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 ReactDOM from 'react-dom';
 import $ from 'jquery';
-import { cssModulesUtils } from 'pageflow/ui';
-import React from 'react';
 
-var Chapter = Backbone.Model.extend({
-  initialize: function initialize() {
-    this.configuration = new Backbone.Model(this.get('configuration'));
-    this.listenTo(this.configuration, 'change', function () {
-      this.trigger('change:configuration', this);
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var Chapter = Backbone$1.Model.extend({
+  mixins: [configurationContainer({
+    autoSave: true,
+    includeAttributesInJSON: ['position']
+  }), delayedDestroying, entryTypeEditorControllerUrls.forModel({
+    resources: 'chapters'
+  }), failureTracking],
+  initialize: function initialize(attributes, options) {
+    this.sections = new ForeignKeySubsetCollection({
+      parent: options.sections,
+      parentModel: this,
+      foreignKeyAttribute: 'chapterId',
+      parentReferenceAttribute: 'chapter'
     });
+  },
+  addSection: function addSection(attributes) {
+    this.sections.create(_objectSpread({
+      position: this.sections.length,
+      chapterId: this.id
+    }, attributes));
   }
 });
 
-var ChaptersCollection = Backbone.Collection.extend({
-  model: Chapter
+var ChaptersCollection = Backbone$1.Collection.extend({
+  model: Chapter,
+  mixins: [entryTypeEditorControllerUrls.forCollection({
+    resources: 'chapters'
+  }), orderedCollection],
+  comparator: function comparator(chapter) {
+    return chapter.get('position');
+  }
 });
 
-var Section = Backbone.Model.extend({
-  initialize: function initialize() {
-    this.configuration = new Backbone.Model(this.get('configuration'));
-    this.listenTo(this.configuration, 'change', function () {
-      this.trigger('change:configuration', this);
-    });
+var SectionConfiguration = Configuration.extend({
+  defaults: {
+    transition: 'scroll',
+    backdrop: {
+      image: '#fff'
+    }
+  },
+  get: function get(name) {
+    if (name === 'backdropImage') {
+      return this.attributes.backdrop && this.attributes.backdrop.image;
+    }
+
+    if (name === 'backdropType') {
+      return Configuration.prototype.get.apply(this, arguments) || (this.attributes.backdrop && this.attributes.backdrop.image.toString().startsWith('#') ? 'color' : 'image');
+    }
+
+    return Configuration.prototype.get.apply(this, arguments);
+  },
+  set: function set(name, value) {
+    if (name === 'backdropImage' && value) {
+      this.set('backdrop', {
+        image: value
+      });
+    }
+
+    return Configuration.prototype.set.apply(this, arguments);
+  }
+});
+var FileSelectionHandler = function FileSelectionHandler(options) {
+  var contentElement = options.entry.sections.get(options.id);
+
+  this.call = function (file) {
+    contentElement.configuration.setReference(options.attributeName, file);
+  };
+
+  this.getReferer = function () {
+    return '/scrolled/sections/' + contentElement.id;
+  };
+};
+editor.registerFileSelectionHandler('sectionConfiguration', FileSelectionHandler);
+
+var Section = Backbone$1.Model.extend({
+  mixins: [configurationContainer({
+    autoSave: true,
+    includeAttributesInJSON: ['position'],
+    configurationModel: SectionConfiguration
+  }), delayedDestroying, entryTypeEditorControllerUrls.forModel({
+    resources: 'sections'
+  }), failureTracking],
+  chapterPosition: function chapterPosition() {
+    return this.chapter && this.chapter.has('position') ? this.chapter.get('position') : -1;
   }
 });
 
-var SectionsCollection = Backbone.Collection.extend({
-  model: Section
+var SectionsCollection = Backbone$1.Collection.extend({
+  model: Section,
+  mixins: [entryTypeEditorControllerUrls.forCollection({
+    resources: 'sections'
+  })],
+  comparator: function comparator(sectionA, sectionB) {
+    if (sectionA.chapterPosition() > sectionB.chapterPosition()) {
+      return 1;
+    } else if (sectionA.chapterPosition() < sectionB.chapterPosition()) {
+      return -1;
+    } else if (sectionA.get('position') > sectionB.get('position')) {
+      return 1;
+    } else if (sectionA.get('position') < sectionB.get('position')) {
+      return -1;
+    } else {
+      return 0;
+    }
+  }
 });
 
-var ContentElement = Backbone.Model.extend({
+var ContentElement = Backbone$1.Model.extend({
   initialize: function initialize() {
-    this.configuration = new Backbone.Model(this.get('configuration'));
+    this.configuration = new Backbone$1.Model(this.get('configuration'));
     this.listenTo(this.configuration, 'change', function () {
       this.trigger('change:configuration', this);
     });
   }
 });
 
-var ContentElementsCollection = Backbone.Collection.extend({
+var ContentElementsCollection = Backbone$1.Collection.extend({
   model: ContentElement
 });
 
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var ScrolledEntry = Entry.extend({
   setupFromEntryTypeSeed: function setupFromEntryTypeSeed(seed) {
-    this.chapters = new ChaptersCollection(seed.collections.chapters);
-    this.sections = new SectionsCollection(seed.collections.sections);
     this.contentElements = new ContentElementsCollection(seed.collections.contentElements);
+    this.sections = new SectionsCollection(seed.collections.sections);
+    this.chapters = new ChaptersCollection(seed.collections.chapters, {
+      sections: this.sections
+    });
+    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);
+    this.scrolledSeed = seed;
+  },
+  addChapter: function addChapter(attributes) {
+    this.chapters.create(_objectSpread$1({
+      position: this.chapters.length
+    }, attributes), {
+      sections: this.sections
+    });
   }
 });
 
-var EntryOutlineView = Marionette.View.extend({
-  className: 'entry_outline',
-  render: function render() {
-    this.$el.text('Outline');
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
   }
-});
 
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+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; }
 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,
@@ -143,7 +367,7 @@ function watchCollection(collection, _ref2) {
       type: SORT,
       payload: {
         collectionName: name,
-        order: collection.pluck(keyAttribute)
+        order: collection.pluck(keyAttribute).filter(Boolean)
       }
     });
   });
@@ -186,23 +410,252 @@ 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 watchCollections(_ref, _ref2) {
-  var chapters = _ref.chapters,
-      sections = _ref.sections,
-      contentElements = _ref.contentElements,
-      files = _ref.files;
-  var dispatch = _ref2.dispatch;
+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;
+  var chapters = entry.chapters,
+      sections = entry.sections,
+      contentElements = entry.contentElements,
+      files = entry.files;
+  watchCollection(new Backbone.Collection([entry.metadata]), {
+    name: 'entries',
+    attributes: ['id', {
+      shareProviders: 'share_providers'
+    }, {
+      shareUrl: 'share_url'
+    }, 'credits'],
+    dispatch: dispatch
+  });
   watchCollection(chapters, {
     name: 'chapters',
     attributes: ['id', 'permaId'],
+    keyAttribute: 'permaId',
     includeConfiguration: true,
     dispatch: dispatch
   });
   watchCollection(sections, {
     name: 'sections',
     attributes: ['id', 'permaId', 'chapterId'],
+    keyAttribute: 'permaId',
     includeConfiguration: true,
     dispatch: dispatch
   });
@@ -218,7 +671,7 @@ function watchCollections(_ref, _ref2) {
       name: camelize(collectionName),
       attributes: ['id', {
         permaId: 'perma_id'
-      }, 'width', 'height', 'basename'],
+      }, 'width', 'height', 'basename', 'rights'],
       keyAttribute: 'permaId',
       includeConfiguration: true,
       dispatch: dispatch
@@ -232,6 +685,96 @@ 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;
@@ -259,57 +802,2280 @@ function styleInject(css, ref) {
   }
 }
 
-var css = ".EntryPreviewView-module_root__1Nb6e {\n  height: 100%;\n}\n\n.EntryPreviewView-module_iframe__1leJC {\n  border: none;\n  width: 100%;\n  height: 100%;\n}\n";
-var styles = {"root":"EntryPreviewView-module_root__1Nb6e","iframe":"EntryPreviewView-module_iframe__1leJC"};
+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"};
 styleInject(css);
 
-var EntryPreviewView = Marionette.ItemView.extend({
-  template: function template() {
-    return "\n     <iframe class=\"".concat(styles.iframe, "\" />\n  ");
-  },
-  className: styles.root,
-  ui: cssModulesUtils.ui(styles, 'iframe'),
-  initialize: function initialize() {
-    this.messageListener = this.onMessage.bind(this);
-  },
-  onShow: function onShow() {
-    window.addEventListener('message', this.messageListener);
-    inject(this.ui.iframe[0], unescape($('[data-template="iframe_seed"]').html()));
-  },
-  onClose: function onClose() {
-    window.removeEventListener('message', this.messageListener);
-  },
-  onMessage: function onMessage(message) {
-    var _this = this;
+var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
+  return React.createElement("div", {
+    ref: ref,
+    className: styles.root
+  }, props.children);
+});
+
+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);
+
+/**
+ * Render an image file.
+ *
+ * @param {Object} props
+ * @param {number} props.id - Perma id of the image file.
+ */
+
+function Image(props) {
+  var image = useFile({
+    collectionName: 'imageFiles',
+    permaId: props.id
+  });
+
+  if (image) {
+    var focusX = typeof image.configuration.focusX === 'undefined' ? 50 : image.configuration.focusX;
+    var focusY = typeof image.configuration.focusY === 'undefined' ? 50 : image.configuration.focusY;
+    return React.createElement("div", {
+      className: classnames(styles$1.root, _defineProperty({}, styles$1.portrait, props.mobile)),
+      role: "img",
+      style: {
+        backgroundImage: "url(".concat(image.urls.large, ")"),
+        backgroundPosition: "".concat(focusX, "% ").concat(focusY, "%")
+      }
+    });
+  }
+
+  return null;
+}
+
+var ScrollToSectionContext = React.createContext(function () {});
+
+var MutedContext = React.createContext({
+  muted: true,
+  setMuted: function setMuted() {},
+  mediaOff: true
+});
+
+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);
 
-    if (window.location.href.indexOf(message.origin) === 0 && message.data.type === 'READY') {
-      watchCollections(this.model, {
-        dispatch: function dispatch(action) {
-          return _this.ui.iframe[0].contentWindow.postMessage({
-            type: 'ACTION',
-            payload: action
-          }, window.location.origin);
+function 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();
+      }
+    }
+
+    function play() {
+      video.play();
+    }
+  }, [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');
+      },
+      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 inject(iframe, html) {
-  var doc = iframe.document || iframe.contentDocument || iframe.contentWindow.document;
-  doc.open();
-  doc.writeln(html);
-  doc.close();
+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 unescape(text) {
-  return text.replace(/<\\\//g, '</');
+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
+  };
 }
 
-/*global pageflow*/
-Object.assign(pageflow, globalInterop);
-pageflow.editor.registerEntryType('scrolled', {
-  entryModel: ScrolledEntry,
-  previewView: EntryPreviewView,
-  outlineView: EntryOutlineView
+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')
+    }));
+    this.update();
+  },
+  update: function update() {
+    this.ui.title.text(this.model.configuration.get('title') || I18n.t('pageflow.editor.views.chapter_item_view.unnamed'));
+    this.ui.number.text(I18n.t('pageflow.editor.views.chapter_item_view.chapter') + ' ' + (this.model.get('position') + 1));
+  }
+});
+
+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 EntryOutlineView = Marionette.Layout.extend({
+  tagName: 'nav',
+  className: styles$q.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  ");
+  },
+  ui: cssModulesUtils.ui(styles$q, 'chapters'),
+  events: cssModulesUtils.events(styles$q, {
+    'click addChapter': function clickAddChapter() {
+      this.options.entry.addChapter();
+    }
+  }),
+  onRender: function onRender() {
+    this.subview(new SortableCollectionView({
+      el: this.ui.chapters,
+      collection: this.options.entry.chapters,
+      itemViewConstructor: ChapterItemView,
+      itemViewOptions: {
+        entry: this.options.entry
+      }
+    }));
+  }
+});
+
+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 EntryPreviewView = Marionette.ItemView.extend({
+  template: function template() {
+    return "\n     <iframe class=\"".concat(styles$r.iframe, "\" />\n  ");
+  },
+  className: styles$r.root,
+  ui: cssModulesUtils.ui(styles$r, 'iframe'),
+  initialize: function initialize() {
+    this.messageListener = this.onMessage.bind(this);
+  },
+  onShow: function onShow() {
+    window.addEventListener('message', this.messageListener);
+    inject(this.ui.iframe[0], unescape($('[data-template="iframe_seed"]').html()));
+  },
+  onClose: function onClose() {
+    window.removeEventListener('message', this.messageListener);
+  },
+  onMessage: function onMessage(message) {
+    var _this = this;
+
+    if (window.location.href.indexOf(message.origin) === 0) {
+      if (message.data.type === 'READY') {
+        var postMessage = function postMessage(message) {
+          _this.ui.iframe[0].contentWindow.postMessage(message, window.location.origin);
+        };
+
+        watchCollections(this.model, {
+          dispatch: function dispatch(action) {
+            return postMessage({
+              type: 'ACTION',
+              payload: action
+            });
+          }
+        });
+        this.listenTo(this.model, 'scrollToSection', function (section) {
+          return postMessage({
+            type: 'SCROLL_TO_SECTION',
+            payload: {
+              index: _this.model.sections.indexOf(section)
+            }
+          });
+        });
+      } else if (message.data.type === 'CHANGE_SECTION') {
+        this.model.set('currentSectionIndex', message.data.payload.index);
+      }
+    }
+  }
+});
+
+function inject(iframe, html) {
+  var doc = iframe.document || iframe.contentDocument || iframe.contentWindow.document;
+  doc.open();
+  doc.writeln(html);
+  doc.close();
+}
+
+function unescape(text) {
+  return text.replace(/<\\\//g, '</');
+}
+
+var SideBarRouter = Marionette.AppRouter.extend({
+  appRoutes: {
+    'scrolled/chapters/:id': 'chapter',
+    'scrolled/sections/:id': 'section'
+  }
+});
+
+var EditChapterView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.edit_chapter',
+  configure: function configure(configurationEditor) {
+    configurationEditor.tab('chapter', function () {
+      this.input('title', TextInputView);
+      this.input('summary', TextAreaInputView, {
+        disableLinks: true
+      });
+    });
+  }
+});
+
+var EditSectionView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.edit_section',
+  configure: function configure(configurationEditor) {
+    configurationEditor.tab('section', function () {
+      this.input('layout', SelectInputView, {
+        values: ['left', 'right', 'center']
+      });
+      this.input('backdropType', SelectInputView, {
+        values: ['image', 'color'],
+        texts: ['Bild', 'Farbe']
+      });
+      this.input('backdropImage', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'sectionConfiguration',
+        visibleBinding: 'backdropType',
+        visibleBindingValue: 'image'
+      });
+      this.input('backdropImage', ColorInputView, {
+        visibleBinding: 'backdropType',
+        visibleBindingValue: 'color'
+      });
+      this.input('invert', CheckBoxInputView);
+    });
+  }
+});
+
+var SideBarController = Marionette.Controller.extend({
+  initialize: function initialize(options) {
+    this.region = options.region;
+    this.entry = options.entry;
+  },
+  chapter: function chapter(id, tab) {
+    this.region.show(new EditChapterView({
+      entry: this.entry,
+      model: this.entry.chapters.get(id),
+      api: editor
+    }));
+  },
+  section: function section(id, tab) {
+    this.region.show(new EditSectionView({
+      entry: this.entry,
+      model: this.entry.sections.get(id),
+      api: editor
+    }));
+  }
+});
+
+/*global pageflow*/
+Object.assign(pageflow, globalInterop);
+pageflow.editor.registerEntryType('scrolled', {
+  entryModel: ScrolledEntry,
+  previewView: EntryPreviewView,
+  outlineView: EntryOutlineView
+});
+pageflow.editor.registerSideBarRouting({
+  router: SideBarRouter,
+  controller: SideBarController
 });