pageflow 15.1.2 → 15.4.0

data/entry_types/scrolled/package/frontend-server.js

@@ -0,0 +1,228 @@
+import 'core-js/modules/es.symbol';
+import 'core-js/modules/es.symbol.description';
+import 'core-js/modules/es.symbol.async-iterator';
+import 'core-js/modules/es.symbol.has-instance';
+import 'core-js/modules/es.symbol.is-concat-spreadable';
+import 'core-js/modules/es.symbol.iterator';
+import 'core-js/modules/es.symbol.match';
+import 'core-js/modules/es.symbol.replace';
+import 'core-js/modules/es.symbol.search';
+import 'core-js/modules/es.symbol.species';
+import 'core-js/modules/es.symbol.split';
+import 'core-js/modules/es.symbol.to-primitive';
+import 'core-js/modules/es.symbol.to-string-tag';
+import 'core-js/modules/es.symbol.unscopables';
+import 'core-js/modules/es.array.concat';
+import 'core-js/modules/es.array.copy-within';
+import 'core-js/modules/es.array.every';
+import 'core-js/modules/es.array.fill';
+import 'core-js/modules/es.array.filter';
+import 'core-js/modules/es.array.find';
+import 'core-js/modules/es.array.find-index';
+import 'core-js/modules/es.array.flat';
+import 'core-js/modules/es.array.flat-map';
+import 'core-js/modules/es.array.for-each';
+import 'core-js/modules/es.array.from';
+import 'core-js/modules/es.array.includes';
+import 'core-js/modules/es.array.index-of';
+import 'core-js/modules/es.array.is-array';
+import 'core-js/modules/es.array.iterator';
+import 'core-js/modules/es.array.join';
+import 'core-js/modules/es.array.last-index-of';
+import 'core-js/modules/es.array.map';
+import 'core-js/modules/es.array.of';
+import 'core-js/modules/es.array.reduce';
+import 'core-js/modules/es.array.reduce-right';
+import 'core-js/modules/es.array.reverse';
+import 'core-js/modules/es.array.slice';
+import 'core-js/modules/es.array.some';
+import 'core-js/modules/es.array.sort';
+import 'core-js/modules/es.array.species';
+import 'core-js/modules/es.array.splice';
+import 'core-js/modules/es.array.unscopables.flat';
+import 'core-js/modules/es.array.unscopables.flat-map';
+import 'core-js/modules/es.array-buffer.constructor';
+import 'core-js/modules/es.array-buffer.is-view';
+import 'core-js/modules/es.array-buffer.slice';
+import 'core-js/modules/es.data-view';
+import 'core-js/modules/es.date.now';
+import 'core-js/modules/es.date.to-iso-string';
+import 'core-js/modules/es.date.to-json';
+import 'core-js/modules/es.date.to-primitive';
+import 'core-js/modules/es.date.to-string';
+import 'core-js/modules/es.function.bind';
+import 'core-js/modules/es.function.has-instance';
+import 'core-js/modules/es.function.name';
+import 'core-js/modules/es.json.to-string-tag';
+import 'core-js/modules/es.map';
+import 'core-js/modules/es.math.acosh';
+import 'core-js/modules/es.math.asinh';
+import 'core-js/modules/es.math.atanh';
+import 'core-js/modules/es.math.cbrt';
+import 'core-js/modules/es.math.clz32';
+import 'core-js/modules/es.math.cosh';
+import 'core-js/modules/es.math.expm1';
+import 'core-js/modules/es.math.fround';
+import 'core-js/modules/es.math.hypot';
+import 'core-js/modules/es.math.imul';
+import 'core-js/modules/es.math.log10';
+import 'core-js/modules/es.math.log1p';
+import 'core-js/modules/es.math.log2';
+import 'core-js/modules/es.math.sign';
+import 'core-js/modules/es.math.sinh';
+import 'core-js/modules/es.math.tanh';
+import 'core-js/modules/es.math.to-string-tag';
+import 'core-js/modules/es.math.trunc';
+import 'core-js/modules/es.number.constructor';
+import 'core-js/modules/es.number.epsilon';
+import 'core-js/modules/es.number.is-finite';
+import 'core-js/modules/es.number.is-integer';
+import 'core-js/modules/es.number.is-nan';
+import 'core-js/modules/es.number.is-safe-integer';
+import 'core-js/modules/es.number.max-safe-integer';
+import 'core-js/modules/es.number.min-safe-integer';
+import 'core-js/modules/es.number.parse-float';
+import 'core-js/modules/es.number.parse-int';
+import 'core-js/modules/es.number.to-fixed';
+import 'core-js/modules/es.number.to-precision';
+import 'core-js/modules/es.object.assign';
+import 'core-js/modules/es.object.create';
+import 'core-js/modules/es.object.define-getter';
+import 'core-js/modules/es.object.define-properties';
+import 'core-js/modules/es.object.define-property';
+import 'core-js/modules/es.object.define-setter';
+import 'core-js/modules/es.object.entries';
+import 'core-js/modules/es.object.freeze';
+import 'core-js/modules/es.object.from-entries';
+import 'core-js/modules/es.object.get-own-property-descriptor';
+import 'core-js/modules/es.object.get-own-property-descriptors';
+import 'core-js/modules/es.object.get-own-property-names';
+import 'core-js/modules/es.object.get-prototype-of';
+import 'core-js/modules/es.object.is';
+import 'core-js/modules/es.object.is-extensible';
+import 'core-js/modules/es.object.is-frozen';
+import 'core-js/modules/es.object.is-sealed';
+import 'core-js/modules/es.object.keys';
+import 'core-js/modules/es.object.lookup-getter';
+import 'core-js/modules/es.object.lookup-setter';
+import 'core-js/modules/es.object.prevent-extensions';
+import 'core-js/modules/es.object.seal';
+import 'core-js/modules/es.object.set-prototype-of';
+import 'core-js/modules/es.object.to-string';
+import 'core-js/modules/es.object.values';
+import 'core-js/modules/es.parse-float';
+import 'core-js/modules/es.parse-int';
+import 'core-js/modules/es.promise';
+import 'core-js/modules/es.promise.finally';
+import 'core-js/modules/es.reflect.apply';
+import 'core-js/modules/es.reflect.construct';
+import 'core-js/modules/es.reflect.define-property';
+import 'core-js/modules/es.reflect.delete-property';
+import 'core-js/modules/es.reflect.get';
+import 'core-js/modules/es.reflect.get-own-property-descriptor';
+import 'core-js/modules/es.reflect.get-prototype-of';
+import 'core-js/modules/es.reflect.has';
+import 'core-js/modules/es.reflect.is-extensible';
+import 'core-js/modules/es.reflect.own-keys';
+import 'core-js/modules/es.reflect.prevent-extensions';
+import 'core-js/modules/es.reflect.set';
+import 'core-js/modules/es.reflect.set-prototype-of';
+import 'core-js/modules/es.regexp.constructor';
+import 'core-js/modules/es.regexp.exec';
+import 'core-js/modules/es.regexp.flags';
+import 'core-js/modules/es.regexp.to-string';
+import 'core-js/modules/es.set';
+import 'core-js/modules/es.string.code-point-at';
+import 'core-js/modules/es.string.ends-with';
+import 'core-js/modules/es.string.from-code-point';
+import 'core-js/modules/es.string.includes';
+import 'core-js/modules/es.string.iterator';
+import 'core-js/modules/es.string.match';
+import 'core-js/modules/es.string.pad-end';
+import 'core-js/modules/es.string.pad-start';
+import 'core-js/modules/es.string.raw';
+import 'core-js/modules/es.string.repeat';
+import 'core-js/modules/es.string.replace';
+import 'core-js/modules/es.string.search';
+import 'core-js/modules/es.string.split';
+import 'core-js/modules/es.string.starts-with';
+import 'core-js/modules/es.string.trim';
+import 'core-js/modules/es.string.trim-end';
+import 'core-js/modules/es.string.trim-start';
+import 'core-js/modules/es.string.anchor';
+import 'core-js/modules/es.string.big';
+import 'core-js/modules/es.string.blink';
+import 'core-js/modules/es.string.bold';
+import 'core-js/modules/es.string.fixed';
+import 'core-js/modules/es.string.fontcolor';
+import 'core-js/modules/es.string.fontsize';
+import 'core-js/modules/es.string.italics';
+import 'core-js/modules/es.string.link';
+import 'core-js/modules/es.string.small';
+import 'core-js/modules/es.string.strike';
+import 'core-js/modules/es.string.sub';
+import 'core-js/modules/es.string.sup';
+import 'core-js/modules/es.typed-array.float32-array';
+import 'core-js/modules/es.typed-array.float64-array';
+import 'core-js/modules/es.typed-array.int8-array';
+import 'core-js/modules/es.typed-array.int16-array';
+import 'core-js/modules/es.typed-array.int32-array';
+import 'core-js/modules/es.typed-array.uint8-array';
+import 'core-js/modules/es.typed-array.uint8-clamped-array';
+import 'core-js/modules/es.typed-array.uint16-array';
+import 'core-js/modules/es.typed-array.uint32-array';
+import 'core-js/modules/es.typed-array.copy-within';
+import 'core-js/modules/es.typed-array.every';
+import 'core-js/modules/es.typed-array.fill';
+import 'core-js/modules/es.typed-array.filter';
+import 'core-js/modules/es.typed-array.find';
+import 'core-js/modules/es.typed-array.find-index';
+import 'core-js/modules/es.typed-array.for-each';
+import 'core-js/modules/es.typed-array.from';
+import 'core-js/modules/es.typed-array.includes';
+import 'core-js/modules/es.typed-array.index-of';
+import 'core-js/modules/es.typed-array.iterator';
+import 'core-js/modules/es.typed-array.join';
+import 'core-js/modules/es.typed-array.last-index-of';
+import 'core-js/modules/es.typed-array.map';
+import 'core-js/modules/es.typed-array.of';
+import 'core-js/modules/es.typed-array.reduce';
+import 'core-js/modules/es.typed-array.reduce-right';
+import 'core-js/modules/es.typed-array.reverse';
+import 'core-js/modules/es.typed-array.set';
+import 'core-js/modules/es.typed-array.slice';
+import 'core-js/modules/es.typed-array.some';
+import 'core-js/modules/es.typed-array.sort';
+import 'core-js/modules/es.typed-array.subarray';
+import 'core-js/modules/es.typed-array.to-locale-string';
+import 'core-js/modules/es.typed-array.to-string';
+import 'core-js/modules/es.weak-map';
+import 'core-js/modules/es.weak-set';
+import 'core-js/modules/web.dom-collections.for-each';
+import 'core-js/modules/web.dom-collections.iterator';
+import 'core-js/modules/web.immediate';
+import 'core-js/modules/web.queue-microtask';
+import 'core-js/modules/web.timers';
+import 'core-js/modules/web.url';
+import 'core-js/modules/web.url.to-json';
+import 'core-js/modules/web.url-search-params';
+import React from 'react';
+import ReactRailsUJS from 'react_ujs';
+import { setupI18n, Root } from 'pageflow-scrolled/frontend';
+
+ReactRailsUJS.getConstructor = function () {
+  // Normally this function receives the name of a component, but we
+  // only need to render one type of component.
+  return ServerRenderedRoot;
+};
+
+function ServerRenderedRoot(_ref) {
+  var seed = _ref.seed;
+  setupI18n(seed.i18n);
+  return (
+    /*#__PURE__*/
+    React.createElement(Root, {
+      seed: seed
+    })
+  );
+}

