@makeswift/runtime 0.0.0-25251c0 → 0.0.0-41fecbb

package/dist/react.es2.js

@@ -29,25 +29,30 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import * as React from "react";
 import { forwardRef, createContext, useContext, useMemo, useState, useLayoutEffect, useCallback, useEffect, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, memo } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
-import { g as getIsInBuilder, a as configureStore, b as getElementId, d as getReactComponent, e as getDocument, i as isElementReference } from "./react-page.es.js";
+import { a as createDocumentReference, g as getIsInBuilder, b as configureStore, d as getElementId, e as getReactComponent, f as getDocument, i as isElementReference } from "./react-page.es.js";
 import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect } from "./actions.es.js";
 import styled, { css, keyframes, createGlobalStyle } from "styled-components";
 import { useReducedMotion, useAnimation, motion } from "framer-motion";
+import { getDataFromTree } from "@apollo/client/react/ssr";
+import uuid from "uuid/v4";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
 import NextImage from "next/image";
 import ReactPlayer from "react-player";
-import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText } from "./descriptors.es.js";
+import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText, V as Video$1 } from "./descriptors.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import NextLink from "next/link";
 import { useGesture } from "react-use-gesture";
 import { wrap } from "@popmotion/popcorn";
-import uuid from "uuid/v4";
 import { Field as Field$1, getIn, Formik } from "formik";
 import { normalize } from "polished";
 import { Value } from "slate";
@@ -205,20 +210,126 @@ const TABLE_BY_ID = 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 InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache.restore(cacheData);
+  return new ApolloClient({
+    uri,
+    cache
+  });
+}
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "apolloClient");
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    const id = uuid();
+    await getDataFromTree(/* @__PURE__ */ jsx(RuntimeProvider, {
+      client: this,
+      defaultRootElements: /* @__PURE__ */ new Map([[id, element]]),
+      children: /* @__PURE__ */ jsx(DocumentReference, {
+        documentReference: createDocumentReference(id)
+      })
+    }));
+    return this.apolloClient.cache.extract();
+  }
+}
 const Context$2 = createContext(void 0);
 function useQuery(query, options) {
   const client = useContext(Context$2);
   return useQuery$1(query, __spreadValues({
-    client
+    client: client == null ? void 0 : client.apolloClient
   }, options));
 }
 function useMutation(mutation, options) {
   const client = useContext(Context$2);
   return useMutation$1(mutation, __spreadValues({
-    client
+    client: client == null ? void 0 : client.apolloClient
   }, options));
 }
-function ApolloProvider({
+function MakeswiftProvider({
   client,
   children
 }) {
@@ -1073,7 +1184,7 @@ function Parallax(_g2) {
     children: children(getProps)
   }));
 }
