@makeswift/runtime 0.0.17 → 0.0.18

package/dist/index.cjs.js

@@ -37,24 +37,27 @@ var __publicField = (obj, key, value) => {
 var _ea;
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
-var client = require("@apollo/client");
 var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var styled = require("styled-components");
 var framerMotion = require("framer-motion");
 var css = require("@emotion/css");
-var ssr = require("@apollo/client/react/ssr");
+var client = require("@apollo/client");
+var batchHttp = require("@apollo/client/link/batch-http");
 var slate = require("slate");
-var uuid = require("uuid/v4");
+var graphql = require("./graphql.cjs.js");
+var shape = require("./shape.cjs.js");
+var style = require("./style.cjs.js");
+var descriptors = require("./descriptors.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var parse = require("html-react-parser");
 var Head = require("next/head");
-var descriptors = require("./descriptors.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var NextLink = require("next/link");
 var reactUseGesture = require("react-use-gesture");
 var popcorn = require("@popmotion/popcorn");
+var uuid = require("uuid/v4");
 var NextImage = require("next/image");
 var formik = require("formik");
 var boxModels = require("./box-models.cjs.js");
@@ -66,8 +69,7 @@ var isHotkey = require("is-hotkey");
 var slateReact = require("slate-react");
 var Lists = require("@convertkit/slate-lists");
 var textInput = require("./text-input.cjs.js");
-var shape = require("./shape.cjs.js");
-var style = require("./style.cjs.js");
+var image = require("./image.cjs.js");
 var reactDom = require("react-dom");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -94,12 +96,12 @@ function _interopNamespace(e) {
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
-var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
 var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var NextLink__default = /* @__PURE__ */ _interopDefaultLegacy(NextLink);
+var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
 var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
 var ReactPlayer__default = /* @__PURE__ */ _interopDefaultLegacy(ReactPlayer);
 var Hotkeys__default = /* @__PURE__ */ _interopDefaultLegacy(Hotkeys);
@@ -252,9 +254,165 @@ const TABLE_BY_ID = client.gql`
     }
   }
 `;
+const ELEMENT_REFERENCE_GLOBAL_ELEMENT = client.gql`
+  query ElementReferenceGlobalElement($id: ID!) {
+    globalElement(id: $id) {
+      id
+      data
+    }
+  }
+`;
+const INTROSPECTION_QUERY = client.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, client2, store) {
+  var _a, _b, _c;
+  const descriptors$1 = reactPage.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]) => {
+        reactPage.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          swatchIds.add(swatchId);
+        });
+        reactPage.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+        reactPage.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+        reactPage.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+        reactPage.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+        reactPage.getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        if (descriptor.type === shape.ShapeControlType) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.config.type, prop);
+        }
+        if (descriptor.type === shape.ListControlType) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          prop.forEach((item) => {
+            getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
+          });
+        }
+        if (descriptor.type === descriptors.Types.Shape) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.options.type, prop);
+        }
+        if (descriptor.type === descriptors.Types.List) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          prop.forEach((item) => {
+            getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
+          });
+        }
+      });
+    };
+    let element2;
+    if (reactPage.isElementReference(current)) {
+      const query = await client2.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$1.get(element2.type);
+    if (elementDescriptors == null)
+      continue;
+    getResourcesFromElementDescriptors(elementDescriptors, element2.props);
+  }
+  const typographiesResult = await client2.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((style2) => {
+      var _a2;
+      const swatchId = (_a2 = style2.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: {
@@ -342,10 +500,6 @@ const typePolicies = {
     }
   }
 };
-const PrefetchContext = React.createContext(false);
-function useIsPrefetching() {
-  return React.useContext(PrefetchContext);
-}
 function createApolloClient({
   uri,
   cacheData
@@ -356,7 +510,10 @@ function createApolloClient({
   if (cacheData)
     cache.restore(cacheData);
   return new client.ApolloClient({
-    uri,
+    link: new batchHttp.BatchHttpLink({
+      uri,
+      batchMax: 100
+    }),
     cache
   });
 }
@@ -372,17 +529,20 @@ class MakeswiftClient {
     });
   }
   async prefetch(element) {
-    const id = uuid__default["default"]();
-    await ssr.getDataFromTree(/* @__PURE__ */ jsxRuntime.jsx(PrefetchContext.Provider, {
-      value: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
-        client: this,
-        rootElements: /* @__PURE__ */ new Map([[id, element]]),
-        children: /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
-          documentReference: reactPage.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: graphql.PagePathnameSliceFragmentDoc,
+        data: __spreadProps(__spreadValues({}, pagePathnameSlice), {
+          id
         })
-      })
-    }));
+      });
+    });
     slate.KeyUtils.resetGenerator();
     return this.apolloClient.cache.extract();
   }
