pageflow 15.4.0 → 15.5.0

data/entry_types/scrolled/package/editor.js

@@ -319,7 +319,8 @@ var Chapter = Backbone$1.Model.extend({
       parent: options.sections,
       parentModel: this,
       foreignKeyAttribute: 'chapterId',
-      parentReferenceAttribute: 'chapter'
+      parentReferenceAttribute: 'chapter',
+      autoConsolidatePositions: false
     });
     this.entry = options.entry;
   },
@@ -364,9 +365,9 @@ var SectionConfiguration = Configuration.extend({
   },
   initialize: function initialize() {
     Configuration.prototype.initialize.apply(this, arguments);
-    this.attributes = _objectSpread2(_objectSpread2({}, this.getBackdropAttributes()), this.attributes);
+    this.attributes = _objectSpread2(_objectSpread2({}, this.getAttributesFromBackdropAttribute()), this.attributes);
   },
-  getBackdropAttributes: function getBackdropAttributes() {
+  getAttributesFromBackdropAttribute: function getAttributesFromBackdropAttribute() {
     var backdrop = this.attributes.backdrop || {};
 
     if (backdrop.image && backdrop.image.toString().startsWith('#')) {
@@ -393,32 +394,34 @@ var SectionConfiguration = Configuration.extend({
     }
   },
   set: function set(name, value) {
-    Configuration.prototype.set.apply(this, arguments);
-
     if (name !== 'backdrop' && name.startsWith && name.startsWith('backdrop')) {
-      this.updateBackdropAttribute();
+      Configuration.prototype.set.call(this, _defineProperty({
+        backdrop: this.getBackdropAttribute(_objectSpread2(_objectSpread2({}, this.attributes), {}, _defineProperty({}, name, value)))
+      }, name, value));
+    } else {
+      Configuration.prototype.set.apply(this, arguments);
     }
   },
-  updateBackdropAttribute: function updateBackdropAttribute() {
-    switch (this.get('backdropType')) {
+  getBackdropAttribute: function getBackdropAttribute(nextAttributes) {
+    switch (nextAttributes.backdropType) {
       case 'color':
-        return this.set('backdrop', {
-          color: this.get('backdropColor')
-        });
+        return {
+          color: nextAttributes.backdropColor
+        };
 
       case 'video':
-        return this.set('backdrop', {
-          video: this.get('backdropVideo'),
-          videoMotifArea: this.get('backdropVideoMotifArea')
-        });
+        return {
+          video: nextAttributes.backdropVideo,
+          videoMotifArea: nextAttributes.backdropVideoMotifArea
+        };
 
       default:
-        return this.set('backdrop', {
-          image: this.get('backdropImage'),
-          imageMotifArea: this.get('backdropImageMotifArea'),
-          imageMobile: this.get('backdropImageMobile'),
-          imageMobileMotifArea: this.get('backdropImageMobileMotifArea')
-        });
+        return {
+          image: nextAttributes.backdropImage,
+          imageMotifArea: nextAttributes.backdropImageMotifArea,
+          imageMobile: nextAttributes.backdropImageMobile,
+          imageMobileMotifArea: nextAttributes.backdropImageMobileMotifArea
+        };
     }
   }
 });
@@ -498,15 +501,21 @@ var ContentElement = Backbone$1.Model.extend({
     return [section.contentElements.at(index - 1), section.contentElements.at(index + 1)];
   },
   applyDefaultConfiguration: function applyDefaultConfiguration(sibling) {
-    this.configuration.set(_objectSpread2(_objectSpread2({}, this.getType().defaultConfig), {}, {
-      position: sibling === null || sibling === void 0 ? void 0 : sibling.getDefaultSiblingPosition()
-    }));
+    var defaultConfig = _objectSpread2({}, this.getType().defaultConfig);
+
+    var defaultPosition = sibling === null || sibling === void 0 ? void 0 : sibling.getDefaultSiblingPosition();
+
+    if (defaultPosition && defaultPosition !== 'inline') {
+      defaultConfig.position = defaultPosition;
+    }
+
+    this.configuration.set(defaultConfig);
   },
   getPosition: function getPosition() {
     return this.configuration.get('position') || 'inline';
   },
   getAvailablePositions: function getAvailablePositions() {
-    var supportedByLayout = this.section.configuration.get('layout') === 'center' ? ['inline', 'left', 'right', 'full'] : ['inline', 'sticky', 'full'];
+    var supportedByLayout = this.section.configuration.get('layout') === 'center' ? ['inline', 'left', 'right', 'wide', 'full'] : ['inline', 'sticky', 'wide', 'full'];
     var supportedByType = this.getType().supportedPositions;
 
     if (supportedByType) {

data/entry_types/scrolled/package/frontend/EditableText-7093fd0e.js

@@ -0,0 +1,1071 @@
+import React, { useState, useEffect, createContext, useContext, useRef, useMemo, useCallback } from 'react';
+import { _ as _slicedToArray, k as _objectSpread2, a as _defineProperty, p as _toConsumableArray } from './i18n-4dc6c377.js';
+import classNames from 'classnames';
+import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.js';
+
+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(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(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-6a6793ca.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({});
+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();
+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","wide":"TwoColumn-module_wide__xdF_t","wideViewport":"TwoColumn-module_wideViewport___c_Zz","right":"TwoColumn-module_right__Fr52a","narrowViewport":"TwoColumn-module_narrowViewport__1x_NY"};
+
+function availablePositions(narrow) {
+  if (narrow) {
+    return ['inline', 'wide', 'full'];
+  } else {
+    return ['inline', 'sticky', 'wide', 'full'];
+  }
+}
+
+function TwoColumn(props) {
+  var narrow = useNarrowViewport();
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$5.root, styles$5[props.align], narrow ? styles$5.narrowViewport : styles$5.wideViewport)
+    },
+    /*#__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, 'wide'), 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: [],
+        wide: [],
+        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 || previous.wide.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-wide":"Center-module_item-wide__2shH7","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' && item.position !== 'wide' && previous.position !== 'wide',
+    openEnd: next && item.position !== 'full' && next.position !== 'full' && item.position !== 'wide' && next.position !== 'wide'
+  };
+}
+
+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({
+  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({
+  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 { ContentElementEditorCommandEmitterContext as C, EditableText as E, Foreground as F, Layout as L, MotifArea as M, PhonePlatformContext as P, StaticPreview as S, Text as T, createScrollPositionLifecycleHook as a, useMediaQuery as b, createScrollPositionLifecycleProvider as c, usePostMessageListener as d, withInlineEditingAlternative as e, api as f, useContentElementConfigurationUpdate as g, useContentElementEditorCommandSubscription as h, useContentElementEditorState as i, useContentElementLifecycle as j, useOnScreen as k, loadInlineEditingComponents as l, MotifAreaVisibilityProvider as m, ForcePaddingContext as n, ContentElementConfigurationUpdateContext as o, ContentElementEditorStateContext as p, LayoutWithoutInlineEditing as q, renderElement as r, renderLeaf as s, useIsStaticPreview as u, withInlineEditingDecorator as w };