pageflow 15.2.2 → 15.3.0

data/config/initializers/entry_types.rb

@@ -1,4 +0,0 @@
-Pageflow.configure do |config|
-  config.plugin(PageflowPaged.plugin)
-  config.plugin(PageflowScrolled.plugin)
-end

data/entry_types/scrolled/package/frontend.js

@@ -1,2879 +0,0 @@
-import React, { useRef, useLayoutEffect, useEffect, useReducer, useMemo, useContext, useState, useCallback } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import ReactTooltip from 'react-tooltip';
-import I18n from 'i18n-js';
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-// from https://github.com/n8tb1t/use-scroll-position
-var isBrowser = typeof window !== "undefined";
-
-function getScrollPosition(_ref) {
-  var element = _ref.element,
-      useWindow = _ref.useWindow;
-  if (!isBrowser) return {
-    x: 0,
-    y: 0
-  };
-  var target = element ? element.current : document.body;
-  var position = target.getBoundingClientRect();
-  return useWindow ? {
-    x: window.scrollX,
-    y: window.scrollY
-  } : {
-    x: position.left,
-    y: position.top
-  };
-}
-
-function useScrollPosition(effect, deps, element, useWindow, wait) {
-  var position = useRef(getScrollPosition({
-    useWindow: useWindow
-  }));
-  var throttleTimeout = null;
-
-  var callBack = function callBack() {
-    var currPos = getScrollPosition({
-      element: element,
-      useWindow: useWindow
-    });
-    effect({
-      prevPos: position.current,
-      currPos: currPos
-    });
-    position.current = currPos;
-    throttleTimeout = null;
-  };
-
-  useLayoutEffect(function () {
-    if (!isBrowser) {
-      return;
-    }
-
-    var handleScroll = function handleScroll() {
-      if (wait) {
-        if (throttleTimeout === null) {
-          // Todo: store in useRef hook?
-          throttleTimeout = setTimeout(callBack, wait);
-        }
-      } else {
-        callBack();
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return function () {
-      return window.removeEventListener('scroll', handleScroll);
-    };
-  }, deps);
-}
-useScrollPosition.defaultProps = {
-  deps: [],
-  element: false,
-  useWindow: false,
-  wait: null
-};
-
-function useNativeScrollPrevention(ref) {
-  useEffect(function () {
-    function preventNativeScroll(e) {
-      e.preventDefault();
-    }
-
-    var current = ref.current;
-
-    if (current) {
-      current.addEventListener('touchmove', preventNativeScroll);
-      current.addEventListener('mousewheel', preventNativeScroll);
-    }
-
-    return function () {
-      if (current) {
-        current.removeEventListener('touchmove', preventNativeScroll);
-        current.removeEventListener('mousewheel', preventNativeScroll);
-      }
-    };
-  }, [ref]);
-}
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
-var RESET = "".concat(PREFIX, "_RESET");
-var ADD = "".concat(PREFIX, "_ADD");
-var CHANGE = "".concat(PREFIX, "_CHANGE");
-var REMOVE = "".concat(PREFIX, "_REMOVE");
-var SORT = "".concat(PREFIX, "_SORT");
-function useCollections() {
-  var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      keyAttribute = _ref.keyAttribute;
-
-  return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
-    result[key] = init(seed[key], keyAttribute);
-    return result;
-  }, {}));
-}
-
-function reducer(state, action) {
-  var collectionName = action.payload.collectionName;
-  var keyAttribute = action.payload.keyAttribute;
-
-  switch (action.type) {
-    case RESET:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
-
-    case ADD:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
-      }));
-
-    case CHANGE:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: state[collectionName].order,
-        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
-      }));
-
-    case REMOVE:
-      var clonedItems = _objectSpread({}, state[collectionName].items);
-
-      delete clonedItems[action.payload.key];
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: clonedItems
-      }));
-
-    case SORT:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: state[collectionName].items
-      }));
-
-    default:
-      return state;
-  }
-}
-
-function init(items) {
-  var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  items = items.filter(function (item) {
-    return item[keyAttribute];
-  });
-  return {
-    order: items.map(function (item) {
-      return item[keyAttribute];
-    }),
-    items: items.reduce(function (result, item) {
-      result[item[keyAttribute]] = item;
-      return result;
-    }, {})
-  };
-}
-
-function getItems(state, collectionName) {
-  if (state[collectionName]) {
-    var items = state[collectionName].items;
-    return state[collectionName].order.map(function (key) {
-      return items[key];
-    });
-  } else {
-    return [];
-  }
-}
-function getItem(state, collectionName, key) {
-  if (state[collectionName]) {
-    return state[collectionName].items[key];
-  }
-}
-
-var Context = React.createContext();
-function EntryStateProvider(_ref) {
-  var seed = _ref.seed,
-      children = _ref.children;
-
-  var _useCollections = useCollections(seed.collections, {
-    keyAttribute: 'permaId'
-  }),
-      _useCollections2 = _slicedToArray(_useCollections, 2),
-      collections = _useCollections2[0],
-      dispatch = _useCollections2[1];
-
-  var value = useMemo(function () {
-    return {
-      entryState: {
-        collections: collections,
-        config: seed.config
-      },
-      dispatch: dispatch
-    };
-  }, [collections, dispatch, seed]);
-  return React.createElement(Context.Provider, {
-    value: value
-  }, children);
-}
-function useEntryState() {
-  var value = useContext(Context);
-  return value.entryState;
-}
-function useEntryStateDispatch() {
-  var value = useContext(Context);
-  return value.dispatch;
-}
-
-/**
- * Returns a nested data structure representing the metadata of the entry.
- *
- * @example
- *
- * const metaData = useEntryMetadata();
- * metaData // =>
- *   {
- *     id: 5,
- *     locale: 'en',
- *     shareProviders: {email: false, facebook: true},
- *     share_url: 'http://test.host/test',
- *     credits: 'Credits: Pageflow'
- *   }
- */
-
-function useEntryMetadata() {
-  var entryState = useEntryState();
-  return useMemo(function () {
-    return getItems(entryState.collections, 'entries')[0];
-  }, [entryState]);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-var EmailIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 612 612"
-  }, props), React.createElement("path", {
-    d: "M573.75 57.375H38.25C17.136 57.375 0 74.511 0 95.625v420.75c0 21.133 17.136 38.25 38.25 38.25h535.5c21.133 0 38.25-17.117 38.25-38.25V95.625c0-21.114-17.117-38.25-38.25-38.25zM554.625 497.25H57.375V204.657l224.03 187.999c7.134 5.967 15.874 8.97 24.595 8.97 8.74 0 17.461-3.003 24.595-8.97l224.03-187.999V497.25zm0-367.487L306 338.379 57.375 129.763V114.75h497.25v15.013z"
-  }));
-});
-
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-var FacebookIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 430.113 430.114"
-  }, props), React.createElement("path", {
-    d: "M158.081 83.3v59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805s5.601-34.721 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.321-17.354h48.557V.001h-66.021C155.878-.004 158.081 72.48 158.081 83.3z"
-  }));
-});
-
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$2.apply(this, arguments);
-}
-var LinkedInIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 430.117 430.117"
-  }, props), React.createElement("path", {
-    d: "M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"
-  }));
-});
-
-function _extends$3() {
-  _extends$3 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$3.apply(this, arguments);
-}
-var TelegramIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512.004 512.004"
-  }, props), React.createElement("path", {
-    d: "M508.194 20.517c-4.43-4.96-11.42-6.29-17.21-3.76l-482 211a15.01 15.01 0 00-8.98 13.41 15.005 15.005 0 008.38 13.79l115.09 56.6 28.68 172.06c.93 6.53 6.06 11.78 12.74 12.73 4.8.69 9.57-1 12.87-4.4l90.86-90.86 129.66 92.62a15.02 15.02 0 0014.24 1.74 15.01 15.01 0 009.19-11.01l90-451c.89-4.47-.26-9.26-3.52-12.92zm-372.84 263.45l-84.75-41.68 334.82-146.57-250.07 188.25zm46.94 44.59l-13.95 69.75-15.05-90.3 183.97-138.49-150.88 151.39c-2.12 2.12-3.53 4.88-4.09 7.65zm9.13 107.3l15.74-78.67 36.71 26.22-52.45 52.45zm205.41 19.94l-176.73-126.23 252.47-253.31-75.74 379.54z"
-  }));
-});
-
-function _extends$4() {
-  _extends$4 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$4.apply(this, arguments);
-}
-var TwitterIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 612 612"
-  }, props), React.createElement("path", {
-    d: "M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"
-  }));
-});
-
-function _extends$5() {
-  _extends$5 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$5.apply(this, arguments);
-}
-var WhatsAppIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 90 90"
-  }, props), React.createElement("path", {
-    d: "M90 43.841c0 24.213-19.779 43.841-44.182 43.841a44.256 44.256 0 01-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 01-6.34-22.637C1.635 19.628 21.416 0 45.818 0 70.223 0 90 19.628 90 43.841zM45.818 6.982c-20.484 0-37.146 16.535-37.146 36.859 0 8.065 2.629 15.534 7.076 21.61L11.107 79.14l14.275-4.537A37.122 37.122 0 0045.819 80.7c20.481 0 37.146-16.533 37.146-36.857S66.301 6.982 45.818 6.982zm22.311 46.956c-.273-.447-.994-.717-2.076-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.358-1.717-.538-2.438.537-.721 1.076-2.797 3.495-3.43 4.212-.632.719-1.263.809-2.347.271-1.082-.537-4.571-1.673-8.708-5.333-3.219-2.848-5.393-6.364-6.025-7.441-.631-1.075-.066-1.656.475-2.191.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.717.182-1.344-.09-1.883-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.792-2.436-1.792-.631 0-1.354-.09-2.076-.09s-1.896.269-2.889 1.344c-.992 1.076-3.789 3.676-3.789 8.963 0 5.288 3.879 10.397 4.422 11.113.541.716 7.49 11.92 18.5 16.223C58.2 65.771 58.2 64.336 60.186 64.156c1.984-.179 6.406-2.599 7.312-5.107.9-2.512.9-4.663.631-5.111z"
-  }));
-});
-
-/**
- * Returns a list of attributes (icon, name and url) of all configured share providers of the entry.
- * The url provides a %{url} placeholder where the link can be inserted.
- *
- * @example
- *
- * const shareProviders = useShareProviders();
- * shareProviders // =>
- *   [
- *     {
- *       icon: <FacebookSVGIcon />,
- *       name: 'Facebook',
- *       url: http://www.facebook.com/sharer/sharer.php?u=%{url}
- *     },
- *     {
- *       icon: <TwitterSVGIcon />,
- *       name: 'Twitter',
- *       url: https://twitter.com/intent/tweet?url=%{url}
- *     }
- *   ]
- */
-
-function useShareProviders() {
-  var entryState = useEntryState();
-  var entryMetadata = useEntryMetadata();
-  var shareProviders = entryMetadata ? entryMetadata.shareProviders : {};
-  var urlTemplates = entryState.config.shareUrlTemplates;
-  var sharing = {
-    email: {
-      icon: EmailIcon,
-      name: 'Email',
-      url: urlTemplates.email
-    },
-    facebook: {
-      icon: FacebookIcon,
-      name: 'Facebook',
-      url: urlTemplates.facebook
-    },
-    linked_in: {
-      icon: LinkedInIcon,
-      name: 'LinkedIn',
-      url: urlTemplates.linked_in
-    },
-    telegram: {
-      icon: TelegramIcon,
-      name: 'Telegram',
-      url: urlTemplates.telegram
-    },
-    twitter: {
-      icon: TwitterIcon,
-      name: 'Twitter',
-      url: urlTemplates.twitter
-    },
-    whats_app: {
-      icon: WhatsAppIcon,
-      name: 'WhatsApp',
-      url: urlTemplates.whats_app
-    }
-  };
-  return useMemo(function () {
-    return activeShareProviders(shareProviders).map(function (provider) {
-      var config = sharing[provider];
-      return {
-        name: config.name,
-        icon: config.icon,
-        url: config.url
-      };
-    });
-  }, [shareProviders]);
-}
-
-function activeShareProviders(shareProvidersConfig) {
-  return Object.keys(shareProvidersConfig).filter(function (provider) {
-    return shareProvidersConfig[provider] !== false;
-  });
-}
-/**
- * Returns the share url of the entry.
- *
- * @example
- *
- * const shareUrl = useShareUrl();
- * shareUrl // => "http://test.host/test"
- */
-
-
-function useShareUrl() {
-  var entryMetadata = useEntryMetadata();
-  var entryState = useEntryState();
-
-  if (entryMetadata) {
-    return entryMetadata.shareUrl ? entryMetadata.shareUrl : entryState.config.prettyUrl;
-  } else {
-    return entryState.config.shareUrl;
-  }
-}
-
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-/**
- * Returns a nested data structure representing the chapters, sections
- * and content elements of the entry.
- *
- * @example
- *
- * const structure = useEntryStructure();
- * structure // =>
- *   [
- *     {
- *       permaId: 5,
- *       title: 'Chapter 1',
- *       summary: 'An introductory chapter',
- *       sections: [
- *         {
- *           permaId: 101,
- *           sectionIndex: 0,
- *           transition: 'scroll',
- *
- *           // references to adjacent section objects
- *           previousSection: { ... },
- *           nextSection: { ... },
- *
- *           foreground: [
- *             {
- *               type: 'heading',
- *               props: {
- *                 children: 'Heading'
- *               }
- *             },
- *             {
- *               type: 'textBlock',
- *               props: {
- *                 children: 'Some text'
- *               }
- *             }
- *           ]
- *         }
- *       ],
- *     }
- *   ]
- */
-
-function useEntryStructure() {
-  var entryState = useEntryState();
-  return useMemo(function () {
-    var sections = [];
-    var chapters = getItems(entryState.collections, 'chapters').map(function (chapter) {
-      return _objectSpread$1({
-        permaId: chapter.permaId
-      }, chapter.configuration, {
-        sections: getItems(entryState.collections, 'sections').filter(function (item) {
-          return item.chapterId === chapter.id;
-        }).map(function (section) {
-          var result = sectionStructure(entryState.collections, section);
-          sections.push(result);
-          return result;
-        })
-      });
-    });
-    sections.forEach(function (section, index) {
-      section.sectionIndex = index;
-      section.previousSection = sections[index - 1];
-      section.nextSection = sections[index + 1];
-    });
-    return chapters;
-  }, [entryState]);
-}
-/**
- * Returns a nested data structure representing the content elements
- * of section.
- *
- * @param {Object} options
- * @param {number} options.sectionPermaId
- *
- * @example
- *
- * const section = useSectionStructure({sectionPermaId: 4});
- * section // =>
- *   {
- *     permaId: 4,
- *     transition: 'scroll',
- *     foreground: [
- *       {
- *         type: 'heading',
- *         props: {
- *           children: 'Heading'
- *         }
- *       },
- *       {
- *         type: 'textBlock',
- *         props: {
- *           children: 'Some text'
- *         }
- *       }
- *     ]
- *   }
- */
-
-function useSectionStructure(_ref) {
-  var sectionPermaId = _ref.sectionPermaId;
-  var entryState = useEntryState();
-  var section = getItem(entryState.collections, 'sections', sectionPermaId);
-  return sectionStructure(entryState.collections, section);
-}
-
-function sectionStructure(collections, section) {
-  return section && _objectSpread$1({
-    permaId: section.permaId
-  }, section.configuration, {
-    foreground: getItems(collections, 'contentElements').filter(function (item) {
-      return item.sectionId === section.id;
-    }).map(function (item) {
-      return {
-        id: item.id,
-        type: item.typeName,
-        position: item.configuration.position,
-        props: item.configuration
-      };
-    })
-  });
-}
-
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function expandUrls(collectionName, file, urlTemplates) {
-  if (!file) {
-    return null;
-  }
-
-  if (!urlTemplates[collectionName]) {
-    throw new Error("No file url templates found for ".concat(collectionName));
-  }
-
-  var variants = file.variants || Object.keys(urlTemplates[collectionName]);
-  var urls = variants.reduce(function (result, variant) {
-    var url = getFileUrl(collectionName, file, variant, urlTemplates);
-
-    if (url) {
-      result[variant] = url;
-    }
-
-    return result;
-  }, {});
-  return _objectSpread$2({
-    urls: urls
-  }, file);
-}
-
-function getFileUrl(collectionName, file, quality, urlTemplates) {
-  var templates = urlTemplates[collectionName];
-  var template = templates[quality];
-
-  if (template) {
-    return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
-  }
-}
-
-function idPartition(id) {
-  return partition(pad(id, 9));
-}
-
-function partition(string, separator) {
-  return string.replace(/./g, function (c, i, a) {
-    return i && (a.length - i) % 3 === 0 ? '/' + c : c;
-  });
-}
-
-function pad(string, size) {
-  return (Array(size).fill(0).join('') + string).slice(-size);
-}
-
-/**
- * Look up a file by its collection and perma id.
- *
- * @param {Object} options
- * @param {String} options.collectionName - Collection name of file type to look for (in camel case).
- * @param {String} options.permaId - Perma id of file look up
- *
- * @example
- * const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
- * imageFile // =>
- *   {
- *     id: 102,
- *     permaId: 5,
- *     width: 1000,
- *     height: 500,
- *     urls: {
- *       large: 'https://...'
- *     },
- *     configuration: {
- *       alt: '...'
- *     }
- *   }
- */
-
-function useFile(_ref) {
-  var collectionName = _ref.collectionName,
-      permaId = _ref.permaId;
-  var entryState = useEntryState();
-  return expandUrls(collectionName, getItem(entryState.collections, collectionName, permaId), entryState.config.fileUrlTemplates);
-}
-
-/**
- * Returns a string (comma-separated list) of copyrights of
- * all images used in the entry.
- * If none of the images has a rights attribute configured,
- * it falls back to the default file rights of the entry's account,
- * otherwise returns an empty string
- *
- * @example
- *
- * const fileRights = useFileRights();
- * fileRights // => "author of image 1, author of image 2"
- */
-
-function useFileRights() {
-  var entryState = useEntryState();
-  var defaultFileRights = entryState.config.defaultFileRights;
-  var imageFiles = getItems(entryState.collections, 'imageFiles');
-  var imageFileRights = imageFiles.reduce(function (result, imageConfig) {
-    if (imageConfig && imageConfig.rights) {
-      result.push(imageConfig.rights.trim());
-    }
-
-    return result;
-  }, []).filter(Boolean).join(', ');
-  var fileRights = !!imageFileRights ? imageFileRights : defaultFileRights.trim();
-  var fileRightsString = !!fileRights ? 'Bildrechte: ' + fileRights : '';
-  return fileRightsString;
-}
-/**
- * Returns a nested data structure representing the legal info of the entry.
- * Each legal info is separated into label and url to use in links.
- * Both label and url can be blank, depending on the configuration.
- *
- * @example
- *
- * const legalInfo = useLegalInfo();
- * legalInfo // =>
- *   {
- *     imprint: {
- *       label: '',
- *       url: ''
- *     },
- *     copyright: {
- *       label: '',
- *       url: ''
- *     },
- *     privacy: {
- *       label: '',
- *       url: ''
- *     }
- *   }
- */
-
-function useLegalInfo() {
-  var entryState = useEntryState();
-  return entryState.config.legalInfo;
-}
-/**
- * Returns the credits string (rich text) of the entry.
- *
- * @example
- *
- * const credits = useCredits();
- * credits // => "Credits: <a href="http://pageflow.com">pageflow.com</a>"
- */
-
-function useCredits() {
-  var entryMetadata = useEntryMetadata();
-  var credits = '';
-
-  if (entryMetadata) {
-    credits = entryMetadata.credits;
-  }
-
-  return credits;
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css = "header svg {\n  fill: #c2c2c2;\n  cursor: pointer;\n}\n\nheader svg:hover {\n  fill: rgb(0, 55, 90);;\n}\n\n.AppHeader-module_navigationBar__2EFHw {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  position: sticky;\n  top: -50px;\n  transition: top .15s;\n  z-index: 10000;\n  width: 100%;\n  text-align: center;\n}\n\n.AppHeader-module_navigationBarExpanded__18nbf {\n  top: 0;\n}\n\n.AppHeader-module_navigationBarContentWrapper__2Sf8y {\n  position: relative;\n  z-index: 2;\n  background-color: #fff;\n  height: 50px;\n}\n\n.AppHeader-module_menuIcon__5JKuj {\n  position: absolute;\n}\n\n.AppHeader-module_contextIcons__23I_3 {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  width: 80px;\n  height: 50px;\n  padding: 0px 12px;\n}\n\n.AppHeader-module_contextIcon__157kW {\n  float: right;\n  width: 40px;\n  height: 50px;\n}\n\n.AppHeader-module_wdrLogo__3XGNI {\n  top: 12px;\n  left: 15px;\n  width: 80px;\n}\n\n.AppHeader-module_chapterList__2lMMD {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.AppHeader-module_chapterListItem__28zrc {\n  position: relative;\n  display: inline-block;\n  padding: 0 15px;\n  border-right: 1px solid #e9e9e9;\n}\n\n.AppHeader-module_chapterListItem__28zrc:last-of-type {\n  border-right: none;\n}\n\n.AppHeader-module_navigationTooltip__1EvCy {\n  opacity: 1 !important;\n  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\n}\n\n.AppHeader-module_progressBar__17IVu {\n  background-color: rgba(194,194,194,0.8);\n  height: 8px;\n  width: 100%;\n}\n\n.AppHeader-module_progressIndicator__3SlYz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0vw;\n  height: 100%;\n  background-color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .AppHeader-module_wdrLogo__3XGNI {\n    position: inherit;\n  }\n\n  .AppHeader-module_navigationChapters__1dzyV {\n    touch-action: none;\n    display: block;\n    position: fixed;\n    top: 60px;\n    left: 0px;\n    background: rgba(255, 255, 255, 0.95);\n    width: 100vw;\n    height: 100vh;\n  }\n\n  .AppHeader-module_navigationChaptersHidden__8AEPA {\n    display: none;\n  }\n\n  .AppHeader-module_chapterList__2lMMD {\n    margin-top: 50px;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc {\n    display: list-item;\n    width: 80vw;\n    padding: 25px 10vw;\n    border-right: none;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc::before,\n  .AppHeader-module_chapterListItem__28zrc::after {\n    display: table;\n    content: \" \";\n    border-top: 1px solid rgb(100, 100, 100);\n    width: 14%;\n    margin: 0 43%;\n    transition: width .15s, margin .15s;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc:hover::before,\n  .AppHeader-module_chapterListItem__28zrc:hover::after {\n    border-top: 1px solid rgb(0, 55, 90);\n    width: 80%;\n    margin: 0 10%;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc p {\n    margin-top: 0;\n  }\n\n  .AppHeader-module_progressBar__17IVu {\n    height: 10px;\n  }\n}\n";
-var styles = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","contextIcons":"AppHeader-module_contextIcons__23I_3","contextIcon":"AppHeader-module_contextIcon__157kW","wdrLogo":"AppHeader-module_wdrLogo__3XGNI","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA"};
-styleInject(css);
-
-var css$1 = ".HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n  display: none;\n}\n\n.HamburgerIcon-module_burgerMenuIcon__24t-5 {\n  top: 12px;\n  left: 12px;\n  outline: none;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n    display: block;\n  }\n}\n";
-var styles$1 = {"burgerMenuIconContainer":"HamburgerIcon-module_burgerMenuIconContainer__26RY4","burgerMenuIcon":"HamburgerIcon-module_burgerMenuIcon__24t-5"};
-styleInject(css$1);
-
-var css$2 = "/*!\n * Hamburgers\n * @description Tasty CSS-animated hamburgers\n * @author Jonathan Suh @jonsuh\n * @site https://jonsuh.com/hamburgers\n * @link https://github.com/jonsuh/hamburgers\n */\n.HamburgerIcons-module_hamburger__NnCze {\n  display: inline-block;\n  cursor: pointer;\n  transition-property: opacity, filter;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n}\n\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg,\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::before,\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::after {\n  background-color: #e10028;\n}\n\n.HamburgerIcons-module_hamburger-box__34rgF {\n  width: 40px;\n  height: 24px;\n  display: inline-block;\n  position: relative;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg {\n  display: block;\n  top: 50%;\n  margin-top: -2px;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg, .HamburgerIcons-module_hamburger-inner__187lg::before, .HamburgerIcons-module_hamburger-inner__187lg::after {\n  width: 30px;\n  height: 4px;\n  background-color: rgb(0, 55, 90);\n  border-radius: 4px;\n  position: absolute;\n  transition-property: transform;\n  transition-duration: 0.15s;\n  transition-timing-function: ease;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::before, .HamburgerIcons-module_hamburger-inner__187lg::after {\n  content: \"\";\n  display: block;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::before {\n  top: -10px;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::after {\n  bottom: -10px;\n}\n\n/*\n * Collapse\n */\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg {\n  top: auto;\n  bottom: 0;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg::after {\n  top: -20px;\n  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg::before {\n  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg {\n  transform: translate3d(0, -10px, 0) rotate(-45deg);\n  transition-delay: 0.22s;\n  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::after {\n  top: 0;\n  opacity: 0;\n  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::before {\n  top: 0;\n  transform: rotate(-90deg);\n  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n";
-var hamburgerIconStyles = {"hamburger":"HamburgerIcons-module_hamburger__NnCze","is-active":"HamburgerIcons-module_is-active__10qoY","hamburger-inner":"HamburgerIcons-module_hamburger-inner__187lg","hamburger-box":"HamburgerIcons-module_hamburger-box__34rgF","hamburger--collapse":"HamburgerIcons-module_hamburger--collapse__gRQFa"};
-styleInject(css$2);
-
-function HamburgerIcon(props) {
-  return React.createElement("div", {
-    className: styles$1.burgerMenuIconContainer
-  }, React.createElement("button", {
-    className: classNames(styles.menuIcon, styles$1.burgerMenuIcon, hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, hamburgerIconStyles['is-active'], !props.mobileNavHidden)),
-    type: "button",
-    onClick: props.onClick
-  }, React.createElement("span", {
-    className: hamburgerIconStyles['hamburger-box']
-  }, React.createElement("span", {
-    className: hamburgerIconStyles['hamburger-inner']
-  }))));
-}
-
-var css$3 = ".ChapterLink-module_chapterLink__v5VRl {\n  line-height: 3rem;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n  position: relative;\n  display: block;\n  font-family: inherit;\n  font-weight: 700;\n  font-size: 1rem;\n  height: 50px;\n}\n\n.ChapterLink-module_chapterLink__v5VRl:hover,\n.ChapterLink-module_chapterLinkActive__jl4h5 {\n  color: #e10028;\n}\n\n.ChapterLink-module_summary__17aoW {\n  display: none;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .ChapterLink-module_summary__17aoW {\n    display: block;\n  }\n}";
-var styles$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5","summary":"ChapterLink-module_summary__17aoW"};
-styleInject(css$3);
-
-var css$4 = ".ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n  border-bottom: 3px solid #e10028;\n  width: 200px;\n}\n\n.ChapterLinkTooltip-module_tooltipHeadline__reew_ {\n  margin: 5px 0 0px;\n  color: #e10028;\n}\n\n@media (max-width: 780px) {\n  .ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n    display: none !important;\n  }\n}\n";
-var styles$3 = {"chapterLinkTooltip":"ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw","tooltipHeadline":"ChapterLinkTooltip-module_tooltipHeadline__reew_"};
-styleInject(css$4);
-
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-function setupI18n(_ref) {
-  var defaultLocale = _ref.defaultLocale,
-      locale = _ref.locale,
-      translations = _ref.translations;
-  I18n.defaultLocale = defaultLocale;
-  I18n.locale = locale;
-  I18n.translations = translations;
-}
-/**
- * Use translations in frontend elements. Uses the configured locale
- * of the current entry by default. Note that only translation keys
- * from the `pageflow_scrolled.public` scope are universally
- * available.
- *
- * to render translations for inline editing controls in the editor
- * preview, you can pass `"ui"` as `locale` option and use
- * translations from the `pageflow_scrolled.inline_editing` scope.
- *
- * @param {Object} [options]
- * @param {string} [locale="entry"] -
- *   Pass `"ui"` to use the locale of the editor interface instead.
- *
- * @example
- * const {t} = useI18n();
- * t('pageflow_scrolled.public.some.key')
- *
- * const {t} = useI18n({locale: 'ui'});
- * t('pageflow_scrolled.inline_editing.some.key')
- */
-
-function useI18n() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      scope = _ref2.locale;
-
-  var _useEntryMetadata = useEntryMetadata(),
-      locale = _useEntryMetadata.locale;
-
-  return {
-    t: function t(key, options) {
-      return I18n.t(key, _objectSpread$3({}, options, {
-        locale: scope !== 'ui' && locale
-      }));
-    }
-  };
-}
-
-function ChapterLinkTooltip(props) {
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  return React.createElement(ReactTooltip, {
-    id: props.chapterLinkId,
-    type: "light",
-    place: "bottom",
-    effect: "solid",
-    className: classNames(styles.navigationTooltip, styles$3.chapterLinkTooltip)
-  }, React.createElement("div", null, React.createElement("h3", {
-    className: styles$3.tooltipHeadline
-  }, t('pageflow_scrolled.public.navigation.chapter'), " ", props.chapterIndex), React.createElement("p", {
-    dangerouslySetInnerHTML: {
-      __html: props.summary
-    }
-  })));
-}
-
-function ChapterLink(props) {
-  return React.createElement("div", null, React.createElement("a", {
-    className: classNames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
-    href: "#chapter-".concat(props.permaId),
-    onClick: function onClick() {
-      return props.handleMenuClick(props.chapterLinkId);
-    },
-    "data-tip": true,
-    "data-for": props.chapterLinkId
-  }, props.title), React.createElement("p", {
-    className: styles$2.summary,
-    dangerouslySetInnerHTML: {
-      __html: props.summary
-    }
-  }), React.createElement(ChapterLinkTooltip, Object.assign({
-    chapterIndex: props.chapterIndex,
-    chapterLinkId: props.chapterLinkId
-  }, props)));
-}
-
-var css$5 = ".LegalInfoMenu-module_infoIcon__1kTnt svg {\n  width: 26px;\n  height: 26px;\n  margin: 12px 0px;\n}\n\n";
-var styles$4 = {"infoIcon":"LegalInfoMenu-module_infoIcon__1kTnt"};
-styleInject(css$5);
-
-function _extends$6() {
-  _extends$6 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$6.apply(this, arguments);
-}
-var InfoIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 330 330"
-  }, props), React.createElement("path", {
-    d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
-  }), React.createElement("path", {
-    d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
-  }));
-});
-
-var css$6 = ".LegalInfoTooltip-module_legalInfoTooltip__ChzOS {\n  width: 200px;\n  max-width: 200px;\n  text-align: left;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS:after {\n  left: 90% !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS p {\n  margin: 0 0 0.5em;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS a {\n  color: #e10028;\n}\n";
-var styles$5 = {"legalInfoTooltip":"LegalInfoTooltip-module_legalInfoTooltip__ChzOS"};
-styleInject(css$6);
-
-function LegalInfoLink(props) {
-  return React.createElement("div", null, props.label && props.url && React.createElement("a", {
-    target: "_blank",
-    href: props.url,
-    dangerouslySetInnerHTML: {
-      __html: props.label
-    }
-  }));
-}
-
-function LegalInfoTooltip() {
-  var fileRights = useFileRights();
-  var legalInfo = useLegalInfo();
-  var credits = useCredits();
-  return React.createElement(ReactTooltip, {
-    id: 'legalInfoTooltip',
-    type: 'light',
-    place: 'bottom',
-    effect: 'solid',
-    event: 'click',
-    globalEventOff: 'click',
-    clickable: true,
-    offset: {
-      right: -97
-    },
-    className: classNames(styles.navigationTooltip, styles$5.legalInfoTooltip)
-  }, React.createElement("div", {
-    onMouseLeave: function onMouseLeave() {
-      ReactTooltip.hide();
-    }
-  }, credits && React.createElement("p", {
-    dangerouslySetInnerHTML: {
-      __html: credits
-    }
-  }), fileRights && React.createElement("p", null, fileRights), React.createElement(LegalInfoLink, legalInfo.imprint), React.createElement(LegalInfoLink, legalInfo.copyright), React.createElement(LegalInfoLink, legalInfo.privacy)));
-}
-
-function LegalInfoMenu(props) {
-  return React.createElement("div", null, React.createElement("a", {
-    className: classNames(styles.contextIcon, styles$4.infoIcon),
-    "data-tip": true,
-    "data-for": 'legalInfoTooltip',
-    onMouseEnter: function onMouseEnter() {
-      ReactTooltip.hide();
-    }
-  }, React.createElement(InfoIcon, null)), React.createElement(LegalInfoTooltip, null));
-}
-
-var css$7 = ".SharingMenu-module_shareIcon__1AlDL svg {\n  width: 40px;\n  height: 40px;\n  margin: 5px 0px;\n}";
-var styles$6 = {"shareIcon":"SharingMenu-module_shareIcon__1AlDL"};
-styleInject(css$7);
-
-function _extends$7() {
-  _extends$7 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$7.apply(this, arguments);
-}
-var ShareIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$7({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 96 96"
-  }, props), React.createElement("path", {
-    d: "M67.5 18c-5.1 0-9.3 4.2-9.3 9.3 0 .5.1 1.1.2 1.6l-23 12.9c-1.7-1.8-4.1-3-6.8-3-5.1 0-9.3 4.1-9.3 9.3 0 5.1 4.1 9.3 9.3 9.3 2.7 0 5.2-1.2 6.9-3.1l22.8 13.4c0 .4-.1.7-.1 1.1 0 5.1 4.1 9.3 9.3 9.3 5.1 0 9.3-4.1 9.3-9.3 0-5.1-4.1-9.3-9.3-9.3-2.8 0-5.4 1.3-7.1 3.3L37.7 49.4c.1-.4.1-.9.1-1.3 0-.5 0-1-.1-1.5l23.1-13c1.7 1.8 4.1 3 6.8 3 5.1 0 9.3-4.1 9.3-9.3-.1-5.1-4.3-9.3-9.4-9.3z"
-  }));
-});
-
-var css$8 = "header .share svg {\n  fill: rgb(0, 55, 90);\n}\n\nheader .share:hover svg {\n  fill: #e10028;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv {\n  width: 160px;\n  padding: 0 !important;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv:after {\n  left: 90% !important;\n}\n\n.SharingTooltip-module_shareLinkContainer__2MnKN {\n  display: inline-block;\n  width: 80px;\n  height: 60px;\n  cursor: pointer;\n  color: transparent;\n  text-align: center;\n}\n\n.SharingTooltip-module_shareLink__2ySSX {\n  position: relative;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n}\n\n.SharingTooltip-module_shareLink__2ySSX:hover {\n  color: #e10028;\n}\n\n.SharingTooltip-module_shareIcon__3igrs {\n  width: 80px;\n  height: 25px;\n  margin-top: 5px;\n  margin-bottom: 3px;\n}\n";
-var styles$7 = {"sharingTooltip":"SharingTooltip-module_sharingTooltip__1cljv","shareLinkContainer":"SharingTooltip-module_shareLinkContainer__2MnKN","shareLink":"SharingTooltip-module_shareLink__2ySSX","shareIcon":"SharingTooltip-module_shareIcon__3igrs"};
-styleInject(css$8);
-
-function SharingTooltip() {
-  var shareUrl = useShareUrl();
-  var shareProviders = useShareProviders();
-
-  function renderShareLinks(shareProviders) {
-    return shareProviders.map(function (shareProvider) {
-      var Icon = shareProvider.icon;
-      return React.createElement("div", {
-        key: shareProvider.name,
-        className: styles$7.shareLinkContainer
-      }, React.createElement("a", {
-        className: classNames('share', styles$7.shareLink),
-        href: shareProvider.url.replace('%{url}', shareUrl),
-        target: '_blank'
-      }, React.createElement(Icon, {
-        className: styles$7.shareIcon
-      }), shareProvider.name));
-    });
-  }
-  return React.createElement(ReactTooltip, {
-    id: 'sharingTooltip',
-    type: 'light',
-    place: 'bottom',
-    effect: 'solid',
-    event: 'click',
-    globalEventOff: 'click',
-    clickable: true,
-    offset: {
-      right: -64
-    },
-    className: classNames(styles.navigationTooltip, styles$7.sharingTooltip)
-  }, React.createElement("div", {
-    onMouseLeave: function onMouseLeave() {
-      ReactTooltip.hide();
-    }
-  }, renderShareLinks(shareProviders)));
-}
-
-function SharingMenu() {
-  var shareProviders = useShareProviders();
-
-  if (shareProviders.length > 0) {
-    return React.createElement("div", null, React.createElement("a", {
-      className: classNames(styles.contextIcon, styles$6.shareIcon),
-      "data-tip": true,
-      "data-for": 'sharingTooltip',
-      onMouseEnter: function onMouseEnter() {
-        ReactTooltip.hide();
-      }
-    }, React.createElement(ShareIcon, null)), React.createElement(SharingTooltip, null));
-  } else {
-    return null;
-  }
-}
-
-function _extends$8() {
-  _extends$8 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$8.apply(this, arguments);
-}
-var WDRlogo = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$8({
-    viewBox: "-0.445 -0.445 51.921 15.721"
-  }, props), React.createElement("path", {
-    d: "M31.189 14.83h3.731v-4.772h.285c.425 0 1.496-.023 2.079.919l2.292 3.854h4.015l-2.088-3.509c-.69-1.176-1.258-1.806-1.704-2.13v-.039c1.259-.446 2.636-1.522 2.636-3.715 0-2.716-1.946-4.116-5.394-4.116H31.19v4.689h-.038c-.708-2.829-3.095-4.689-7.453-4.689h-8.253l-1.257 5.516a42.42 42.42 0 00-.488 2.578h-.04s-.284-1.603-.547-2.74l-1.077-5.354h-4.53L6.43 6.676c-.264 1.137-.547 2.74-.547 2.74H5.84s-.222-1.442-.486-2.578L4.097 1.322H0L3.61 14.83h4.121L9.78 6.169h.041l2.048 8.662h4.056L18.93 3.614h.04v11.217h4.606c4.42 0 6.86-2.028 7.577-4.927h.036v4.927zm-7.309-3.062h-1.135V4.384h1.034c2.475 0 3.59 1.095 3.59 3.612 0 2.473-1.115 3.772-3.489 3.772m13.08-4.565h-2.04V4.182h1.918c1.278 0 1.806.506 1.806 1.52 0 .934-.548 1.501-1.684 1.501m12.003-2.317V1.404L45.48 2.66v.865l1.153-.418v2.616l2.33-.838zM47.573 0a3.469 3.469 0 013.459 3.478 3.468 3.468 0 01-3.46 3.477 3.468 3.468 0 01-3.458-3.478A3.469 3.469 0 0147.573 0m0 .51a2.96 2.96 0 00-2.951 2.967 2.96 2.96 0 002.95 2.968 2.96 2.96 0 002.953-2.967A2.96 2.96 0 0047.573.51",
-    fill: "#00375a"
-  }));
-});
-
-function AppHeader(props) {
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      navExpanded = _useState2[0],
-      setNavExpanded = _useState2[1];
-
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      mobileNavHidden = _useState4[0],
-      setMobileNavHidden = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      readingProgress = _useState6[0],
-      setReadingProgress = _useState6[1];
-
-  var _useState7 = useState('chapterLink1'),
-      _useState8 = _slicedToArray(_useState7, 2),
-      activeChapterLink = _useState8[0],
-      setActiveChapterLink = _useState8[1];
-
-  var entryStructure = useEntryStructure();
-  var ref = useRef();
-  useNativeScrollPrevention(ref);
-  var chapters = entryStructure.map(function (chapter) {
-    return {
-      permaId: chapter.permaId,
-      title: chapter.title,
-      summary: chapter.summary
-    };
-  });
-  useScrollPosition(function (_ref) {
-    var prevPos = _ref.prevPos,
-        currPos = _ref.currPos;
-    var expand = currPos.y > prevPos.y;
-    if (expand !== navExpanded) setNavExpanded(expand);
-  }, [navExpanded]);
-  useScrollPosition(function (_ref2) {
-    var prevPos = _ref2.prevPos,
-        currPos = _ref2.currPos;
-    var current = currPos.y * -1; // Todo: Memoize and update on window resize
-
-    var total = document.body.clientHeight - window.innerHeight;
-    var progress = Math.abs(current / total) * 100;
-    setReadingProgress(progress);
-  }, [readingProgress], null, false, 1);
-
-  function handleProgressBarMouseEnter() {
-    setNavExpanded(true);
-  }
-
-  function handleBurgerMenuClick() {
-    setMobileNavHidden(!mobileNavHidden);
-  }
-
-  function handleMenuClick(chapterLinkId) {
-    setActiveChapterLink(chapterLinkId);
-    setMobileNavHidden(true);
-  }
-
-  function renderChapterLinks(chapters) {
-    return chapters.filter(function (chapterConfiguration) {
-      return chapterConfiguration.title && chapterConfiguration.summary;
-    }).map(function (chapter, index) {
-      var chapterIndex = index + 1;
-      var chapterLinkId = "chapterLink".concat(chapterIndex);
-      return React.createElement("li", {
-        key: index,
-        className: styles.chapterListItem
-      }, React.createElement(ChapterLink, Object.assign({}, chapter, {
-        chapterIndex: chapterIndex,
-        chapterLinkId: chapterLinkId,
-        active: activeChapterLink === chapterLinkId,
-        handleMenuClick: handleMenuClick
-      })));
-    });
-  }
-  return React.createElement("header", {
-    className: classNames(styles.navigationBar, _defineProperty({}, styles.navigationBarExpanded, navExpanded))
-  }, React.createElement("div", {
-    className: styles.navigationBarContentWrapper
-  }, React.createElement(HamburgerIcon, {
-    onClick: handleBurgerMenuClick,
-    mobileNavHidden: mobileNavHidden
-  }), React.createElement(WDRlogo, {
-    className: classNames(styles.menuIcon, styles.wdrLogo)
-  }), React.createElement("nav", {
-    className: classNames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
-    role: "navigation",
-    ref: ref
-  }, React.createElement("ul", {
-    className: styles.chapterList
-  }, renderChapterLinks(chapters))), React.createElement("div", {
-    className: classNames(styles.contextIcons)
-  }, React.createElement(SharingMenu, null), React.createElement(LegalInfoMenu, null))), React.createElement("div", {
-    className: styles.progressBar,
-    onMouseEnter: handleProgressBarMouseEnter
-  }, React.createElement("span", {
-    className: styles.progressIndicator,
-    style: {
-      width: readingProgress + '%'
-    }
-  })));
-}
-
-function useOnScreen(ref) {
-  var rootMargin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0px';
-  var cb = arguments.length > 2 ? arguments[2] : undefined;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isIntersecting = _useState2[0],
-      setIntersecting = _useState2[1];
-
-  useEffect(function () {
-    var current = ref.current;
-    var observer = new IntersectionObserver(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 1),
-          entry = _ref2[0];
-
-      setIntersecting(entry.isIntersecting);
-
-      if (entry.isIntersecting && cb) {
-        cb();
-      }
-    }, {
-      rootMargin: rootMargin
-    });
-
-    if (ref.current) {
-      observer.observe(current);
-    }
-
-    return function () {
-      observer.unobserve(current);
-    };
-  }, [ref, rootMargin, cb]);
-  return isIntersecting;
-}
-
-var css$9 = ".Fullscreen-module_root__1N3CI {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  overflow: hidden;\n}\n";
-var styles$8 = {"root":"Fullscreen-module_root__1N3CI"};
-styleInject(css$9);
-
-var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
-  return React.createElement("div", {
-    ref: ref,
-    className: styles$8.root
-  }, props.children);
-});
-
-var css$a = ".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$9 = {"root":"Image-module_root__1ef3j","portrait":"Image-module_portrait__1mRha"};
-styleInject(css$a);
-
-/**
- * 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$9.root, _defineProperty({}, styles$9.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$b = ".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$a = {"root":"Video-module_root__30u0y","video":"Video-module_video__3FJvj","backdrop":"Video-module_backdrop__1R7f4"};
-styleInject(css$b);
-
-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);
-  useEffect(function () {
-    var video = videoRef.current;
-
-    if (!video) {
-      return;
-    }
-
-    video.muted = mutedSettings.muted;
-
-    if (!mutedSettings.mediaOff && props.autoplay !== false) {
-      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, mutedSettings.mediaOff, mutedSettings.muted, props.autoplay]);
-  return React.createElement("div", {
-    className: styles$a.root
-  }, React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
-    return React.createElement("video", {
-      role: "img",
-      src: videoUrl,
-      ref: videoRef,
-      className: classNames(styles$a.video, _defineProperty({}, styles$a.backdrop, !props.interactive)),
-      controls: props.controls,
-      playsInline: true,
-      onEnded: function onEnded() {
-        return props.nextSectionOnEnd && scrollToSection('next');
-      },
-      loop: !props.interactive,
-      poster: posterUrl
-    });
-  }));
-}
-Video.defaultProps = {
-  interactive: false,
-  controls: false
-};
-
-var css$c = ".FillColor-module_FillColor__S1uEG {\n  width: 100%;\n  height: 100vh;\n}\n";
-var styles$b = {"FillColor":"FillColor-module_FillColor__S1uEG"};
-styleInject(css$c);
-
-function FillColor(props) {
-  return React.createElement("div", {
-    className: styles$b.FillColor,
-    style: {
-      backgroundColor: props.color
-    }
-  });
-}
-
-var css$d = ".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$c = {"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$d);
-
-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$c.root, _defineProperty({}, styles$c.active, props.active)),
-    style: position(props, image),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave
-  }, React.createElement("div", {
-    className: styles$c.topLeft
-  }), React.createElement("div", {
-    className: styles$c.topRight
-  }), React.createElement("div", {
-    className: styles$c.bottomLeft
-  }), React.createElement("div", {
-    className: styles$c.bottomRight
-  }));
-});
-
-function position(props, image) {
-  var originalRatio = image.width / image.height;
-  var containerRatio = props.containerWidth / props.containerHeight;
-  var scale = containerRatio > originalRatio ? props.containerWidth / image.width : props.containerHeight / image.height;
-  var contentWidth = image.width * scale;
-  var contentHeight = image.height * scale;
-  var focusX = image.configuration.focusX === undefined ? 50 : image.configuration.focusX;
-  var focusY = image.configuration.focusY === undefined ? 50 : image.configuration.focusY;
-  var cropLeft = (contentWidth - props.containerWidth) * focusX / 100;
-  var cropTop = (contentHeight - props.containerHeight) * focusY / 100;
-  var motifArea = image.configuration.motifArea || {
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0
-  };
-  return {
-    top: contentHeight * motifArea.top / 100 - cropTop,
-    left: contentWidth * motifArea.left / 100 - cropLeft,
-    width: contentWidth * motifArea.width / 100,
-    height: contentHeight * motifArea.height / 100
-  };
-}
-
-function getSize(el) {
-  if (!el) {
-    return {
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0
-    };
-  }
-
-  return {
-    left: el.offsetLeft,
-    top: el.offsetTop,
-    width: el.offsetWidth,
-    height: el.offsetHeight
-  };
-}
-
-function useDimension() {
-  var _useState = useState(getSize(null)),
-      _useState2 = _slicedToArray(_useState, 2),
-      componentSize = _useState2[0],
-      setComponentSize = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentNode = _useState4[0],
-      setCurrentNode = _useState4[1];
-
-  var measuredRef = useCallback(function (node) {
-    setCurrentNode(node);
-    setComponentSize(getSize(node));
-  }, []);
-  useEffect(function () {
-    function handleResize() {
-      setComponentSize(getSize(currentNode));
-    }
-
-    if (!currentNode) {
-      return;
-    }
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [currentNode]);
-  return [componentSize, measuredRef];
-}
-
-var videos = {
-  videoBoatSunset: {
-    id: "videoBoatSunset",
-    width: 960,
-    height: 406,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoBoatDark: {
-    id: "videoBoatDark",
-    width: 960,
-    height: 406,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoKaterchen: {
-    id: "videoKaterchen",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoGarzweilerLoop1: {
-    id: "videoGarzweilerLoop1",
-    width: 3840,
-    height: 2160,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 1,
-      height: 1
-    },
-    focusX: 50,
-    focusY: 50
-  },
-  videoGarzweilerLoop2: {
-    id: "videoGarzweilerLoop2",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 1,
-      height: 1
-    },
-    focusX: 15,
-    focusY: 20
-  },
-  videoGarzweilerDrohne: {
-    id: "videoGarzweilerDrohne",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    }
-  },
-  videoInselInterviewToni: {
-    id: "videoInselInterviewToni",
-    width: 1920,
-    height: 1080,
-    motiveArea: {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    }
-  }
-};
-
-var css$e = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
-var styles$d = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
-styleInject(css$e);
-
-function Backdrop(props) {
-  var _useDimension = useDimension(),
-      _useDimension2 = _slicedToArray(_useDimension, 2),
-      containerDimension = _useDimension2[0],
-      setContainerRef = _useDimension2[1];
-
-  return React.createElement("div", {
-    className: classNames(styles$d.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$d.offScreen, props.offScreen))
-  }, React.createElement("div", {
-    className: props.transitionStyles.backdropInner
-  }, React.createElement("div", {
-    className: props.transitionStyles.backdropInner2
-  }, props.children(renderContent(props, containerDimension, setContainerRef)))));
-}
-Backdrop.defaultProps = {
-  transitionStyles: {}
-};
-
-function renderContent(props, containerDimension, setContainerRef) {
-  if (props.image.toString().startsWith('#')) {
-    return React.createElement(FillColor, {
-      color: props.image
-    });
-  } else if (props.image.toString().startsWith('video')) {
-    var video = videos[props.image];
-    return React.createElement(Fullscreen, {
-      ref: setContainerRef
-    }, React.createElement(Video, {
-      state: props.onScreen ? 'active' : 'inactive',
-      id: props.image,
-      offset: props.offset,
-      interactive: props.interactive,
-      nextSectionOnEnd: props.nextSectionOnEnd
-    }), React.createElement(MotifArea, {
-      ref: props.motifAreaRef,
-      image: video,
-      containerWidth: containerDimension.width,
-      containerHeight: containerDimension.height
-    }));
-  } else {
-    return React.createElement(Fullscreen, {
-      ref: setContainerRef
-    }, React.createElement(Image, {
-      id: props.image
-    }), React.createElement(Image, {
-      id: props.imageMobile,
-      mobile: true
-    }), React.createElement(MotifArea, {
-      ref: props.motifAreaRef,
-      imageId: props.image,
-      containerWidth: containerDimension.width,
-      containerHeight: containerDimension.height
-    }));
-  }
-}
-
-var Context$1 = React.createContext({});
-function EditorStateProvider(props) {
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      selection = _useState2[0],
-      setSelectionState = _useState2[1];
-
-  var setSelection = useCallback(function (selection) {
-    if (window.parent !== window) {
-      window.parent.postMessage({
-        type: 'SELECTED',
-        payload: selection || {}
-      }, window.location.origin);
-    }
-
-    setSelectionState(selection);
-  }, []);
-  var value = useMemo(function () {
-    return props.active ? {
-      selection: selection,
-      setSelection: setSelection
-    } : {};
-  }, [props.active, setSelection, selection]);
-  return React.createElement(Context$1.Provider, {
-    value: value
-  }, props.children);
-}
-function useEditorSelection(options) {
-  var _useContext = useContext(Context$1),
-      selection = _useContext.selection,
-      setSelection = _useContext.setSelection;
-
-  var resetSelection = useCallback(function () {
-    setSelection(null);
-  }, [setSelection]);
-  var select = useCallback(function (selection) {
-    setSelection(selection || options);
-  }, [setSelection, options]);
-  return useMemo(function () {
-    return setSelection ? {
-      isSelected: selection && options && selection.id === options.id && selection.type === options.type,
-      isSelectable: !selection || selection.type === 'contentElement',
-      select: select,
-      resetSelection: resetSelection
-    } : {};
-  }, [options, selection, setSelection, select, resetSelection]);
-}
-
-var css$f = ".Foreground-module_Foreground__13ODU {\n  position: relative;\n  z-index: 3;\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx {\n  min-height: 51vh;\n}\n\n.Foreground-module_fullHeight__1vMXb {\n  min-height: 100vh;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx.Foreground-module_enlarge__14Plm,\n.Foreground-module_fullHeight__1vMXb.Foreground-module_enlarge__14Plm {\n  min-height: 130vh;\n}\n\n.Foreground-module_hidden__2dmAx {\n  visibility: hidden;\n}\n";
-var styles$e = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","enlarge":"Foreground-module_enlarge__14Plm","hidden":"Foreground-module_hidden__2dmAx"};
-styleInject(css$f);
-
-function Foreground(props) {
-  var _useEditorSelection = useEditorSelection(),
-      resetSelection = _useEditorSelection.resetSelection;
-
-  return React.createElement("div", {
-    className: className(props),
-    onClick: resetSelection
-  }, props.children);
-}
-
-function className(props) {
-  var _classNames;
-
-  return classNames(styles$e.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$e["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$e.hidden, props.hidden), _defineProperty(_classNames, styles$e.enlarge, props.hidden && !props.disableEnlarge), _classNames));
-}
-
-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();
-}
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-/**
- * Register new types of content elements.
- * @name frontend_contentElementTypes
- */
-var ContentElementTypeRegistry =
-/*#__PURE__*/
-function () {
-  function ContentElementTypeRegistry() {
-    _classCallCheck(this, ContentElementTypeRegistry);
-
-    this.types = {};
-  }
-  /**
-   * Register a new type of content element.
-   *
-   * @param {string} typeName - Name of the content element type.
-   * @param {Object} options
-   * @param {React.Component} options.component
-   * @memberof frontend_contentElementTypes
-   *
-   * @example
-   *
-   * // frontend.js
-   *
-   * import {frontend} from 'pageflow-scrolled/frontend';
-   * import {InlineImage} from './InlineImage';
-   *
-   * frontend.contentElementTypes.register('inlineImage', {
-   *   component: InlineImage
-   * });
-   */
-
-
-  _createClass(ContentElementTypeRegistry, [{
-    key: "register",
-    value: function register(typeName, options) {
-      this.types[typeName] = options;
-    }
-  }, {
-    key: "getComponent",
-    value: function getComponent(typeName) {
-      if (!this.types[typeName]) {
-        throw new Error("Unknown content element type name \"".concat(typeName, "\""));
-      }
-
-      return this.types[typeName].component;
-    }
-  }]);
-
-  return ContentElementTypeRegistry;
-}();
-
-var api = {
-  contentElementTypes: new ContentElementTypeRegistry()
-};
-
-var css$g = ".ContentElement-module_outer__3ZsNV {\n  position: relative;\n}\n\n.ContentElement-module_selectable__2oRzN {\n  position: relative;\n}\n\n.ContentElement-module_selectable__2oRzN:after {\n  content: '';\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  right: -5px;\n  bottom: -5px;\n}\n\n.ContentElement-module_bl__2w5xM,\n.ContentElement-module_br__3v-_l,\n.ContentElement-module_tr__l_gbk,\n.ContentElement-module_tl__NrB8G {\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  opacity: 0;\n}\n\n.ContentElement-module_selected__1uFZP .ContentElement-module_bl__2w5xM,\n.ContentElement-module_selected__1uFZP .ContentElement-module_br__3v-_l,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tr__l_gbk,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tl__NrB8G {\n  border-width: 3px\n}\n\n.ContentElement-module_selected__1uFZP .ContentElement-module_bl__2w5xM,\n.ContentElement-module_selected__1uFZP .ContentElement-module_br__3v-_l,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tr__l_gbk,\n.ContentElement-module_selected__1uFZP .ContentElement-module_tl__NrB8G,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_bl__2w5xM,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_br__3v-_l,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_tr__l_gbk,\n.ContentElement-module_selectable__2oRzN:hover .ContentElement-module_tl__NrB8G {\n  opacity: 0.8;\n}\n\n.ContentElement-module_bl__2w5xM {\n  bottom: -6px;\n  left: -6px;\n  border-bottom: solid 1px currentColor;\n  border-left: solid 1px currentColor;\n}\n\n.ContentElement-module_br__3v-_l {\n  bottom: -6px;\n  right: -6px;\n  border-bottom: solid 1px currentColor;\n  border-right: solid 1px currentColor;\n}\n\n.ContentElement-module_tr__l_gbk {\n  top: -6px;\n  right: -6px;\n  border-top: solid 1px currentColor;\n  border-right: solid 1px currentColor;\n}\n\n.ContentElement-module_tl__NrB8G {\n  top: -6px;\n  left: -6px;\n  border-top: solid 1px currentColor;\n  border-left: solid 1px currentColor;\n}\n\n.ContentElement-module_selected__1uFZP:hover:after,\n.ContentElement-module_selected__1uFZP:after {\n  border: solid 1px currentColor;\n  opacity: 0.8;\n  pointer-events: none;\n}\n";
-var styles$f = {"selectionWidth":"1px","selectionPadding":"-6px","selectionPadding2":"-5px","outer":"ContentElement-module_outer__3ZsNV","selectable":"ContentElement-module_selectable__2oRzN","bl":"ContentElement-module_bl__2w5xM","br":"ContentElement-module_br__3v-_l","tr":"ContentElement-module_tr__l_gbk","tl":"ContentElement-module_tl__NrB8G","selected":"ContentElement-module_selected__1uFZP"};
-styleInject(css$g);
-
-var css$h = "\n\n.InsertContentElementIndicator-module_root__2KRRn {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  text-align: center;\n  cursor: pointer;\n  opacity: 0;\n}\n\n.InsertContentElementIndicator-module_before__1EEFz {\n  bottom: 100%;\n}\n\n.InsertContentElementIndicator-module_after__2YmaD {\n  top: 100%;\n}\n\n.InsertContentElementIndicator-module_root__2KRRn:hover {\n  opacity: 1;\n}\n\n.InsertContentElementIndicator-module_box__3EIMv svg {\n  vertical-align: middle;\n  oopacity: 0.8;\n}\n\n.InsertContentElementIndicator-module_bar__c-Ifz {\n  background-color: currentColor;\n  position: absolute;\n  top: 50%;\n  height: 1px;\n  oopacity: 0.5;\n  width: calc(50% - 15px);\n}\n\n.InsertContentElementIndicator-module_left__13U3P {\n  left: -6px;\n}\n\n.InsertContentElementIndicator-module_right__lSfoH {\n  right: -6px;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q.InsertContentElementIndicator-module_root__2KRRn {\n  opacity: 0.8;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_right__lSfoH,\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_left__13U3P {\n  width: 13px;\n  background-color: currentColor;\n  oopacity: 0.8;\n  height: 5px;\n  top: calc(50% - 2px);\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_right__lSfoH {\n  right: -6px;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_left__13U3P {\n  left: -6px;\n}\n\n.InsertContentElementIndicator-module_middle__2TTQX {\n  opacity: 0;\n  width: 100%;\n  left: 0;\n  top: 50%;\n  height: 1px;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_middle__2TTQX {\n  opacity: 1;\n}\n\n.InsertContentElementIndicator-module_selected__3sk0q .InsertContentElementIndicator-module_box__3EIMv {\n  opacity: 0;\n}\n";
-var styles$g = {"selectionColor":"#1c86fe","backgroundColor":"rgba(0, 0, 0, 0.8)","borderColor":"rgba(255, 255, 255, 0.2)","root":"InsertContentElementIndicator-module_root__2KRRn","before":"InsertContentElementIndicator-module_before__1EEFz","after":"InsertContentElementIndicator-module_after__2YmaD","box":"InsertContentElementIndicator-module_box__3EIMv","bar":"InsertContentElementIndicator-module_bar__c-Ifz","left":"InsertContentElementIndicator-module_left__13U3P InsertContentElementIndicator-module_bar__c-Ifz","right":"InsertContentElementIndicator-module_right__lSfoH InsertContentElementIndicator-module_bar__c-Ifz","selected":"InsertContentElementIndicator-module_selected__3sk0q","middle":"InsertContentElementIndicator-module_middle__2TTQX InsertContentElementIndicator-module_bar__c-Ifz"};
-styleInject(css$h);
-
-function _extends$9() {
-  _extends$9 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$9.apply(this, arguments);
-}
-var PlusIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return React.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
-    d: "M256 0C114.844 0 0 114.839 0 256s114.844 256 256 256 256-114.839 256-256S397.156 0 256 0zm133.594 272.699H272.699v116.895c0 9.225-7.48 16.699-16.699 16.699-9.219 0-16.699-7.475-16.699-16.699V272.699H122.406c-9.219 0-16.699-7.475-16.699-16.699 0-9.225 7.48-16.699 16.699-16.699h116.895V122.406c0-9.225 7.48-16.699 16.699-16.699 9.219 0 16.699 7.475 16.699 16.699v116.895h116.895c9.219 0 16.699 7.475 16.699 16.699.001 9.225-7.48 16.699-16.699 16.699z"
-  }));
-});
-
-function InsertContentElementIndicator(_ref) {
-  var contentElementId = _ref.contentElementId,
-      selected = _ref.selected,
-      position = _ref.position;
-
-  var _useEditorSelection = useEditorSelection({
-    id: contentElementId,
-    type: position
-  }),
-      isSelected = _useEditorSelection.isSelected,
-      select = _useEditorSelection.select;
-
-  var _useI18n = useI18n({
-    locale: 'ui'
-  }),
-      t = _useI18n.t;
-
-  function handleClick(event) {
-    event.stopPropagation();
-    select();
-  }
-
-  return React.createElement("div", {
-    className: classNames(styles$g.root, styles$g[position], _defineProperty({}, styles$g.selected, isSelected)),
-    title: t('pageflow_scrolled.inline_editing.insert_content_element'),
-    onClick: handleClick
-  }, React.createElement("div", {
-    className: styles$g.box
-  }, React.createElement(PlusIcon, {
-    width: 20,
-    height: 20,
-    fill: "currentColor"
-  })), React.createElement("div", {
-    className: styles$g.left
-  }), React.createElement("div", {
-    className: styles$g.right
-  }), React.createElement("div", {
-    className: styles$g.middle
-  }));
-}
-
-function ContentElement(props) {
-  var Component = api.contentElementTypes.getComponent(props.type);
-
-  var _useEditorSelection = useEditorSelection({
-    id: props.id,
-    type: 'contentElement'
-  }),
-      isSelected = _useEditorSelection.isSelected,
-      isSelectable = _useEditorSelection.isSelectable,
-      select = _useEditorSelection.select,
-      resetSelection = _useEditorSelection.resetSelection;
-
-  if (select) {
-    var _classNames;
-
-    return React.createElement("div", {
-      className: classNames(styles$f.outer)
-    }, props.first && React.createElement(InsertContentElementIndicator, {
-      position: "before",
-      contentElementId: props.id
-    }), React.createElement("div", {
-      className: classNames((_classNames = {}, _defineProperty(_classNames, styles$f.selected, isSelected), _defineProperty(_classNames, styles$f.selectable, isSelectable), _classNames)),
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        isSelectable ? select() : resetSelection();
-      }
-    }, React.createElement(Component, {
-      sectionProps: props.sectionProps,
-      configuration: props.itemProps,
-      contentElementId: props.id
-    }), React.createElement("div", {
-      className: styles$f.tl
-    }), React.createElement("div", {
-      className: styles$f.bl
-    }), React.createElement("div", {
-      className: styles$f.tr
-    }), React.createElement("div", {
-      className: styles$f.br
-    })), React.createElement(InsertContentElementIndicator, {
-      position: "after",
-      contentElementId: props.id
-    }));
-  } else {
-    return React.createElement(Component, {
-      sectionProps: props.sectionProps,
-      configuration: props.itemProps
-    });
-  }
-}
-
-function ContentElements(props) {
-  return React.createElement(React.Fragment, null, props.items.map(function (item, index) {
-    return props.children(item, React.createElement(ContentElement, {
-      key: item.id,
-      id: item.id,
-      type: item.type,
-      first: index === 0,
-      position: item.position,
-      itemProps: item.props,
-      sectionProps: props.sectionProps
-    }));
-  }));
-}
-ContentElements.defaultProps = {
-  children: function children(item, child) {
-    return child;
-  }
-};
-
-var css$i = ".TwoColumn-module_root__37EqL {\n}\n\n.TwoColumn-module_group__3Hg2y {\n  clear: right;\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.TwoColumn-module_group-full__2OT4o {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.TwoColumn-module_sticky__4LCDO,\n.TwoColumn-module_inline__1fPfM {\n  max-width: 500px;\n}\n\n.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM {\n  margin-left: auto;\n}\n\n@media (max-width: 949px) {\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    margin-left: auto;\n  }\n}\n\n@media (min-width: 950px) {\n  .TwoColumn-module_sticky__4LCDO {\n    position: sticky;\n    float: right;\n    top: 33%;\n    width: 30%;\n    max-width: 600px;\n  }\n\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    float: left;\n  }\n}\n";
-var styles$h = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a"};
-styleInject(css$i);
-
-var availablePositions = ['inline', 'sticky', 'full'];
-function TwoColumn(props) {
-  return React.createElement("div", {
-    className: classNames(styles$h.root, styles$h[props.align])
-  }, React.createElement("div", {
-    className: styles$h.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$h.group, styles$h["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$h[position]
-    }, props.children(React.createElement(ContentElements, {
-      sectionProps: props.sectionProps,
-      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$j = ".Center-module_outer__3Rr0H {\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.Center-module_outer-full__3dknO {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.Center-module_item__1KSs3 {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 700px;\n}\n\n.Center-module_item-full__1cEuv {\n  margin-left: 0;\n  margin-right: 0;\n  max-width: none;\n}\n\n@media (min-width: 950px) {\n  .Center-module_inner-left__2z9Ea {\n    float: left;\n    width: 60%;\n    margin-left: -10%;\n    margin-right: 1em;\n    margin-bottom: 1em;\n  }\n\n  .Center-module_inner-right__KBkVt {\n    float: right;\n    width: 60%;\n    margin-right: -10%;\n    margin-left: 1em;\n    margin-bottom: 1em;\n  }\n}\n";
-var styles$i = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
-styleInject(css$j);
-
-function Center(props) {
-  return React.createElement("div", {
-    className: classNames(styles$i.root)
-  }, React.createElement("div", {
-    ref: props.contentAreaRef
-  }), React.createElement(ContentElements, {
-    sectionProps: props.sectionProps,
-    items: props.items
-  }, function (item, child) {
-    return React.createElement("div", {
-      key: item.index,
-      className: classNames(styles$i.outer, styles$i["outer-".concat(item.position)])
-    }, React.createElement("div", {
-      className: classNames(styles$i.item, styles$i["item-".concat(item.position)])
-    }, props.children(React.createElement("div", {
-      className: styles$i["inner-".concat(item.position)]
-    }, child))));
-  }));
-}
-
-function Layout(props) {
-  if (props.sectionProps.layout === 'center') {
-    return React.createElement(Center, props);
-  } else if (props.sectionProps.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$k = ".Section-module_Section__Yo58b {\n  position: relative;\n}\n\n.Section-module_invert__3_p7F {\n  color: #222;\n}\n\n.Section-module_activityProbe__Fsklh {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 2px;\n  width: 1px;\n}\n";
-var styles$j = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
-styleInject(css$k);
-
-var css$l = "\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgConceal-module_backdropInner__1IAYD {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgConceal-module_backdrop-below__3E6Uk {\n  opacity: 0;\n  visibility: hidden;\n}\n";
-var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
-styleInject(css$l);
-
-var css$m = "\n\n.fadeInBgFadeOut-module_backdrop__r0YXp {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOut-module_backdropInner__IQp87 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,\n.fadeInBgFadeOut-module_foreground__Q2vkT {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOut-module_foreground-above__3pmz9,\n.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOut-module_bbackdrop__1thge::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOut-module_bbackdrop-below__yaeMc::before {\n  visibility: hidden;\n}\n";
-var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","bbackdrop":"fadeInBgFadeOut-module_bbackdrop__1thge","bbackdrop-below":"fadeInBgFadeOut-module_bbackdrop-below__yaeMc"};
-styleInject(css$m);
-
-var css$n = "\n\n.fadeInBgFadeOutBg-module_backdrop__15ocl {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow__xUKyj,\n.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E,\n.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop__25Ux-::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj::before {\n  visibility: hidden;\n}\n";
-var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6","bbackdrop":"fadeInBgFadeOutBg-module_bbackdrop__25Ux-","bbackdrop-below":"fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj"};
-styleInject(css$n);
-
-var css$o = "\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInBgScrollOut-module_backdropInner__3JZBG {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_backdropInner2__q-00L {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_foreground__1ODH9 {\n  min-height: 100vh;\n}\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgScrollOut-module_backdrop-below__2Dbkr {\n  opacity: 0;\n  visibility: hidden;\n}\n";
-var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
-styleInject(css$o);
-
-var css$p = "\n\n.fadeInConceal-module_backdrop__1zaRO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInConceal-module_backdropInner__1AIvq {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInConceal-module_backdrop__1zaRO,\n.fadeInConceal-module_foreground__3giM9 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInConceal-module_backdrop-below__AWyQe,\n.fadeInConceal-module_foreground-below__2z5Op {\n  opacity: 0;\n  visibility: hidden;\n}\n";
-var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","foreground":"fadeInConceal-module_foreground__3giM9","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
-styleInject(css$p);
-
-var css$q = "\n\n.fadeInFadeOut-module_backdrop__Y4xOA {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOut-module_backdropInner__1oRfP {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground__1eleZ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOut-module_foreground-above__249wa,\n.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground-below__3mE6f {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOut-module_bbackdrop__WJjFl::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOut-module_bbackdrop-below__1Htkz::before {\n  visibility: hidden;\n}\n";
-var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f","bbackdrop":"fadeInFadeOut-module_bbackdrop__WJjFl","bbackdrop-below":"fadeInFadeOut-module_bbackdrop-below__1Htkz"};
-styleInject(css$q);
-
-var css$r = "\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOutBg-module_backdropInner__3r_bo {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow__3x7Ki,\n.fadeInFadeOutBg-module_foreground__24f_M {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow-above__3T2K5,\n.fadeInFadeOutBg-module_foreground-below__3pTRc {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOutBg-module_bbackdrop__MVdvw::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOutBg-module_bbackdrop-below__30mpF::before {\n  visibility: hidden;\n}\n";
-var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","foreground":"fadeInFadeOutBg-module_foreground__24f_M","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc","bbackdrop":"fadeInFadeOutBg-module_bbackdrop__MVdvw","bbackdrop-below":"fadeInFadeOutBg-module_bbackdrop-below__30mpF"};
-styleInject(css$r);
-
-var css$s = "\n\n.fadeInScrollOut-module_backdrop__2FhBb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInScrollOut-module_backdropInner__1OfNZ {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_backdropInner2__5bNPT {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_foreground__3h0EX {\n  min-height: 100vh;\n}\n\n.fadeInScrollOut-module_backdrop__2FhBb,\n.fadeInScrollOut-module_foreground__3h0EX {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInScrollOut-module_backdrop-below__3cRLH,\n.fadeInScrollOut-module_foreground-below__1Jcql {\n  opacity: 0;\n  visibility: hidden;\n}\n";
-var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql"};
-styleInject(css$s);
-
-var css$t = ".revealConceal-module_backdrop__dLUhU {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 100%;\n}\n\n.revealConceal-module_backdropInner__2k1Z- {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n";
-var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
-styleInject(css$t);
-
-var css$u = "\n\n.revealFadeOut-module_backdrop___Q1QF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOut-module_backdropInner__17qRn {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOut-module_foreground__1GzBs {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.revealFadeOut-module_foreground-above__3GxOf {\n  opacity: 0;\n  visibility: hidden;\n}\n";
-var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
-styleInject(css$u);
-
-var css$v = "\n\n.revealFadeOutBg-module_backdrop__30OCF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOutBg-module_backdropInner__3v3tM {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOutBg-module_boxShadow__1NZRz {\n  transition: opacity 1s ease, visibility 1s;\n}\n\n.revealFadeOutBg-module_boxShadow-above__2r4ov {\n  opacity: 0;\n  visibility: hidden;\n}\n";
-var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
-styleInject(css$v);
-
-var css$w = ".revealScrollOut-module_backdrop__2yOXd {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.revealScrollOut-module_backdropInner__211p3 {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealScrollOut-module_backdropInner2__v6WqM {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.revealScrollOut-module_foreground__3z-hw {\n}\n";
-var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
-styleInject(css$w);
-
-var css$x = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
-var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
-styleInject(css$x);
-
-var css$y = "\n\n.scrollInFadeOut-module_backdrop__1vXJd {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOut-module_foreground__3Ikxb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOut-module_foreground-above__6ipm- {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOut-module_bbackdrop__2C-bf::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOut-module_bbackdrop-below__3tq0M::before {\n  visibility: hidden;\n}\n";
-var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-","bbackdrop":"scrollInFadeOut-module_bbackdrop__2C-bf","bbackdrop-below":"scrollInFadeOut-module_bbackdrop-below__3tq0M"};
-styleInject(css$y);
-
-var css$z = "\n\n.scrollInFadeOutBg-module_backdrop__zw95c {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOutBg-module_boxShadow__3UxCQ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOutBg-module_boxShadow-above__3kfau {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOutBg-module_bbackdrop__2pO9o::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOutBg-module_bbackdrop-below__1Ky2w::before {\n  visibility: hidden;\n}\n";
-var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau","bbackdrop":"scrollInFadeOutBg-module_bbackdrop__2pO9o","bbackdrop-below":"scrollInFadeOutBg-module_bbackdrop-below__1Ky2w"};
-styleInject(css$z);
-
-var css$A = ".scrollInScrollOut-module_backdrop__XzCge {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n}\n\n.scrollInScrollOut-module_foreground__1yyY8 {\n  margin-top: -100vh;\n}\n";
-var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
-styleInject(css$A);
-
-var css$B = ".previewScrollOut-module_scene__W9bDl {\n  height: 100%;\n}\n\n.previewScrollOut-module_backdrop__2-Bl_ {\n  position: absolute;\n  top: 0;\n}\n";
-var previewScrollOut = {"scene":"previewScrollOut-module_scene__W9bDl","backdrop":"previewScrollOut-module_backdrop__2-Bl_"};
-styleInject(css$B);
-
-var styles$k = {
-  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$k[name]) {
-    throw new Error("Unknown transition ".concat(name));
-  }
-
-  return styles$k[name];
-}
-
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-function NoOpShadow(props) {
-  return React.createElement("div", null, props.children);
-}
-
-var css$C = ".GradientShadow-module_shadow__2UiDH {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  z-index: 1;\n  transition: opacity 1s ease;\n}\n\n.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadow__2UiDH {\n  background: linear-gradient(to right, #000 0%,rgba(0, 0, 0, 0) 100%);\n}\n\n@media (min-width: 950px) {\n  .GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH {\n    background: linear-gradient(to left, #000 0%,rgba(0, 0, 0, 0) 100%);\n  }\n}\n\n.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadow__2UiDH {\n  background: #000;\n}\n";
-var styles$l = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl"};
-styleInject(css$C);
-
-function GradientShadow(props) {
-  var maxOpacityOverlap = props.motifAreaRect.height / 2;
-  var motifAreaOverlap = Math.min(maxOpacityOverlap, props.motifAreaRect.bottom - props.contentAreaRect.top);
-  var opacityFactor = props.intersecting && props.motifAreaRect.height > 0 ? motifAreaOverlap / maxOpacityOverlap : 1;
-  return React.createElement("div", {
-    className: classNames(styles$l.root, styles$l["align-".concat(props.align)], _defineProperty({}, styles$l.intersecting, props.intersecting))
-  }, React.createElement("div", {
-    className: styles$l.shadow,
-    style: {
-      opacity: props.opacity * Math.round(opacityFactor * 10) / 10
-    }
-  }), props.children);
-}
-GradientShadow.defaultProps = {
-  opacity: 0.7,
-  align: 'left'
-};
-
-function NoOpBoxWrapper(props) {
-  return React.createElement("div", null, props.children);
-}
-
-var css$D = ".GradientBox-module_wrapper__1Jj7N {\n  padding-bottom: 50px;\n}\n\n.GradientBox-module_shadow__2XilX {\n  --background: rgba(0, 0, 0, 0.7);\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX {\n  bottom: -100vh;\n}\n\n.GradientBox-module_gradient__31tJ- {\n  text-shadow: 0px 1px 5px black;\n}\n\n.GradientBox-module_gradient__31tJ- .GradientBox-module_shadow__2XilX {\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.3) 100px,rgba(0, 0, 0, 0.3) 100%);\n}\n\n.GradientBox-module_content__96lDk {\n  position: relative;\n}\n";
-var styles$m = {"wrapper":"GradientBox-module_wrapper__1Jj7N","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","content":"GradientBox-module_content__96lDk"};
-styleInject(css$D);
-
-function GradientBox(props) {
-  var _classNames;
-
-  var padding = props.active ? props.padding : 0;
-  return React.createElement("div", {
-    className: classNames(styles$m.root, (_classNames = {}, _defineProperty(_classNames, styles$m.gradient, padding > 0), _defineProperty(_classNames, styles$m["long"], props.coverInvisibleNextSection), _classNames)),
-    style: {
-      paddingTop: padding
-    }
-  }, React.createElement("div", {
-    className: styles$m.wrapper
-  }, React.createElement("div", {
-    className: classNames(styles$m.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
-    style: {
-      top: padding,
-      opacity: props.opacity
-    }
-  }), React.createElement("div", {
-    className: styles$m.content
-  }, props.children)));
-}
-GradientBox.defaultProps = {
-  opacity: 1
-};
-
-var css$E = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
-var styles$n = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
-styleInject(css$E);
-
-function CardBox(props) {
-  var padding = props.active ? props.padding : 0;
-  return React.createElement("div", {
-    style: {
-      paddingTop: padding
-    }
-  }, React.createElement("div", {
-    className: styles$n.wrapper
-  }, React.createElement("div", {
-    style: {
-      top: padding
-    }
-  }), React.createElement("div", {
-    className: styles$n.content
-  }, props.children)));
-}
-
-var css$F = ".CardBoxWrapper-module_cardBg__154o2 {\n  background: white;\n  color: black;\n  padding: 4%;\n  margin: 0 -4% 50px 0;\n  border-radius: 15px;\n  opacity: 1;\n}\n";
-var styles$o = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
-styleInject(css$F);
-
-function CardBoxWrapper(props) {
-  return React.createElement("div", {
-    className: styles$o.cardBg
-  }, props.children);
-}
-
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var OnScreenContext = React.createContext({
-  center: false,
-  top: false,
-  bottom: false
-});
-function Section(props) {
-  var activityProbeRef = useRef();
-  useOnScreen(activityProbeRef, '-50% 0px -50% 0px', props.onActivate);
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '0px 0px 0px 0px');
-  useScrollTarget(ref, props.isScrollTarget);
-  var sectionProperties = {
-    layout: props.layout,
-    invert: props.invert
-  };
-
-  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$j.Section, transitionStyles.section, _defineProperty({}, styles$j.invert, props.invert))
-  }, React.createElement("div", {
-    ref: activityProbeRef,
-    className: styles$j.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,
-    sectionProps: sectionProperties
-  }, function (children) {
-    return React.createElement(BoxWrapper, null, children);
-  }))));
-}
-
-function indexItems(items) {
-  return items.map(function (item, index) {
-    return _objectSpread$4({}, item, {
-      index: index
-    });
-  });
-}
-
-function heightMode(props) {
-  if (props.fullHeight) {
-    if (props.transition.startsWith('fade') || props.nextSection && props.nextSection.transition.startsWith('fade')) {
-      return 'fullFade';
-    } else {
-      return 'full';
-    }
-  }
-
-  return 'dynamic';
-}
-
-function Chapter(props) {
-  return React.createElement("div", {
-    id: "chapter-".concat(props.permaId)
-  }, renderSections(props.sections, props.currentSectionIndex, props.setCurrentSectionIndex, props.scrollTargetSectionIndex, props.setScrollTargetSectionIndex));
-}
-
-function renderSections(sections, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
-  function _onActivate(sectionIndex) {
-    setCurrentSectionIndex(sectionIndex);
-    setScrollTargetSectionIndex(null);
-  }
-
-  return sections.map(function (section) {
-    return React.createElement(Section, Object.assign({
-      key: section.permaId,
-      state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
-      isScrollTarget: section.sectionIndex === scrollTargetSectionIndex,
-      onActivate: function onActivate() {
-        return _onActivate(section.sectionIndex);
-      }
-    }, section));
-  });
-}
-
-var css$G = ".Entry-module_Entry__1nDGh {\n  font-family: 'Source Sans Pro', sans-serif;\n  background-color: #000;\n  color: #fff;\n}\n\n.Entry-module_exampleSelect__1uAJs {\n  position: absolute;\n  top: 5px;\n  left: 50%;\n  z-index: 10;\n  transform: translateX(-50%);\n}\n";
-var entryStyles = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
-styleInject(css$G);
-
-function Entry(props) {
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentSectionIndex = _useState2[0],
-      setCurrentSectionIndexState = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      scrollTargetSectionIndex = _useState4[0],
-      setScrollTargetSectionIndex = _useState4[1];
-
-  var _useEditorSelection = useEditorSelection(),
-      select = _useEditorSelection.select;
-
-  var _useState5 = useState(true),
-      _useState6 = _slicedToArray(_useState5, 2),
-      muted = _useState6[0],
-      setMuted = _useState6[1];
-
-  var dispatch = useEntryStateDispatch();
-  var entryStructure = useEntryStructure();
-  var setCurrentSectionIndex = useCallback(function (index) {
-    if (window.parent) {
-      window.parent.postMessage({
-        type: 'CHANGE_SECTION',
-        payload: {
-          index: index
-        }
-      }, window.location.origin);
-    }
-
-    setCurrentSectionIndexState(index);
-  }, [setCurrentSectionIndexState]);
-  useEffect(function () {
-    if (window.parent !== window) {
-      window.addEventListener('message', receive);
-      window.parent.postMessage({
-        type: 'READY'
-      }, window.location.origin);
-    }
-
-    return function () {
-      return window.removeEventListener('message', receive);
-    };
-
-    function receive(message) {
-      if (window.location.href.indexOf(message.origin) === 0) {
-        if (message.data.type === 'ACTION') {
-          dispatch(message.data.payload);
-        } else if (message.data.type === 'SCROLL_TO_SECTION') {
-          setScrollTargetSectionIndex(message.data.payload.index);
-        } else if (message.data.type === 'SELECT') {
-          select(message.data.payload);
-        }
-      }
-    }
-  }, [dispatch, select]);
-
-  function scrollToSection(index) {
-    if (index === 'next') {
-      index = currentSectionIndex + 1;
-    }
-
-    setScrollTargetSectionIndex(index);
-  }
-
-  return React.createElement("div", {
-    className: entryStyles.Entry
-  }, React.createElement(MutedContext.Provider, {
-    value: {
-      muted: muted,
-      setMuted: setMuted
-    }
-  }, React.createElement(ScrollToSectionContext.Provider, {
-    value: scrollToSection
-  }, renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex))));
-}
-
-function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
-  return entryStructure.map(function (chapter, index) {
-    return React.createElement(Chapter, {
-      key: index,
-      permaId: chapter.permaId,
-      sections: chapter.sections,
-      currentSectionIndex: currentSectionIndex,
-      setCurrentSectionIndex: setCurrentSectionIndex,
-      scrollTargetSectionIndex: scrollTargetSectionIndex,
-      setScrollTargetSectionIndex: setScrollTargetSectionIndex
-    });
-  });
-}
-
-var css$H = "body {\n  margin: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
-styleInject(css$H);
-
-var css$I = ".Text-module_h2__34chJ {\n  font-size: 66px;\n  font-weight: 700;\n}\n\n.Text-module_h1__2_5kX {\n  font-size: 110px;\n  line-height: 1;\n}\n\n.Text-module_body__4oWD- {\n  font-size: 22px;\n  line-height: 1.4;\n}\n\n.Text-module_caption__3_6Au {\n  font-size: 20px;\n  line-height: 1.4;\n}\n\n@media (max-width: 600px) {\n  .Text-module_h2__34chJ {\n    font-size: 40px;\n  }\n\n  .Text-module_h1__2_5kX {\n    font-size: 66px;\n  }\n}\n";
-var styles$p = {"text-s":"20px","text-base":"22px","text-l":"40px","text-xl":"66px","text-2xl":"110px","h2":"Text-module_h2__34chJ","h1":"Text-module_h1__2_5kX","body":"Text-module_body__4oWD-","caption":"Text-module_caption__3_6Au"};
-styleInject(css$I);
-
-/**
- * Render some text using the default typography scale.
- *
- * @param {Object} props
- * @param {string} props.scaleCategory - One of the styles `'h1'`, `'h2'`, `'body'`, `'caption'`.
- * @param {string} [props.inline] - Render a span instread of a div.
- * @param {string} props.children - Nodes to render with specified typography.
- */
-
-function Text(_ref) {
-  var inline = _ref.inline,
-      scaleCategory = _ref.scaleCategory,
-      children = _ref.children;
-  return React.createElement(inline ? 'span' : 'div', {
-    className: styles$p[scaleCategory]
-  }, children);
-}
-
-var css$J = ".InlineCaption-module_root__1R8Ib {\n  padding: 3px 10px 5px;\n  background-color: #fff;\n  color: #222;\n  text-shadow: none;\n}\n";
-var styles$q = {"root":"InlineCaption-module_root__1R8Ib"};
-styleInject(css$J);
-
-/**
- * Render a caption text attached to a content element.
- *
- * @param {Object} props
- * @param {string} props.text - The text to be displayed.
- */
-
-function InlineCaption(_ref) {
-  var text = _ref.text;
-
-  if (text) {
-    return React.createElement("div", {
-      className: styles$q.root,
-      role: "caption"
-    }, React.createElement(Text, {
-      scaleCategory: "caption"
-    }, text));
-  } else {
-    return null;
-  }
-}
-
-/**
- * Read and change media settings of the entry.
- *
- * @example
- * const mediaSettings = useMediaSettings();
- * mediaSettings // =>
- *   {
- *      muted: true,            // All media elements should be played without sound.
- *      setMuted: muted => {},  // Enable sound for all media elements.
- *      mediaOff: false         // Playing media is not allowed. Will be true when
- *                              // rendering section thumbnails in the editor.
- *   }
- */
-
-function useMediaSettings() {
-  return useContext(MutedContext);
-}
-
-var css$K = ".SectionThumbnail-module_crop__Q1nZj {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.SectionThumbnail-module_scale__2tKDG {\n  transform: scale(0.2);\n  transform-origin: 0 0;\n  width: 500%;\n}\n";
-var styles$r = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
-styleInject(css$K);
-
-function SectionThumbnail(_ref) {
-  var seed = _ref.seed,
-      props = _objectWithoutProperties(_ref, ["seed"]);
-
-  return React.createElement(EntryStateProvider, {
-    seed: seed
-  }, React.createElement(Inner, props));
-}
-
-function Inner(_ref2) {
-  var sectionPermaId = _ref2.sectionPermaId,
-      subscribe = _ref2.subscribe;
-  var dispatch = useEntryStateDispatch();
-  useEffect(function () {
-    return subscribe(dispatch);
-  }, [subscribe, dispatch]);
-  var section = useSectionStructure({
-    sectionPermaId: sectionPermaId
-  });
-
-  if (section) {
-    return React.createElement("div", {
-      className: styles$r.crop
-    }, React.createElement("div", {
-      className: styles$r.scale
-    }, React.createElement("div", {
-      className: entryStyles.Entry
-    }, React.createElement(Section, Object.assign({
-      state: "active"
-    }, section, {
-      transition: "preview"
-    })))));
-  } else {
-    return React.createElement("div", {
-      className: styles$r.root
-    }, "Not found.");
-  }
-}
-
-Inner.defaultProps = {
-  subscribe: function subscribe() {}
-};
-
-var editMode = window.location.pathname.indexOf('/editor/entries') === 0;
-
-window.pageflowScrolledRender = function (seed) {
-  setupI18n(seed.i18n);
-  ReactDOM.render(React.createElement(Root, {
-    seed: seed
-  }), document.getElementById('root'));
-};
-
-function Root(_ref) {
-  var seed = _ref.seed;
-  return React.createElement(React.Fragment, null, React.createElement(EditorStateProvider, {
-    active: editMode
-  }, React.createElement(EntryStateProvider, {
-    seed: seed
-  }, React.createElement(AppHeader, null), React.createElement(Entry, null))));
-}
-
-export { Entry, EntryStateProvider, Image, InlineCaption, SectionThumbnail, Text, Video, api as frontend, setupI18n, useEditorSelection, useFile, useI18n, useMediaSettings, useOnScreen };