@@ -664,10 +824,12 @@ const getDeviceMediaQuery = (device) => {
   }
   return parts.join(" and ");
 };
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
 function useMediaQuery(responsiveValue) {
   const [deviceId, setDeviceId] = React.useState(DEVICES[0].id);
   const { value } = findDeviceOverride(responsiveValue, deviceId) || {};
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (responsiveValue == null || window == null)
       return () => {
       };
@@ -1182,7 +1344,7 @@ function Parallax(_g2) {
   const container = React.useRef(null);
   const [containerScrollTop, setContainerScrollTop] = React.useState(strength == null ? 0 : strength);
   const lastScrollParentScrollTop = React.useRef(0);
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!container.current || strength == null || strength === 0)
       return void 0;
     const containerDocument = container.current.ownerDocument;
@@ -1296,7 +1458,7 @@ function BackgroundVideo({
   const [ready, setReady] = React.useState(false);
   const [scale, setScale] = React.useState(1);
   const container = React.useRef(null);
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const {
       current: containerEl
     } = container;
@@ -1403,9 +1565,6 @@ const BackgroundsContainer$1 = styled__default["default"](Container$c)`
 function Backgrounds({
   backgrounds
 }) {
-  const isPrefetching = useIsPrefetching();
-  if (isPrefetching)
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (backgrounds == null)
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -1540,7 +1699,9 @@ var BackgroundsContainer = React.forwardRef(function BackgroundsContainer2(_i, r
     }), React.Children.only(children)]
   }));
 });
-const StyledBackgroundsContainer = styled__default["default"](BackgroundsContainer)`
+const StyledBackgroundsContainer = styled__default["default"](BackgroundsContainer).withConfig({
+  shouldForwardProp: (prop) => !["margin", "borderRadius", "alignSelf"].includes(prop.toString())
+})`
   display: flex;
   ${cssMargin()}
   ${cssBorderRadius()}
@@ -1548,7 +1709,9 @@ const StyledBackgroundsContainer = styled__default["default"](BackgroundsContain
   alignSelf
 }))}
 `;
-const Grid$1 = styled__default["default"](framerMotion.motion.div)`
+const Grid$1 = styled__default["default"](framerMotion.motion.div).withConfig({
+  shouldForwardProp: (prop) => !["padding", "border", "boxShadow", "alignContent"].includes(prop)
+})`
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -1559,7 +1722,9 @@ const Grid$1 = styled__default["default"](framerMotion.motion.div)`
   alignContent
 }))}
 `;
-const GridItem$2 = styled__default["default"](framerMotion.motion.div)`
+const GridItem$2 = styled__default["default"](framerMotion.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 */
@@ -1987,7 +2152,9 @@ function responsiveWidth(widthData, defaultValue = "100%") {
     width: typeof width === "object" ? `${width.value}${width.unit}` : width
   })));
 }
-const StyledButton$1 = styled__default["default"](Link)`
+const StyledButton$1 = styled__default["default"](Link).withConfig({
+  shouldForwardProp: (prop) => !["margin", "variant", "shape", "size", "textColor", "color", "textStyle"].includes(prop.toString())
+})`
   display: table;
   border: 0;
   outline: 0;
@@ -2033,7 +2200,6 @@ const StyledButton$1 = styled__default["default"](Link)`
     large: "16px 20px"
   }[size]};
           font-size: ${`${fontSize.value}${fontSize.unit}`};
-
           ${{
     flat: styled.css`
               background: ${colorToString(color)};
@@ -2176,7 +2342,7 @@ const StyledButton$1 = styled__default["default"](Link)`
   }[variant]}
         `;
 })}
-    ${cssTextStyle()}
+  ${cssTextStyle()}
 `;
 const Button$1 = React.forwardRef(function Button2(_m, ref) {
   var _n = _m, {
@@ -2331,10 +2497,10 @@ const placeholders = {
 };
 function loadImage(src) {
   return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = reject;
-    image.src = src;
+    const image2 = new Image();
+    image2.onload = () => resolve(image2);
+    image2.onerror = reject;
+    image2.src = src;
   });
 }
 function imageSizes(width) {
@@ -2348,7 +2514,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__default["default"].div`
+const ImageContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "padding", "border", "borderRadius", "boxShadow", "opacity", "link", "dimensions"].includes(prop.toString())
+})`
   line-height: 0;
   overflow: hidden;
   ${cssMargin()}
@@ -2385,16 +2553,15 @@ const ImageComponent = React.forwardRef(function Image2({
   const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder2.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = React.useState(null);
   const isInBuilder = useIsInBuilder();
-  const isPrefetching = useIsPrefetching();
   React.useEffect(() => {
     if (dataDimensions)
       return;
     let cleanedUp = false;
-    loadImage(imageSrc).then((image) => {
+    loadImage(imageSrc).then((image2) => {
       if (!cleanedUp) {
         setMeasuredDimensions({
-          width: image.naturalWidth,
-          height: image.naturalHeight
+          width: image2.naturalWidth,
+          height: image2.naturalHeight
         });
       }
     }).catch(console.error);
@@ -2406,8 +2573,6 @@ const ImageComponent = React.forwardRef(function Image2({
   if (!dimensions)
     return null;
   const widthClass = css.css(responsiveWidth(width, `${dimensions.width}px`));
-  if (isPrefetching)
-    return null;
   return /* @__PURE__ */ jsxRuntime.jsx(ImageContainer, {
     as: link ? Link : "div",
     link,
@@ -2486,7 +2651,9 @@ const Container$b = styled__default["default"].div`
   position: relative;
   height: 100%;
 `;
-const Wrapper = styled__default["default"].div`
+const Wrapper = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop)
+})`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -2496,7 +2663,9 @@ const Wrapper = styled__default["default"].div`
     outline: 0;
   }
 `;
-const Arrow = styled__default["default"].div`
+const Arrow = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["background"].includes(prop)
+})`
   padding: 10px;
   border-radius: 50%;
   outline: 0;
@@ -2524,7 +2693,9 @@ const Arrow = styled__default["default"].div`
     stroke: currentColor;
   }
 `;
-const Slop = styled__default["default"].div`
+const Slop = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2543,7 +2714,9 @@ const Slop = styled__default["default"].div`
         color: ${colorToString(color)};
       `)}
 `;
-const Slide = styled__default["default"](framerMotion.motion.div)`
+const Slide = styled__default["default"](framerMotion.motion.div).withConfig({
+  shouldForwardProp: (prop) => !["pageSize", "alignItems"].includes(prop)
+})`
   display: flex;
   ${(p) => cssMediaRules([p.pageSize], ([pageSize = 1]) => styled.css`
         flex-basis: ${100 / pageSize}%;
@@ -2555,7 +2728,9 @@ const Slide = styled__default["default"](framerMotion.motion.div)`
   alignItems
 }))}
 `;
-const Reel = styled__default["default"](framerMotion.motion.div)`
+const Reel = styled__default["default"](framerMotion.motion.div).withConfig({
+  shouldForwardProp: (prop) => !["gap"].includes(prop)
+})`
   display: flex;
   position: relative;
   flex-wrap: nowrap;
@@ -2574,7 +2749,9 @@ const Page$1 = styled__default["default"](framerMotion.motion.div)`
   position: relative;
   width: 100%;
 `;
-const LeftSlop = styled__default["default"](Slop)`
+const LeftSlop = styled__default["default"](Slop).withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop)
+})`
   ${(p) => cssMediaRules([p.position], ([position = "inside"]) => {
   switch (position) {
     case "inside":
@@ -2599,7 +2776,9 @@ const LeftSlop = styled__default["default"](Slop)`
     }
   }
 `;
-const RightSlop = styled__default["default"](Slop)`
+const RightSlop = styled__default["default"](Slop).withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop)
+})`
   ${(p) => cssMediaRules([p.position], ([position = "inside"]) => {
   switch (position) {
     case "inside":
@@ -2627,7 +2806,9 @@ const RightSlop = styled__default["default"](Slop)`
 const ClipMask = styled__default["default"].div`
   overflow: hidden;
 `;
-const Dots = styled__default["default"].div`
+const Dots = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
   display: ${(props) => props.hidden ? "none" : "flex"};
   justify-content: center;
   margin-top: 20px;
@@ -2642,7 +2823,9 @@ const Dots = styled__default["default"].div`
         color: ${colorToString(color)};
       `)}
 `;
-const Dot = styled__default["default"].div`
+const Dot = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})`
   position: relative;
   margin: 0 6px;
   border-radius: 50%;
@@ -3002,7 +3185,9 @@ const Segment = styled__default["default"].div`
   flex: 1;
   text-align: center;
 `;
-const Container$a = styled__default["default"].div`
+const Container$a = styled__default["default"].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"]) => {
@@ -3098,7 +3283,7 @@ const Container$a = styled__default["default"].div`
                   z-index: 1;
                 }
 
-                :before {
+                ::before {
                   content: '';
                   position: absolute;
                   top: 0;
@@ -3110,7 +3295,7 @@ const Container$a = styled__default["default"].div`
                   background: ${colorToString(blockColor)};
                 }
 
-                :after {
+                ::after {
                   content: '';
                   position: absolute;
                   left: 0;
@@ -3141,7 +3326,7 @@ const Container$a = styled__default["default"].div`
                   z-index: 1;
                 }
 
-                :before {
+                ::before {
                   content: '';
                   position: absolute;
                   top: 50%;
@@ -3421,7 +3606,9 @@ function registerComponent$8(runtime) {
     }
   });
 }
-const IE11MinHeightContainer = styled__default["default"].div`
+const IE11MinHeightContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop)
+})`
   display: flex;
   width: 100%;
   ${cssMargin()}
@@ -3433,7 +3620,9 @@ const Container$9 = styled__default["default"].div`
   min-height: 40px;
   width: 100%;
 `;
-const Line = styled__default["default"].div`
+const Line = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["variant", "color", "thickness"].includes(prop)
+})`
   ${(p) => cssMediaRules([p.variant, p.thickness, p.color], ([variant = "solid", thickness = {
   value: 1,
   unit: "px"
@@ -3545,7 +3734,9 @@ function registerComponent$7(runtime) {
     }
   });
 }
-const Container$8 = styled__default["default"].div`
+const Container$8 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop)
+})`
   min-height: 15px;
   ${cssMargin()}
 `;
@@ -3581,7 +3772,7 @@ const Embed = React.forwardRef(function Embed2({
 }, ref) {
   const [container, setContainer] = React.useState(null);
   const [shouldRender, setShouldRender] = React.useState(false);
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setShouldRender(true);
   }, []);
   React.useImperativeHandle(ref, () => container, [container]);
@@ -3829,7 +4020,9 @@ function getSizeHeight$1(size) {
       throw new Error(`Invalid form size "${size}"`);
   }
 }
-const Base$2 = styled__default["default"].input`
+const Base$2 = styled__default["default"].input.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["shape", "size", "contrast", "brandColor", "error"].includes(prop.toString()) && defaultValidator(prop)
+})`
   ${cssField()}
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
@@ -3859,7 +4052,9 @@ var Input$2 = React.forwardRef(function Input2(_o, ref) {
     brandColor
   }));
 });
-const Container$7 = styled__default["default"].div`
+const Container$7 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop.toString())
+})`
   display: flex;
   flex-direction: column;
   ${cssMargin()};
@@ -3943,7 +4138,9 @@ function getContrastColor(contrast) {
       throw new Error(`Invalid form contrast "${contrast}"`);
   }
 }
-const Base$1 = styled__default["default"].label`
+const Base$1 = styled__default["default"].label.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["contrast", "size", "textStyle", "textColor"].includes(prop.toString()) && defaultValidator(prop)
+})`
   display: block;
   margin: 0 0 0.25em 0;
   ${cssTextStyle()}
@@ -3994,7 +4191,9 @@ var SingleLineTextTableField = React.forwardRef(function SingleLineTextTableFiel
     }))]
   });
 });
-const Base = styled__default["default"].textarea`
+const Base = styled__default["default"].textarea.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString()) && defaultValidator(prop)
+})`
   resize: vertical;
   ${cssField()}
 `;
