@makeswift/runtime 0.0.17 → 0.0.20

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", "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]);
@@ -3652,9 +3843,9 @@ function registerComponent$6(runtime) {
     }
   });
 }
-var _path$t;
-function _extends$u() {
-  _extends$u = Object.assign || function(target) {
+var _path$u;
+function _extends$v() {
+  _extends$v = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3665,15 +3856,15 @@ function _extends$u() {
     }
     return target;
   };
-  return _extends$u.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
 var SvgCheck12 = function SvgCheck122(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$u({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$v({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$t || (_path$t = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.7071 1.79289C12.0976 2.18342 12.0976 2.81658 11.7071 3.20711L4.70711 10.2071C4.31658 10.5976 3.68342 10.5976 3.29289 10.2071L0.292893 7.20711C-0.0976311 6.81658 -0.0976311 6.18342 0.292893 5.79289C0.683417 5.40237 1.31658 5.40237 1.70711 5.79289L4 8.08579L10.2929 1.79289C10.6834 1.40237 11.3166 1.40237 11.7071 1.79289Z"
@@ -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;
@@ -4855,8 +5072,8 @@ function Field({
   });
 }
 var _g;
-function _extends$t() {
-  _extends$t = Object.assign || function(target) {
+function _extends$u() {
+  _extends$u = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4867,10 +5084,10 @@ function _extends$t() {
     }
     return target;
   };
-  return _extends$t.apply(this, arguments);
+  return _extends$u.apply(this, arguments);
 }
 var SvgSpinner20 = function SvgSpinner202(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$t({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
@@ -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;
@@ -5448,9 +5671,9 @@ function registerComponent$5(runtime) {
     }
   });
 }
-var _path$s;
-function _extends$s() {
-  _extends$s = Object.assign || function(target) {
+var _path$t;
+function _extends$t() {
+  _extends$t = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5461,14 +5684,14 @@ function _extends$s() {
     }
     return target;
   };
-  return _extends$s.apply(this, arguments);
+  return _extends$t.apply(this, arguments);
 }
 var SvgMobileMenu28 = function SvgMobileMenu282(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$s({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 28,
     height: 28
-  }, props), _path$s || (_path$s = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
   })));
 };
@@ -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;
@@ -5510,9 +5735,9 @@ function LinksPlaceholder({
     }, i))
   });
 }
-var _path$r;
-function _extends$r() {
-  _extends$r = Object.assign || function(target) {
+var _path$s;
+function _extends$s() {
+  _extends$s = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5523,20 +5748,20 @@ function _extends$r() {
     }
     return target;
   };
-  return _extends$r.apply(this, arguments);
+  return _extends$s.apply(this, arguments);
 }
 var SvgCaretDown8 = function SvgCaretDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$r({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$s({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$r || (_path$r = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M1 2a1 1 0 0 0-.707 1.707l3 3a1 1 0 0 0 1.414 0l3-3A1 1 0 0 0 7 2H1z"
   })));
 };
-var _path$q;
-function _extends$q() {
-  _extends$q = Object.assign || function(target) {
+var _path$r;
+function _extends$r() {
+  _extends$r = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5547,20 +5772,20 @@ function _extends$q() {
     }
     return target;
   };
-  return _extends$q.apply(this, arguments);
+  return _extends$r.apply(this, arguments);
 }
 var SvgPlus8 = function SvgPlus82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$q({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$r({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M4 0a1 1 0 0 0-1 1v2H1a1 1 0 1 0 0 2h2v2a1 1 0 0 0 2 0V5h2a1 1 0 0 0 0-2H5V1a1 1 0 0 0-1-1z"
   })));
 };
-var _path$p;
-function _extends$p() {
-  _extends$p = Object.assign || function(target) {
+var _path$q;
+function _extends$q() {
+  _extends$q = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5571,20 +5796,20 @@ function _extends$p() {
     }
     return target;
   };
-  return _extends$p.apply(this, arguments);
+  return _extends$q.apply(this, arguments);
 }
 var SvgArrowDown8 = function SvgArrowDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$p({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$q({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M5 1a1 1 0 0 0-2 0v3.586l-.293-.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0-1.414-1.414L5 4.586V1z"
   })));
 };
-var _path$o;
-function _extends$o() {
-  _extends$o = Object.assign || function(target) {
+var _path$p;
+function _extends$p() {
+  _extends$p = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5595,21 +5820,23 @@ function _extends$o() {
     }
     return target;
   };
-  return _extends$o.apply(this, arguments);
+  return _extends$p.apply(this, arguments);
 }
 var SvgChevronDown8 = function SvgChevronDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$o({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$p({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.293 2.293a1 1 0 0 1 1.414 0L4 4.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"
   })));
 };
 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 {
@@ -5745,9 +5974,9 @@ function DropDownButton(_U) {
     })]
   });
 }
