@makeswift/runtime 0.0.17 → 0.0.18

package/dist/index.es.js

@@ -35,26 +35,29 @@ var __publicField = (obj, key, value) => {
 };
 var _ea;
 import * as React from "react";
-import { forwardRef, createContext, useContext, useMemo, useState, useLayoutEffect, useCallback, useEffect, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, Component, memo } from "react";
+import { forwardRef, createContext, useContext, useMemo, useEffect, useLayoutEffect, useState, useCallback, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, Component, memo } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
-import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
-import { a as createDocumentReference, g as getComponentPropControllerDescriptors, b as getIsInBuilder, d as configureStore, e as getElementId, f as getReactComponent, h as getDocument, i as isElementReference, c as createDocument } from "./react-page.es.js";
+import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getComponentPropControllerDescriptors, l as getIsInBuilder, m as configureStore, n as getElementId, o as getReactComponent, p as getDocument, c as createDocument } from "./react-page.es.js";
 import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
 import styled, { css, keyframes, createGlobalStyle } from "styled-components";
 import { useReducedMotion, useAnimation, motion } from "framer-motion";
 import { cx, css as css$1, cache } from "@emotion/css";
-import { getDataFromTree } from "@apollo/client/react/ssr";
+import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
+import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { KeyUtils, Value } from "slate";
-import uuid from "uuid/v4";
+import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
+import { S as ShapeControlType, L as ListControlType, C as ComboboxControlType } from "./shape.es.js";
+import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
+import { T as Types, E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText, V as Video$1, t as WidthControlValueFormats } from "./descriptors.es.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import parse$1 from "html-react-parser";
 import Head from "next/head";
-import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText, V as Video$1, T as Types, t as WidthControlValueFormats } from "./descriptors.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import NextLink from "next/link";
 import { useGesture } from "react-use-gesture";
 import { wrap } from "@popmotion/popcorn";
+import uuid from "uuid/v4";
 import NextImage from "next/image";
 import { Field as Field$1, getIn, Formik } from "formik";
 import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
@@ -65,9 +68,8 @@ import ipsum from "corporate-ipsum";
 import { isHotkey } from "is-hotkey";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