@@ -4060,14 +4259,18 @@ function getCheckmarkColor$1({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$6 = styled__default["default"].div`
+const Container$6 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
 `;
-const FakeCheckbox = styled__default["default"].div`
+const FakeCheckbox = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop)
+})`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -4080,7 +4283,9 @@ const FakeCheckbox = styled__default["default"].div`
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
 `;
-const HiddenCheckbox = styled__default["default"].input`
+const HiddenCheckbox = styled__default["default"].input.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["size", "brandColor", "contrast", "error"].includes(prop) && defaultValidator(prop)
+})`
   position: absolute;
   opacity: 0;
   width: 100%;
@@ -4323,14 +4528,18 @@ function getCheckmarkColor({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$5 = styled__default["default"].div`
+const Container$5 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
+})`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
 `;
-const FakeRadioButton = styled__default["default"].div`
+const FakeRadioButton = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop.toString())
+})`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -4343,7 +4552,9 @@ const FakeRadioButton = styled__default["default"].div`
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
 `;
-const HiddenRadioButton = styled__default["default"].input.attrs({
+const HiddenRadioButton = styled__default["default"].input.withConfig({
+  shouldForwardProp: (prop) => !["brandColor", "contrast", "error"].includes(prop.toString())
+}).attrs({
   type: "radio"
 })`
   position: absolute;
@@ -4508,7 +4719,9 @@ var TableColumnRadioButtonGroup = React.forwardRef(function TableColumnRadioButt
     }, option.id))]
   });
 });