-var _path$n;
-function _extends$n() {
-  _extends$n = Object.assign || function(target) {
+var _path$o;
+function _extends$o() {
+  _extends$o = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5758,20 +5987,22 @@ function _extends$n() {
     }
     return target;
   };
-  return _extends$n.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 var SvgTimes16 = function SvgTimes162(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$n({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$o({
     width: 16,
     height: 16,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     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()}
@@ -6297,6 +6542,31 @@ function registerComponent$3(runtime) {
     }
   });
 }
+var _path$n;
+function _extends$n() {
+  _extends$n = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$n.apply(this, arguments);
+}
+var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$n({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20"
+  }, props), _path$n || (_path$n = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M13.7412,8.2967 C14.3582,6.6297 14.8392,5.2547 15.1842,4.1687 C15.5292,3.0837 15.7022,2.4177 15.7022,2.1707 C15.7022,1.9047 15.6442,1.6987 15.5292,1.5517 C15.4142,1.4057 15.2562,1.3327 15.0532,1.3327 C14.7962,1.3327 14.5332,1.5457 14.2662,1.9707 C13.9992,2.3967 13.7052,3.0817 13.3832,4.0247 L12.0022,7.9947 L13.7412,8.2967 Z M11.9052,11.9917 C11.5102,11.9737 11.1342,11.9327 10.7802,11.8677 C10.4262,11.8047 10.0872,11.7127 9.7652,11.5937 C9.9122,11.8867 10.0432,12.1797 10.1582,12.4727 C10.2742,12.7657 10.3682,13.0547 10.4422,13.3387 C10.6622,13.0637 10.8952,12.8137 11.1382,12.5887 C11.3832,12.3647 11.6382,12.1657 11.9052,11.9917 L11.9052,11.9917 Z M10.3452,7.8297 L8.8542,3.5437 C8.4672,2.4547 8.1682,1.7427 7.9562,1.4077 C7.7442,1.0737 7.5142,0.9067 7.2662,0.9067 C7.0732,0.9067 6.9162,0.9797 6.7972,1.1267 C6.6772,1.2727 6.6172,1.4697 6.6172,1.7167 C6.6172,2.1387 6.7782,2.8707 7.1002,3.9147 C7.4232,4.9587 7.9062,6.3277 8.5502,8.0217 C8.6052,7.9217 8.6832,7.8507 8.7852,7.8087 C8.8862,7.7677 9.0242,7.7477 9.1992,7.7477 C9.2542,7.7477 9.3652,7.7527 9.5312,7.7607 C9.6962,7.7707 9.9682,7.7937 10.3452,7.8297 L10.3452,7.8297 Z M8.9922,14.4637 C9.1482,14.4637 9.2912,14.3937 9.4202,14.2517 C9.5492,14.1097 9.6132,13.9567 9.6132,13.7917 C9.6132,13.6177 9.4872,13.2127 9.2342,12.5757 C8.9802,11.9397 8.6652,11.3147 8.2882,10.7007 C8.0122,10.2427 7.7402,9.8977 7.4732,9.6637 C7.2062,9.4297 6.9532,9.3137 6.7142,9.3137 C6.5202,9.3137 6.3062,9.4347 6.0722,9.6767 C5.8372,9.9197 5.7202,10.1467 5.7202,10.3577 C5.7202,10.5767 5.8352,10.9067 6.0652,11.3457 C6.2952,11.7857 6.6032,12.2527 6.9902,12.7477 C7.3952,13.2877 7.7772,13.7087 8.1362,14.0107 C8.4952,14.3137 8.7802,14.4637 8.9922,14.4637 L8.9922,14.4637 Z M4.8502,14.1347 C4.9792,14.2907 5.1582,14.5197 5.3882,14.8217 C5.9962,15.6547 6.5572,16.0717 7.0732,16.0717 C7.2472,16.0717 7.4042,16.0167 7.5422,15.9067 C7.6802,15.7967 7.7492,15.6827 7.7492,15.5637 C7.7492,15.4257 7.6572,15.1967 7.4732,14.8767 C7.2892,14.5557 7.0362,14.1947 6.7142,13.7917 C6.3452,13.3247 6.0392,12.9837 5.7962,12.7677 C5.5522,12.5527 5.3562,12.4447 5.2092,12.4447 C4.8872,12.4447 4.5902,12.6167 4.3182,12.9607 C4.0472,13.3037 3.9112,13.7087 3.9112,14.1757 C3.9112,14.5517 4.0052,14.9707 4.1942,15.4327 C4.3832,15.8957 4.6572,16.3597 5.0152,16.8267 C5.5582,17.5507 6.2332,18.1067 7.0382,18.4957 C7.8442,18.8857 8.7342,19.0797 9.7102,19.0797 C11.5052,19.0797 13.0082,18.4137 14.2182,17.0817 C15.4282,15.7487 16.0332,14.0797 16.0332,12.0737 C16.0332,11.4607 15.9872,10.9737 15.8952,10.6107 C15.8042,10.2497 15.6512,9.9857 15.4392,9.8217 C15.0622,9.5097 14.3282,9.2307 13.2372,8.9837 C12.1462,8.7357 11.0082,8.6127 9.8202,8.6127 C9.4892,8.6127 9.2542,8.6677 9.1162,8.7777 C8.9782,8.8877 8.9092,9.0747 8.9092,9.3407 C8.9092,9.9637 9.2592,10.4147 9.9582,10.6937 C10.6582,10.9737 11.7902,11.1127 13.3552,11.1127 L13.9212,11.1127 C14.0502,11.1127 14.1532,11.1607 14.2312,11.2567 C14.3092,11.3527 14.3632,11.4977 14.3902,11.6897 C14.2332,11.8367 13.9122,12.0037 13.4242,12.1917 C12.9362,12.3787 12.5632,12.5647 12.3052,12.7477 C11.7542,13.1507 11.3092,13.6287 10.9732,14.1827 C10.6372,14.7367 10.4692,15.2607 10.4692,15.7557 C10.4692,16.0577 10.5402,16.4217 10.6832,16.8477 C10.8262,17.2737 10.8972,17.5367 10.8972,17.6377 L10.8972,17.7337 L10.8692,17.8577 C10.4652,17.8297 10.1452,17.5937 9.9102,17.1497 C9.6752,16.7057 9.5582,16.1127 9.5582,15.3707 L9.5582,15.2477 C9.4842,15.3117 9.4132,15.3577 9.3442,15.3847 C9.2752,15.4127 9.1992,15.4257 9.1162,15.4257 C9.0332,15.4257 8.9552,15.4197 8.8822,15.4047 C8.8072,15.3917 8.7252,15.3707 8.6332,15.3437 C8.6602,15.4447 8.6812,15.5427 8.6952,15.6387 C8.7092,15.7347 8.7162,15.8107 8.7162,15.8657 C8.7162,16.2047 8.5822,16.4957 8.3152,16.7377 C8.0482,16.9807 7.7312,17.1017 7.3632,17.1017 C6.7832,17.1017 6.1942,16.8197 5.5952,16.2567 C4.9972,15.6937 4.6982,15.1427 4.6982,14.6017 C4.6982,14.5007 4.7102,14.4117 4.7332,14.3337 C4.7552,14.2557 4.7952,14.1897 4.8502,14.1347 L4.8502,14.1347 Z M14.7352,8.5297 C15.5642,8.6867 16.1482,9.0337 16.4892,9.5737 C16.8292,10.1147 17.0002,10.9667 17.0002,12.1297 C17.0002,14.4367 16.3032,16.3257 14.9082,17.7957 C13.5132,19.2647 11.7302,19.9997 9.5582,19.9997 C8.7022,19.9997 7.8712,19.8467 7.0662,19.5397 C6.2602,19.2337 5.5682,18.8047 4.9882,18.2557 C4.3252,17.6507 3.8282,17.0127 3.4972,16.3397 C3.1652,15.6667 3.0002,14.9777 3.0002,14.2727 C3.0002,13.4847 3.1702,12.8757 3.5112,12.4447 C3.8512,12.0147 4.3892,11.7217 5.1262,11.5667 C4.9882,11.2457 4.8872,10.9757 4.8222,10.7557 C4.7582,10.5357 4.7252,10.3667 4.7252,10.2477 C4.7252,9.8357 4.9442,9.4147 5.3822,8.9837 C5.8192,8.5527 6.2312,8.3377 6.6172,8.3377 C6.7832,8.3377 6.9572,8.3677 7.1422,8.4267 C7.3262,8.4867 7.5372,8.5857 7.7772,8.7227 C7.0682,6.7267 6.5532,5.1857 6.2312,4.1007 C5.9082,3.0147 5.7472,2.2667 5.7472,1.8547 C5.7472,1.2867 5.8942,0.8357 6.1892,0.5017 C6.4842,0.1677 6.8842,-0.0003 7.3902,-0.0003 C8.2552,-0.0003 9.3512,1.9227 10.6762,5.7697 C10.9062,6.4287 11.0812,6.9367 11.2012,7.2947 C11.3032,7.0097 11.4452,6.6077 11.6292,6.0857 C12.9552,2.2757 14.0952,0.3707 15.0532,0.3707 C15.5222,0.3707 15.8972,0.5287 16.1792,0.8447 C16.4592,1.1607 16.5992,1.5847 16.5992,2.1157 C16.5992,2.5187 16.4452,3.2557 16.1372,4.3267 C15.8282,5.3987 15.3612,6.7997 14.7352,8.5297 L14.7352,8.5297 Z"
+  })));
+};
 var _path$m;
 function _extends$m() {
   _extends$m = Object.assign || function(target) {
@@ -6312,14 +6582,14 @@ function _extends$m() {
   };
   return _extends$m.apply(this, arguments);
 }
-var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     viewBox: "0 0 20 20"
   }, props), _path$m || (_path$m = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M13.7412,8.2967 C14.3582,6.6297 14.8392,5.2547 15.1842,4.1687 C15.5292,3.0837 15.7022,2.4177 15.7022,2.1707 C15.7022,1.9047 15.6442,1.6987 15.5292,1.5517 C15.4142,1.4057 15.2562,1.3327 15.0532,1.3327 C14.7962,1.3327 14.5332,1.5457 14.2662,1.9707 C13.9992,2.3967 13.7052,3.0817 13.3832,4.0247 L12.0022,7.9947 L13.7412,8.2967 Z M11.9052,11.9917 C11.5102,11.9737 11.1342,11.9327 10.7802,11.8677 C10.4262,11.8047 10.0872,11.7127 9.7652,11.5937 C9.9122,11.8867 10.0432,12.1797 10.1582,12.4727 C10.2742,12.7657 10.3682,13.0547 10.4422,13.3387 C10.6622,13.0637 10.8952,12.8137 11.1382,12.5887 C11.3832,12.3647 11.6382,12.1657 11.9052,11.9917 L11.9052,11.9917 Z M10.3452,7.8297 L8.8542,3.5437 C8.4672,2.4547 8.1682,1.7427 7.9562,1.4077 C7.7442,1.0737 7.5142,0.9067 7.2662,0.9067 C7.0732,0.9067 6.9162,0.9797 6.7972,1.1267 C6.6772,1.2727 6.6172,1.4697 6.6172,1.7167 C6.6172,2.1387 6.7782,2.8707 7.1002,3.9147 C7.4232,4.9587 7.9062,6.3277 8.5502,8.0217 C8.6052,7.9217 8.6832,7.8507 8.7852,7.8087 C8.8862,7.7677 9.0242,7.7477 9.1992,7.7477 C9.2542,7.7477 9.3652,7.7527 9.5312,7.7607 C9.6962,7.7707 9.9682,7.7937 10.3452,7.8297 L10.3452,7.8297 Z M8.9922,14.4637 C9.1482,14.4637 9.2912,14.3937 9.4202,14.2517 C9.5492,14.1097 9.6132,13.9567 9.6132,13.7917 C9.6132,13.6177 9.4872,13.2127 9.2342,12.5757 C8.9802,11.9397 8.6652,11.3147 8.2882,10.7007 C8.0122,10.2427 7.7402,9.8977 7.4732,9.6637 C7.2062,9.4297 6.9532,9.3137 6.7142,9.3137 C6.5202,9.3137 6.3062,9.4347 6.0722,9.6767 C5.8372,9.9197 5.7202,10.1467 5.7202,10.3577 C5.7202,10.5767 5.8352,10.9067 6.0652,11.3457 C6.2952,11.7857 6.6032,12.2527 6.9902,12.7477 C7.3952,13.2877 7.7772,13.7087 8.1362,14.0107 C8.4952,14.3137 8.7802,14.4637 8.9922,14.4637 L8.9922,14.4637 Z M4.8502,14.1347 C4.9792,14.2907 5.1582,14.5197 5.3882,14.8217 C5.9962,15.6547 6.5572,16.0717 7.0732,16.0717 C7.2472,16.0717 7.4042,16.0167 7.5422,15.9067 C7.6802,15.7967 7.7492,15.6827 7.7492,15.5637 C7.7492,15.4257 7.6572,15.1967 7.4732,14.8767 C7.2892,14.5557 7.0362,14.1947 6.7142,13.7917 C6.3452,13.3247 6.0392,12.9837 5.7962,12.7677 C5.5522,12.5527 5.3562,12.4447 5.2092,12.4447 C4.8872,12.4447 4.5902,12.6167 4.3182,12.9607 C4.0472,13.3037 3.9112,13.7087 3.9112,14.1757 C3.9112,14.5517 4.0052,14.9707 4.1942,15.4327 C4.3832,15.8957 4.6572,16.3597 5.0152,16.8267 C5.5582,17.5507 6.2332,18.1067 7.0382,18.4957 C7.8442,18.8857 8.7342,19.0797 9.7102,19.0797 C11.5052,19.0797 13.0082,18.4137 14.2182,17.0817 C15.4282,15.7487 16.0332,14.0797 16.0332,12.0737 C16.0332,11.4607 15.9872,10.9737 15.8952,10.6107 C15.8042,10.2497 15.6512,9.9857 15.4392,9.8217 C15.0622,9.5097 14.3282,9.2307 13.2372,8.9837 C12.1462,8.7357 11.0082,8.6127 9.8202,8.6127 C9.4892,8.6127 9.2542,8.6677 9.1162,8.7777 C8.9782,8.8877 8.9092,9.0747 8.9092,9.3407 C8.9092,9.9637 9.2592,10.4147 9.9582,10.6937 C10.6582,10.9737 11.7902,11.1127 13.3552,11.1127 L13.9212,11.1127 C14.0502,11.1127 14.1532,11.1607 14.2312,11.2567 C14.3092,11.3527 14.3632,11.4977 14.3902,11.6897 C14.2332,11.8367 13.9122,12.0037 13.4242,12.1917 C12.9362,12.3787 12.5632,12.5647 12.3052,12.7477 C11.7542,13.1507 11.3092,13.6287 10.9732,14.1827 C10.6372,14.7367 10.4692,15.2607 10.4692,15.7557 C10.4692,16.0577 10.5402,16.4217 10.6832,16.8477 C10.8262,17.2737 10.8972,17.5367 10.8972,17.6377 L10.8972,17.7337 L10.8692,17.8577 C10.4652,17.8297 10.1452,17.5937 9.9102,17.1497 C9.6752,16.7057 9.5582,16.1127 9.5582,15.3707 L9.5582,15.2477 C9.4842,15.3117 9.4132,15.3577 9.3442,15.3847 C9.2752,15.4127 9.1992,15.4257 9.1162,15.4257 C9.0332,15.4257 8.9552,15.4197 8.8822,15.4047 C8.8072,15.3917 8.7252,15.3707 8.6332,15.3437 C8.6602,15.4447 8.6812,15.5427 8.6952,15.6387 C8.7092,15.7347 8.7162,15.8107 8.7162,15.8657 C8.7162,16.2047 8.5822,16.4957 8.3152,16.7377 C8.0482,16.9807 7.7312,17.1017 7.3632,17.1017 C6.7832,17.1017 6.1942,16.8197 5.5952,16.2567 C4.9972,15.6937 4.6982,15.1427 4.6982,14.6017 C4.6982,14.5007 4.7102,14.4117 4.7332,14.3337 C4.7552,14.2557 4.7952,14.1897 4.8502,14.1347 L4.8502,14.1347 Z M14.7352,8.5297 C15.5642,8.6867 16.1482,9.0337 16.4892,9.5737 C16.8292,10.1147 17.0002,10.9667 17.0002,12.1297 C17.0002,14.4367 16.3032,16.3257 14.9082,17.7957 C13.5132,19.2647 11.7302,19.9997 9.5582,19.9997 C8.7022,19.9997 7.8712,19.8467 7.0662,19.5397 C6.2602,19.2337 5.5682,18.8047 4.9882,18.2557 C4.3252,17.6507 3.8282,17.0127 3.4972,16.3397 C3.1652,15.6667 3.0002,14.9777 3.0002,14.2727 C3.0002,13.4847 3.1702,12.8757 3.5112,12.4447 C3.8512,12.0147 4.3892,11.7217 5.1262,11.5667 C4.9882,11.2457 4.8872,10.9757 4.8222,10.7557 C4.7582,10.5357 4.7252,10.3667 4.7252,10.2477 C4.7252,9.8357 4.9442,9.4147 5.3822,8.9837 C5.8192,8.5527 6.2312,8.3377 6.6172,8.3377 C6.7832,8.3377 6.9572,8.3677 7.1422,8.4267 C7.3262,8.4867 7.5372,8.5857 7.7772,8.7227 C7.0682,6.7267 6.5532,5.1857 6.2312,4.1007 C5.9082,3.0147 5.7472,2.2667 5.7472,1.8547 C5.7472,1.2867 5.8942,0.8357 6.1892,0.5017 C6.4842,0.1677 6.8842,-0.0003 7.3902,-0.0003 C8.2552,-0.0003 9.3512,1.9227 10.6762,5.7697 C10.9062,6.4287 11.0812,6.9367 11.2012,7.2947 C11.3032,7.0097 11.4452,6.6077 11.6292,6.0857 C12.9552,2.2757 14.0952,0.3707 15.0532,0.3707 C15.5222,0.3707 15.8972,0.5287 16.1792,0.8447 C16.4592,1.1607 16.5992,1.5847 16.5992,2.1157 C16.5992,2.5187 16.4452,3.2557 16.1372,4.3267 C15.8282,5.3987 15.3612,6.7997 14.7352,8.5297 L14.7352,8.5297 Z"
+    d: "M18.281,11.4383 L16.132,10.0003 L18.281,8.5623 L18.281,11.4383 Z M10.859,17.5343 L10.859,13.5263 L14.586,11.0343 L17.594,13.0453 L10.859,17.5343 Z M10,12.0333 L6.961,10.0003 L10,7.9663 L13.04,10.0003 L10,12.0333 Z M9.141,17.5343 L2.407,13.0453 L5.415,11.0343 L9.141,13.5263 L9.141,17.5343 Z M1.719,8.5623 L3.869,10.0003 L1.719,11.4383 L1.719,8.5623 Z M9.141,2.4653 L9.141,6.4743 L5.415,8.9663 L2.407,6.9543 L9.141,2.4653 Z M10.859,2.4653 L17.594,6.9543 L14.586,8.9663 L10.859,6.4743 L10.859,2.4653 Z M19.985,6.8033 C19.944,6.5803 19.812,6.3603 19.617,6.2383 L10.477,0.1443 C10.188,-0.0477 9.812,-0.0477 9.523,0.1443 L0.383,6.2383 C0.148,6.3943 0,6.6713 0,6.9533 L0,13.0463 C0,13.3283 0.148,13.6063 0.383,13.7613 L9.523,19.8553 C9.668,19.9523 9.834,20.0003 10,20.0003 C10.167,20.0003 10.333,19.9523 10.477,19.8553 L19.617,13.7613 C19.854,13.6133 20,13.3233 20,13.0463 L20,6.9533 C20.001,6.9023 19.996,6.8533 19.985,6.8033 L19.985,6.8033 Z"
   })));
 };
 var _path$l;
