pageflow 15.6.1 → 15.7.0

data/entry_types/scrolled/package/frontend/{EditableText-7093fd0e.js → EditableInlineText.module-b9923660.js}

@@ -1,9 +1,7 @@
-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 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 _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.js';
-
-var PhonePlatformContext = React.createContext(false);
+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] : {},
@@ -16,6 +14,10 @@ function useOnScreen(ref) {
       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) {
@@ -30,8 +32,8 @@ function useOnScreen(ref) {
       var entry = entries[entries.length - 1];
       setIntersecting(entry.isIntersecting);
 
-      if (entry.isIntersecting && onIntersecting) {
-        onIntersecting();
+      if (entry.isIntersecting && onIntersectingRef.current) {
+        onIntersectingRef.current();
       }
     }, {
       rootMargin: rootMargin
@@ -44,7 +46,7 @@ function useOnScreen(ref) {
     return function () {
       observer.unobserve(current);
     };
-  }, [ref, rootMargin, onIntersecting, skipIframeFix]);
+  }, [ref, rootMargin, skipIframeFix]);
   return isIntersecting;
 }
 
@@ -86,12 +88,9 @@ var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isAc
 var StaticPreviewContext = createContext(false);
 function StaticPreview(_ref) {
   var children = _ref.children;
-  return (
-    /*#__PURE__*/
-    React.createElement(StaticPreviewContext.Provider, {
-      value: true
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(StaticPreviewContext.Provider, {
+    value: true
+  }, children);
 }
 /**
  * Use inside a content element component to determine whether the
@@ -131,22 +130,15 @@ function createScrollPositionLifecycleProvider(Context) {
         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))
-    );
+    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) {
@@ -187,18 +179,35 @@ function createScrollPositionLifecycleHook(Context) {
   };
 }
 
+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)
-  );
+  return /*#__PURE__*/React.createElement(VisibilityContext.Provider, {
+    value: visible
+  }, children);
 }
 var MotifArea = function MotifArea(props) {
   var _props$file;
@@ -224,16 +233,13 @@ var MotifArea = function MotifArea(props) {
     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
-    })
-  );
+  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() {}
@@ -261,7 +267,7 @@ function useMediaQuery(query) {
     };
 
     var matcher = window.matchMedia(query);
-    var isModern = 'addEventListener' in matcher;
+    var isModern = ('addEventListener' in matcher);
 
     if (isModern) {
       matcher.addEventListener('change', onUpdateMatch);
@@ -286,15 +292,12 @@ var styles$2 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeig
 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)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: className(props, forcePadding),
+    style: {
+      minHeight: props.minHeight
+    }
+  }, props.children);
 }
 
 function className(props, forcePadding) {
@@ -305,9 +308,7 @@ function className(props, forcePadding) {
  * Register new types of content elements.
  * @name frontend_contentElementTypes
  */
-var ContentElementTypeRegistry =
-/*#__PURE__*/
-function () {
+var ContentElementTypeRegistry = /*#__PURE__*/function () {
   function ContentElementTypeRegistry() {
     _classCallCheck(this, ContentElementTypeRegistry);
 
@@ -356,13 +357,88 @@ function () {
     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()
+  contentElementTypes: new ContentElementTypeRegistry(),
+  widgetTypes: new WidgetTypeRegistry()
 };
 
 // For reasons that are beyond me, Storybook's Webpack build fails
@@ -373,7 +449,7 @@ var api = {
 // 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');
+  return import('./components-6ab26015.js');
 }
 
 var components = {};
@@ -387,17 +463,9 @@ function withInlineEditingDecorator(name, Component) {
     var Decorator = components[name];
 
     if (Decorator) {
-      return (
-        /*#__PURE__*/
-        React.createElement(Decorator, props,
-        /*#__PURE__*/
-        React.createElement(Component, props))
-      );
+      return /*#__PURE__*/React.createElement(Decorator, props, /*#__PURE__*/React.createElement(Component, props));
     } else {
-      return (
-        /*#__PURE__*/
-        React.createElement(Component, props)
-      );
+      return /*#__PURE__*/React.createElement(Component, props);
     }
   };
 }
@@ -406,15 +474,9 @@ function withInlineEditingAlternative(name, Component) {
     var Alternative = components[name];
 
     if (Alternative) {
-      return (
-        /*#__PURE__*/
-        React.createElement(Alternative, props)
-      );
+      return /*#__PURE__*/React.createElement(Alternative, props);
     } else {
-      return (
-        /*#__PURE__*/
-        React.createElement(Component, props)
-      );
+      return /*#__PURE__*/React.createElement(Component, props);
     }
   };
 }
@@ -428,12 +490,9 @@ function ContentElementAttributesProvider(_ref) {
       contentElementId: id
     };
   }, [id]);
-  return (
-    /*#__PURE__*/
-    React.createElement(ContentElementAttributesContext.Provider, {
-      value: attributes
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(ContentElementAttributesContext.Provider, {
+    value: attributes
+  }, children);
 }
 function useContentElementAttributes() {
   return useContext(ContentElementAttributesContext);
@@ -450,10 +509,7 @@ function ContentElementLifecycleProvider(_ref) {
       lifecycle = _api$contentElementTy.lifecycle;
 
   if (lifecycle) {
-    return (
-      /*#__PURE__*/
-      React.createElement(LifecycleProvider, null, children)
-    );
+    return /*#__PURE__*/React.createElement(LifecycleProvider, null, children);
   } else {
     return children;
   }
@@ -504,48 +560,14 @@ function ContentElementMargin(_ref) {
     return children;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$3.wrapper
-    }, 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) {
+var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ContentElementErrorBoundary, _React$Component);
 
   var _super = _createSuper(ContentElementErrorBoundary);
@@ -566,12 +588,9 @@ function (_React$Component) {
     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 /*#__PURE__*/React.createElement("div", {
+          className: styles$4.missing
+        }, "Error rendering element of type \"", this.props.type, "\"");
       }
 
       return this.props.children;
@@ -592,37 +611,23 @@ var ContentElement = withInlineEditingDecorator('ContentElementDecorator', funct
   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
-      })))))
-    );
+    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, "\"")
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$4.missing
+    }, "Element of unknown type \"", props.type, "\"");
   }
 });
 ContentElement.defaultProps = {
@@ -630,23 +635,18 @@ ContentElement.defaultProps = {
 };
 
 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);