data/entry_types/scrolled/package/frontend/EditableText-43c50894.js

@@ -0,0 +1,2161 @@
+import React, { useReducer, useMemo, useCallback, createContext as createContext$1, useContext, useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { createSelectorCreator, defaultMemoize, createSelector } from 'reselect';
+import I18n from 'i18n-js';
+import slugify from 'slugify';
+import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.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 (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) 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 _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+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 _objectSpread2(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 PATCH = "".concat(PREFIX, "_PATCH");
+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 _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
+
+    case ADD:
+      return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: _objectSpread2(_objectSpread2({}, state[collectionName].items), {}, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
+      }));
+
+    case CHANGE:
+      return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
+        order: state[collectionName].order,
+        items: _objectSpread2(_objectSpread2({}, state[collectionName].items), {}, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
+      }));
+
+    case PATCH:
+      var key = action.payload.key;
+      return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
+        order: state[collectionName].order,
+        items: _objectSpread2(_objectSpread2({}, state[collectionName].items), {}, _defineProperty({}, key, _objectSpread2(_objectSpread2({}, state[collectionName].items[key]), action.payload.attributes)))
+      }));
+
+    case REMOVE:
+      var clonedItems = _objectSpread2({}, state[collectionName].items);
+
+      delete clonedItems[action.payload.key];
+      return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: clonedItems
+      }));
+
+    case SORT:
+      return _objectSpread2(_objectSpread2({}, 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 updateConfiguration(_ref2) {
+  var dispatch = _ref2.dispatch,
+      name = _ref2.name,
+      key = _ref2.key,
+      configuration = _ref2.configuration;
+  dispatch({
+    type: PATCH,
+    payload: {
+      collectionName: name,
+      key: key,
+      attributes: {
+        configuration: configuration
+      }
+    }
+  });
+}
+function getItem(state, collectionName, key) {
+  if (state[collectionName]) {
+    return state[collectionName].items[key];
+  }
+}
+function createItemsSelector(collectionName, filter) {
+  if (filter) {
+    var itemsSelector = createItemsSelector(collectionName);
+    return createShallowEqualArraysSelector(function (collections) {
+      return itemsSelector(collections).filter(filter);
+    }, function (items) {
+      return items;
+    });
+  }
+
+  return createSelector(function (collections) {
+    return collections[collectionName];
+  }, function (collection) {
+    if (collection) {
+      var items = collection.items;
+      return collection.order.map(function (key) {
+        return items[key];
+      });
+    } else {
+      return [];
+    }
+  });
+}
+var createShallowEqualArraysSelector = createSelectorCreator(defaultMemoize, shallowEqualArrays);
+
+function shallowEqualArrays(a, b) {
+  return a.length === b.length && a.every(function (item, index) {
+    return item === b[index];
+  });
+}
+
+var Context = 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 (
+    /*#__PURE__*/
+    React.createElement(Context.Provider, {
+      value: value
+    }, children)
+  );
+}
+
+function useEntryState() {
+  var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (entryState) {
+    return entryState;
+  };
+  return useContextSelector(Context, function (value) {
+    return selector(value.entryState);
+  });
+}
+
+function useEntryStateDispatch() {
+  return useContextSelector(Context, function (value) {
+    return value.dispatch;
+  });
+}
+function useEntryStateConfig() {
+  return useEntryState(function (entryState) {
+    return entryState.config;
+  });
+}
+function useEntryStateCollectionItem(collectionName, key) {
+  return useEntryState(function (entryState) {
+    return getItem(entryState.collections, collectionName, key);
+  });
+}
+function useEntryStateCollectionItems(collectionName, filter) {
+  var itemsSelector = useMemo(function () {
+    return createItemsSelector(collectionName, filter);
+  }, [collectionName, filter]);
+  return useEntryState(function (entryState) {
+    return itemsSelector(entryState.collections);
+  });
+}
+
+/**
+ * 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 entries = useEntryStateCollectionItems('entries');
+  return useMemo(function () {
+    return entries[0];
+  }, [entries]);
+}
+
+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(options);
+ * 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(_ref) {
+  var isPhonePlatform = _ref.isPhonePlatform;
+  var config = useEntryStateConfig();
+  var entryMetadata = useEntryMetadata();
+  var shareProviders = entryMetadata ? entryMetadata.shareProviders : {};
+  var urlTemplates = config.shareUrlTemplates;
+  var sharing = {
+    email: {
+      icon: EmailIcon,
+      name: 'Mail',
+      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, isPhonePlatform).map(function (provider) {
+      var config = sharing[provider];
+      return {
+        name: config.name,
+        icon: config.icon,
+        url: config.url
+      };
+    });
+  }, [shareProviders, isPhonePlatform]);
+}
+
+function activeShareProviders(shareProvidersConfig, isPhonePlatform) {
+  var providers = filterShareProviders(shareProvidersConfig, isPhonePlatform);
+  return providers.filter(function (provider) {
+    return shareProvidersConfig[provider] !== false;
+  });
+}
+
+function filterShareProviders(shareProvidersConfig, isPhonePlatform) {
+  if (!isPhonePlatform) {
+    return Object.keys(shareProvidersConfig).filter(function (provider) {
+      return provider !== 'telegram' && provider !== 'whats_app';
+    });
+  }
+
+  return Object.keys(shareProvidersConfig);
+}
+/**
+ * Returns the share url of the entry.
+ *
+ * @example
+ *
+ * const shareUrl = useShareUrl();
+ * shareUrl // => "http://test.host/test"
+ */
+
+
+function useShareUrl() {
+  var entryMetadata = useEntryMetadata();
+  var config = useEntryStateConfig();
+
+  if (entryMetadata) {
+    return entryMetadata.shareUrl ? entryMetadata.shareUrl : config.prettyUrl;
+  } else {
+    return config.shareUrl;
+  }
+}
+
+/**
+ * Returns a nested data structure representing the chapters, sections
+ * and content elements of the entry.
+ *
+ * @private
+ *
+ * @example
+ *
+ * const structure = useEntryStructure();
+ * structure // =>
+ *   [
+ *     {
+ *       permaId: 5,
+ *       title: 'Chapter 1',
+ *       summary: 'An introductory chapter',
+ *       sections: [
+ *         {
+ *           id: 1,
+ *           permaId: 101,
+ *           chapterId: 3,
+ *           sectionIndex: 0,
+ *           transition: 'scroll',
+ *
+ *           // references to adjacent section objects
+ *           previousSection: { ... },
+ *           nextSection: { ... },
+ *         }
+ *       ],
+ *     }
+ *   ]
+ */
+
+function useEntryStructure() {
+  var chapters = useChapters();
+  var sections = useEntryStateCollectionItems('sections');
+  return useMemo(function () {
+    var linkedSections = sections.map(function (section) {
+      return sectionData(section);
+    });
+    linkedSections.forEach(function (section, index) {
+      section.sectionIndex = index;
+      section.previousSection = linkedSections[index - 1];
+      section.nextSection = linkedSections[index + 1];
+    });
+    return chapters.map(function (chapter) {
+      return _objectSpread2(_objectSpread2({}, chapter), {}, {
+        sections: linkedSections.filter(function (item) {
+          return item.chapterId === chapter.id;
+        })
+      });
+    });
+  }, [chapters, sections]);
+}
+/**
+ * Returns a nested data structure representing the content elements
+ * of section.
+ *
+ * @param {Object} options
+ * @param {number} options.sectionPermaId
+ *
+ * @private
+ *
+ * @example
+ *
+ * const section = useSection({sectionPermaId: 4});
+ * section // =>
+ *   {
+ *     id: 100,
+ *     permaId: 4,
+ *     chapterId: 1,
+ *     transition: 'scroll'
+ *   }
+ */
+
+function useSection(_ref) {
+  var sectionPermaId = _ref.sectionPermaId;
+  var section = useEntryStateCollectionItem('sections', sectionPermaId);
+  return sectionData(section);
+}
+
+function sectionData(section) {
+  return section && _objectSpread2({
+    permaId: section.permaId,
+    id: section.id,
+    chapterId: section.chapterId
+  }, section.configuration);
+}
+
+function useSectionContentElements(_ref2) {
+  var sectionId = _ref2.sectionId;
+  var filterBySectionId = useCallback(function (contentElement) {
+    return contentElement.sectionId === sectionId;
+  }, [sectionId]);
+  var contentElements = useEntryStateCollectionItems('contentElements', filterBySectionId);
+  return contentElements.map(function (item) {
+    return {
+      id: item.id,
+      permaId: item.permaId,
+      type: item.typeName,
+      position: item.configuration.position,
+      props: item.configuration
+    };
+  });
+}
+function useChapters() {
+  var chapters = useEntryStateCollectionItems('chapters');
+  var chapterSlugs = {};
+  return chapters.map(function (chapter) {
+    var chapterSlug = chapter.configuration.title;
+
+    if (chapterSlug) {
+      chapterSlug = slugify(chapterSlug, {
+        lower: true,
+        locale: 'de',
+        strict: true
+      });
+
+      if (chapterSlugs[chapterSlug]) {
+        chapterSlug = chapterSlug + '-' + chapter.permaId; //append permaId if chapter reference is not unique
+      }
+
+      chapterSlugs[chapterSlug] = chapter;
+    } else {
+      chapterSlug = 'chapter-' + chapter.permaId;
+    }
+
+    return {
+      id: chapter.id,
+      permaId: chapter.permaId,
+      title: chapter.configuration.title,
+      summary: chapter.configuration.summary,
+      chapterSlug: chapterSlug
+    };
+  });
+}
+
+function extendFile(collectionName, file, config) {
+  return addModelType(collectionName, expandUrls(collectionName, file, config.fileUrlTemplates), config.fileModelTypes);
+}
+
+function addModelType(collectionName, file, modelTypes) {
+  if (!file) {
+    return null;
+  }
+
+  if (!modelTypes[collectionName]) {
+    throw new Error("Could not find model type for collection name ".concat(collectionName));
+  }
+
+  return _objectSpread2(_objectSpread2({}, file), {}, {
+    modelType: modelTypes[collectionName]
+  });
+}
+
+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 _objectSpread2({
+    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 file = useEntryStateCollectionItem(collectionName, permaId);
+  return extendFile(collectionName, file, useEntryStateConfig());
+}
+
+function useNestedFiles(_ref) {
+  var collectionName = _ref.collectionName,
+      parent = _ref.parent;
+  var config = useEntryStateConfig();
+  var files = useEntryStateCollectionItems(collectionName, function (file) {
+    return parent && file.parentFileId === parent.id && file.parentFileModelType === parent.modelType;
+  });
+  return files.map(function (file) {
+    return extendFile(collectionName, file, config);
+  });
+}
+
+/**
+ * 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 config = useEntryStateConfig();
+  var imageFiles = useEntryStateCollectionItems('imageFiles');
+  var defaultFileRights = config.defaultFileRights;
+  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 config = useEntryStateConfig();
+  return 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 _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+var qualities = ['medium', 'fullhd', '4k'];
+function useAvailableQualities(file) {
+  if (!file) {
+    return [];
+  }
+
+  return ['auto'].concat(_toConsumableArray(qualities.filter(function (name) {
+    return file.variants.includes(name);
+  })));
+}
+
+/**
+ * Returns an object containing theme asset paths.
+ *
+ * @example
+ *
+ * const theme = useTheme();
+ * theme // =>
+ *   {
+ *     assets: {
+ *       logoDesktop: 'path/to/logoDesktop.svg',
+ *       logoMobile: 'path/to/logoMobile.svg'
+ *     },
+ *     options: {
+ *       // options passed to `themes.register` in `pageflow.rb` initializer
+ *       // with camleized keys.
+ *     }
+ *   }
+ */
+
+function useTheme() {
+  var config = useEntryStateConfig();
+  return config.theme;
+}
+
+function updateContentElementConfiguration(_ref) {
+  var dispatch = _ref.dispatch,
+      permaId = _ref.permaId,
+      configuration = _ref.configuration;
+  updateConfiguration({
+    dispatch: dispatch,
+    name: 'contentElements',
+    key: permaId,
+    configuration: configuration
+  });
+}
+
+var LocaleContext = createContext$1('en');
+function setupI18n(_ref) {
+  var defaultLocale = _ref.defaultLocale,
+      locale = _ref.locale,
+      translations = _ref.translations;
+  I18n.defaultLocale = defaultLocale;
+  I18n.locale = locale;
+  I18n.translations = translations;
+}
+function LocaleProvider(_ref2) {
+  var children = _ref2.children;
+
+  var _ref3 = useEntryMetadata() || {},
+      locale = _ref3.locale;
+
+  return (
+    /*#__PURE__*/
+    React.createElement(LocaleContext.Provider, {
+      value: locale
+    }, children)
+  );
+}
+function useLocale() {
+  return useContext(LocaleContext);
+}
+/**
+ * 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 _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      scope = _ref4.locale;
+
+  var locale = useLocale();
+  return {
+    t: function t(key, options) {
+      return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
+        locale: scope !== 'ui' && locale
+      }));
+    }
+  };
+}
+
+var PhonePlatformContext = React.createContext(false);
+
+function useOnScreen(ref) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      rootMargin = _ref.rootMargin,
+      onIntersecting = _ref.onIntersecting,
+      skipIframeFix = _ref.skipIframeFix;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIntersecting = _useState2[0],
+      setIntersecting = _useState2[1];
+
+  useEffect(function () {
+    var current = ref.current;
+    var observer = createIntersectionObserver(function (entries) {
+      // Even when observing only a single element, multiple entries
+      // may have queued up. In Chrome this can be observed when
+      // moving an observed element in the DOM: The callback is
+      // invoked once with two entries for the same target, one
+      // claiming the element no longer intersects and one - with a
+      // later timestamp - saying that is does intersect. Assuming
+      // entries are ordered according to time, we only consider the
+      // last entry.
+      var entry = entries[entries.length - 1];
+      setIntersecting(entry.isIntersecting);
+
+      if (entry.isIntersecting && onIntersecting) {
+        onIntersecting();
+      }
+    }, {
+      rootMargin: rootMargin
+    }, skipIframeFix);
+
+    if (ref.current) {
+      observer.observe(current);
+    }
+
+    return function () {
+      observer.unobserve(current);
+    };
+  }, [ref, rootMargin, onIntersecting, skipIframeFix]);
+  return isIntersecting;
+}
+
+function createIntersectionObserver(callback, options, skipIframeFix) {
+  if (skipIframeFix) {
+    return new IntersectionObserver(callback, options);
+  } // Positive root margins are ignored in iframes [1] (i.e. in
+  // the Pageflow editor). To make it work, the iframe document
+  // needs to be passed as `root` [2].
+  // This leads to a `TypeError`, though, in browers that do not
+  // support this yet (e.g. Chrome 80). We catch the error and
+  // skip passing the `root` option.
+  //
+  // [1] https://github.com/w3c/IntersectionObserver/issues/283
+  // [2] https://github.com/w3c/IntersectionObserver/issues/372
+
+
+  try {
+    var optionsWithIframeFix = options;
+
+    if (options.rootMargin && window.parent !== window) {
+      optionsWithIframeFix = _objectSpread2(_objectSpread2({}, options), {}, {
+        root: window.document
+      });
+    }
+
+    return new IntersectionObserver(callback, optionsWithIframeFix);
+  } catch (e) {
+    // Normally we would check for TypeError here. Since the polyfill
+    // throws a generic error, we retry either way and trust that the
+    // error will happen again if it is not related to the `root`
+    // option.
+    return createIntersectionObserver(callback, options, true);
+  }
+}
+
+var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
+
+var StaticPreviewContext = createContext$1(false);
+function StaticPreview(_ref) {
+  var children = _ref.children;
+  return (
+    /*#__PURE__*/
+    React.createElement(StaticPreviewContext.Provider, {
+      value: true
+    }, children)
+  );
+}
+/**
+ * Use inside a content element component to determine whether the
+ * component is being rendered in a static preview, e.g. editor
+ * thumbnails.
+ *
+ * @example
+ * const isStaticPreview = useIsStaticPreview();
+ */
+
+function useIsStaticPreview() {
+  return useContext(StaticPreviewContext);
+}
+function createScrollPositionLifecycleProvider(Context) {
+  return function ScrollPositionLifecycleProvider(_ref2) {
+    var children = _ref2.children,
+        onActivate = _ref2.onActivate;
+    var ref = useRef();
+    var isActiveProbeRef = useRef();
+    var isStaticPreview = useContext(StaticPreviewContext);
+    var shouldLoad = useOnScreen(ref, {
+      rootMargin: '200% 0px 200% 0px'
+    });
+    var shouldPrepare = useOnScreen(ref, {
+      rootMargin: '25% 0px 25% 0px'
+    }) && !isStaticPreview;
+    var isVisible = useOnScreen(ref) && !isStaticPreview;
+    var isActive = useOnScreen(isActiveProbeRef, {
+      rootMargin: '-50% 0px -50% 0px',
+      onIntersecting: onActivate
+    }) && !isStaticPreview;
+    var value = useMemo(function () {
+      return {
+        shouldLoad: shouldLoad,
+        shouldPrepare: shouldPrepare,
+        isVisible: isVisible,
+        isActive: isActive
+      };
+    }, [shouldLoad, shouldPrepare, isVisible, isActive]);
+    return (
+      /*#__PURE__*/
+      React.createElement("div", {
+        ref: ref,
+        className: classNames(styles.wrapper)
+      },
+      /*#__PURE__*/
+      React.createElement("div", {
+        ref: isActiveProbeRef,
+        className: styles.isActiveProbe
+      }),
+      /*#__PURE__*/
+      React.createElement(Context.Provider, {
+        value: value
+      }, children))
+    );
+  };
+}
+function createScrollPositionLifecycleHook(Context) {
+  return function useScrollPositionLifecycle() {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        onActivate = _ref3.onActivate,
+        onDeactivate = _ref3.onDeactivate,
+        onVisible = _ref3.onVisible,
+        onInvisible = _ref3.onInvisible;
+
+    var result = useContext(Context);
+    var wasActive = useRef();
+    var wasVisible = useRef();
+
+    var _ref4 = result || {},
+        isActive = _ref4.isActive,
+        isVisible = _ref4.isVisible;
+
+    useEffect(function () {
+      if (!wasVisible.current && isVisible && onVisible) {
+        onVisible();
+      }
+
+      if (!wasActive.current && isActive && onActivate) {
+        onActivate();
+      } else if (wasActive.current && !isActive && onDeactivate) {
+        onDeactivate();
+      }
+
+      if (wasVisible.current && !isVisible && onInvisible) {
+        onInvisible();
+      }
+
+      wasActive.current = isActive;
+      wasVisible.current = isVisible;
+    });
+    return result;
+  };
+}
+
+var styles$1 = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
+
+var VisibilityContext = React.createContext(false);
+function MotifAreaVisibilityProvider(_ref) {
+  var visible = _ref.visible,
+      children = _ref.children;
+  return (
+    /*#__PURE__*/
+    React.createElement(VisibilityContext.Provider, {
+      value: visible
+    }, children)
+  );
+}
+var MotifArea = function MotifArea(props) {
+  var _props$file;
+
+  var lastPosition = useRef();
+  var position = ((_props$file = props.file) === null || _props$file === void 0 ? void 0 : _props$file.isReady) && getPosition(props);
+  var visible = useContext(VisibilityContext);
+  var elementRef = useRef();
+  var onUpdate = props.onUpdate;
+  var setElementRef = useCallback(function (element) {
+    elementRef.current = element;
+    onUpdate(element);
+  }, [elementRef, onUpdate]);
+  useEffect(function () {
+    if (lastPosition.current && position && (lastPosition.current.top !== position.top || lastPosition.current.left !== position.left || lastPosition.current.width !== position.width || lastPosition.current.height !== position.height)) {
+      onUpdate(elementRef.current);
+    }
+
+    lastPosition.current = position;
+  });
+
+  if (!position) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: setElementRef,
+      className: classNames(styles$1.root, _defineProperty({}, styles$1.visible, visible)),
+      style: position,
+      onMouseEnter: props.onMouseEnter,
+      onMouseLeave: props.onMouseLeave
+    })
+  );
+};
+MotifArea.defaultProps = {
+  onUpdate: function onUpdate() {}
+};
+
+function getPosition(props) {
+  return props.file.motifAreaOffsetRect || {
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  };
+}
+
+function useMediaQuery(query) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      doesMatch = _useState2[0],
+      onSetDoesMatch = _useState2[1];
+
+  useEffect(function () {
+    var onUpdateMatch = function onUpdateMatch(_ref) {
+      var matches = _ref.matches;
+      onSetDoesMatch(matches);
+    };
+
+    var matcher = window.matchMedia(query);
+    var isModern = 'addEventListener' in matcher;
+
+    if (isModern) {
+      matcher.addEventListener('change', onUpdateMatch);
+    } else {
+      matcher.addListener(onUpdateMatch);
+    }
+
+    onUpdateMatch(matcher);
+    return function () {
+      if (isModern) {
+        matcher.removeEventListener('change', onUpdateMatch);
+      } else {
+        matcher.removeListener(onUpdateMatch);
+      }
+    };
+  }, [query, onSetDoesMatch]);
+  return doesMatch;
+}
+
+var styles$2 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","inFirstSection":"Foreground-module_inFirstSection__1r-_i","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
+
+var ForcePaddingContext = createContext$1(false);
+function Foreground(props) {
+  var forcePadding = useContext(ForcePaddingContext);
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: className(props, forcePadding),
+      style: {
+        minHeight: props.minHeight
+      }
+    }, props.children)
+  );
+}
+
+function className(props, forcePadding) {
+  return classNames(styles$2.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$2.paddingBottom, props.paddingBottom || forcePadding), _defineProperty({}, styles$2.inFirstSection, props.inFirstSection), styles$2["".concat(props.heightMode, "Height")]);
+}
+
+/**
+ * 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
+   * @param {boolean} [options.supportsWrappingAroundFloats] -
+   *   In sections with centered layout, content elements can be
+   *   floated to the left or right. By default all content
+   *   elements are cleared to position them below floating
+   *   elements. If a content element renders mainly text that
+   *   can wrap around floating elements, clearing can be
+   *   disabled via this option.
+   * @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) {
+      return this.types[typeName] && this.types[typeName].component;
+    }
+  }, {
+    key: "getOptions",
+    value: function getOptions(typeName) {
+      return this.types[typeName];
+    }
+  }]);
+
+  return ContentElementTypeRegistry;
+}();
+
+var api = {
+  contentElementTypes: new ContentElementTypeRegistry()
+};
+
+// For reasons that are beyond me, Storybook's Webpack build fails
+// with a "JavaScript heap out of memory" error if this import
+// expression lives in inlineEditing/index.js directly. I originally
+// intended to hide the import from Webpack by using
+// file-replace-loader in Storybook's Webpack config to replace this
+// file with an empty one, but found out that extracting the import
+// to a separate file apparently is enough.
+function importComponents() {
+  return import('./components-3ead1b4a.js');
+}
+
+var components = {};
+function loadInlineEditingComponents() {
+  return importComponents().then(function (importedComponents) {
+    components = importedComponents;
+  });
+}
+function withInlineEditingDecorator(name, Component) {
+  return function InlineEditingDecorator(props) {
+    var Decorator = components[name];
+
+    if (Decorator) {
+      return (
+        /*#__PURE__*/
+        React.createElement(Decorator, props,
+        /*#__PURE__*/
+        React.createElement(Component, props))
+      );
+    } else {
+      return (
+        /*#__PURE__*/
+        React.createElement(Component, props)
+      );
+    }
+  };
+}
+function withInlineEditingAlternative(name, Component) {
+  return function InlineEditingDecorator(props) {
+    var Alternative = components[name];
+
+    if (Alternative) {
+      return (
+        /*#__PURE__*/
+        React.createElement(Alternative, props)
+      );
+    } else {
+      return (
+        /*#__PURE__*/
+        React.createElement(Component, props)
+      );
+    }
+  };
+}
+
+var ContentElementAttributesContext = createContext$1({});
+function ContentElementAttributesProvider(_ref) {
+  var id = _ref.id,
+      children = _ref.children;
+  var attributes = useMemo(function () {
+    return {
+      contentElementId: id
+    };
+  }, [id]);
+  return (
+    /*#__PURE__*/
+    React.createElement(ContentElementAttributesContext.Provider, {
+      value: attributes
+    }, children)
+  );
+}
+function useContentElementAttributes() {
+  return useContext(ContentElementAttributesContext);
+}
+
+var ContentElementLifecycleContext = createContext$1();
+var LifecycleProvider = createScrollPositionLifecycleProvider(ContentElementLifecycleContext);
+var useLifecycle = createScrollPositionLifecycleHook(ContentElementLifecycleContext);
+function ContentElementLifecycleProvider(_ref) {
+  var type = _ref.type,
+      children = _ref.children;
+
+  var _api$contentElementTy = api.contentElementTypes.getOptions(type),
+      lifecycle = _api$contentElementTy.lifecycle;
+
+  if (lifecycle) {
+    return (
+      /*#__PURE__*/
+      React.createElement(LifecycleProvider, null, children)
+    );
+  } else {
+    return children;
+  }
+}
+/**
+ * Returns an object containing information about the scroll position
+ * related lifecylce of the content element. Requires the `lifecycle`
+ * option to be set to true in the `frontend.contentElements.register`
+ * call for the content element's type.
+ *
+ * * `shouldLoad` is true if the content element should start lazy
+ *   load. Becomes true before `shouldPrepare`.
+ *
+ * * `shouldPrepare` is true if the content element is about to enter
+ *   the viewport.
+ *
+ * * `isActive` is true if the content element is completely in the
+ *   viewport.
+ *
+ * @param {Function} onActivate -
+ *   Invoked when content element has entered the viewport.
+ *
+ * @param {Function} onDeactivate -
+ *   Invoked when content element has left the viewport.
+ *
+ * @example
+ *
+ * const {isActive, shouldPrepare} = useContentElementLifecycle();
+ */
+
+function useContentElementLifecycle(options) {
+  var result = useLifecycle(options);
+
+  if (!result) {
+    throw new Error('useContentElementLifecycle is only available in ' + 'content elements for which `lifecycle: true` has ' + 'been passed to frontend.contentElements.register');
+  }
+
+  return result;
+}
+
+var styles$3 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
+
+function ContentElementMargin(_ref) {
+  var position = _ref.position,
+      children = _ref.children;
+
+  if (position === 'full') {
+    return children;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$3.wrapper
+    }, children)
+  );
+}
+
+var styles$4 = {"missing":"ContentElement-module_missing__2_1j9"};
+
+function _createSuper(Derived) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  return function () {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (isNativeReflectConstruct()) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+var ContentElementErrorBoundary =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(ContentElementErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ContentElementErrorBoundary);
+
+  function ContentElementErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, ContentElementErrorBoundary);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  _createClass(ContentElementErrorBoundary, [{
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return (
+          /*#__PURE__*/
+          React.createElement("div", {
+            className: styles$4.missing
+          }, "Error rendering element of type \"", this.props.type, "\"")
+        );
+      }
+
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+
+  return ContentElementErrorBoundary;
+}(React.Component);
+
+var ContentElement = withInlineEditingDecorator('ContentElementDecorator', function ContentElement(props) {
+  var Component = api.contentElementTypes.getComponent(props.type);
+
+  if (Component) {
+    return (
+      /*#__PURE__*/
+      React.createElement(ContentElementAttributesProvider, {
+        id: props.id
+      },
+      /*#__PURE__*/
+      React.createElement(ContentElementLifecycleProvider, {
+        type: props.type
+      },
+      /*#__PURE__*/
+      React.createElement(ContentElementMargin, {
+        position: props.itemProps.position
+      },
+      /*#__PURE__*/
+      React.createElement(ContentElementErrorBoundary, {
+        type: props.type
+      },
+      /*#__PURE__*/
+      React.createElement(Component, {
+        sectionProps: props.sectionProps,
+        configuration: props.itemProps,
+        contentElementId: props.id
+      })))))
+    );
+  } else {
+    return (
+      /*#__PURE__*/
+      React.createElement("div", {
+        className: styles$4.missing
+      }, "Element of unknown type \"", props.type, "\"")
+    );
+  }
+});
+ContentElement.defaultProps = {
+  itemProps: {}
+};
+
+function ContentElements(props) {
+  return (
+    /*#__PURE__*/
+    React.createElement(React.Fragment, null, props.items.map(function (item, index) {
+      return props.children(item,
+      /*#__PURE__*/
+      React.createElement(MemoizedContentElement, {
+        key: item.id,
+        id: item.id,
+        permaId: item.permaId,
+        type: item.type,
+        first: index === 0,
+        position: item.position,
+        itemProps: item.props,
+        sectionProps: props.sectionProps
+      }), index);
+    }))
+  );
+}
+var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
+  return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.itemProps === nextProps.itemProps && prevProps.sectionProps === nextProps.sectionProps;
+});
+ContentElements.defaultProps = {
+  children: function children(item, child) {
+    return child;
+  }
+};
+
+function useNarrowViewport() {
+  return useMediaQuery('(max-width: 950px)');
+}
+
+var styles$5 = {"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","narrow":"TwoColumn-module_narrow__qAgnL","wide":"TwoColumn-module_wide__xdF_t"};
+
+function availablePositions(narrow) {
+  if (narrow) {
+    return ['inline', 'full'];
+  } else {
+    return ['inline', 'sticky', 'full'];
+  }
+}
+
+function TwoColumn(props) {
+  var narrow = useNarrowViewport();
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$5.root, styles$5[props.align], narrow ? styles$5.narrow : styles$5.wide)
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$5.group),
+      key: props.align
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.inline,
+      ref: props.contentAreaRef
+    })), renderItems(props, narrow), renderPlaceholder(props.placeholder))
+  );
+}
+TwoColumn.defaultProps = {
+  align: 'left'
+};
+
+function renderItems(props, narrow) {
+  return groupItemsByPosition(props.items, availablePositions(narrow)).map(function (group, index) {
+    return (
+      /*#__PURE__*/
+      React.createElement("div", {
+        key: index,
+        className: classNames(styles$5.group, styles$5["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 (
+      /*#__PURE__*/
+      React.createElement("div", {
+        className: styles$5[position]
+      }, props.children(
+      /*#__PURE__*/
+      React.createElement(ContentElements, {
+        sectionProps: props.sectionProps,
+        items: group[position]
+      }), {
+        position: position,
+        openStart: position === 'inline' && group.openStart,
+        openEnd: position === 'inline' && group.openEnd
+      }))
+    );
+  }
+}
+
+function groupItemsByPosition(items, availablePositions) {
+  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);
+  groups.forEach(function (group, index) {
+    var previous = groups[index - 1];
+    var next = groups[index + 1];
+    group.openStart = previous && !previous.full.length;
+    group.openEnd = next && next.inline.length > 0;
+  });
+  return groups;
+}
+
+function renderPlaceholder(placeholder) {
+  if (!placeholder) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$5.group)
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.inline
+    }, placeholder))
+  );
+}
+
+var styles$6 = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","clear":"Center-module_clear__jJEap","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
+
+function Center(props) {
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$6.root)
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: props.contentAreaRef
+    }),
+    /*#__PURE__*/
+    React.createElement(ContentElements, {
+      sectionProps: props.sectionProps,
+      items: props.items
+    }, function (item, child, index) {
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          key: item.id,
+          className: outerClassName(item)
+        },
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classNames(styles$6.item, styles$6["item-".concat(item.position)])
+        }, props.children(
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: styles$6["inner-".concat(item.position)]
+        }, child), boxProps(props.items, item, index))))
+      );
+    }), renderPlaceholder$1(props.placeholder))
+  );
+}
+
+function outerClassName(item) {
+  var _api$contentElementTy = api.contentElementTypes.getOptions(item.type),
+      supportsWrappingAroundFloats = _api$contentElementTy.supportsWrappingAroundFloats;
+
+  return classNames(styles$6.outer, styles$6["outer-".concat(item.position)], _defineProperty({}, styles$6.clear, !supportsWrappingAroundFloats));
+}
+
+function boxProps(items, item, index) {
+  var previous = items[index - 1];
+  var next = items[index + 1];
+  return {
+    position: item.position,
+    openStart: previous && item.position !== 'full' && previous.position !== 'full',
+    openEnd: next && item.position !== 'full' && next.position !== 'full'
+  };
+}
+
+function renderPlaceholder$1(placeholder) {
+  if (!placeholder) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$6.outer)
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$6.item)
+    }, placeholder))
+  );
+}
+
+var Layout = React.memo(withInlineEditingAlternative('LayoutWithPlaceholder', LayoutWithoutInlineEditing), function (prevProps, nextProps) {
+  return prevProps.sectionId === nextProps.sectionId && prevProps.items === nextProps.items && prevProps.appearance === nextProps.appearance && prevProps.contentAreaRef === nextProps.contentAreaRef && prevProps.sectionProps === nextProps.sectionProps;
+});
+function LayoutWithoutInlineEditing(props) {
+  if (props.sectionProps.layout === 'center') {
+    return (
+      /*#__PURE__*/
+      React.createElement(Center, props)
+    );
+  } else if (props.sectionProps.layout === 'right') {
+    return (
+      /*#__PURE__*/
+      React.createElement(TwoColumn, Object.assign({
+        align: "right"
+      }, props))
+    );
+  } else {
+    return (
+      /*#__PURE__*/
+      React.createElement(TwoColumn, props)
+    );
+  }
+}
+Layout.defaultProps = {
+  layout: 'left'
+};
+
+function usePostMessageListener(receiveData) {
+  useEffect(function () {
+    if (window.parent !== window) {
+      window.addEventListener('message', receive);
+    }
+
+    return function () {
+      return window.removeEventListener('message', receive);
+    };
+
+    function receive(message) {
+      if (window.location.href.indexOf(message.origin) === 0) {
+        receiveData(message.data);
+      }
+    }
+  }, [receiveData]);
+}
+
+var styles$7 = {"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"};
+
+/**
+ * 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$7[scaleCategory]
+  }, children);
+}
+
+var ContentElementConfigurationUpdateContext = React.createContext(function () {});
+function useContentElementConfigurationUpdate() {
+  return useContext(ContentElementConfigurationUpdateContext);
+}
+
+var ContentElementEditorCommandEmitterContext = createContext$1({
+  on: function on() {},
+  off: function off() {}
+});
+function useContentElementEditorCommandSubscription(callback) {
+  var _useContentElementAtt = useContentElementAttributes(),
+      contentElementId = _useContentElementAtt.contentElementId;
+
+  var emitter = useContext(ContentElementEditorCommandEmitterContext);
+  useEffect(function () {
+    emitter.on("command:".concat(contentElementId), callback);
+    return function () {
+      return emitter.off("command:".concat(contentElementId), callback);
+    };
+  }, [emitter, callback, contentElementId]);
+}
+
+var ContentElementEditorStateContext = createContext$1({
+  isSelected: false,
+  isEditable: false,
+  setTransientState: function setTransientState() {}
+});
+/**
+ * Use inside a content element component to determine whether the
+ * component is being rendered inside the editor iframe, and whether
+ * the content element is currently selected. This can be used to
+ * implement simple inline editing capabilities like displaying extra
+ * information when the content element is selected.
+ *
+ * @example
+ * const {isEditable, isSelected} = useContentElementEditorState();
+ */
+
+function useContentElementEditorState() {
+  return useContext(ContentElementEditorStateContext);
+}
+
+var EditableText = withInlineEditingAlternative('EditableText', function EditableText(_ref) {
+  var value = _ref.value;
+  return (
+    /*#__PURE__*/
+    React.createElement(Text, {
+      scaleCategory: "body"
+    }, render(value))
+  );
+});
+
+function render() {
+  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return children.map(function (element, index) {
+    if (element.type) {
+      return renderElement({
+        attributes: {
+          key: index
+        },
+        element: element,
+        children: render(element.children)
+      });
+    } else {
+      return renderLeaf({
+        attributes: {
+          key: index
+        },
+        leaf: element,
+        children: element.text.trim() === '' ? "\uFEFF" : element.text
+      });
+    }
+  });
+}
+
+function renderElement(_ref2) {
+  var attributes = _ref2.attributes,
+      children = _ref2.children,
+      element = _ref2.element;
+
+  switch (element.type) {
+    case 'block-quote':
+      return (
+        /*#__PURE__*/
+        React.createElement("blockquote", attributes, children)
+      );
+
+    case 'bulleted-list':
+      return (
+        /*#__PURE__*/
+        React.createElement("ul", attributes, children)
+      );
+
+    case 'numbered-list':
+      return (
+        /*#__PURE__*/
+        React.createElement("ol", attributes, children)
+      );
+
+    case 'list-item':
+      return (
+        /*#__PURE__*/
+        React.createElement("li", attributes, children)
+      );
+
+    case 'heading':
+      return (
+        /*#__PURE__*/
+        React.createElement("h2", attributes, children)
+      );
+
+    case 'link':
+      return (
+        /*#__PURE__*/
+        React.createElement("a", Object.assign({}, attributes, {
+          href: element.href
+        }), children)
+      );
+
+    default:
+      return (
+        /*#__PURE__*/
+        React.createElement("p", attributes, children)
+      );
+  }
+}
+function renderLeaf(_ref3) {
+  var attributes = _ref3.attributes,
+      children = _ref3.children,
+      leaf = _ref3.leaf;
+
+  if (leaf.bold) {
+    children =
+    /*#__PURE__*/
+    React.createElement("strong", null, children);
+  }
+
+  if (leaf.italic) {
+    children =
+    /*#__PURE__*/
+    React.createElement("em", null, children);
+  }
+
+  if (leaf.underline) {
+    children =
+    /*#__PURE__*/
+    React.createElement("u", null, children);
+  }
+
+  if (leaf.strikethrough) {
+    children =
+    /*#__PURE__*/
+    React.createElement("s", null, children);
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("span", attributes, children)
+  );
+}
+
+export { renderElement as $, useEntryStateDispatch as A, useSection as B, loadInlineEditingComponents as C, setupI18n as D, EntryStateProvider as E, Foreground as F, api as G, useContentElementConfigurationUpdate as H, useContentElementEditorCommandSubscription as I, useContentElementEditorState as J, useContentElementLifecycle as K, Layout as L, MotifArea as M, EditableText as N, useOnScreen as O, PhonePlatformContext as P, useLocale as Q, ContentElementEditorCommandEmitterContext as R, StaticPreview as S, Text as T, MotifAreaVisibilityProvider as U, ForcePaddingContext as V, updateContentElementConfiguration as W, ContentElementConfigurationUpdateContext as X, ContentElementEditorStateContext as Y, LayoutWithoutInlineEditing as Z, _slicedToArray as _, _defineProperty as a, renderLeaf as a0, _objectWithoutProperties as b, useFileRights as c, useLegalInfo as d, useCredits as e, useShareProviders as f, useShareUrl as g, useTheme as h, useChapters as i, createScrollPositionLifecycleProvider as j, createScrollPositionLifecycleHook as k, useEntryStructure as l, _objectSpread2 as m, useIsStaticPreview as n, useEntryMetadata as o, useNestedFiles as p, useFile as q, useMediaQuery as r, useSectionContentElements as s, usePostMessageListener as t, useI18n as u, withInlineEditingAlternative as v, withInlineEditingDecorator as w, LocaleProvider as x, _toConsumableArray as y, useAvailableQualities as z };