-const Container$4 = styled__default["default"].div`
+const Container$4 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString())
+})`
   ${cssField()}
   display: flex;
   align-items: center;
@@ -4721,7 +4934,9 @@ var NumberTableField = React.forwardRef(function NumberTableField2(_Q, ref) {
     }))]
   });
 });
-const Label = styled__default["default"].div`
+const Label = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
+})`
   display: block;
   max-width: 120px;
   min-width: 60px;
@@ -4734,7 +4949,9 @@ const Label = styled__default["default"].div`
         max-height: ${0.5 * getSizeHeight(size)}px;
       `)}
 `;
-const Input = styled__default["default"].div`
+const Input = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["shape", "size"].includes(prop.toString())
+})`
   display: block;
   width: 100%;
   border-width: 2px;
@@ -4952,7 +5169,9 @@ const Alignments = {
   CENTER: "center",
   RIGHT: "right"
 };
-const GridForm = styled__default["default"].form`
+const GridForm = styled__default["default"].form.withConfig({
+  shouldForwardProp: (prop) => !["size", "width", "margin"].includes(prop)
+})`
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -4961,7 +5180,9 @@ const GridForm = styled__default["default"].form`
       `)}
   ${cssMargin()}
 `;
-const GridItem$1 = styled__default["default"].div`
+const GridItem$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop)
+})`
   align-self: flex-end;
   flex-direction: column;
   ${cssGridItem()}