-import { I as ImageControlType, C as ColorControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, b as CheckboxControlType } from "./text-input.es.js";
-import { L as ListControlType, S as ShapeControlType, C as ComboboxControlType } from "./shape.es.js";
-import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
+import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
+import { I as ImageControlType, C as ColorControlType } from "./image.es.js";
 import { findDOMNode } from "react-dom";
 const PlaceholderBase$1 = styled.div`
   width: 100%;
@@ -216,9 +218,165 @@ const TABLE_BY_ID = gql`
     }
   }
 `;
+const ELEMENT_REFERENCE_GLOBAL_ELEMENT = gql`
+  query ElementReferenceGlobalElement($id: ID!) {
+    globalElement(id: $id) {
+      id
+      data
+    }
+  }
+`;
+const INTROSPECTION_QUERY = gql`
+  query Introspection(
+    $swatchIds: [ID!]!
+    $fileIds: [ID!]!
+    $pageIds: [ID!]!
+    $typographyIds: [ID!]!
+    $tableIds: [ID!]!
+  ) {
+    swatches(ids: $swatchIds) {
+      id
+      hue
+      saturation
+      lightness
+    }
+
+    files(ids: $fileIds) {
+      id
+      name
+      publicUrl
+      extension
+      dimensions {
+        width
+        height
+      }
+    }
+
+    pagePathnamesById(ids: $pageIds) {
+      id
+      pathname
+    }
+
+    typographies(ids: $typographyIds) {
+      ...Typography
+    }
+
+    tables(ids: $tableIds) {
+      id
+      name
+      columns {
+        id
+        name
+        ... on MultipleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+        ... on SingleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+
+  ${TYPOGRAPHY_FRAGMENT}
+`;
 function isNonNullable(value) {
   return value != null;
 }
+async function introspect(element, client, store) {
+  var _a, _b, _c;
+  const descriptors = getPropControllerDescriptors(store.getState());
+  const swatchIds = /* @__PURE__ */ new Set();
+  const fileIds = /* @__PURE__ */ new Set();
+  const typographyIds = /* @__PURE__ */ new Set();
+  const tableIds = /* @__PURE__ */ new Set();
+  const pageIds = /* @__PURE__ */ new Set();
+  const remaining = [element];
+  let current;
+  while (current = remaining.pop()) {
+    let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
+      Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
+        getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          swatchIds.add(swatchId);
+        });
+        getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+        getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+        getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+        getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+        getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        if (descriptor.type === ShapeControlType) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.config.type, prop);
+        }
+        if (descriptor.type === ListControlType) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          prop.forEach((item) => {
+            getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
+          });
+        }
+        if (descriptor.type === Types.Shape) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.options.type, prop);
+        }
+        if (descriptor.type === Types.List) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          prop.forEach((item) => {
+            getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
+          });
+        }
+      });
+    };
+    let element2;
+    if (isElementReference(current)) {
+      const query = await client.query({
+        query: ELEMENT_REFERENCE_GLOBAL_ELEMENT,
+        variables: { id: current.value }
+      });
+      const elementData = (_b = (_a = query.data) == null ? void 0 : _a.globalElement) == null ? void 0 : _b.data;
+      if (elementData == null)
+        continue;
+      element2 = elementData;
+    } else {
+      element2 = current;
+    }
+    const elementDescriptors = descriptors.get(element2.type);
+    if (elementDescriptors == null)
+      continue;
+    getResourcesFromElementDescriptors(elementDescriptors, element2.props);
+  }
+  const typographiesResult = await client.query({
+    query: TYPOGRAPHIES_BY_ID,
+    variables: { ids: [...typographyIds] }
+  });
+  (_c = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c.typographies.forEach((typography) => {
+    typography.style.forEach((style) => {
+      var _a2;
+      const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
+      if (swatchId != null)
+        swatchIds.add(swatchId);
+    });
+  });
+  return {
+    swatchIds: [...swatchIds],
+    fileIds: [...fileIds],
+    typographyIds: [...typographyIds],
+    tableIds: [...tableIds],
+    pageIds: [...pageIds]
+  };
+}
 const typePolicies = {
   Query: {
     fields: {
@@ -306,10 +464,6 @@ const typePolicies = {
     }
   }
 };
-const PrefetchContext = createContext(false);
-function useIsPrefetching() {
-  return useContext(PrefetchContext);
-}
 function createApolloClient({
   uri,
   cacheData
@@ -320,7 +474,10 @@ function createApolloClient({
   if (cacheData)
     cache2.restore(cacheData);
   return new ApolloClient({
-    uri,
+    link: new BatchHttpLink({
+      uri,
+      batchMax: 100
+    }),
     cache: cache2
   });
 }
@@ -336,17 +493,20 @@ class MakeswiftClient {
     });
   }
   async prefetch(element) {
-    const id = uuid();
-    await getDataFromTree(/* @__PURE__ */ jsx(PrefetchContext.Provider, {
-      value: true,
-      children: /* @__PURE__ */ jsx(RuntimeProvider, {
-        client: this,
-        rootElements: /* @__PURE__ */ new Map([[id, element]]),
-        children: /* @__PURE__ */ jsx(DocumentReference, {
-          documentReference: createDocumentReference(id)
+    const introspectionData = await introspect(element, this.apolloClient, storeContextDefaultValue);
+    const res = await this.apolloClient.query({
+      query: INTROSPECTION_QUERY,
+      variables: introspectionData
+    });
+    res.data.pagePathnamesById.forEach((pagePathnameSlice) => {
+      const id = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
+      this.apolloClient.cache.writeFragment({
+        fragment: PagePathnameSliceFragmentDoc,
+        data: __spreadProps(__spreadValues({}, pagePathnameSlice), {
+          id
         })
-      })
-    }));
+      });
+    });
     KeyUtils.resetGenerator();
     return this.apolloClient.cache.extract();
   }
@@ -628,10 +788,12 @@ const getDeviceMediaQuery = (device) => {
   }
   return parts.join(" and ");
 };
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 function useMediaQuery(responsiveValue) {
   const [deviceId, setDeviceId] = useState(DEVICES[0].id);
   const { value } = findDeviceOverride(responsiveValue, deviceId) || {};
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (responsiveValue == null || window == null)
       return () => {
       };
@@ -1146,7 +1308,7 @@ function Parallax(_g2) {
   const container = useRef(null);
   const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
   const lastScrollParentScrollTop = useRef(0);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!container.current || strength == null || strength === 0)
       return void 0;
     const containerDocument = container.current.ownerDocument;
@@ -1260,7 +1422,7 @@ function BackgroundVideo({
   const [ready, setReady] = useState(false);
   const [scale, setScale] = useState(1);
   const container = useRef(null);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const {
       current: containerEl
     } = container;
@@ -1367,9 +1529,6 @@ const BackgroundsContainer$1 = styled(Container$c)`
 function Backgrounds({
   backgrounds
 }) {
-  const isPrefetching = useIsPrefetching();
-  if (isPrefetching)
-    return /* @__PURE__ */ jsx(Fragment, {});
   if (backgrounds == null)
     return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsx(Fragment, {
@@ -1504,7 +1663,9 @@ var BackgroundsContainer = forwardRef(function BackgroundsContainer2(_i, ref) {
     }), Children.only(children)]
   }));
 });
