@makeswift/runtime 0.0.15 → 0.0.18

package/dist/index.es.js

@@ -35,18 +35,23 @@ 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 { 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 { 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";
@@ -58,15 +63,13 @@ import { Field as Field$1, getIn, Formik } from "formik";
 import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
 import { normalize } from "polished";
 import ReactPlayer from "react-player";
-import { Value } from "slate";
 import Hotkeys from "slate-hotkeys";
 import ipsum from "corporate-ipsum";
 import { isHotkey } from "is-hotkey";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
-import { S as ShapeControlType, I as ImageControlType, C as ColorControlType, a as SelectControlType, T as TextAreaControlType, b as TextInputControlType, N as NumberControlType, c as CheckboxControlType } from "./text-input.es.js";
-import { L as ListControlType } from "./list.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%;
@@ -215,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: {
@@ -305,14 +464,6 @@ const typePolicies = {
     }
   }
 };
-const isServer$1 = typeof window === "undefined";
-let globalApolloClient = null;
-function garbageCollectGlobalCacheData() {
-  globalApolloClient = null;
-}
-function getGlobalCacheData() {
-  return globalApolloClient == null ? void 0 : globalApolloClient.cache.extract();
-}
 function createApolloClient({
   uri,
   cacheData
@@ -323,9 +474,11 @@ function createApolloClient({
   if (cacheData)
     cache2.restore(cacheData);
   return new ApolloClient({
-    uri,
-    cache: cache2,
-    ssrMode: isServer$1
+    link: new BatchHttpLink({
+      uri,
+      batchMax: 100
+    }),
+    cache: cache2
   });
 }
 class MakeswiftClient {
@@ -334,14 +487,28 @@ class MakeswiftClient {
     cacheData
   }) {
     __publicField(this, "apolloClient");
-    if (globalApolloClient == null)
-      globalApolloClient = createApolloClient({
-        uri,
-        cacheData
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    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
+        })
       });
-    else if (cacheData != null)
-      globalApolloClient.cache.restore(cacheData);
-    this.apolloClient = globalApolloClient;
+    });
+    KeyUtils.resetGenerator();
+    return this.apolloClient.cache.extract();
   }
   updateCacheData(cacheData) {
     this.apolloClient.cache.restore(cacheData);
@@ -621,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 () => {
       };
@@ -1139,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;
@@ -1253,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;
@@ -1494,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()}
@@ -1502,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%;
@@ -1513,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 */
@@ -1941,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;
@@ -1987,7 +2164,6 @@ const StyledButton$1 = styled(Link)`
     large: "16px 20px"
   }[size]};
           font-size: ${`${fontSize.value}${fontSize.unit}`};
-
           ${{
     flat: css`
               background: ${colorToString(color)};
@@ -2130,7 +2306,7 @@ const StyledButton$1 = styled(Link)`
   }[variant]}
         `;
 })}
-    ${cssTextStyle()}
+  ${cssTextStyle()}
 `;
 const Button$1 = forwardRef(function Button2(_m, ref) {
   var _n = _m, {
@@ -2302,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()}
@@ -2437,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;
@@ -2447,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;
@@ -2475,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;
@@ -2494,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}%;
@@ -2506,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;
@@ -2525,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":
@@ -2550,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":
@@ -2578,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;
@@ -2593,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%;
@@ -2953,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"]) => {
@@ -3049,7 +3247,7 @@ const Container$a = styled.div`
                   z-index: 1;
                 }
 
-                :before {
+                ::before {
                   content: '';
                   position: absolute;
                   top: 0;
@@ -3061,7 +3259,7 @@ const Container$a = styled.div`
                   background: ${colorToString(blockColor)};
                 }
 
-                :after {
+                ::after {
                   content: '';
                   position: absolute;
                   left: 0;
@@ -3092,7 +3290,7 @@ const Container$a = styled.div`
                   z-index: 1;
                 }
 
-                :before {
+                ::before {
                   content: '';
                   position: absolute;
                   top: 50%;
@@ -3372,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()}
@@ -3384,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"
@@ -3496,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()}
 `;
@@ -3532,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]);
@@ -3780,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;
@@ -3810,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()};
@@ -3894,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()}
@@ -3945,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()}
 `;
@@ -4011,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%;
@@ -4031,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%;
@@ -4274,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%;
@@ -4294,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;
@@ -4459,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;
@@ -4672,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;
@@ -4685,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;
@@ -4903,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%;
@@ -4912,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()}
@@ -4929,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;
@@ -5432,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;
@@ -5560,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"};
@@ -5597,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;
@@ -5655,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 {
@@ -5722,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;
@@ -5730,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;
@@ -5821,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%;
@@ -5853,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;
@@ -5901,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()}
@@ -5913,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;
@@ -5922,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;
@@ -6203,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()}
@@ -6934,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;
@@ -6943,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;
@@ -7511,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 = {
@@ -7695,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;
@@ -8546,6 +8812,9 @@ function useColorValue(data, definition) {
   const [swatch] = (_b = (_a = result.data) == null ? void 0 : _a.swatches) != null ? _b : [null];
   return ColorHelper({ h: swatch == null ? void 0 : swatch.hue, s: swatch == null ? void 0 : swatch.saturation, l: swatch == null ? void 0 : swatch.lightness }).alpha(data.alpha).rgb().string();
 }
+function useComboboxControlValue(data) {
+  return data == null ? void 0 : data.value;
+}
 function useImageControlValue(data) {
   var _a;
   return (_a = useFile(data)) == null ? void 0 : _a.publicUrl;
@@ -8634,6 +8903,12 @@ function ControlValue({
         parameters: [data],
         children: (value) => children(value)
       }, definition.type);
+    case ComboboxControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useComboboxControlValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
     case ShapeControlType:
       return /* @__PURE__ */ jsx(ShapeControlValue, {
         definition,
@@ -8675,6 +8950,7 @@ function PropsValue({
       case SelectControlType:
       case ColorControlType:
       case ImageControlType:
+      case ComboboxControlType:
       case ShapeControlType:
       case ListControlType:
         return /* @__PURE__ */ jsx(ControlValue, {
@@ -8755,7 +9031,7 @@ const FindDomNode = forwardRef(function FindDomNode2(props, ref) {
     innerRef: ref
   }));
 });
-const contextDefaultValue = configureStore();
+const storeContextDefaultValue = configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -8778,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,
@@ -8787,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))));
@@ -8919,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
     }
@@ -9009,5 +9274,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useResponsiveColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, PAGE_SNIPPETS_QUERY as Q, RuntimeProvider as R, SocialLinks as S, Text as T, SITE_FONTS_QUERY as U, Page2 as V, garbageCollectGlobalCacheData as W, getGlobalCacheData as X, MakeswiftClient as Y, deepEqual as Z, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
+export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useResponsiveColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, PAGE_SNIPPETS_QUERY as Q, RuntimeProvider as R, SocialLinks as S, Text as T, SITE_FONTS_QUERY as U, Page2 as V, MakeswiftClient as W, deepEqual as X, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
 //# sourceMappingURL=index.es.js.map