@@ -4978,7 +5199,9 @@ function getAlignmentMargin(alignment) {
 }
 const StyledButton = styled__default["default"]((props) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, props), {
   as: "button"
-})))`
+}))).withConfig({
+  shouldForwardProp: (prop) => !["alignment"].includes(prop.toString())
+})`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5481,7 +5704,9 @@ const GutterContainer = styled__default["default"].div`
         padding-right: ${p.last ? "0px" : `${gutter.value / 2}${gutter.unit}`};
       `)}
 `;
-const PlaceholderLink$1 = styled__default["default"].div`
+const PlaceholderLink$1 = styled__default["default"].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;
@@ -5609,7 +5834,9 @@ var SvgChevronDown8 = function SvgChevronDown82(props) {
   })));
 };
 const DROP_DOWN_MENU_WIDTH = 200;
-const DropDownMenu$1 = styled__default["default"].div`
+const DropDownMenu$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop.toString())
+})`
   position: absolute;
   top: 100%;
   left: ${(props) => props.position === "left" ? 0 : "auto"};
@@ -5646,7 +5873,9 @@ const DropDownContainer = styled__default["default"].div`
     animation: ${dropIn} 0.25s;
   }
 `;
-const StyledDropDownItem = styled__default["default"](Link)`
+const StyledDropDownItem = styled__default["default"](Link).withConfig({
+  shouldForwardProp: (prop) => !["color", "textStyle"].includes(prop.toString())
+})`
   display: block;
   text-decoration: none;
   line-height: 1.4;