-    }))
-  );
+  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;
@@ -658,10 +658,14 @@ ContentElements.defaultProps = {
 };
 
 function useNarrowViewport() {
-  return useMediaQuery('(max-width: 950px)');
+  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","wideViewport":"TwoColumn-module_wideViewport___c_Zz","right":"TwoColumn-module_right__Fr52a","narrowViewport":"TwoColumn-module_narrowViewport__1x_NY"};
+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) {
@@ -673,22 +677,15 @@ function availablePositions(narrow) {
 
 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))
-  );
+  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'
@@ -696,33 +693,25 @@ TwoColumn.defaultProps = {
 
 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'))
-    );
+    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
-      }))
-    );
+    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
+    }));
   }
 }
 
@@ -760,52 +749,33 @@ function renderPlaceholder(placeholder) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$5.group)
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$5.inline
-    }, placeholder))
-  );
+  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))
-  );
+  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) {
@@ -830,39 +800,25 @@ function renderPlaceholder$1(placeholder) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$6.outer)
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$6.item)
-    }, placeholder))
-  );
+  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)
-    );
+  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))
-    );
+    return /*#__PURE__*/React.createElement(TwoColumn, Object.assign({
+      align: "right"
+    }, props));
   } else {
-    return (
-      /*#__PURE__*/
-      React.createElement(TwoColumn, props)
-    );
+    return /*#__PURE__*/React.createElement(TwoColumn, props);
   }
 }
 Layout.defaultProps = {
@@ -887,13 +843,15 @@ function usePostMessageListener(receiveData) {
   }, [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"};
+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 `'h1'`, `'h2'`, `'body'`, `'caption'`.
+ * @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.
  */
@@ -903,7 +861,7 @@ function Text(_ref) {
       scaleCategory = _ref.scaleCategory,
       children = _ref.children;
   return React.createElement(inline ? 'span' : 'div', {
-    className: styles$7[scaleCategory]
+    className: textStyles[scaleCategory]
   }, children);
 }
 
@@ -929,34 +887,11 @@ function useContentElementEditorCommandSubscription(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))
-  );
+  return /*#__PURE__*/React.createElement(Text, {
+    scaleCategory: "body"
+  }, render(value));
 });
 
 function render() {
@@ -986,51 +921,41 @@ 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", attributes, children)
-      );
+      return /*#__PURE__*/React.createElement("blockquote", Object.assign({}, attributes, {
+        className: variantClassName
+      }), children);
 
     case 'bulleted-list':
-      return (
-        /*#__PURE__*/
-        React.createElement("ul", attributes, children)
-      );
+      return /*#__PURE__*/React.createElement("ul", Object.assign({}, attributes, {
+        className: variantClassName
+      }), children);
 
     case 'numbered-list':
-      return (
-        /*#__PURE__*/
-        React.createElement("ol", attributes, children)
-      );
+      return /*#__PURE__*/React.createElement("ol", Object.assign({}, attributes, {
+        className: variantClassName
+      }), children);
 
     case 'list-item':
-      return (
-        /*#__PURE__*/
-        React.createElement("li", attributes, children)
-      );
+      return /*#__PURE__*/React.createElement("li", attributes, children);
 
     case 'heading':
-      return (
-        /*#__PURE__*/
-        React.createElement("h2", attributes, children)
-      );
+      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)
-      );
+      return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
+        href: element.href
+      }), children);
 
     default:
-      return (
-        /*#__PURE__*/
-        React.createElement("p", attributes, children)
-      );
+      return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
+        className: variantClassName
+      }), children);
   }
 }
 function renderLeaf(_ref3) {
@@ -1039,33 +964,30 @@ function renderLeaf(_ref3) {
       leaf = _ref3.leaf;
 
   if (leaf.bold) {
-    children =
-    /*#__PURE__*/
-    React.createElement("strong", null, children);
+    children = /*#__PURE__*/React.createElement("strong", null, children);
   }
 
   if (leaf.italic) {
-    children =
-    /*#__PURE__*/
-    React.createElement("em", null, children);
+    children = /*#__PURE__*/React.createElement("em", null, children);
   }
 
   if (leaf.underline) {
-    children =
-    /*#__PURE__*/
-    React.createElement("u", null, children);
+    children = /*#__PURE__*/React.createElement("u", null, children);
   }
 
   if (leaf.strikethrough) {
-    children =
-    /*#__PURE__*/
-    React.createElement("s", null, children);
+    children = /*#__PURE__*/React.createElement("s", null, children);
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("span", attributes, children)
-  );
+  return /*#__PURE__*/React.createElement("span", attributes, children);
+}
+
+function camelize(snakeCase) {
+  return snakeCase.replace(/-[a-z]/g, function (match) {
+    return match[1].toUpperCase();
+  });
 }
 
-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 };
+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 };