-const Container$c = styled.div`
+const Container$d = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1127,7 +1238,7 @@ function BackgroundVideo({
   }, [aspectRatio, zoom]);
   if (!ReactPlayer.canPlay(url))
     return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsxs(Container$c, {
+  return /* @__PURE__ */ jsxs(Container$d, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
       url,
@@ -1206,10 +1317,10 @@ const AbsoluteFill = styled.div`
   right: 0;
   bottom: 0;
 `;
-const Container$b = styled(AbsoluteFill)`
+const Container$c = styled(AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled(Container$b)`
+const BackgroundsContainer$1 = styled(Container$c)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => css`
         display: ${visibility === true ? "block" : "none"};
@@ -1233,7 +1344,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsx(Container$b, {
+            return /* @__PURE__ */ jsx(Container$c, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1269,7 +1380,7 @@ function Backgrounds({
             }
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$b, __spreadValues({}, getParallaxProps({
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$c, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1287,7 +1398,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsx(Container$b, {
+            return /* @__PURE__ */ jsx(Container$c, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1304,7 +1415,7 @@ function Backgrounds({
             } = bg.payload;
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$b, __spreadProps(__spreadValues({}, getParallaxProps({})), {
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$c, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1500,7 +1611,7 @@ const Box = 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",
@@ -1998,7 +2109,7 @@ const Button$1 = 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",
@@ -2094,6 +2205,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) {
@@ -2199,7 +2314,7 @@ const ImageComponent = forwardRef(function Image2({
     })
   });
 });
-function registerComponent$9(runtime) {
+function registerComponent$a(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2248,7 +2363,7 @@ const RightChevron = () => /* @__PURE__ */ jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$a = styled.div`
+const Container$b = styled.div`
   position: relative;
   height: 100%;
 `;
@@ -2548,7 +2663,7 @@ const Carousel = forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxs(Container$a, {
+    children: [/* @__PURE__ */ jsxs(Container$b, {
       children: [/* @__PURE__ */ jsx(ClipMask, {
         children: /* @__PURE__ */ jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2624,7 +2739,7 @@ const Carousel = forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2751,7 +2866,7 @@ const Segment = styled.div`
   flex: 1;
   text-align: center;
 `;
-const Container$9 = styled.div`
+const Container$a = styled.div`
   display: flex;
   ${cssWidth("560px")}
   ${cssMargin()}
@@ -2991,7 +3106,7 @@ const Countdown = forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxs(Container$9, {
+  return /* @__PURE__ */ jsxs(Container$a, {
     ref,
     id,
     width,
@@ -3040,7 +3155,7 @@ const Countdown = forwardRef(function Countdown2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$8(runtime) {
   return runtime.registerComponent(Countdown, {
     type: "./components/Countdown/index.js",
     label: "Countdown",
@@ -3176,7 +3291,7 @@ const IE11MinHeightContainer = styled.div`
   ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$8 = styled.div`
+const Container$9 = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3235,7 +3350,7 @@ const Divider = forwardRef(function Divider2({
     id,
     width,
     margin,
-    children: /* @__PURE__ */ jsx(Container$8, {
+    children: /* @__PURE__ */ jsx(Container$9, {
       children: /* @__PURE__ */ jsx(Line, {
         variant,
         thickness,
@@ -3244,7 +3359,7 @@ const Divider = forwardRef(function Divider2({
     })
   });
 });
-function registerComponent$6(runtime) {
+function registerComponent$7(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3294,7 +3409,7 @@ function registerComponent$6(runtime) {
     }
   });
 }
-const Container$7 = styled.div`
+const Container$8 = styled.div`
   min-height: 15px;
   ${cssWidth()}
   ${cssMargin()}
@@ -3374,7 +3489,7 @@ const Embed = forwardRef(function Embed2({
   }, [container, html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsx(Container$7, {
+  return /* @__PURE__ */ jsx(Container$8, {
     ref: setContainer,
     id,
     margin,
@@ -3384,7 +3499,7 @@ const Embed = forwardRef(function Embed2({
     }
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Embed, {
     type: "./components/Embed/index.js",
     label: "Embed",
@@ -3606,7 +3721,7 @@ var Input$2 = forwardRef(function Input(_o, ref) {
     brandColor
   }));
 });
-const Container$6 = styled.div`
+const Container$7 = styled.div`
   display: flex;
   flex-direction: column;
   ${cssWidth()};
@@ -3641,7 +3756,7 @@ var Placeholder$1 = forwardRef(function Placeholder2({
   width,
   margin
 }, ref) {
-  return /* @__PURE__ */ jsxs(Container$6, {
+  return /* @__PURE__ */ jsxs(Container$7, {
     ref,
     width,
     margin,
@@ -3808,7 +3923,7 @@ function getCheckmarkColor$1({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$5 = styled.div`
+const Container$6 = styled.div`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
         height: ${getSizeHeight(size)}px;
@@ -3928,7 +4043,7 @@ var Checkbox = forwardRef(function Checkbox2(_w, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsxs(Container$5, {
+  return /* @__PURE__ */ jsxs(Container$6, {
     size,
     children: [/* @__PURE__ */ jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
       type: "checkbox",
@@ -4071,7 +4186,7 @@ function getCheckmarkColor({
     l
   }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
 }
-const Container$4 = styled.div`
+const Container$5 = styled.div`
   position: relative;
   ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
         height: ${getSizeHeight(size)}px;
@@ -4184,7 +4299,7 @@ var RadioButton = forwardRef(function RadioButton2(_C, ref) {
     contrast,
     brandColor
   } = useFormContext();
-  return /* @__PURE__ */ jsxs(Container$4, {
+  return /* @__PURE__ */ jsxs(Container$5, {
     size,
     children: [/* @__PURE__ */ jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
       ref,
@@ -4256,7 +4371,7 @@ var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGrou
     }, option.id))]
   });
 });
-const Container$3 = styled.div`
+const Container$4 = styled.div`
   ${cssField()}
   display: flex;
   align-items: center;
@@ -4321,7 +4436,7 @@ var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_G, r
     children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
       htmlFor: id,
       children: label
-    }), /* @__PURE__ */ jsxs(Container$3, {
+    }), /* @__PURE__ */ jsxs(Container$4, {
       error,
       shape,
       size,
@@ -5014,7 +5129,7 @@ const Form = forwardRef(function Form2({
     })
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$5(runtime) {
   return runtime.registerComponent(Form, {
     type: "./components/Form/index.js",
     label: "Form",
@@ -5574,7 +5689,7 @@ function MobileDropDownButton(_Y) {
 const ButtonLink = styled(Button$1)`
   margin: 8px 0;
 `;
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -5628,7 +5743,7 @@ function MobileMenu({
   onClose = () => {
   }
 }) {
-  return /* @__PURE__ */ jsxs(Container$2, {
+  return /* @__PURE__ */ jsxs(Container$3, {
     animation,
     backgroundColor: useColor(backgroundColor),
     open,
@@ -5654,7 +5769,7 @@ function MobileMenu({
     })]
   });
 }
-const Container$1 = styled.nav`
+const Container$2 = styled.nav`
   display: flex;
   align-items: center;
   ${cssWidth()}
@@ -5711,7 +5826,7 @@ const Navigation = forwardRef(function Navigation2({
   margin
 }, ref) {
   const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Container$1, {
+  return /* @__PURE__ */ jsxs(Container$2, {
     ref,
     id,
     margin,
@@ -5759,7 +5874,7 @@ const Navigation = forwardRef(function Navigation2({
     })]
   });
 });
-function registerComponent$3(runtime) {
+function registerComponent$4(runtime) {
   return runtime.registerComponent(Navigation, {
     type: "./components/Navigation/index.js",
     label: "Navigation",
@@ -5936,7 +6051,7 @@ const Root = forwardRef(function Page2({
     })]
   });
 });
-function registerComponent$2(runtime) {
+function registerComponent$3(runtime) {
   return runtime.registerComponent(Root, {
     type: "./components/Root/index.js",
     label: "Page",
@@ -6613,7 +6728,7 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container = styled.div`
+const Container$1 = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -6697,7 +6812,7 @@ const SocialLinks = forwardRef(function SocialLinks2({
 }, ref) {
   const fillData = useColor(fill);
   const backgroundColorData = useColor(backgroundColor);
-  return /* @__PURE__ */ jsx(Container, {
+  return /* @__PURE__ */ jsx(Container$1, {
     ref,
     id,
     alignment,
@@ -6733,7 +6848,7 @@ const SocialLinks = forwardRef(function SocialLinks2({
     })
   });
 });
-function registerComponent$1(runtime) {
+function registerComponent$2(runtime) {
   return runtime.registerComponent(SocialLinks, {
     type: "./components/SocialLinks/index.js",
     label: "Social Links",
@@ -7270,7 +7385,7 @@ const Text = forwardRef(function Text2({
     onKeyDown: handleKeyDown
   });
 });
-function registerComponent(runtime) {
+function registerComponent$1(runtime) {
   return runtime.registerComponent(Text, {
     type: "./components/Text/index.js",
     label: "Text",
@@ -7348,19 +7463,103 @@ function registerComponent(runtime) {
     }
   });
 }
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  ${cssWidth("560px")}
+  ${cssMargin()}
+  ${cssBorderRadius()}
+`;
+const ASPECT_RATIO = 16 / 9;
+const Video = forwardRef(function Video2({
+  id,
+  video,
+  width,
+  margin,
+  borderRadius
+}, ref) {
+  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url);
+  return /* @__PURE__ */ jsx(Container, {
+    ref,
+    id,
+    width,
+    margin,
+    borderRadius,
+    children: /* @__PURE__ */ jsx("div", {
+      style: {
+        position: "relative",
+        paddingTop: `${100 / ASPECT_RATIO}%`
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: canPlayUrl === true ? /* @__PURE__ */ jsx(ReactPlayer, __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__ */ 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: ElementID(),
+      video: Video$1({
+        preset: {
+          controls: true
+        }
+      }),
+      width: Width({
+        defaultValue: {
+          value: 560,
+          unit: "px"
+        }
+      }),
+      margin: Margin(),
+      borderRadius: 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();
@@ -7374,6 +7573,8 @@ function registerBuiltinComponents(runtime) {
     unregisterRootComponent();
     unregisterSocialLinksComponent();
     unregisterTextComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
   };
 }
 const contextDefaultValue = configureStore();
@@ -7402,10 +7603,9 @@ function createReactRuntime(store) {
 const ReactRuntime = createReactRuntime(contextDefaultValue);
 const Context = createContext(contextDefaultValue);
 function RuntimeProvider({
+  client,
   children,
-  defaultRootElements,
-  registerComponents,
-  makeswiftApiEndpoint
+  defaultRootElements
 }) {
   const [store, setStore] = useState(() => {
     const store2 = configureStore({
@@ -7414,27 +7614,11 @@ function RuntimeProvider({
     });
     const runtime = createReactRuntime(store2);
     registerBuiltinComponents(runtime);
-    registerComponents == null ? void 0 : registerComponents(runtime);
     return store2;
   });
-  const [client, setClient] = useState(new ApolloClient({
-    uri: makeswiftApiEndpoint,
-    cache: new InMemoryCache()
-  }));
-  useEffect(() => {
-    setClient(({
-      cache
-    }) => new ApolloClient({
-      uri: makeswiftApiEndpoint,
-      cache
-    }));
-  }, [makeswiftApiEndpoint]);
   useEffect(() => {
     return registerBuiltinComponents(createReactRuntime(store));
   }, [store]);
-  useEffect(() => {
-    return registerComponents == null ? void 0 : registerComponents(createReactRuntime(store));
-  }, [store, registerComponents]);
   useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (isInBuilder)
@@ -7443,7 +7627,7 @@ function RuntimeProvider({
       const ReactBuilderPreview = await import("./react-builder-preview.es.js");
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client
+        client: client.apolloClient
       }));
     }
   }, [client]);
@@ -7470,7 +7654,7 @@ function RuntimeProvider({
   }, []);
   return /* @__PURE__ */ jsx(Context.Provider, {
     value: store,
-    children: /* @__PURE__ */ jsx(ApolloProvider, {
+    children: /* @__PURE__ */ jsx(MakeswiftProvider, {
       client,
       children
     })
@@ -7652,5 +7836,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document
   });
 }));
-export { Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, ImageComponent as I, Navigation as N, PageProvider as P, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$b as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
+export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
 //# sourceMappingURL=react.es2.js.map