@@ -5704,7 +5933,7 @@ function DropDownButton(_U) {
   ]);
   const container = React.useRef(null);
   const [position, setPosition] = React.useState("left");
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (container.current && container.current.ownerDocument.defaultView.innerWidth < container.current.offsetLeft + DROP_DOWN_MENU_WIDTH) {
       setPosition("right");
     } else {
@@ -5771,7 +6000,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__default["default"].div`
+const DropDownMenu = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["open"].includes(prop.toString())
+})`
   display: ${(props) => props.open ? "flex" : "none"};
   flex-direction: column;
   padding: 8px;
@@ -5779,7 +6010,9 @@ const DropDownMenu = styled__default["default"].div`
 const ButtonLink$1 = styled__default["default"](Button$1)`
   margin: 8px 0;
 `;
-const StyledLink$2 = styled__default["default"](Link)`
+const StyledLink$2 = styled__default["default"](Link).withConfig({
+  shouldForwardProp: (prop) => !["textStyle", "color"].includes(prop.toString())
+})`
   text-decoration: none;
   line-height: 1.4;
   padding: 8px 16px;
@@ -5870,7 +6103,9 @@ function NavigationButton$1(props) {
 const ButtonLink = styled__default["default"](NavigationButton$1)`
   margin: 8px 0;
 `;
-const Container$3 = styled__default["default"].div`
+const Container$3 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["animation", "backgroundColor", "open"].includes(prop.toString())
+})`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -5902,7 +6137,9 @@ const Container$3 = styled__default["default"].div`
 }[animation]}
           `)}
 `;
-const CloseIconContainer = styled__default["default"].button`
+const CloseIconContainer = styled__default["default"].button.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop.toString())
+})`
   position: absolute;
   top: 15px;
   right: 15px;
@@ -5950,7 +6187,9 @@ function MobileMenu({
     })]
   });
 }
-const Container$2 = styled__default["default"].nav`
+const Container$2 = styled__default["default"].nav.withConfig({
+  shouldForwardProp: (prop) => !["margin", "textStyle", "gutter"].includes(prop.toString())
+})`
   display: flex;
   align-items: center;
   ${cssMargin()}
@@ -5962,7 +6201,9 @@ const Container$2 = styled__default["default"].nav`
         gap: ${gutter.value}${gutter.unit};
       `)}
 `;
-const LinksContainer = styled__default["default"].div`
+const LinksContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["alignment", "mobileMenuAnimation"].includes(prop.toString())
+})`
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -5971,7 +6212,9 @@ const LinksContainer = styled__default["default"].div`
         justify-content: ${alignment};
       `)}
 `;
-const OpenIconContainer = styled__default["default"].button`
+const OpenIconContainer = styled__default["default"].button.withConfig({
+  shouldForwardProp: (prop) => !["mobileMenuAnimation", "alignment", "color"].includes(prop.toString())
+})`
   display: none;
   flex-grow: 1;
   align-items: center;
@@ -6252,7 +6495,9 @@ const Grid = styled__default["default"].div`
   flex-wrap: wrap;
   width: 100%;
 `;