-const StyledBackgroundsContainer = styled(BackgroundsContainer)`
+const StyledBackgroundsContainer = styled(BackgroundsContainer).withConfig({
+  shouldForwardProp: (prop) => !["margin", "borderRadius", "alignSelf"].includes(prop.toString())
+})`
   display: flex;
   ${cssMargin()}
   ${cssBorderRadius()}
@@ -1512,7 +1673,9 @@ const StyledBackgroundsContainer = styled(BackgroundsContainer)`
   alignSelf
 }))}
 `;
-const Grid$1 = styled(motion.div)`
+const Grid$1 = styled(motion.div).withConfig({
+  shouldForwardProp: (prop) => !["padding", "border", "boxShadow", "alignContent"].includes(prop)
+})`
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -1523,7 +1686,9 @@ const Grid$1 = styled(motion.div)`
   alignContent
 }))}
 `;
-const GridItem$2 = styled(motion.div)`
+const GridItem$2 = styled(motion.div).withConfig({
+  shouldForwardProp: (prop) => !["grid", "alignItems", "index", "columnGap", "rowGap"].includes(prop)
+})`
   display: flex;
 
   /* IE11 doesn't recognize space-between and treats it as stretch, so we fall back to flex-start */
@@ -1951,7 +2116,9 @@ function responsiveWidth(widthData, defaultValue = "100%") {
     width: typeof width === "object" ? `${width.value}${width.unit}` : width
   })));
 }
-const StyledButton$1 = styled(Link)`
+const StyledButton$1 = styled(Link).withConfig({
+  shouldForwardProp: (prop) => !["margin", "variant", "shape", "size", "textColor", "color", "textStyle"].includes(prop.toString())
+})`
   display: table;
   border: 0;
   outline: 0;
@@ -1997,7 +2164,6 @@ const StyledButton$1 = styled(Link)`
     large: "16px 20px"
   }[size]};
           font-size: ${`${fontSize.value}${fontSize.unit}`};
-
           ${{
     flat: css`
               background: ${colorToString(color)};
@@ -2140,7 +2306,7 @@ const StyledButton$1 = styled(Link)`
   }[variant]}
         `;
 })}
-    ${cssTextStyle()}
+  ${cssTextStyle()}
 `;
 const Button$1 = forwardRef(function Button2(_m, ref) {
   var _n = _m, {
@@ -2312,7 +2478,9 @@ function imageSizes(width) {
     return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`;
   }).filter((size) => size != null).reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize);
 }
-const ImageContainer = styled.div`
+const ImageContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "padding", "border", "borderRadius", "boxShadow", "opacity", "link", "dimensions"].includes(prop.toString())
+})`
   line-height: 0;
   overflow: hidden;
   ${cssMargin()}