@@ -6337,14 +6607,14 @@ function _extends$l() {
   };
   return _extends$l.apply(this, arguments);
 }
-var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
+var SvgLogoDiscord20 = function SvgLogoDiscord202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
-    viewBox: "0 0 20 20"
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$l || (_path$l = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M18.281,11.4383 L16.132,10.0003 L18.281,8.5623 L18.281,11.4383 Z M10.859,17.5343 L10.859,13.5263 L14.586,11.0343 L17.594,13.0453 L10.859,17.5343 Z M10,12.0333 L6.961,10.0003 L10,7.9663 L13.04,10.0003 L10,12.0333 Z M9.141,17.5343 L2.407,13.0453 L5.415,11.0343 L9.141,13.5263 L9.141,17.5343 Z M1.719,8.5623 L3.869,10.0003 L1.719,11.4383 L1.719,8.5623 Z M9.141,2.4653 L9.141,6.4743 L5.415,8.9663 L2.407,6.9543 L9.141,2.4653 Z M10.859,2.4653 L17.594,6.9543 L14.586,8.9663 L10.859,6.4743 L10.859,2.4653 Z M19.985,6.8033 C19.944,6.5803 19.812,6.3603 19.617,6.2383 L10.477,0.1443 C10.188,-0.0477 9.812,-0.0477 9.523,0.1443 L0.383,6.2383 C0.148,6.3943 0,6.6713 0,6.9533 L0,13.0463 C0,13.3283 0.148,13.6063 0.383,13.7613 L9.523,19.8553 C9.668,19.9523 9.834,20.0003 10,20.0003 C10.167,20.0003 10.333,19.9523 10.477,19.8553 L19.617,13.7613 C19.854,13.6133 20,13.3233 20,13.0463 L20,6.9533 C20.001,6.9023 19.996,6.8533 19.985,6.8033 L19.985,6.8033 Z"
+    d: "M16.918 3.742a16.52 16.52 0 0 0-4.068-1.24.06.06 0 0 0-.065.03 11.12 11.12 0 0 0-.506 1.022 15.401 15.401 0 0 0-4.569 0 9.946 9.946 0 0 0-.515-1.022.059.059 0 0 0-.065-.03A16.586 16.586 0 0 0 3.046 3.75a.045.045 0 0 0-.011.014C.445 7.573-.265 11.287.082 14.957a.074.074 0 0 0 .028.047 16.708 16.708 0 0 0 4.988 2.493.065.065 0 0 0 .07-.022c.388-.52.73-1.07 1.025-1.645a.06.06 0 0 0 .003-.05.061.061 0 0 0-.037-.036 11.399 11.399 0 0 1-1.56-.731.063.063 0 0 1 0-.106l.31-.238a.057.057 0 0 1 .065 0 11.983 11.983 0 0 0 10.043 0 .06.06 0 0 1 .065 0c.101.083.206.164.31.241a.064.064 0 0 1 .028.053.063.063 0 0 1-.028.052c-.498.286-1.02.53-1.56.729a.067.067 0 0 0-.035.037.065.065 0 0 0 .002.051c.3.569.642 1.115 1.021 1.635a.065.065 0 0 0 .07.022 16.64 16.64 0 0 0 4.997-2.493.055.055 0 0 0 .026-.047 16.305 16.305 0 0 0-2.978-11.196.045.045 0 0 0-.017-.01ZM6.68 12.725c-.985 0-1.796-.892-1.796-1.983 0-1.092.794-1.986 1.796-1.986s1.81.897 1.796 1.983c-.014 1.085-.797 1.986-1.796 1.986Zm6.64 0c-.985 0-1.796-.892-1.796-1.983 0-1.092.794-1.986 1.796-1.986s1.81.897 1.796 1.983c-.014 1.085-.788 1.986-1.796 1.986Z"
   })));
 };
 var _path$k;
@@ -6857,6 +7127,11 @@ const SocialLinksOptions = [{
   label: "CodePen",
   icon: /* @__PURE__ */ jsxRuntime.jsx(SvgLogoCodepen20, {}),
   brandColor: "black"
+}, {
+  type: "discord",
+  label: "Discord",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(SvgLogoDiscord20, {}),
+  brandColor: "#5865F2"
 }, {
   type: "dribbble",
   label: "Dribbble",
@@ -6983,7 +7258,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 +7269,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 +7839,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 +8025,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 +8957,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 +9014,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 +9097,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 +9120,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 +9130,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 +9259,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
     }