@makeswift/runtime 0.0.0-25251c0 → 0.0.0-2efc6ab

package/dist/react.cjs2.js

@@ -261,6 +261,89 @@ function ApolloProvider({
     children
   });
 }
+const typePolicies = {
+  Query: {
+    fields: {
+      swatches(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Swatch",
+          id
+        }));
+      },
+      file(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "File",
+          id: args == null ? void 0 : args.id
+        });
+      },
+      files(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "File",
+          id
+        }));
+      },
+      typographies(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Typography",
+          id
+        }));
+      },
+      pagePathnamesById(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "PagePathnameSlice",
+          id
+        }));
+      },
+      globalElement(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "GlobalElement",
+          id: args == null ? void 0 : args.id
+        });
+      },
+      table(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Table",
+          id: args == null ? void 0 : args.id
+        });
+      }
+    }
+  }
+};
+function createApolloClient({
+  uri,
+  cacheData
+}) {
+  const cache = new client.InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache.restore(cacheData);
+  return new client.ApolloClient({
+    uri,
+    cache
+  });
+}
 function useBackgrounds(value) {
   const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
   const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
@@ -1107,7 +1190,7 @@ function Parallax(_g2) {
     children: children(getProps)
   }));
 }
-const Container$c = styled__default["default"].div`
+const Container$d = styled__default["default"].div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1161,7 +1244,7 @@ function BackgroundVideo({
   }, [aspectRatio, zoom]);
   if (!ReactPlayer__default["default"].canPlay(url))
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$c, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$d, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], {
       url,
@@ -1240,10 +1323,10 @@ const AbsoluteFill = styled__default["default"].div`
   right: 0;
   bottom: 0;
 `;
-const Container$b = styled__default["default"](AbsoluteFill)`
+const Container$c = styled__default["default"](AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled__default["default"](Container$b)`
+const BackgroundsContainer$1 = styled__default["default"](Container$c)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => styled.css`
         display: ${visibility === true ? "block" : "none"};
@@ -1267,7 +1350,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsxRuntime.jsx(Container$b, {
+            return /* @__PURE__ */ jsxRuntime.jsx(Container$c, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1303,7 +1386,7 @@ function Backgrounds({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$b, __spreadValues({}, getParallaxProps({
+              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$c, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1321,7 +1404,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsxRuntime.jsx(Container$b, {
+            return /* @__PURE__ */ jsxRuntime.jsx(Container$c, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1338,7 +1421,7 @@ function Backgrounds({
             } = bg.payload;
             return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$b, __spreadProps(__spreadValues({}, getParallaxProps({})), {
+              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$c, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1534,7 +1617,7 @@ const Box = React.forwardRef(function Box2({
     })
   }, key == null ? void 0 : key.container);
 });
-function registerComponent$b(runtime) {
+function registerComponent$c(runtime) {
   return runtime.registerComponent(Box, {
     type: "./components/Box/index.js",
     label: "Box",
@@ -2032,7 +2115,7 @@ const Button$1 = React.forwardRef(function Button2(_m, ref) {
     children: children == null ? "Button Text" : children
   }));
 });
-function registerComponent$a(runtime) {
+function registerComponent$b(runtime) {
   return runtime.registerComponent(Button$1, {
     type: "./components/Button/index.js",
     label: "Button",
@@ -2128,6 +2211,10 @@ const placeholders = {
   image: {
     src: "data:image/svg+xml,%3Csvg width='360' height='240' viewBox='0 0 360 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M260 59C260 78.33 244.33 94 225 94C205.67 94 190 78.33 190 59C190 39.67 205.67 24 225 24C244.33 24 260 39.67 260 59Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M319 250H417L291.485 124.485C286.799 119.799 279.201 119.799 274.515 124.485L234 165L319 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath d='M311 250L-89 250L102.515 58.4853C107.201 53.799 114.799 53.799 119.485 58.4853L311 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A",
     dimensions: { width: 360, height: 240 }
+  },
+  video: {
+    src: "data:image/svg+xml,%3Csvg width='712' height='400' viewBox='0 0 712 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M712 0H0V400H712V0ZM356 240C378.091 240 396 222.091 396 200C396 177.909 378.091 160 356 160C333.909 160 316 177.909 316 200C316 222.091 333.909 240 356 240Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M344 216.503V183.497C344 181.95 345.681 180.989 347.014 181.773L375.069 198.276C376.384 199.049 376.384 200.951 375.069 201.724L347.014 218.227C345.681 219.011 344 218.05 344 216.503Z' fill='%23A1A8C2' fill-opacity='0.4'/%3E%3C/svg%3E%0A",
+    dimensions: { width: 712, height: 400 }
   }
 };
 function loadImage(src) {
@@ -2233,7 +2320,7 @@ const ImageComponent = React.forwardRef(function Image2({
     })
   });
 });
-function registerComponent$9(runtime) {
+function registerComponent$a(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2282,7 +2369,7 @@ const RightChevron = () => /* @__PURE__ */ jsxRuntime.jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$a = styled__default["default"].div`
+const Container$b = styled__default["default"].div`
   position: relative;
   height: 100%;
 `;
@@ -2582,7 +2669,7 @@ const Carousel = React.forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$a, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$b, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ClipMask, {
         children: /* @__PURE__ */ jsxRuntime.jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2658,7 +2745,7 @@ const Carousel = React.forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2785,7 +2872,7 @@ const Segment = styled__default["default"].div`
   flex: 1;
   text-align: center;
 `;
-const Container$9 = styled__default["default"].div`
+const Container$a = styled__default["default"].div`
   display: flex;
   ${cssWidth("560px")}
   ${cssMargin()}
@@ -3025,7 +3112,7 @@ const Countdown = React.forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$9, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$a, {
     ref,
     id,
     width,
@@ -3074,7 +3161,7 @@ const Countdown = React.forwardRef(function Countdown2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$8(runtime) {
   return runtime.registerComponent(Countdown, {
     type: "./components/Countdown/index.js",
     label: "Countdown",
@@ -3210,7 +3297,7 @@ const IE11MinHeightContainer = styled__default["default"].div`
   ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$8 = styled__default["default"].div`
+const Container$9 = styled__default["default"].div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3269,7 +3356,7 @@ const Divider = React.forwardRef(function Divider2({
     id,
     width,
     margin,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Container$8, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(Container$9, {
       children: /* @__PURE__ */ jsxRuntime.jsx(Line, {
         variant,
         thickness,
@@ -3278,7 +3365,7 @@ const Divider = React.forwardRef(function Divider2({
     })
   });
 });
-function registerComponent$6(runtime) {
+function registerComponent$7(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3328,7 +3415,7 @@ function registerComponent$6(runtime) {
     }
   });
 }
-const Container$7 = styled__default["default"].div`
+const Container$8 = styled__default["default"].div`
   min-height: 15px;
   ${cssWidth()}
   ${cssMargin()}
@@ -3408,7 +3495,7 @@ const Embed = React.forwardRef(function Embed2({
   }, [container, html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Container$7, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container$8, {
     ref: setContainer,
     id,
     margin,
@@ -3418,7 +3505,7 @@ const Embed = React.forwardRef(function Embed2({
     }
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Embed, {
     type: "./components/Embed/index.js",
     label: "Embed",
@@ -3640,7 +3727,7 @@ var Input$2 = React.forwardRef(function Input2(_o, ref) {
     brandColor
   }));
 });
-const Container$6 = styled__default["default"].div`
+const Container$7 = styled__default["default"].div`
   display: flex;
   flex-direction: column;
   ${cssWidth()};
@@ -3675,7 +3762,7 @@ var Placeholder$1 = React.forwardRef(function Placeholder3({
   width,
   margin
 }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$6, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$7, {
     ref,
     width,
     margin,
@@ -3842,7 +3929,7 @@ function getCheckmarkColor$1({
     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$6 = styled__default["default"].div`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
@@ -3962,7 +4049,7 @@ var Checkbox = React.forwardRef(function Checkbox2(_w, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$5, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$6, {
     size,
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
       type: "checkbox",
@@ -4105,7 +4192,7 @@ function getCheckmarkColor({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$4 = styled__default["default"].div`
+const Container$5 = styled__default["default"].div`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
@@ -4218,7 +4305,7 @@ var RadioButton = React.forwardRef(function RadioButton2(_C, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$4, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$5, {
     size,
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
       ref,
@@ -4290,7 +4377,7 @@ var TableColumnRadioButtonGroup = React.forwardRef(function TableColumnRadioButt
     }, option.id))]
   });
 });
-const Container$3 = styled__default["default"].div`
+const Container$4 = styled__default["default"].div`
   ${cssField()}
   display: flex;
   align-items: center;
@@ -4355,7 +4442,7 @@ var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
       htmlFor: id,
       children: label
-    }), /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Container$4, {
       error,
       shape,
       size,
@@ -5048,7 +5135,7 @@ const Form = React.forwardRef(function Form2({
     })
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$5(runtime) {
   return runtime.registerComponent(Form, {
     type: "./components/Form/index.js",
     label: "Form",
@@ -5608,7 +5695,7 @@ function MobileDropDownButton(_Y) {
 const ButtonLink = styled__default["default"](Button$1)`
   margin: 8px 0;
 `;
-const Container$2 = styled__default["default"].div`
+const Container$3 = styled__default["default"].div`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -5662,7 +5749,7 @@ function MobileMenu({
   onClose = () => {
   }
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
     animation,
     backgroundColor: useColor(backgroundColor),
     open,
@@ -5688,7 +5775,7 @@ function MobileMenu({
     })]
   });
 }
-const Container$1 = styled__default["default"].nav`
+const Container$2 = styled__default["default"].nav`
   display: flex;
   align-items: center;
   ${cssWidth()}
@@ -5745,7 +5832,7 @@ const Navigation = React.forwardRef(function Navigation2({
   margin
 }, ref) {
   const [isOpen, setIsOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$1, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
     ref,
     id,
     margin,
@@ -5793,7 +5880,7 @@ const Navigation = React.forwardRef(function Navigation2({
     })]
   });
 });
-function registerComponent$3(runtime) {
+function registerComponent$4(runtime) {
   return runtime.registerComponent(Navigation, {
     type: "./components/Navigation/index.js",
     label: "Navigation",
@@ -5970,7 +6057,7 @@ const Root = React.forwardRef(function Page2({
     })]
   });
 });
-function registerComponent$2(runtime) {
+function registerComponent$3(runtime) {
   return runtime.registerComponent(Root, {
     type: "./components/Root/index.js",
     label: "Page",
@@ -6647,7 +6734,7 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container = styled__default["default"].div`
+const Container$1 = styled__default["default"].div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -6731,7 +6818,7 @@ const SocialLinks = React.forwardRef(function SocialLinks2({
 }, ref) {
   const fillData = useColor(fill);
   const backgroundColorData = useColor(backgroundColor);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container$1, {
     ref,
     id,
     alignment,
@@ -6767,7 +6854,7 @@ const SocialLinks = React.forwardRef(function SocialLinks2({
     })
   });
 });
-function registerComponent$1(runtime) {
+function registerComponent$2(runtime) {
   return runtime.registerComponent(SocialLinks, {
     type: "./components/SocialLinks/index.js",
     label: "Social Links",
@@ -7304,7 +7391,7 @@ const Text = React.forwardRef(function Text2({
     onKeyDown: handleKeyDown
   });
 });
-function registerComponent(runtime) {
+function registerComponent$1(runtime) {
   return runtime.registerComponent(Text, {
     type: "./components/Text/index.js",
     label: "Text",
@@ -7382,19 +7469,103 @@ function registerComponent(runtime) {
     }
   });
 }
+const Container = styled__default["default"].div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  ${cssWidth("560px")}
+  ${cssMargin()}
+  ${cssBorderRadius()}
+`;
+const ASPECT_RATIO = 16 / 9;
+const Video = React.forwardRef(function Video2({
+  id,
+  video,
+  width,
+  margin,
+  borderRadius
+}, ref) {
+  const canPlayUrl = video && video.url != null && ReactPlayer__default["default"].canPlay(video.url);
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
+    ref,
+    id,
+    width,
+    margin,
+    borderRadius,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      style: {
+        position: "relative",
+        paddingTop: `${100 / ASPECT_RATIO}%`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: canPlayUrl === true ? /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], __spreadProps(__spreadValues({}, video), {
+          width: "100%",
+          height: "100%",
+          config: {
+            vimeo: {
+              playerOptions: {
+                background: video != null && !video.controls
+              }
+            },
+            wistia: {
+              options: {
+                endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
+              }
+            }
+          }
+        })) : /* @__PURE__ */ jsxRuntime.jsx("img", {
+          width: "100%",
+          src: placeholders.video.src,
+          alt: "Video Placeholder"
+        })
+      })
+    })
+  });
+});
+function registerComponent(runtime) {
+  return runtime.registerComponent(Video, {
+    type: "./components/Video/index.js",
+    label: "Video",
+    icon: "Video40",
+    props: {
+      id: descriptors.ElementID(),
+      video: descriptors.Video({
+        preset: {
+          controls: true
+        }
+      }),
+      width: descriptors.Width({
+        defaultValue: {
+          value: 560,
+          unit: "px"
+        }
+      }),
+      margin: descriptors.Margin(),
+      borderRadius: descriptors.BorderRadius()
+    }
+  });
+}
 function registerBuiltinComponents(runtime) {
-  const unregisterBoxComponent = registerComponent$b(runtime);
-  const unregisterButtonComponent = registerComponent$a(runtime);
-  const unregisterCarouselComponent = registerComponent$8(runtime);
-  const unregisterCountdownComponent = registerComponent$7(runtime);
-  const unregisterDividerComponent = registerComponent$6(runtime);
-  const unregisterEmbedComponent = registerComponent$5(runtime);
-  const unregisterFormComponent = registerComponent$4(runtime);
-  const unregisterImageComponent = registerComponent$9(runtime);
-  const unregisterNavigationComponent = registerComponent$3(runtime);
-  const unregisterRootComponent = registerComponent$2(runtime);
-  const unregisterSocialLinksComponent = registerComponent$1(runtime);
-  const unregisterTextComponent = registerComponent(runtime);
+  const unregisterBoxComponent = registerComponent$c(runtime);
+  const unregisterButtonComponent = registerComponent$b(runtime);
+  const unregisterCarouselComponent = registerComponent$9(runtime);
+  const unregisterCountdownComponent = registerComponent$8(runtime);
+  const unregisterDividerComponent = registerComponent$7(runtime);
+  const unregisterEmbedComponent = registerComponent$6(runtime);
+  const unregisterFormComponent = registerComponent$5(runtime);
+  const unregisterImageComponent = registerComponent$a(runtime);
+  const unregisterNavigationComponent = registerComponent$4(runtime);
+  const unregisterRootComponent = registerComponent$3(runtime);
+  const unregisterSocialLinksComponent = registerComponent$2(runtime);
+  const unregisterTextComponent = registerComponent$1(runtime);
+  const unregisterVideoComponent = registerComponent(runtime);
   return () => {
     unregisterBoxComponent();
     unregisterButtonComponent();
@@ -7408,6 +7579,8 @@ function registerBuiltinComponents(runtime) {
     unregisterRootComponent();
     unregisterSocialLinksComponent();
     unregisterTextComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
   };
 }
 const contextDefaultValue = reactPage.configureStore();
@@ -7451,16 +7624,15 @@ function RuntimeProvider({
     registerComponents == null ? void 0 : registerComponents(runtime);
     return store2;
   });
-  const [client$1, setClient] = React.useState(new client.ApolloClient({
-    uri: makeswiftApiEndpoint,
-    cache: new client.InMemoryCache()
+  const [client2, setClient] = React.useState(createApolloClient({
+    uri: makeswiftApiEndpoint
   }));
   React.useEffect(() => {
     setClient(({
       cache
-    }) => new client.ApolloClient({
+    }) => createApolloClient({
       uri: makeswiftApiEndpoint,
-      cache
+      cacheData: cache.extract()
     }));
   }, [makeswiftApiEndpoint]);
   React.useEffect(() => {
@@ -7479,10 +7651,10 @@ function RuntimeProvider({
       });
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client: client$1
+        client: client2
       }));
     }
-  }, [client$1]);
+  }, [client2]);
   React.useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (!isInBuilder)
@@ -7507,7 +7679,7 @@ function RuntimeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
     value: store,
     children: /* @__PURE__ */ jsxRuntime.jsx(ApolloProvider, {
-      client: client$1,
+      client: client2,
       children
     })
   });
@@ -7722,7 +7894,15 @@ exports.cssPadding = cssPadding;
 exports.cssTextStyle = cssTextStyle;
 exports.cssWidth = cssWidth;
 exports.registerBuiltinComponents = registerBuiltinComponents;
-exports.registerComponent = registerComponent$b;
+exports.registerComponent = registerComponent$c;
+exports.useBackgrounds = useBackgrounds;
+exports.useBorder = useBorder;
+exports.useBoxShadow = useBoxShadow;
+exports.useColor = useColor;
+exports.useFile = useFile;
 exports.useIsInBuilder = useIsInBuilder;
+exports.useMediaQuery = useMediaQuery;
+exports.usePage = usePage;
 exports.usePageId = usePageId;
+exports.useTable = useTable;
 //# sourceMappingURL=react.cjs2.js.map