@@ -2349,7 +2517,6 @@ const ImageComponent = forwardRef(function Image2({
   const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder2.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = useState(null);
   const isInBuilder = useIsInBuilder();
-  const isPrefetching = useIsPrefetching();
   useEffect(() => {
     if (dataDimensions)
       return;
@@ -2370,8 +2537,6 @@ const ImageComponent = forwardRef(function Image2({
   if (!dimensions)
     return null;
   const widthClass = css$1(responsiveWidth(width, `${dimensions.width}px`));
-  if (isPrefetching)
-    return null;
   return /* @__PURE__ */ jsx(ImageContainer, {
     as: link ? Link : "div",
     link,
@@ -2450,7 +2615,9 @@ const Container$b = styled.div`
   position: relative;
   height: 100%;
 `;
-const Wrapper = styled.div`
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop)
+})`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -2460,7 +2627,9 @@ const Wrapper = styled.div`
     outline: 0;
   }
 `;
-const Arrow = styled.div`
+const Arrow = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["background"].includes(prop)
+})`
   padding: 10px;
   border-radius: 50%;
   outline: 0;
@@ -2488,7 +2657,9 @@ const Arrow = styled.div`
     stroke: currentColor;
   }
 `;
-const Slop = styled.div`
+const Slop = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2507,7 +2678,9 @@ const Slop = styled.div`
         color: ${colorToString(color)};
       `)}
 `;
-const Slide = styled(motion.div)`
+const Slide = styled(motion.div).withConfig({
+  shouldForwardProp: (prop) => !["pageSize", "alignItems"].includes(prop)
+})`
   display: flex;
   ${(p) => cssMediaRules([p.pageSize], ([pageSize = 1]) => css`
         flex-basis: ${100 / pageSize}%;
@@ -2519,7 +2692,9 @@ const Slide = styled(motion.div)`
   alignItems
 }))}
 `;
-const Reel = styled(motion.div)`
+const Reel = styled(motion.div).withConfig({
+  shouldForwardProp: (prop) => !["gap"].includes(prop)
+})`
   display: flex;
   position: relative;
   flex-wrap: nowrap;
@@ -2538,7 +2713,9 @@ const Page$1 = styled(motion.div)`
   position: relative;
   width: 100%;
 `;
-const LeftSlop = styled(Slop)`
+const LeftSlop = styled(Slop).withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop)
+})`
   ${(p) => cssMediaRules([p.position], ([position = "inside"]) => {
   switch (position) {
     case "inside":
@@ -2563,7 +2740,9 @@ const LeftSlop = styled(Slop)`
     }
   }
 `;
-const RightSlop = styled(Slop)`
+const RightSlop = styled(Slop).withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop)
+})`
   ${(p) => cssMediaRules([p.position], ([position = "inside"]) => {
   switch (position) {
     case "inside":
@@ -2591,7 +2770,9 @@ const RightSlop = styled(Slop)`
 const ClipMask = styled.div`
   overflow: hidden;
 `;
-const Dots = styled.div`
+const Dots = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
   display: ${(props) => props.hidden ? "none" : "flex"};
   justify-content: center;
   margin-top: 20px;
@@ -2606,7 +2787,9 @@ const Dots = styled.div`
         color: ${colorToString(color)};
       `)}
 `;
-const Dot = styled.div`
+const Dot = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})`
   position: relative;
   margin: 0 6px;
   border-radius: 50%;
@@ -2966,7 +3149,9 @@ const Segment = styled.div`
   flex: 1;
   text-align: center;
 `;
-const Container$a = styled.div`
+const Container$a = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "variant", "size", "shape", "gap", "labelColor", "numberFont", "numberColor", "blockColor", "labelFont"].includes(prop)
+})`
   display: flex;
   ${cssMargin()}
   ${(p) => cssMediaRules([p.size], ([size = "medium"]) => {
@@ -3062,7 +3247,7 @@ const Container$a = styled.div`
                   z-index: 1;
                 }
 
-                :before {
+                ::before {
                   content: '';
                   position: absolute;
                   top: 0;
@@ -3074,7 +3259,7 @@ const Container$a = styled.div`
                   background: ${colorToString(blockColor)};
                 }
 
-                :after {
+                ::after {
                   content: '';
                   position: absolute;
                   left: 0;
@@ -3105,7 +3290,7 @@ const Container$a = styled.div`
                   z-index: 1;
                 }
 
-                :before {
+                ::before {
                   content: '';
                   position: absolute;
                   top: 50%;
@@ -3385,7 +3570,9 @@ function registerComponent$8(runtime) {
     }
   });
 }
-const IE11MinHeightContainer = styled.div`
+const IE11MinHeightContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop)
+})`
   display: flex;
   width: 100%;
   ${cssMargin()}
@@ -3397,7 +3584,9 @@ const Container$9 = styled.div`
   min-height: 40px;
   width: 100%;
 `;
-const Line = styled.div`
+const Line = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["variant", "color", "thickness"].includes(prop)
+})`
   ${(p) => cssMediaRules([p.variant, p.thickness, p.color], ([variant = "solid", thickness = {
   value: 1,
   unit: "px"
@@ -3509,7 +3698,9 @@ function registerComponent$7(runtime) {
     }
   });
 }
-const Container$8 = styled.div`
+const Container$8 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop)
+})`
   min-height: 15px;
   ${cssMargin()}
 `;