-const GridItem = styled__default["default"].div`
+const GridItem = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop.toString())
+})`
   display: flex;
   align-items: flex-start;
   ${cssGridItem()}
@@ -6983,7 +7228,9 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container$1 = styled__default["default"].div`
+const Container$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin", "alignment"].includes(prop.toString())
+})`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -6992,7 +7239,9 @@ const Container$1 = styled__default["default"].div`
         justify-content: ${alignment};
       `)}
 `;
-const StyledLink$1 = styled__default["default"](Link)`
+const StyledLink$1 = styled__default["default"](Link).withConfig({
+  shouldForwardProp: (prop) => !["brandColor", "shape", "size", "hoverStyle", "fill", "backgroundColor"].includes(prop.toString())
+})`
   display: block;
   color: ${(props) => props.brandColor};
   transition: transform, opacity 0.18s;
@@ -7560,7 +7809,9 @@ const RichTextEditor = styled__default["default"](React.forwardRef(function Rich
     margin: 0;
   }
 `;
-const StyledRichTextEditor = styled__default["default"](RichTextEditor)`
+const StyledRichTextEditor = styled__default["default"](RichTextEditor).withConfig({
+  shouldForwardProp: (prop) => !["margin"].includes(prop.toString())
+})`
   ${cssMargin()}
 `;
 const defaultText = {
@@ -7744,7 +7995,9 @@ function registerComponent$1(runtime) {
     }
   });
 }
-const Container = styled__default["default"].div`
+const Container = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "borderRadius"].includes(prop.toString())
+})`
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -8674,13 +8927,13 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.ColorControlType:
+    case image.ColorControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useColorValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.ImageControlType:
+    case image.ImageControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useImageControlValue,
         parameters: [data],
@@ -8731,8 +8984,8 @@ function PropsValue({
       case textInput.TextInputControlType:
       case textInput.TextAreaControlType:
       case textInput.SelectControlType:
-      case textInput.ColorControlType:
-      case textInput.ImageControlType:
+      case image.ColorControlType:
+      case image.ImageControlType:
       case shape.ComboboxControlType:
       case shape.ShapeControlType:
       case shape.ListControlType:
@@ -8814,7 +9067,7 @@ const FindDomNode = React.forwardRef(function FindDomNode2(props, ref) {
     innerRef: ref
   }));
 });
-const contextDefaultValue = reactPage.configureStore();
+const storeContextDefaultValue = reactPage.configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -8837,8 +9090,9 @@ function createReactRuntime(store) {
     }
   };
 }
-const ReactRuntime = createReactRuntime(contextDefaultValue);
-const Context = React.createContext(contextDefaultValue);
+const ReactRuntime = createReactRuntime(storeContextDefaultValue);
+registerBuiltinComponents(ReactRuntime);
+const Context = React.createContext(storeContextDefaultValue);
 function RuntimeProvider({
   client: client2,
   children,
@@ -8846,16 +9100,11 @@ function RuntimeProvider({
 }) {
   const [store, setStore] = React.useState(() => {
     const store2 = reactPage.configureStore({
-      preloadedState: contextDefaultValue.getState(),
+      preloadedState: storeContextDefaultValue.getState(),
       rootElements
     });
-    const runtime = createReactRuntime(store2);
-    registerBuiltinComponents(runtime);
     return store2;
   });
-  React.useEffect(() => {
-    return registerBuiltinComponents(createReactRuntime(store));
-  }, [store]);
   React.useEffect(() => {
     var _a;
     const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(reactPage.createDocument(documentKey, rootElement))));
@@ -8980,14 +9229,7 @@ const ElementReference = React.memo(React.forwardRef(function ElementReference2(
   const {
     error,
     data
-  } = useQuery(client.gql`
-        query ElementReferenceGlobalElement($id: ID!) {
-          globalElement(id: $id) {
-            id
-            data
-          }
-        }
-      `, {
+  } = useQuery(ELEMENT_REFERENCE_GLOBAL_ELEMENT, {
     variables: {
       id: elementReference.value
     }