@contentful/experiences-visual-editor-react 1.17.0 → 1.17.1-beta.0

package/dist/renderApp.js

@@ -40413,7 +40413,7 @@ var FUNC_ERROR_TEXT = 'Expected a function';
  * // Replace `_.memoize.Cache`.
  * _.memoize.Cache = WeakMap;
  */
-function memoize(func, resolver) {
+function memoize$1(func, resolver) {
   if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
     throw new TypeError(FUNC_ERROR_TEXT);
   }
@@ -40429,12 +40429,12 @@ function memoize(func, resolver) {
     memoized.cache = cache.set(key, result) || cache;
     return result;
   };
-  memoized.cache = new (memoize.Cache || MapCache);
+  memoized.cache = new (memoize$1.Cache || MapCache);
   return memoized;
 }
 
 // Expose `MapCache`.
-memoize.Cache = MapCache;
+memoize$1.Cache = MapCache;
 
 /** Used as the maximum memoize cache size. */
 var MAX_MEMOIZE_SIZE = 500;
@@ -40448,7 +40448,7 @@ var MAX_MEMOIZE_SIZE = 500;
  * @returns {Function} Returns the new memoized function.
  */
 function memoizeCapped(func) {
-  var result = memoize(func, function(key) {
+  var result = memoize$1(func, function(key) {
     if (cache.size === MAX_MEMOIZE_SIZE) {
       cache.clear();
     }
@@ -42243,6 +42243,44 @@ const CONTENTFUL_COMPONENTS$1 = {
 const ASSEMBLY_NODE_TYPE$1 = 'assembly';
 const ASSEMBLY_DEFAULT_CATEGORY$1 = 'Assemblies';
 const ASSEMBLY_BLOCK_NODE_TYPE$1 = 'assemblyBlock';
+const CF_STYLE_ATTRIBUTES = [
+    'cfVisibility',
+    'cfHorizontalAlignment',
+    'cfVerticalAlignment',
+    'cfMargin',
+    'cfPadding',
+    'cfBackgroundColor',
+    'cfWidth',
+    'cfMaxWidth',
+    'cfHeight',
+    'cfImageAsset',
+    'cfImageOptions',
+    'cfBackgroundImageUrl',
+    'cfBackgroundImageOptions',
+    'cfFlexDirection',
+    'cfFlexWrap',
+    'cfBorder',
+    'cfBorderRadius',
+    'cfGap',
+    'cfFontSize',
+    'cfFontWeight',
+    'cfLineHeight',
+    'cfLetterSpacing',
+    'cfTextColor',
+    'cfTextAlign',
+    'cfTextTransform',
+    'cfTextBold',
+    'cfTextItalic',
+    'cfTextUnderline',
+    // For backwards compatibility
+    // we need to keep those in this constant array
+    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
+    // can filter them out and not pass as props
+    'cfBackgroundImageScaling',
+    'cfBackgroundImageAlignment',
+    'cfBackgroundImageAlignmentVertical',
+    'cfBackgroundImageAlignmentHorizontal',
+];
 const EMPTY_CONTAINER_HEIGHT$1 = '80px';
 const DEFAULT_IMAGE_WIDTH = '500px';
 var PostMessageMethods$2;
@@ -43436,7 +43474,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         return;
     }
     if (variableName === 'cfBackgroundImageUrl') {
-        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth');
+        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth') || '100%';
         const optionsVariableName = 'cfBackgroundImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
@@ -43885,6 +43923,13 @@ const deserializePatternVariables = ({ nodeVariables, componentInstanceProps, co
     return { childNodeVariable, dataSource, unboundValues };
 };
 
+const stylesToKeep = ['cfImageAsset'];
+const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
+const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
+const sanitizeNodeProps = (nodeProps) => {
+    return omit(nodeProps, stylesToRemove, propsToRemove);
+};
+
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -45016,44 +45061,6 @@ const ASSEMBLY_NODE_TYPE = 'assembly';
 const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
 const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';
 const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];
-const CF_STYLE_ATTRIBUTES = [
-    'cfVisibility',
-    'cfHorizontalAlignment',
-    'cfVerticalAlignment',
-    'cfMargin',
-    'cfPadding',
-    'cfBackgroundColor',
-    'cfWidth',
-    'cfMaxWidth',
-    'cfHeight',
-    'cfImageAsset',
-    'cfImageOptions',
-    'cfBackgroundImageUrl',
-    'cfBackgroundImageOptions',
-    'cfFlexDirection',
-    'cfFlexWrap',
-    'cfBorder',
-    'cfBorderRadius',
-    'cfGap',
-    'cfFontSize',
-    'cfFontWeight',
-    'cfLineHeight',
-    'cfLetterSpacing',
-    'cfTextColor',
-    'cfTextAlign',
-    'cfTextTransform',
-    'cfTextBold',
-    'cfTextItalic',
-    'cfTextUnderline',
-    // For backwards compatibility
-    // we need to keep those in this constant array
-    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
-    // can filter them out and not pass as props
-    'cfBackgroundImageScaling',
-    'cfBackgroundImageAlignment',
-    'cfBackgroundImageAlignmentVertical',
-    'cfBackgroundImageAlignmentHorizontal',
-];
 const EMPTY_CONTAINER_HEIGHT = '80px';
 const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
 var PostMessageMethods$1;
@@ -56752,180 +56759,1846 @@ var richTextReactRenderer_es5 = {};
 	
 } (richTextReactRenderer_es5));
 
-/**
- * These modes are ONLY intended to be internally used within the context of
- * editing an experience inside of Contentful Studio. i.e. these modes
- * intentionally do not include preview/delivery modes.
- */
-var StudioCanvasMode;
-(function (StudioCanvasMode) {
-    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
-    StudioCanvasMode["EDITOR"] = "editorMode";
-    StudioCanvasMode["NONE"] = "none";
-})(StudioCanvasMode || (StudioCanvasMode = {}));
-var PostMessageMethods;
-(function (PostMessageMethods) {
-    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
-    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
-})(PostMessageMethods || (PostMessageMethods = {}));
+/*
 
-var css_248z$6 = ".cf-heading {\n  white-space: pre-line;\n}\n";
-styleInject(css_248z$6);
+Based off glamor's StyleSheet, thanks Sunil ❤️
 
-var css_248z$5 = ".cf-richtext {\n  white-space: pre-line;\n}\n\n.cf-richtext > *:first-child {\n  margin-top: 0;\n}\n\n.cf-richtext > *:last-child {\n  margin-bottom: 0;\n}\n";
-styleInject(css_248z$5);
+high performance StyleSheet for css-in-js systems
 
-var css_248z$4 = ".cf-text {\n  white-space: pre-line;\n}\n";
-styleInject(css_248z$4);
+- uses multiple style tags behind the scenes for millions of rules
+- uses `insertRule` for appending in production for *much* faster performance
 
-var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\n.cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
-styleInject(css_248z$3);
+// usage
 
-var css_248z$2$1 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
-styleInject(css_248z$2$1);
+import { StyleSheet } from '@emotion/sheet'
 
-const Flex = reactExports.forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
-    return (React.createElement("div", { id: id, ref: ref, style: {
-            display: 'flex',
-            flex,
-            flexBasis,
-            flexShrink,
-            flexDirection,
-            gap,
-            justifyContent,
-            justifyItems,
-            justifySelf,
-            alignItems,
-            alignSelf,
-            alignContent,
-            order,
-            flexWrap,
-            flexGrow,
-            ...cssStyles,
-        }, className: className, onMouseEnter: onMouseEnter, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseLeave: onMouseLeave, onClick: onClick, ...props }, children));
-});
-Flex.displayName = 'Flex';
+let styleSheet = new StyleSheet({ key: '', container: document.head })
 
-var css_248z$1$1 = ".cf-divider {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.cf-divider::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  bottom: -5px;\n  right: -5px;\n  pointer-events: all;\n}\n";
-styleInject(css_248z$1$1);
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
 
-var css_248z$7 = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n  display: flex;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
-styleInject(css_248z$7);
+styleSheet.flush()
+- empties the stylesheet of all its contents
 
-const ColumnWrapper = reactExports.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, ...props, style: {
-            ...(props.style || {}),
-            display: 'grid',
-            gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
-        } }, props.children));
-});
-ColumnWrapper.displayName = 'ColumnWrapper';
+*/
+// $FlowFixMe
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    // $FlowFixMe
+    return tag.sheet;
+  } // this weirdness brought to you by firefox
 
-const assemblyStyle = { display: 'contents' };
-// Feel free to do any magic as regards variable definitions for assemblies
-// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
-const Assembly = (props) => {
-    if (props.editorMode) {
-        const { node, dragProps, ...editorModeProps } = props;
-        return props.renderDropzone(node, {
-            ...editorModeProps,
-            ['data-test-id']: 'contentful-assembly',
-            className: props.className,
-            dragProps,
-        });
-    }
-    // Using a display contents so assembly content/children
-    // can appear as if they are direct children of the div wrapper's parent
-    return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
-};
+  /* istanbul ignore next */
 
-const useEntityStore = create$1((set) => ({
-    entityStore: new EditorModeEntityStore({ locale: 'en-US', entities: [] }),
-    areEntitiesFetched: false,
-    setEntitiesFetched(fetched) {
-        set({ areEntitiesFetched: fetched });
-    },
-    resetEntityStore(locale, entities = []) {
-        console.debug(`[experiences-sdk-react] Resetting entity store because the locale changed to '${locale}'.`);
-        const newEntityStore = new EditorModeEntityStore({ locale, entities });
-        set({
-            entityStore: newEntityStore,
-            areEntitiesFetched: false,
-        });
-        return newEntityStore;
-    },
-}));
 
-class DragState {
-    constructor() {
-        this.isDragStartedOnParent = false;
-        this.isDraggingItem = false;
-    }
-    get isDragging() {
-        return this.isDraggingItem;
-    }
-    get isDraggingOnParent() {
-        return this.isDragStartedOnParent;
-    }
-    updateIsDragging(isDraggingItem) {
-        this.isDraggingItem = isDraggingItem;
-    }
-    updateIsDragStartedOnParent(isDragStartedOnParent) {
-        this.isDragStartedOnParent = isDragStartedOnParent;
-    }
-    resetState() {
-        this.isDraggingItem = false;
-        this.isDragStartedOnParent = false;
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      // $FlowFixMe
+      return document.styleSheets[i];
     }
+  }
 }
 
-class SimulateDnD extends DragState {
-    constructor() {
-        super();
-        this.draggingElement = null;
-    }
-    setupDrag() {
-        this.updateIsDragStartedOnParent(true);
-    }
-    startDrag(coordX, coordY) {
-        this.draggingElement = document.getElementById(NEW_COMPONENT_ID);
-        this.updateIsDragging(true);
-        this.simulateMouseEvent(coordX, coordY, 'mousedown');
-    }
-    updateDrag(coordX, coordY) {
-        if (!this.draggingElement) {
-            this.draggingElement = document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`);
-        }
-        this.simulateMouseEvent(coordX, coordY);
-    }
-    endDrag(coordX, coordY) {
-        this.simulateMouseEvent(coordX, coordY, 'mouseup');
-        this.reset();
-    }
-    reset() {
-        this.draggingElement = null;
-        this.resetState();
+function createStyleElement(options) {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', options.key);
+
+  if (options.nonce !== undefined) {
+    tag.setAttribute('nonce', options.nonce);
+  }
+
+  tag.appendChild(document.createTextNode(''));
+  return tag;
+}
+
+var StyleSheet =
+/*#__PURE__*/
+function () {
+  function StyleSheet(options) {
+    this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+    this.key = options.key;
+    this.container = options.container;
+    this.before = null;
+  }
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.insert = function insert(rule) {
+    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+    // it's 1 in dev because we insert source maps that map a single rule to a location
+    // and you can only have one source map per style tag
+    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+      var _tag = createStyleElement(this);
+
+      var before;
+
+      if (this.tags.length === 0) {
+        before = this.before;
+      } else {
+        before = this.tags[this.tags.length - 1].nextSibling;
+      }
+
+      this.container.insertBefore(_tag, before);
+      this.tags.push(_tag);
     }
-    simulateMouseEvent(coordX, coordY, eventName = 'mousemove') {
-        if (!this.draggingElement) {
-            return;
+
+    var tag = this.tags[this.tags.length - 1];
+
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+
+      try {
+        // this is a really hot path
+        // we check the second character first because having "i"
+        // as the second character will happen less often than
+        // having "@" as the first character
+        var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
+        // the big drawback is that the css won't be editable in devtools
+
+        sheet.insertRule(rule, // we need to insert @import rules before anything else
+        // otherwise there will be an error
+        // technically this means that the @import rules will
+        // _usually_(not always since there could be multiple style tags)
+        // be the first ones in prod and generally later in dev
+        // this shouldn't really matter in the real world though
+        // @import is generally only used for font faces from google fonts and etc.
+        // so while this could be technically correct then it would be slower and larger
+        // for a tiny bit of correctness that won't matter in the real world
+        isImportRule ? 0 : sheet.cssRules.length);
+      } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
-        const options = {
-            bubbles: true,
-            cancelable: true,
-            view: window,
-            pageX: 0,
-            pageY: 0,
-            clientX: coordX,
-            clientY: coordY,
-        };
-        const event = new MouseEvent(eventName, options);
-        this.draggingElement.dispatchEvent(event);
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
     }
-}
-var SimulateDnD$1 = new SimulateDnD();
 
-function useEditorSubscriber() {
+    this.ctr++;
+  };
+
+  _proto.flush = function flush() {
+    // $FlowFixMe
+    this.tags.forEach(function (tag) {
+      return tag.parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
+}();
+
+function stylis_min (W) {
+  function M(d, c, e, h, a) {
+    for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
+      g = e.charCodeAt(l);
+      l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);
+
+      if (0 === b + n + v + m) {
+        if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
+          switch (g) {
+            case 32:
+            case 9:
+            case 59:
+            case 13:
+            case 10:
+              break;
+
+            default:
+              f += e.charAt(l);
+          }
+
+          g = 59;
+        }
+
+        switch (g) {
+          case 123:
+            f = f.trim();
+            q = f.charCodeAt(0);
+            k = 1;
+
+            for (t = ++l; l < B;) {
+              switch (g = e.charCodeAt(l)) {
+                case 123:
+                  k++;
+                  break;
+
+                case 125:
+                  k--;
+                  break;
+
+                case 47:
+                  switch (g = e.charCodeAt(l + 1)) {
+                    case 42:
+                    case 47:
+                      a: {
+                        for (u = l + 1; u < J; ++u) {
+                          switch (e.charCodeAt(u)) {
+                            case 47:
+                              if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
+                                l = u + 1;
+                                break a;
+                              }
+
+                              break;
+
+                            case 10:
+                              if (47 === g) {
+                                l = u + 1;
+                                break a;
+                              }
+
+                          }
+                        }
+
+                        l = u;
+                      }
+
+                  }
+
+                  break;
+
+                case 91:
+                  g++;
+
+                case 40:
+                  g++;
+
+                case 34:
+                case 39:
+                  for (; l++ < J && e.charCodeAt(l) !== g;) {
+                  }
+
+              }
+
+              if (0 === k) break;
+              l++;
+            }
+
+            k = e.substring(t, l);
+            0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));
+
+            switch (q) {
+              case 64:
+                0 < r && (f = f.replace(N, ''));
+                g = f.charCodeAt(1);
+
+                switch (g) {
+                  case 100:
+                  case 109:
+                  case 115:
+                  case 45:
+                    r = c;
+                    break;
+
+                  default:
+                    r = O;
+                }
+
+                k = M(c, r, k, g, a + 1);
+                t = k.length;
+                0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
+                if (0 < t) switch (g) {
+                  case 115:
+                    f = f.replace(da, ea);
+
+                  case 100:
+                  case 109:
+                  case 45:
+                    k = f + '{' + k + '}';
+                    break;
+
+                  case 107:
+                    f = f.replace(fa, '$1 $2');
+                    k = f + '{' + k + '}';
+                    k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
+                    break;
+
+                  default:
+                    k = f + k, 112 === h && (k = (p += k, ''));
+                } else k = '';
+                break;
+
+              default:
+                k = M(c, X(c, f, I), k, h, a + 1);
+            }
+
+            F += k;
+            k = I = r = u = q = 0;
+            f = '';
+            g = e.charCodeAt(++l);
+            break;
+
+          case 125:
+          case 59:
+            f = (0 < r ? f.replace(N, '') : f).trim();
+            if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
+              case 0:
+                break;
+
+              case 64:
+                if (105 === g || 99 === g) {
+                  G += f + e.charAt(l);
+                  break;
+                }
+
+              default:
+                58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
+            }
+            I = r = u = q = 0;
+            f = '';
+            g = e.charCodeAt(++l);
+        }
+      }
+
+      switch (g) {
+        case 13:
+        case 10:
+          47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
+          0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
+          z = 1;
+          D++;
+          break;
+
+        case 59:
+        case 125:
+          if (0 === b + n + v + m) {
+            z++;
+            break;
+          }
+
+        default:
+          z++;
+          y = e.charAt(l);
+
+          switch (g) {
+            case 9:
+            case 32:
+              if (0 === n + m + b) switch (x) {
+                case 44:
+                case 58:
+                case 9:
+                case 32:
+                  y = '';
+                  break;
+
+                default:
+                  32 !== g && (y = ' ');
+              }
+              break;
+
+            case 0:
+              y = '\\0';
+              break;
+
+            case 12:
+              y = '\\f';
+              break;
+
+            case 11:
+              y = '\\v';
+              break;
+
+            case 38:
+              0 === n + b + m && (r = I = 1, y = '\f' + y);
+              break;
+
+            case 108:
+              if (0 === n + b + m + E && 0 < u) switch (l - u) {
+                case 2:
+                  112 === x && 58 === e.charCodeAt(l - 3) && (E = x);
+
+                case 8:
+                  111 === K && (E = K);
+              }
+              break;
+
+            case 58:
+              0 === n + b + m && (u = l);
+              break;
+
+            case 44:
+              0 === b + v + n + m && (r = 1, y += '\r');
+              break;
+
+            case 34:
+            case 39:
+              0 === b && (n = n === g ? 0 : 0 === n ? g : n);
+              break;
+
+            case 91:
+              0 === n + b + v && m++;
+              break;
+
+            case 93:
+              0 === n + b + v && m--;
+              break;
+
+            case 41:
+              0 === n + b + m && v--;
+              break;
+
+            case 40:
+              if (0 === n + b + m) {
+                if (0 === q) switch (2 * x + 3 * K) {
+                  case 533:
+                    break;
+
+                  default:
+                    q = 1;
+                }
+                v++;
+              }
+
+              break;
+
+            case 64:
+              0 === b + v + n + m + u + k && (k = 1);
+              break;
+
+            case 42:
+            case 47:
+              if (!(0 < n + m + v)) switch (b) {
+                case 0:
+                  switch (2 * g + 3 * e.charCodeAt(l + 1)) {
+                    case 235:
+                      b = 47;
+                      break;
+
+                    case 220:
+                      t = l, b = 42;
+                  }
+
+                  break;
+
+                case 42:
+                  47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
+              }
+          }
+
+          0 === b && (f += y);
+      }
+
+      K = x;
+      x = g;
+      l++;
+    }
+
+    t = p.length;
+
+    if (0 < t) {
+      r = c;
+      if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
+      p = r.join(',') + '{' + p + '}';
+
+      if (0 !== w * E) {
+        2 !== w || L(p, 2) || (E = 0);
+
+        switch (E) {
+          case 111:
+            p = p.replace(ha, ':-moz-$1') + p;
+            break;
+
+          case 112:
+            p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
+        }
+
+        E = 0;
+      }
+    }
+
+    return G + p + F;
+  }
+
+  function X(d, c, e) {
+    var h = c.trim().split(ia);
+    c = h;
+    var a = h.length,
+        m = d.length;
+
+    switch (m) {
+      case 0:
+      case 1:
+        var b = 0;
+
+        for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
+          c[b] = Z(d, c[b], e).trim();
+        }
+
+        break;
+
+      default:
+        var v = b = 0;
+
+        for (c = []; b < a; ++b) {
+          for (var n = 0; n < m; ++n) {
+            c[v++] = Z(d[n] + ' ', h[b], e).trim();
+          }
+        }
+
+    }
+
+    return c;
+  }
+
+  function Z(d, c, e) {
+    var h = c.charCodeAt(0);
+    33 > h && (h = (c = c.trim()).charCodeAt(0));
+
+    switch (h) {
+      case 38:
+        return c.replace(F, '$1' + d.trim());
+
+      case 58:
+        return d.trim() + c.replace(F, '$1' + d.trim());
+
+      default:
+        if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
+    }
+
+    return d + c;
+  }
+
+  function P(d, c, e, h) {
+    var a = d + ';',
+        m = 2 * c + 3 * e + 4 * h;
+
+    if (944 === m) {
+      d = a.indexOf(':', 9) + 1;
+      var b = a.substring(d, a.length - 1).trim();
+      b = a.substring(0, d).trim() + b + ';';
+      return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
+    }
+
+    if (0 === w || 2 === w && !L(a, 1)) return a;
+
+    switch (m) {
+      case 1015:
+        return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;
+
+      case 951:
+        return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;
+
+      case 963:
+        return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;
+
+      case 1009:
+        if (100 !== a.charCodeAt(4)) break;
+
+      case 969:
+      case 942:
+        return '-webkit-' + a + a;
+
+      case 978:
+        return '-webkit-' + a + '-moz-' + a + a;
+
+      case 1019:
+      case 983:
+        return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;
+
+      case 883:
+        if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
+        if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
+        break;
+
+      case 932:
+        if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
+          case 103:
+            return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;
+
+          case 115:
+            return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;
+
+          case 98:
+            return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
+        }
+        return '-webkit-' + a + '-ms-' + a + a;
+
+      case 964:
+        return '-webkit-' + a + '-ms-flex-' + a + a;
+
+      case 1023:
+        if (99 !== a.charCodeAt(8)) break;
+        b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
+        return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;
+
+      case 1005:
+        return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;
+
+      case 1e3:
+        b = a.substring(13).trim();
+        c = b.indexOf('-') + 1;
+
+        switch (b.charCodeAt(0) + b.charCodeAt(c)) {
+          case 226:
+            b = a.replace(G, 'tb');
+            break;
+
+          case 232:
+            b = a.replace(G, 'tb-rl');
+            break;
+
+          case 220:
+            b = a.replace(G, 'lr');
+            break;
+
+          default:
+            return a;
+        }
+
+        return '-webkit-' + a + '-ms-' + b + a;
+
+      case 1017:
+        if (-1 === a.indexOf('sticky', 9)) break;
+
+      case 975:
+        c = (a = d).length - 10;
+        b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();
+
+        switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {
+          case 203:
+            if (111 > b.charCodeAt(8)) break;
+
+          case 115:
+            a = a.replace(b, '-webkit-' + b) + ';' + a;
+            break;
+
+          case 207:
+          case 102:
+            a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
+        }
+
+        return a + ';';
+
+      case 938:
+        if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
+          case 105:
+            return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;
+
+          case 115:
+            return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;
+
+          default:
+            return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
+        }
+        break;
+
+      case 973:
+      case 989:
+        if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;
+
+      case 931:
+      case 953:
+        if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
+        break;
+
+      case 962:
+        if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
+    }
+
+    return a;
+  }
+
+  function L(d, c) {
+    var e = d.indexOf(1 === c ? ':' : '{'),
+        h = d.substring(0, 3 !== c ? e : 10);
+    e = d.substring(e + 1, d.length - 1);
+    return R(2 !== c ? h : h.replace(na, '$1'), e, c);
+  }
+
+  function ea(d, c) {
+    var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
+    return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
+  }
+
+  function H(d, c, e, h, a, m, b, v, n, q) {
+    for (var g = 0, x = c, w; g < A; ++g) {
+      switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
+        case void 0:
+        case !1:
+        case !0:
+        case null:
+          break;
+
+        default:
+          x = w;
+      }
+    }
+
+    if (x !== c) return x;
+  }
+
+  function T(d) {
+    switch (d) {
+      case void 0:
+      case null:
+        A = S.length = 0;
+        break;
+
+      default:
+        if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
+          T(d[c]);
+        } else Y = !!d | 0;
+    }
+
+    return T;
+  }
+
+  function U(d) {
+    d = d.prefix;
+    void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
+    return U;
+  }
+
+  function B(d, c) {
+    var e = d;
+    33 > e.charCodeAt(0) && (e = e.trim());
+    V = e;
+    e = [V];
+
+    if (0 < A) {
+      var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
+      void 0 !== h && 'string' === typeof h && (c = h);
+    }
+
+    var a = M(O, e, c, 0, 0);
+    0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
+    V = '';
+    E = 0;
+    z = D = 1;
+    return a;
+  }
+
+  var ca = /^\0+/g,
+      N = /[\0\r\f]/g,
+      aa = /: */g,
+      ka = /zoo|gra/,
+      ma = /([,: ])(transform)/g,
+      ia = /,\r+?/g,
+      F = /([\t\r\n ])*\f?&/g,
+      fa = /@(k\w+)\s*(\S*)\s*/,
+      Q = /::(place)/g,
+      ha = /:(read-only)/g,
+      G = /[svh]\w+-[tblr]{2}/,
+      da = /\(\s*(.*)\s*\)/g,
+      oa = /([\s\S]*?);/g,
+      ba = /-self|flex-/g,
+      na = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
+      la = /stretch|:\s*\w+\-(?:conte|avail)/,
+      ja = /([^-])(image-set\()/,
+      z = 1,
+      D = 1,
+      E = 0,
+      w = 1,
+      O = [],
+      S = [],
+      A = 0,
+      R = null,
+      Y = 0,
+      V = '';
+  B.use = T;
+  B.set = U;
+  void 0 !== W && U(W);
+  return B;
+}
+
+var weakMemoize = function weakMemoize(func) {
+  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // $FlowFixMe
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
+// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
+// inlined to avoid umd wrapper and peerDep warnings/installing stylis
+// since we use stylis after closure compiler
+var delimiter = '/*|*/';
+var needle = delimiter + '}';
+
+function toSheet(block) {
+  if (block) {
+    Sheet.current.insert(block + '}');
+  }
+}
+
+var Sheet = {
+  current: null
+};
+var ruleSheet = function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
+  switch (context) {
+    // property
+    case 1:
+      {
+        switch (content.charCodeAt(0)) {
+          case 64:
+            {
+              // @import
+              Sheet.current.insert(content + ';');
+              return '';
+            }
+          // charcode for l
+
+          case 108:
+            {
+              // charcode for b
+              // this ignores label
+              if (content.charCodeAt(2) === 98) {
+                return '';
+              }
+            }
+        }
+
+        break;
+      }
+    // selector
+
+    case 2:
+      {
+        if (ns === 0) return content + delimiter;
+        break;
+      }
+    // at-rule
+
+    case 3:
+      {
+        switch (ns) {
+          // @font-face, @page
+          case 102:
+          case 112:
+            {
+              Sheet.current.insert(selectors[0] + content);
+              return '';
+            }
+
+          default:
+            {
+              return content + (at === 0 ? delimiter : '');
+            }
+        }
+      }
+
+    case -2:
+      {
+        content.split(needle).forEach(toSheet);
+      }
+  }
+};
+var removeLabel = function removeLabel(context, content) {
+  if (context === 1 && // charcode for l
+  content.charCodeAt(0) === 108 && // charcode for b
+  content.charCodeAt(2) === 98 // this ignores label
+  ) {
+      return '';
+    }
+};
+
+var isBrowser$1 = typeof document !== 'undefined';
+var rootServerStylisCache = {};
+var getServerStylisCache = isBrowser$1 ? undefined : weakMemoize(function () {
+  var getCache = weakMemoize(function () {
+    return {};
+  });
+  var prefixTrueCache = {};
+  var prefixFalseCache = {};
+  return function (prefix) {
+    if (prefix === undefined || prefix === true) {
+      return prefixTrueCache;
+    }
+
+    if (prefix === false) {
+      return prefixFalseCache;
+    }
+
+    return getCache(prefix);
+  };
+});
+
+var createCache = function createCache(options) {
+  if (options === undefined) options = {};
+  var key = options.key || 'css';
+  var stylisOptions;
+
+  if (options.prefix !== undefined) {
+    stylisOptions = {
+      prefix: options.prefix
+    };
+  }
+
+  var stylis = new stylis_min(stylisOptions);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // $FlowFixMe
+    if (/[^a-z-]/.test(key)) {
+      throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
+    }
+  }
+
+  var inserted = {}; // $FlowFixMe
+
+  var container;
+
+  if (isBrowser$1) {
+    container = options.container || document.head;
+    var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
+    Array.prototype.forEach.call(nodes, function (node) {
+      var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe
+
+      attrib.split(' ').forEach(function (id) {
+        inserted[id] = true;
+      });
+
+      if (node.parentNode !== container) {
+        container.appendChild(node);
+      }
+    });
+  }
+
+  var _insert;
+
+  if (isBrowser$1) {
+    stylis.use(options.stylisPlugins)(ruleSheet);
+
+    _insert = function insert(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      Sheet.current = sheet;
+
+      if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {
+        var map = serialized.map;
+        Sheet.current = {
+          insert: function insert(rule) {
+            sheet.insert(rule + map);
+          }
+        };
+      }
+
+      stylis(selector, serialized.styles);
+
+      if (shouldCache) {
+        cache.inserted[name] = true;
+      }
+    };
+  } else {
+    stylis.use(removeLabel);
+    var serverStylisCache = rootServerStylisCache;
+
+    if (options.stylisPlugins || options.prefix !== undefined) {
+      stylis.use(options.stylisPlugins); // $FlowFixMe
+
+      serverStylisCache = getServerStylisCache(options.stylisPlugins || rootServerStylisCache)(options.prefix);
+    }
+
+    var getRules = function getRules(selector, serialized) {
+      var name = serialized.name;
+
+      if (serverStylisCache[name] === undefined) {
+        serverStylisCache[name] = stylis(selector, serialized.styles);
+      }
+
+      return serverStylisCache[name];
+    };
+
+    _insert = function _insert(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      var rules = getRules(selector, serialized);
+
+      if (cache.compat === undefined) {
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        if (shouldCache) {
+          cache.inserted[name] = true;
+        }
+
+        if ( // using === development instead of !== production
+        // because if people do ssr in tests, the source maps showing up would be annoying
+        process.env.NODE_ENV === 'development' && serialized.map !== undefined) {
+          return rules + serialized.map;
+        }
+
+        return rules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        // except when we don't want to cache it which was in Global but now
+        // is nowhere but we don't want to do a major right now
+        // and just in case we're going to leave the case here
+        // it's also not affecting client side bundle size
+        // so it's really not a big deal
+        if (shouldCache) {
+          cache.inserted[name] = rules;
+        } else {
+          return rules;
+        }
+      }
+    };
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    // https://esbench.com/bench/5bf7371a4cd7e6009ef61d0a
+    var commentStart = /\/\*/g;
+    var commentEnd = /\*\//g;
+    stylis.use(function (context, content) {
+      switch (context) {
+        case -1:
+          {
+            while (commentStart.test(content)) {
+              commentEnd.lastIndex = commentStart.lastIndex;
+
+              if (commentEnd.test(content)) {
+                commentStart.lastIndex = commentEnd.lastIndex;
+                continue;
+              }
+
+              throw new Error('Your styles have an unterminated comment ("/*" without corresponding "*/").');
+            }
+
+            commentStart.lastIndex = 0;
+            break;
+          }
+      }
+    });
+    stylis.use(function (context, content, selectors) {
+      switch (context) {
+        case -1:
+          {
+            var flag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
+            var unsafePseudoClasses = content.match(/(:first|:nth|:nth-last)-child/g);
+
+            if (unsafePseudoClasses && cache.compat !== true) {
+              unsafePseudoClasses.forEach(function (unsafePseudoClass) {
+                var ignoreRegExp = new RegExp(unsafePseudoClass + ".*\\/\\* " + flag + " \\*\\/");
+                var ignore = ignoreRegExp.test(content);
+
+                if (unsafePseudoClass && !ignore) {
+                  console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
+                }
+              });
+            }
+
+            break;
+          }
+      }
+    });
+  }
+
+  var cache = {
+    key: key,
+    sheet: new StyleSheet({
+      key: key,
+      container: container,
+      nonce: options.nonce,
+      speedy: options.speedy
+    }),
+    nonce: options.nonce,
+    inserted: inserted,
+    registered: {},
+    insert: _insert
+  };
+  return cache;
+};
+
+/* eslint-disable */
+// Inspired by https://github.com/garycourt/murmurhash-js
+// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+function murmur2(str) {
+  // 'm' and 'r' are mixing constants generated offline.
+  // They're not really 'magic', they just happen to work well.
+  // const m = 0x5bd1e995;
+  // const r = 24;
+  // Initialize the hash
+  var h = 0; // Mix 4 bytes at a time into the hash
+
+  var k,
+      i = 0,
+      len = str.length;
+
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+    k =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+    k ^=
+    /* k >>> r: */
+    k >>> 24;
+    h =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
+    /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Handle the last few bytes of the input array
+
+
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h =
+      /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Do a few final mixes of the hash to ensure the last few
+  // bytes are well-incorporated.
+
+
+  h ^= h >>> 13;
+  h =
+  /* Math.imul(h, m): */
+  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+function memoize(fn) {
+  var cache = {};
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
+var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+
+var isCustomProperty = function isCustomProperty(property) {
+  return property.charCodeAt(1) === 45;
+};
+
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
+var processStyleName = memoize(function (styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+});
+
+var processStyleValue = function processStyleValue(key, value) {
+  switch (key) {
+    case 'animation':
+    case 'animationName':
+      {
+        if (typeof value === 'string') {
+          return value.replace(animationRegex, function (match, p1, p2) {
+            cursor = {
+              name: p1,
+              styles: p2,
+              next: cursor
+            };
+            return p1;
+          });
+        }
+      }
+  }
+
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+    return value + 'px';
+  }
+
+  return value;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  var contentValuePattern = /(attr|calc|counters?|url)\(/;
+  var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
+  var oldProcessStyleValue = processStyleValue;
+  var msPattern = /^-ms-/;
+  var hyphenPattern = /-(.)/g;
+  var hyphenatedCache = {};
+
+  processStyleValue = function processStyleValue(key, value) {
+    if (key === 'content') {
+      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+      }
+    }
+
+    var processed = oldProcessStyleValue(key, value);
+
+    if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
+      hyphenatedCache[key] = true;
+      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
+        return _char.toUpperCase();
+      }) + "?");
+    }
+
+    return processed;
+  };
+}
+
+var shouldWarnAboutInterpolatingClassNameFromCss = true;
+
+function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
+  if (interpolation == null) {
+    return '';
+  }
+
+  if (interpolation.__emotion_styles !== undefined) {
+    if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
+      throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+    }
+
+    return interpolation;
+  }
+
+  switch (typeof interpolation) {
+    case 'boolean':
+      {
+        return '';
+      }
+
+    case 'object':
+      {
+        if (interpolation.anim === 1) {
+          cursor = {
+            name: interpolation.name,
+            styles: interpolation.styles,
+            next: cursor
+          };
+          return interpolation.name;
+        }
+
+        if (interpolation.styles !== undefined) {
+          var next = interpolation.next;
+
+          if (next !== undefined) {
+            // not the most efficient thing ever but this is a pretty rare case
+            // and there will be very few iterations of this generally
+            while (next !== undefined) {
+              cursor = {
+                name: next.name,
+                styles: next.styles,
+                next: cursor
+              };
+              next = next.next;
+            }
+          }
+
+          var styles = interpolation.styles + ";";
+
+          if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
+            styles += interpolation.map;
+          }
+
+          return styles;
+        }
+
+        return createStringFromObject(mergedProps, registered, interpolation);
+      }
+
+    case 'function':
+      {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
+        }
+
+        break;
+      }
+
+    case 'string':
+      if (process.env.NODE_ENV !== 'production') {
+        var matched = [];
+        var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
+          var fakeVarName = "animation" + matched.length;
+          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
+          return "${" + fakeVarName + "}";
+        });
+
+        if (matched.length) {
+          console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
+        }
+      }
+
+      break;
+  } // finalize string values (regular strings and functions interpolated into css calls)
+
+
+  if (registered == null) {
+    return interpolation;
+  }
+
+  var cached = registered[interpolation];
+
+  if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
+    console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
+    shouldWarnAboutInterpolatingClassNameFromCss = false;
+  }
+
+  return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
+}
+
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = '';
+
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i], false);
+    }
+  } else {
+    for (var _key in obj) {
+      var value = obj[_key];
+
+      if (typeof value !== 'object') {
+        if (registered != null && registered[value] !== undefined) {
+          string += _key + "{" + registered[value] + "}";
+        } else if (isProcessableValue(value)) {
+          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
+        }
+      } else {
+        if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
+          throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
+        }
+
+        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value, false);
+
+          switch (_key) {
+            case 'animation':
+            case 'animationName':
+              {
+                string += processStyleName(_key) + ":" + interpolated + ";";
+                break;
+              }
+
+            default:
+              {
+                if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
+
+                string += _key + "{" + interpolated + "}";
+              }
+          }
+        }
+      }
+    }
+  }
+
+  return string;
+}
+
+var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
+var sourceMapPattern;
+
+if (process.env.NODE_ENV !== 'production') {
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
+} // this is the cursor for keyframes
+// keyframes are stored on the SerializedStyles object as a linked list
+
+
+var cursor;
+var serializeStyles = function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+    return args[0];
+  }
+
+  var stringMode = true;
+  var styles = '';
+  cursor = undefined;
+  var strings = args[0];
+
+  if (strings == null || strings.raw === undefined) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings, false);
+  } else {
+    if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
+      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
+    }
+
+    styles += strings[0];
+  } // we start at 1 since we've already handled the first arg
+
+
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
+
+    if (stringMode) {
+      if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
+      }
+
+      styles += strings[i];
+    }
+  }
+
+  var sourceMap;
+
+  if (process.env.NODE_ENV !== 'production') {
+    styles = styles.replace(sourceMapPattern, function (match) {
+      sourceMap = match;
+      return '';
+    });
+  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+
+  labelPattern.lastIndex = 0;
+  var identifierName = '';
+  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += '-' + // $FlowFixMe we know it's not null
+    match[1];
+  }
+
+  var name = murmur2(styles) + identifierName;
+
+  if (process.env.NODE_ENV !== 'production') {
+    // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
+    return {
+      name: name,
+      styles: styles,
+      map: sourceMap,
+      next: cursor,
+      toString: function toString() {
+        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+      }
+    };
+  }
+
+  return {
+    name: name,
+    styles: styles,
+    next: cursor
+  };
+};
+
+var isBrowser = typeof document !== 'undefined';
+function getRegisteredStyles(registered, registeredStyles, classNames) {
+  var rawClassName = '';
+  classNames.split(' ').forEach(function (className) {
+    if (registered[className] !== undefined) {
+      registeredStyles.push(registered[className]);
+    } else {
+      rawClassName += className + " ";
+    }
+  });
+  return rawClassName;
+}
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  cache.registered[className] === undefined) {
+    cache.registered[className] = serialized.styles;
+  }
+
+  if (cache.inserted[serialized.name] === undefined) {
+    var stylesForSSR = '';
+    var current = serialized;
+
+    do {
+      var maybeStyles = cache.insert("." + className, current, cache.sheet, true);
+
+      if (!isBrowser && maybeStyles !== undefined) {
+        stylesForSSR += maybeStyles;
+      }
+
+      current = current.next;
+    } while (current !== undefined);
+
+    if (!isBrowser && stylesForSSR.length !== 0) {
+      return stylesForSSR;
+    }
+  }
+};
+
+function insertWithoutScoping(cache, serialized) {
+  if (cache.inserted[serialized.name] === undefined) {
+    return cache.insert('', serialized, cache.sheet, true);
+  }
+}
+
+function merge(registered, css, className) {
+  var registeredStyles = [];
+  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+
+  if (registeredStyles.length < 2) {
+    return className;
+  }
+
+  return rawClassName + css(registeredStyles);
+}
+
+var createEmotion = function createEmotion(options) {
+  var cache = createCache(options); // $FlowFixMe
+
+  cache.sheet.speedy = function (value) {
+    if (process.env.NODE_ENV !== 'production' && this.ctr !== 0) {
+      throw new Error('speedy must be changed before any rules are inserted');
+    }
+
+    this.isSpeedy = value;
+  };
+
+  cache.compat = true;
+
+  var css = function css() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var serialized = serializeStyles(args, cache.registered, undefined);
+    insertStyles(cache, serialized);
+    return cache.key + "-" + serialized.name;
+  };
+
+  var keyframes = function keyframes() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    var serialized = serializeStyles(args, cache.registered);
+    var animation = "animation-" + serialized.name;
+    insertWithoutScoping(cache, {
+      name: serialized.name,
+      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
+    });
+    return animation;
+  };
+
+  var injectGlobal = function injectGlobal() {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    var serialized = serializeStyles(args, cache.registered);
+    insertWithoutScoping(cache, serialized);
+  };
+
+  var cx = function cx() {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    return merge(cache.registered, css, classnames$1(args));
+  };
+
+  return {
+    css: css,
+    cx: cx,
+    injectGlobal: injectGlobal,
+    keyframes: keyframes,
+    hydrate: function hydrate(ids) {
+      ids.forEach(function (key) {
+        cache.inserted[key] = true;
+      });
+    },
+    flush: function flush() {
+      cache.registered = {};
+      cache.inserted = {};
+      cache.sheet.flush();
+    },
+    // $FlowFixMe
+    sheet: cache.sheet,
+    cache: cache,
+    getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
+    merge: merge.bind(null, cache.registered, css)
+  };
+};
+
+var classnames$1 = function classnames(args) {
+  var cls = '';
+
+  for (var i = 0; i < args.length; i++) {
+    var arg = args[i];
+    if (arg == null) continue;
+    var toAdd = void 0;
+
+    switch (typeof arg) {
+      case 'boolean':
+        break;
+
+      case 'object':
+        {
+          if (Array.isArray(arg)) {
+            toAdd = classnames(arg);
+          } else {
+            toAdd = '';
+
+            for (var k in arg) {
+              if (arg[k] && k) {
+                toAdd && (toAdd += ' ');
+                toAdd += k;
+              }
+            }
+          }
+
+          break;
+        }
+
+      default:
+        {
+          toAdd = arg;
+        }
+    }
+
+    if (toAdd) {
+      cls && (cls += ' ');
+      cls += toAdd;
+    }
+  }
+
+  return cls;
+};
+
+var _createEmotion = createEmotion(),
+    css = _createEmotion.css;
+
+/**
+ * These modes are ONLY intended to be internally used within the context of
+ * editing an experience inside of Contentful Studio. i.e. these modes
+ * intentionally do not include preview/delivery modes.
+ */
+var StudioCanvasMode;
+(function (StudioCanvasMode) {
+    StudioCanvasMode["READ_ONLY"] = "readOnlyMode";
+    StudioCanvasMode["EDITOR"] = "editorMode";
+    StudioCanvasMode["NONE"] = "none";
+})(StudioCanvasMode || (StudioCanvasMode = {}));
+var PostMessageMethods;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods || (PostMessageMethods = {}));
+
+var css_248z$6 = ".cf-heading {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$6);
+
+var css_248z$5 = ".cf-richtext {\n  white-space: pre-line;\n}\n\n.cf-richtext > *:first-child {\n  margin-top: 0;\n}\n\n.cf-richtext > *:last-child {\n  margin-bottom: 0;\n}\n";
+styleInject(css_248z$5);
+
+var css_248z$4 = ".cf-text {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$4);
+
+var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\nimg.cf-placeholder-image {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\nsvg.cf-placeholder-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\nsvg.cf-placeholder-icon path {\n  fill: var(--cf-color-gray400);\n}\n";
+styleInject(css_248z$3);
+
+var css_248z$2$1 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
+styleInject(css_248z$2$1);
+
+const Flex = reactExports.forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
+    return (React.createElement("div", { id: id, ref: ref, style: {
+            display: 'flex',
+            flex,
+            flexBasis,
+            flexShrink,
+            flexDirection,
+            gap,
+            justifyContent,
+            justifyItems,
+            justifySelf,
+            alignItems,
+            alignSelf,
+            alignContent,
+            order,
+            flexWrap,
+            flexGrow,
+            ...cssStyles,
+        }, className: className, onMouseEnter: onMouseEnter, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseLeave: onMouseLeave, onClick: onClick, ...props }, children));
+});
+Flex.displayName = 'Flex';
+
+var css_248z$1$1 = ".cf-divider {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.cf-divider::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  bottom: -5px;\n  right: -5px;\n  pointer-events: all;\n}\n";
+styleInject(css_248z$1$1);
+
+({
+    hr: css({
+        border: 'none',
+    }),
+});
+
+var css_248z$7 = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n  display: flex;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
+styleInject(css_248z$7);
+
+const ColumnWrapper = reactExports.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, style: {
+            ...(props.style || {}),
+            display: 'grid',
+            gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
+        } }, props.children));
+});
+ColumnWrapper.displayName = 'ColumnWrapper';
+
+const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
+const Assembly = (props) => {
+    if (props.editorMode) {
+        const { node, dragProps, ...editorModeProps } = props;
+        return props.renderDropzone(node, {
+            ...editorModeProps,
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            dragProps,
+        });
+    }
+    // Using a display contents so assembly content/children
+    // can appear as if they are direct children of the div wrapper's parent
+    return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
+};
+
+const useEntityStore = create$1((set) => ({
+    entityStore: new EditorModeEntityStore({ locale: 'en-US', entities: [] }),
+    areEntitiesFetched: false,
+    setEntitiesFetched(fetched) {
+        set({ areEntitiesFetched: fetched });
+    },
+    resetEntityStore(locale, entities = []) {
+        console.debug(`[experiences-sdk-react] Resetting entity store because the locale changed to '${locale}'.`);
+        const newEntityStore = new EditorModeEntityStore({ locale, entities });
+        set({
+            entityStore: newEntityStore,
+            areEntitiesFetched: false,
+        });
+        return newEntityStore;
+    },
+}));
+
+class DragState {
+    constructor() {
+        this.isDragStartedOnParent = false;
+        this.isDraggingItem = false;
+    }
+    get isDragging() {
+        return this.isDraggingItem;
+    }
+    get isDraggingOnParent() {
+        return this.isDragStartedOnParent;
+    }
+    updateIsDragging(isDraggingItem) {
+        this.isDraggingItem = isDraggingItem;
+    }
+    updateIsDragStartedOnParent(isDragStartedOnParent) {
+        this.isDragStartedOnParent = isDragStartedOnParent;
+    }
+    resetState() {
+        this.isDraggingItem = false;
+        this.isDragStartedOnParent = false;
+    }
+}
+
+class SimulateDnD extends DragState {
+    constructor() {
+        super();
+        this.draggingElement = null;
+    }
+    setupDrag() {
+        this.updateIsDragStartedOnParent(true);
+    }
+    startDrag(coordX, coordY) {
+        this.draggingElement = document.getElementById(NEW_COMPONENT_ID);
+        this.updateIsDragging(true);
+        this.simulateMouseEvent(coordX, coordY, 'mousedown');
+    }
+    updateDrag(coordX, coordY) {
+        if (!this.draggingElement) {
+            this.draggingElement = document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`);
+        }
+        this.simulateMouseEvent(coordX, coordY);
+    }
+    endDrag(coordX, coordY) {
+        this.simulateMouseEvent(coordX, coordY, 'mouseup');
+        this.reset();
+    }
+    reset() {
+        this.draggingElement = null;
+        this.resetState();
+    }
+    simulateMouseEvent(coordX, coordY, eventName = 'mousemove') {
+        if (!this.draggingElement) {
+            return;
+        }
+        const options = {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            pageX: 0,
+            pageY: 0,
+            clientX: coordX,
+            clientY: coordY,
+        };
+        const event = new MouseEvent(eventName, options);
+        this.draggingElement.dispatchEvent(event);
+    }
+}
+var SimulateDnD$1 = new SimulateDnD();
+
+function useEditorSubscriber() {
     const entityStore = useEntityStore((state) => state.entityStore);
     const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
     const setEntitiesFetched = useEntityStore((state) => state.setEntitiesFetched);
@@ -57760,18 +59433,29 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         renderDropzone,
     ]);
     const cfStyles = reactExports.useMemo(() => buildCfStyles(props), [props]);