@@ -3545,7 +3736,7 @@ const Embed = forwardRef(function Embed2({
 }, ref) {
   const [container, setContainer] = useState(null);
   const [shouldRender, setShouldRender] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setShouldRender(true);
   }, []);
   useImperativeHandle(ref, () => container, [container]);
@@ -3793,7 +3984,9 @@ function getSizeHeight$1(size) {
       throw new Error(`Invalid form size "${size}"`);
   }
 }
-const Base$2 = styled.input`
+const Base$2 = styled.input.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["shape", "size", "contrast", "brandColor", "error"].includes(prop.toString()) && defaultValidator(prop)
+})`
   ${cssField()}
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
         min-height: ${getSizeHeight$1(size)}px;
@@ -3823,7 +4016,9 @@ var Input$2 = forwardRef(function Input(_o, ref) {
     brandColor
   }));
 });
-const Container$7 = styled.div`
+const Container$7 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop.toString())
+})`
   display: flex;
   flex-direction: column;
   ${cssMargin()};
@@ -3907,7 +4102,9 @@ function getContrastColor(contrast) {
       throw new Error(`Invalid form contrast "${contrast}"`);
   }
 }
-const Base$1 = styled.label`
+const Base$1 = styled.label.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["contrast", "size", "textStyle", "textColor"].includes(prop.toString()) && defaultValidator(prop)
+})`
   display: block;
   margin: 0 0 0.25em 0;
   ${cssTextStyle()}
@@ -3958,7 +4155,9 @@ var SingleLineTextTableField = forwardRef(function SingleLineTextTableField2(_q,
     }))]
   });
 });
-const Base = styled.textarea`
+const Base = styled.textarea.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString()) && defaultValidator(prop)
+})`
   resize: vertical;
   ${cssField()}
 `;
@@ -4024,14 +4223,18 @@ function getCheckmarkColor$1({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$6 = styled.div`
+const Container$6 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
 `;
-const FakeCheckbox = styled.div`
+const FakeCheckbox = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop)
+})`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -4044,7 +4247,9 @@ const FakeCheckbox = styled.div`
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
 `;
-const HiddenCheckbox = styled.input`
+const HiddenCheckbox = styled.input.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["size", "brandColor", "contrast", "error"].includes(prop) && defaultValidator(prop)
+})`
   position: absolute;
   opacity: 0;
   width: 100%;
@@ -4287,14 +4492,18 @@ function getCheckmarkColor({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$5 = styled.div`
+const Container$5 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
+})`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
 `;
-const FakeRadioButton = styled.div`
+const FakeRadioButton = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop.toString())
+})`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -4307,7 +4516,9 @@ const FakeRadioButton = styled.div`
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
 `;
-const HiddenRadioButton = styled.input.attrs({
+const HiddenRadioButton = styled.input.withConfig({
+  shouldForwardProp: (prop) => !["brandColor", "contrast", "error"].includes(prop.toString())
+}).attrs({
   type: "radio"
 })`
   position: absolute;
@@ -4472,7 +4683,9 @@ var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGrou
     }, option.id))]
   });
 });
-const Container$4 = styled.div`
+const Container$4 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString())
+})`
   ${cssField()}
   display: flex;
   align-items: center;
@@ -4685,7 +4898,9 @@ var NumberTableField = forwardRef(function NumberTableField2(_Q, ref) {
     }))]
   });
 });
-const Label = styled.div`
+const Label = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
+})`
   display: block;
   max-width: 120px;
   min-width: 60px;
@@ -4698,7 +4913,9 @@ const Label = styled.div`
         max-height: ${0.5 * getSizeHeight(size)}px;
       `)}
 `;
-const Input2 = styled.div`
+const Input2 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["shape", "size"].includes(prop.toString())
+})`
   display: block;
   width: 100%;
   border-width: 2px;
