pageflow 15.7.1 → 16.0.0

data/entry_types/scrolled/package/frontend/EditableInlineText.module-b9923660.js

@@ -1,993 +0,0 @@
-import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useCallback } from 'react';
-import { c as _slicedToArray, a as _objectSpread2, b as _defineProperty, f as useTheme, o as _toConsumableArray } from './PhonePlatformContext-9fb97827.js';
-import classNames from 'classnames';
-import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _createSuper } from './createSuper-d0f30da3.js';
-
-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];
-
-  var onIntersectingRef = useRef();
-  useEffect(function () {
-    onIntersectingRef.current = onIntersecting;
-  }, [onIntersecting]);
-  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 && onIntersectingRef.current) {
-        onIntersectingRef.current();
-      }
-    }, {
-      rootMargin: rootMargin
-    }, skipIframeFix);
-
-    if (ref.current) {
-      observer.observe(current);
-    }
-
-    return function () {
-      observer.unobserve(current);
-    };
-  }, [ref, rootMargin, 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 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 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];
-    }
-  }, {
-    key: "consentVendors",
-    value: function consentVendors(_ref) {
-      var _this = this;
-
-      var contentElements = _ref.contentElements,
-          t = _ref.t;
-      var vendorsByName = {};
-      contentElements.forEach(function (contentElement) {
-        var type = _this.types[contentElement.typeName];
-        var consentVendors = typeof type.consentVendors === 'function' ? type.consentVendors({
-          configuration: contentElement.configuration,
-          t: t
-        }) : type.consentVendors || [];
-        consentVendors.forEach(function (vendor) {
-          vendorsByName[vendor.name] = vendor;
-        });
-      });
-      return Object.values(vendorsByName);
-    }
-  }]);
-
-  return ContentElementTypeRegistry;
-}();
-
-/**
- * Register new types of widgets.
- * @name frontend_widgetTypes
- */
-var WidgetTypeRegistry = /*#__PURE__*/function () {
-  function WidgetTypeRegistry() {
-    _classCallCheck(this, WidgetTypeRegistry);
-
-    this.types = {};
-  }
-  /**
-   * Register a new type of widget.
-   *
-   * @param {string} typeName - Name of the content element type.
-   * @param {Object} options
-   * @param {React.Component} options.component
-   * @memberof frontend_widgetTypes
-   *
-   * @example
-   *
-   * // frontend.js
-   *
-   * import {frontend} from 'pageflow-scrolled/frontend';
-   * import {CustomNavigationBar} from './CustomNavigationBar';
-   *
-   * frontend.contentElementTypes.register('customNavigationBar', {
-   *   component: CustomNavigationBar
-   * });
-   */
-
-
-  _createClass(WidgetTypeRegistry, [{
-    key: "register",
-    value: function register(typeName, options) {
-      if (!options.component) {
-        throw new Error("Missing required component option for widget type '".concat(typeName, "'."));
-      }
-
-      this.types[typeName] = options;
-    }
-  }, {
-    key: "getComponent",
-    value: function getComponent(typeName) {
-      if (!this.types[typeName]) {
-        throw new Error("Unknown widget type '".concat(typeName, "'. Consider calling frontent.widgetTypes.register."));
-      }
-
-      return this.types[typeName].component;
-    }
-  }]);
-
-  return WidgetTypeRegistry;
-}();
-
-var api = {
-  contentElementTypes: new ContentElementTypeRegistry(),
-  widgetTypes: new WidgetTypeRegistry()
-};
-
-// 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-6ab26015.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"};
-
-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() {
-  var _theme$options$proper, _theme$options$proper2;
-
-  var theme = useTheme();
-  var maxWidth = ((_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : (_theme$options$proper2 = _theme$options$proper.root) === null || _theme$options$proper2 === void 0 ? void 0 : _theme$options$proper2.narrowViewportBreakpoint) || '950px';
-  return useMediaQuery("(max-width: ".concat(maxWidth, ")"));
-}
-
-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","right":"TwoColumn-module_right__Fr52a","narrowViewport":"TwoColumn-module_narrowViewport__1x_NY","wideViewport":"TwoColumn-module_wideViewport___c_Zz"};
-
-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' || props.sectionProps.layout === 'centerRagged') {
-    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 textStyles = {"text-s":"20px","text-base":"22px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption"};
-
-/**
- * Render some text using the default typography scale.
- *
- * @param {Object} props
- * @param {string} props.scaleCategory -
- *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
- *   `'heading-xs'`, `'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: textStyles[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 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;
-  var variantClassName = element.variant && ['typography-textBlock', camelize(element.type), element.variant].join('-');
-
-  switch (element.type) {
-    case 'block-quote':
-      return /*#__PURE__*/React.createElement("blockquote", Object.assign({}, attributes, {
-        className: variantClassName
-      }), children);
-
-    case 'bulleted-list':
-      return /*#__PURE__*/React.createElement("ul", Object.assign({}, attributes, {
-        className: variantClassName
-      }), children);
-
-    case 'numbered-list':
-      return /*#__PURE__*/React.createElement("ol", Object.assign({}, attributes, {
-        className: variantClassName
-      }), children);
-
-    case 'list-item':
-      return /*#__PURE__*/React.createElement("li", attributes, children);
-
-    case 'heading':
-      return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
-        className: classNames(variantClassName, textStyles['heading-xs'])
-      }), children);
-
-    case 'link':
-      return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
-        href: element.href
-      }), children);
-
-    default:
-      return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
-        className: variantClassName
-      }), 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);
-}
-
-function camelize(snakeCase) {
-  return snakeCase.replace(/-[a-z]/g, function (match) {
-    return match[1].toUpperCase();
-  });
-}
-
-var frontendStyles = {"root":"EditableInlineText-module_root__3eA-J","manualHyphens":"EditableInlineText-module_manualHyphens__r4suO"};
-
-export { ContentElementEditorCommandEmitterContext as C, EditableText as E, Foreground as F, Layout as L, MotifArea as M, StaticPreview as S, Text as T, useIsStaticPreview as a, createScrollPositionLifecycleHook as b, createScrollPositionLifecycleProvider as c, useMediaQuery as d, usePostMessageListener as e, api as f, withInlineEditingAlternative as g, frontendStyles as h, useContentElementConfigurationUpdate as i, useContentElementEditorCommandSubscription as j, useContentElementLifecycle as k, loadInlineEditingComponents as l, useOnScreen as m, MotifAreaVisibilityProvider as n, ForcePaddingContext as o, ContentElementConfigurationUpdateContext as p, ContentElementEditorStateContext as q, LayoutWithoutInlineEditing as r, renderElement as s, renderLeaf as t, useContentElementEditorState as u, withInlineEditingDecorator as w };