-    const sizeStyles = {
-        width: cfStyles.width,
-        maxWidth: cfStyles.maxWidth,
-        maxHeight: cfStyles.maxHeight,
-    };
     const isAssemblyBlock = node.type === 'assemblyBlock';
     const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS.columns.id;
     const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
+    // Move size styles to the wrapping div and override the component styles
+    const overrideStyles = {};
+    const wrapperStyles = {
+        width: cfStyles.width,
+        maxWidth: cfStyles.maxWidth,
+    };
+    if (!isStructureComponent) {
+        if (cfStyles.height) {
+            wrapperStyles.height = cfStyles.height;
+            overrideStyles.height = '100%';
+        }
+        if (cfStyles.width) {
+            overrideStyles.width = '100%';
+        }
+    }
     // Styles that will be applied to the component element
     const componentClass = useEditorModeClassName({
         styles: {
             ...cfStyles,
+            ...overrideStyles,
             ...(isEmptyZone &&
                 isStructureWithRelativeHeight(node?.data.blockId, cfStyles.height) && {
                 minHeight: EMPTY_CONTAINER_HEIGHT,
@@ -57785,9 +59469,6 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         },
         nodeId: node.data.id,
     });
-    //List explicit style props that will end up being passed to the component
-    const stylesToKeep = ['cfImageAsset'];
-    const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
     const componentProps = {
         'data-cf-node-id': node.data.id,
         'data-cf-node-block-id': node.data.blockId,
@@ -57796,10 +59477,10 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         editorMode: true,
         node,
         renderDropzone,
-        ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName']),
+        ...sanitizeNodeProps(props),
         ...(definition?.children ? { children: renderDropzone(node) } : {}),
     };
-    return { componentProps, sizeStyles };
+    return { componentProps, wrapperStyles };
 };
 const addExtraDropzonePadding = (padding) => padding
     .split(' ')
@@ -57979,7 +59660,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         return registration;
     }, [node]);
     const componentId = node.data.id;
-    const { componentProps, sizeStyles } = useComponentProps({
+    const { componentProps, wrapperStyles } = useComponentProps({
         node,
         areEntitiesFetched,
         resolveDesignValue,
@@ -58005,7 +59686,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
             return element;
         }
         const { children, innerRef, Tag = 'div', ToolTipAndPlaceholder, style, ...rest } = dragProps;
-        return (React.createElement(Tag, { ...rest, style: { ...style, ...sizeStyles }, ref: (refNode) => {
+        return (React.createElement(Tag, { ...rest, style: { ...style, ...wrapperStyles }, ref: (refNode) => {
                 if (innerRef && refNode)
                     innerRef(refNode);
             } },