@@ -4916,7 +5133,9 @@ const Alignments = {
   CENTER: "center",
   RIGHT: "right"
 };
-const GridForm = styled.form`
+const GridForm = styled.form.withConfig({
+  shouldForwardProp: (prop) => !["size", "width", "margin"].includes(prop)
+})`
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -4925,7 +5144,9 @@ const GridForm = styled.form`
       `)}
   ${cssMargin()}
 `;
-const GridItem$1 = styled.div`
+const GridItem$1 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop)
+})`
   align-self: flex-end;
   flex-direction: column;
   ${cssGridItem()}
@@ -4942,7 +5163,9 @@ function getAlignmentMargin(alignment) {
 }
 const StyledButton = styled((props) => /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, props), {
   as: "button"
-})))`
+}))).withConfig({
+  shouldForwardProp: (prop) => !["alignment"].includes(prop.toString())
+})`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5445,7 +5668,9 @@ const GutterContainer = styled.div`
         padding-right: ${p.last ? "0px" : `${gutter.value / 2}${gutter.unit}`};
       `)}
 `;
-const PlaceholderLink$1 = styled.div`
+const PlaceholderLink$1 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "button"].includes(prop.toString())
+})`
   width: ${(props) => props.width}px;
   height: ${(props) => props.button === true ? 32 : 8}px;
   background-color: #a1a8c2;
@@ -5573,7 +5798,9 @@ var SvgChevronDown8 = function SvgChevronDown82(props) {
   })));
 };
 const DROP_DOWN_MENU_WIDTH = 200;
-const DropDownMenu$1 = styled.div`
+const DropDownMenu$1 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop.toString())
+})`
   position: absolute;
   top: 100%;
   left: ${(props) => props.position === "left" ? 0 : "auto"};
@@ -5610,7 +5837,9 @@ const DropDownContainer = styled.div`
     animation: ${dropIn} 0.25s;
   }
 `;
-const StyledDropDownItem = styled(Link)`
+const StyledDropDownItem = styled(Link).withConfig({
+  shouldForwardProp: (prop) => !["color", "textStyle"].includes(prop.toString())
+})`
   display: block;
   text-decoration: none;
   line-height: 1.4;
@@ -5668,7 +5897,7 @@ function DropDownButton(_U) {
   ]);
   const container = useRef(null);
   const [position, setPosition] = useState("left");
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (container.current && container.current.ownerDocument.defaultView.innerWidth < container.current.offsetLeft + DROP_DOWN_MENU_WIDTH) {
       setPosition("right");
     } else {
@@ -5735,7 +5964,9 @@ var SvgTimes16 = function SvgTimes162(props) {
     d: "M13.707 3.707a1 1 0 0 0-1.414-1.414L8 6.586 3.707 2.293a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L8 9.414l4.293 4.293a1 1 0 0 0 1.414-1.414L9.414 8l4.293-4.293Z"
   })));
 };
-const DropDownMenu = styled.div`
+const DropDownMenu = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["open"].includes(prop.toString())
+})`
   display: ${(props) => props.open ? "flex" : "none"};
   flex-direction: column;
   padding: 8px;
@@ -5743,7 +5974,9 @@ const DropDownMenu = styled.div`
 const ButtonLink$1 = styled(Button$1)`
   margin: 8px 0;
 `;
-const StyledLink$2 = styled(Link)`
+const StyledLink$2 = styled(Link).withConfig({
+  shouldForwardProp: (prop) => !["textStyle", "color"].includes(prop.toString())
+})`
   text-decoration: none;
   line-height: 1.4;
   padding: 8px 16px;
@@ -5834,7 +6067,9 @@ function NavigationButton$1(props) {
 const ButtonLink = styled(NavigationButton$1)`
   margin: 8px 0;
 `;
-const Container$3 = styled.div`
+const Container$3 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["animation", "backgroundColor", "open"].includes(prop.toString())
+})`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -5866,7 +6101,9 @@ const Container$3 = styled.div`
 }[animation]}
           `)}
 `;
-const CloseIconContainer = styled.button`
+const CloseIconContainer = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop.toString())
+})`
   position: absolute;
   top: 15px;
   right: 15px;
@@ -5914,7 +6151,9 @@ function MobileMenu({
     })]
   });
 }
