@makeswift/runtime 0.0.0-3ead317 → 0.0.0-41fecbb

package/dist/react.cjs2.js

@@ -30,6 +30,10 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var client = require("@apollo/client");
@@ -37,6 +41,8 @@ var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var styled = require("styled-components");
 var framerMotion = require("framer-motion");
+var ssr = require("@apollo/client/react/ssr");
+var uuid = require("uuid/v4");
 var jsxRuntime = require("react/jsx-runtime");
 var boxModels = require("./box-models.cjs.js");
 var NextImage = require("next/image");
@@ -47,7 +53,6 @@ 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 formik = require("formik");
 var polished = require("polished");
 var slate = require("slate");
@@ -80,12 +85,12 @@ function _interopNamespace(e) {
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
 var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
 var ReactPlayer__default = /* @__PURE__ */ _interopDefaultLegacy(ReactPlayer);
 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 Hotkeys__default = /* @__PURE__ */ _interopDefaultLegacy(Hotkeys);
 var ipsum__default = /* @__PURE__ */ _interopDefaultLegacy(ipsum);
 var Lists__default = /* @__PURE__ */ _interopDefaultLegacy(Lists);
@@ -239,20 +244,126 @@ const TABLE_BY_ID = client.gql`
 function isNonNullable(value) {
   return value != null;
 }
+const typePolicies = {
+  Query: {
+    fields: {
+      swatches(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Swatch",
+          id
+        }, true));
+      },
+      file(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "File",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      files(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "File",
+          id
+        }, true));
+      },
+      typographies(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Typography",
+          id
+        }, true));
+      },
+      pagePathnamesById(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "PagePathnameSlice",
+          id
+        }, true));
+      },
+      globalElement(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "GlobalElement",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      table(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Table",
+          id: args == null ? void 0 : args.id
+        }, true);
+      }
+    }
+  }
+};
+function createApolloClient({
+  uri,
+  cacheData
+}) {
+  const cache = new client.InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache.restore(cacheData);
+  return new client.ApolloClient({
+    uri,
+    cache
+  });
+}
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "apolloClient");
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    const id = uuid__default["default"]();
+    await ssr.getDataFromTree(/* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
+      client: this,
+      defaultRootElements: /* @__PURE__ */ new Map([[id, element]]),
+      children: /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
+        documentReference: reactPage.createDocumentReference(id)
+      })
+    }));
+    return this.apolloClient.cache.extract();
+  }
+}
 const Context$2 = React.createContext(void 0);
 function useQuery(query, options) {
   const client$1 = React.useContext(Context$2);
   return client.useQuery(query, __spreadValues({
-    client: client$1
+    client: client$1 == null ? void 0 : client$1.apolloClient
   }, options));
 }
 function useMutation(mutation, options) {
   const client$1 = React.useContext(Context$2);
   return client.useMutation(mutation, __spreadValues({
-    client: client$1
+    client: client$1 == null ? void 0 : client$1.apolloClient
   }, options));
 }
-function ApolloProvider({
+function MakeswiftProvider({
   client: client2,
   children
 }) {
@@ -1107,7 +1218,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 +1272,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 +1351,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 +1378,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 +1414,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 +1432,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 +1449,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 +1645,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 +2143,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 +2239,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 +2348,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 +2397,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 +2697,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 +2773,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 +2900,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 +3140,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 +3189,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 +3325,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 +3384,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 +3393,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 +3443,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 +3523,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 +3533,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 +3755,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 +3790,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 +3957,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 +4077,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 +4220,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 +4333,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 +4405,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 +4470,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 +5163,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 +5723,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 +5777,7 @@ function MobileMenu({
   onClose = () => {
   }
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
     animation,
     backgroundColor: useColor(backgroundColor),
     open,
@@ -5688,7 +5803,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 +5860,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 +5908,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 +6085,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 +6762,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 +6846,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 +6882,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 +7419,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 +7497,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 +7607,8 @@ function registerBuiltinComponents(runtime) {
     unregisterRootComponent();
     unregisterSocialLinksComponent();
     unregisterTextComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
   };
 }
 const contextDefaultValue = reactPage.configureStore();
@@ -7436,10 +7637,9 @@ function createReactRuntime(store) {
 const ReactRuntime = createReactRuntime(contextDefaultValue);
 const Context = React.createContext(contextDefaultValue);
 function RuntimeProvider({
+  client: client2,
   children,
-  defaultRootElements,
-  registerComponents,
-  makeswiftApiEndpoint
+  defaultRootElements
 }) {
   const [store, setStore] = React.useState(() => {
     const store2 = reactPage.configureStore({
@@ -7448,27 +7648,11 @@ function RuntimeProvider({
     });
     const runtime = createReactRuntime(store2);
     registerBuiltinComponents(runtime);
-    registerComponents == null ? void 0 : registerComponents(runtime);
     return store2;
   });
-  const [client$1, setClient] = React.useState(new client.ApolloClient({
-    uri: makeswiftApiEndpoint,
-    cache: new client.InMemoryCache()
-  }));
-  React.useEffect(() => {
-    setClient(({
-      cache
-    }) => new client.ApolloClient({
-      uri: makeswiftApiEndpoint,
-      cache
-    }));
-  }, [makeswiftApiEndpoint]);
   React.useEffect(() => {
     return registerBuiltinComponents(createReactRuntime(store));
   }, [store]);
-  React.useEffect(() => {
-    return registerComponents == null ? void 0 : registerComponents(createReactRuntime(store));
-  }, [store, registerComponents]);
   React.useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (isInBuilder)
@@ -7479,20 +7663,17 @@ function RuntimeProvider({
       });
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client: client$1
+        client: client2.apolloClient
       }));
     }
-  }, [client$1]);
+  }, [client2]);
   React.useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (!isInBuilder)
       return;
-    const lastDocumentOverflow = window.document.documentElement.style.overflow;
-    window.document.documentElement.style.overflow = "hidden";
     window.addEventListener("focusin", handleFocusIn);
     window.addEventListener("focusout", handlefocusOut);
     return () => {
-      window.document.documentElement.style.overflow = lastDocumentOverflow;
       window.addEventListener("focusin", handleFocusIn);
       window.removeEventListener("focusout", handlefocusOut);
     };
@@ -7509,8 +7690,8 @@ function RuntimeProvider({
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
     value: store,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ApolloProvider, {
-      client: client$1,
+    children: /* @__PURE__ */ jsxRuntime.jsx(MakeswiftProvider, {
+      client: client2,
       children
     })
   });
@@ -7708,6 +7889,7 @@ exports.Element = Element$1;
 exports.Embed = Embed;
 exports.Form = Form;
 exports.ImageComponent = ImageComponent;
+exports.MakeswiftClient = MakeswiftClient;
 exports.Navigation = Navigation;
 exports.PageProvider = PageProvider;
 exports.ReactRuntime = ReactRuntime;
@@ -7725,7 +7907,7 @@ 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;