-const Container$2 = styled.nav`
+const Container$2 = styled.nav.withConfig({
+  shouldForwardProp: (prop) => !["margin", "textStyle", "gutter"].includes(prop.toString())
+})`
   display: flex;
   align-items: center;
   ${cssMargin()}
@@ -5926,7 +6165,9 @@ const Container$2 = styled.nav`
         gap: ${gutter.value}${gutter.unit};
       `)}
 `;
-const LinksContainer = styled.div`
+const LinksContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["alignment", "mobileMenuAnimation"].includes(prop.toString())
+})`
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -5935,7 +6176,9 @@ const LinksContainer = styled.div`
         justify-content: ${alignment};
       `)}
 `;
-const OpenIconContainer = styled.button`
+const OpenIconContainer = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["mobileMenuAnimation", "alignment", "color"].includes(prop.toString())
+})`
   display: none;
   flex-grow: 1;
   align-items: center;
@@ -6216,7 +6459,9 @@ const Grid = styled.div`
   flex-wrap: wrap;
   width: 100%;
 `;
-const GridItem = styled.div`
+const GridItem = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop.toString())
+})`
   display: flex;
   align-items: flex-start;
   ${cssGridItem()}
@@ -6947,7 +7192,9 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container$1 = styled.div`
+const Container$1 = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin", "alignment"].includes(prop.toString())
+})`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -6956,7 +7203,9 @@ const Container$1 = styled.div`
         justify-content: ${alignment};
       `)}
 `;
-const StyledLink$1 = styled(Link)`
+const StyledLink$1 = styled(Link).withConfig({
+  shouldForwardProp: (prop) => !["brandColor", "shape", "size", "hoverStyle", "fill", "backgroundColor"].includes(prop.toString())
+})`
   display: block;
   color: ${(props) => props.brandColor};
   transition: transform, opacity 0.18s;
@@ -7524,7 +7773,9 @@ const RichTextEditor = styled(forwardRef(function RichTextEditor2(_ca, ref) {
     margin: 0;
   }
 `;
-const StyledRichTextEditor = styled(RichTextEditor)`
+const StyledRichTextEditor = styled(RichTextEditor).withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop.toString())
+})`
   ${cssMargin()}
 `;
 const defaultText = {
@@ -7708,7 +7959,9 @@ function registerComponent$1(runtime) {
     }
   });
 }
-const Container = styled.div`
+const Container = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "borderRadius"].includes(prop.toString())
+})`
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -8778,7 +9031,7 @@ const FindDomNode = forwardRef(function FindDomNode2(props, ref) {
     innerRef: ref
   }));
 });
-const contextDefaultValue = configureStore();
+const storeContextDefaultValue = configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -8801,8 +9054,9 @@ function createReactRuntime(store) {
     }
   };
 }
-const ReactRuntime = createReactRuntime(contextDefaultValue);
-const Context = createContext(contextDefaultValue);
+const ReactRuntime = createReactRuntime(storeContextDefaultValue);
+registerBuiltinComponents(ReactRuntime);
+const Context = createContext(storeContextDefaultValue);
 function RuntimeProvider({
   client,
   children,
@@ -8810,16 +9064,11 @@ function RuntimeProvider({
 }) {
   const [store, setStore] = useState(() => {
     const store2 = configureStore({
-      preloadedState: contextDefaultValue.getState(),
+      preloadedState: storeContextDefaultValue.getState(),
       rootElements
     });
-    const runtime = createReactRuntime(store2);
-    registerBuiltinComponents(runtime);
     return store2;
   });
-  useEffect(() => {
-    return registerBuiltinComponents(createReactRuntime(store));
-  }, [store]);
   useEffect(() => {
     var _a;
     const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(registerDocumentEffect(createDocument(documentKey, rootElement))));
@@ -8942,14 +9191,7 @@ const ElementReference = memo(forwardRef(function ElementReference2({
   const {
     error,
     data
-  } = useQuery(gql`
-        query ElementReferenceGlobalElement($id: ID!) {
-          globalElement(id: $id) {
-            id
-            data
-          }
-        }
-      `, {
+  } = useQuery(ELEMENT_REFERENCE_GLOBAL_ELEMENT, {
     variables: {
       id: elementReference.value
     }