@makeswift/runtime 0.0.0-1faafb3 → 0.0.0-20221019211549

package/dist/index.cjs.js

@@ -0,0 +1,3211 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __restKey = (key) => typeof key === "symbol" ? key : key + "";
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var _e;
+var React = require("react");
+var withSelector = require("use-sync-external-store/shim/with-selector");
+var reactPage = require("./react-page.cjs.js");
+var actions = require("./actions.cjs.js");
+var dynamic = require("next/dynamic");
+var client = require("@apollo/client");
+var batchHttp = require("@apollo/client/link/batch-http");
+var slate = require("slate");
+var graphql = require("./graphql.cjs.js");
+var image = require("./image.cjs.js");
+var shape = require("./shape.cjs.js");
+var jsxRuntime = require("react/jsx-runtime");
+var styled = require("styled-components");
+var textInput = require("./text-input.cjs.js");
+var color = require("./color.cjs.js");
+var slot = require("./slot.cjs.js");
+var css = require("@emotion/css");
+var ColorHelper = require("color");
+var scrollIntoView = require("scroll-into-view-if-needed");
+var boxModels = require("./box-models.cjs.js");
+var reactDom = require("react-dom");
+var parse = require("html-react-parser");
+var Head = require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
+var uuid = require("uuid/v4");
+var ipsum = require("corporate-ipsum");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  var n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    Object.keys(e).forEach(function(k) {
+      if (k !== "default") {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function() {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+var React__namespace = /* @__PURE__ */ _interopNamespace(React);
+var dynamic__default = /* @__PURE__ */ _interopDefaultLegacy(dynamic);
+var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
+var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
+var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
+var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
+var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
+var ipsum__default = /* @__PURE__ */ _interopDefaultLegacy(ipsum);
+const SCRIPT_TAG = "script";
+function BodySnippet({
+  code,
+  cleanup
+}) {
+  React.useEffect(() => {
+    const container = document.createElement("div");
+    container.innerHTML = code;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+    const scripts = [];
+    while (walker.nextNode()) {
+      if (walker.currentNode instanceof HTMLScriptElement)
+        scripts.push(walker.currentNode);
+    }
+    scripts.forEach((inlineScript) => {
+      var _a;
+      const executableScript = document.createElement(SCRIPT_TAG);
+      executableScript.textContent = inlineScript.textContent;
+      Array.from(inlineScript.attributes).forEach(({
+        name,
+        value
+      }) => {
+        executableScript.setAttribute(name, value);
+      });
+      (_a = inlineScript.parentNode) == null ? void 0 : _a.replaceChild(executableScript, inlineScript);
+    });
+    const nodes = Array.from(container.childNodes);
+    document.body.append(...nodes);
+    return () => {
+      nodes.forEach((node) => {
+        var _a;
+        (_a = node.parentNode) == null ? void 0 : _a.removeChild(node);
+      });
+      if (cleanup == null)
+        return;
+      const cleanUp = new Function(cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    };
+  }, [code, cleanup]);
+  return null;
+}
+const SWATCHES_BY_ID = client.gql`
+  query SwatchesById($ids: [ID!]!) {
+    swatches(ids: $ids) {
+      id
+      hue
+      saturation
+      lightness
+    }
+  }
+`;
+const FILE_BY_ID = client.gql`
+  query FileById($id: ID!) {
+    file(id: $id) {
+      id
+      name
+      publicUrl
+      extension
+      dimensions {
+        width
+        height
+      }
+    }
+  }
+`;
+const FILES_BY_ID = client.gql`
+  query FilesById($ids: [ID!]!) {
+    files(ids: $ids) {
+      id
+      name
+      publicUrl
+      extension
+      dimensions {
+        width
+        height
+      }
+    }
+  }
+`;
+const PAGE_PATHNAMES_BY_ID = client.gql`
+  query PagePathnamesById($ids: [ID!]!) {
+    pagePathnamesById(ids: $ids) {
+      id
+      pathname
+    }
+  }
+`;
+const TYPOGRAPHY_FRAGMENT = client.gql`
+  fragment Typography on Typography {
+    id
+    name
+    style {
+      deviceId
+      value {
+        fontFamily
+        fontSize {
+          value
+          unit
+        }
+        color {
+          swatchId
+          alpha
+        }
+        lineHeight
+        letterSpacing
+        fontWeight
+        textAlign
+        uppercase
+        underline
+        strikethrough
+        italic
+      }
+    }
+  }
+`;
+const TYPOGRAPHIES_BY_ID = client.gql`
+  query TypographiesById($ids: [ID!]!) {
+    typographies(ids: $ids) {
+      ...Typography
+    }
+  }
+
+  ${TYPOGRAPHY_FRAGMENT}
+`;
+const TABLE_BY_ID = client.gql`
+  query TableById($id: ID!) {
+    table(id: $id) {
+      id
+      name
+      columns {
+        id
+        name
+        ... on MultipleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+        ... on SingleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`;
+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}
+`;
+async function introspect(element, client2, store) {
+  var _a, _b, _c;
+  const descriptors = 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 === image.Types.Shape) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.options.type, prop);
+        }
+        if (descriptor.type === image.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.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 == null ? void 0 : typography.style.forEach((style) => {
+      var _a2;
+      const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
+      if (swatchId != null)
+        swatchIds.add(swatchId);
+    });
+  });
+  return {
+    swatchIds: [...swatchIds],
+    fileIds: [...fileIds],
+    typographyIds: [...typographyIds],
+    tableIds: [...tableIds],
+    pageIds: [...pageIds]
+  };
+}
+const typePolicies = {
+  Query: {
+    fields: {
+      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);
+      },
+      page(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Page",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      site(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Site",
+          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({
+    link: new batchHttp.BatchHttpLink({
+      uri,
+      batchMax: 100
+    }),
+    cache
+  });
+}
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "apolloClient");
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    const introspectionData = await introspect(element, this.apolloClient, storeContextDefaultValue);
+    const res = await this.apolloClient.query({
+      query: INTROSPECTION_QUERY,
+      variables: introspectionData
+    });
+    res.data.pagePathnamesById.forEach((pagePathnameSlice) => {
+      if (pagePathnameSlice == null)
+        return;
+      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();
+  }
+  updateCacheData(cacheData) {
+    this.apolloClient.cache.restore(cacheData);
+  }
+}
+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 == 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 == null ? void 0 : client$1.apolloClient
+  }, options));
+}
+function MakeswiftProvider({
+  client: client2,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
+    value: client2,
+    children
+  });
+}
+function is(x, y) {
+  if (x === y)
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  return x !== x && y !== y;
+}
+const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
+const shallowEqual = (a, b) => {
+  if (is(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const { hasOwnProperty } = Object.prototype;
+const deepEqual = (a, b) => {
+  if (shallowEqual(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const SnippetLocation = {
+  Body: "BODY",
+  Head: "HEAD"
+};
+const defaultFavicon = {
+  mimetype: "image/png",
+  publicUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC"
+};
+const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\-\d]*$/;
+const VALID_HEAD_ELEMENT_TYPES = ["title", "base", "link", "style", "meta", "script", "noscript", "template"];
+function snippetToElement(snippet) {
+  return React.Children.map(parse__default["default"](snippet.code), (element) => {
+    if (typeof element === "string")
+      return element;
+    if (!VALID_TAG_REGEX.test(element.type))
+      return null;
+    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id;
+    return React.createElement(element.type, __spreadProps(__spreadValues({}, element.props), {
+      key
+    }));
+  });
+}
+const filterUsedSnippetProperties = ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+}) => ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+});
+const PAGE_SNIPPETS_QUERY = client.gql`
+  query PageById($id: ID!) {
+    page(id: $id) {
+      __typename
+      id
+      snippets {
+        __typename
+        id
+        name
+        code
+        cleanup
+        location
+        shouldAddToNewPages
+        liveEnabled
+        builderEnabled
+      }
+    }
+  }
+`;
+const SITE_FONTS_QUERY = client.gql`
+  query SiteById($id: ID!) {
+    site(id: $id) {
+      id
+      googleFonts {
+        edges {
+          activeVariants {
+            specifier
+          }
+          node {
+            family
+            variants {
+              specifier
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function Page({
+  document: page
+}) {
+  var _a;
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = React.useState(page.snippets);
+  useQuery(PAGE_SNIPPETS_QUERY, {
+    variables: {
+      id: page.id
+    },
+    skip: isInBuilder === false,
+    fetchPolicy: "cache-only",
+    onCompleted(data) {
+      if (data == null)
+        return;
+      const oldSnippets = snippets.map(filterUsedSnippetProperties);
+      const newSnippets = data.page.snippets.map(filterUsedSnippetProperties);
+      if (deepEqual(newSnippets, oldSnippets))
+        return;
+      setSnippets(data.page.snippets);
+    }
+  });
+  const {
+    data: siteData
+  } = useQuery(SITE_FONTS_QUERY, {
+    variables: {
+      id: page.site.id
+    },
+    skip: isInBuilder === false,
+    fetchPolicy: "cache-only"
+  });
+  const favicon = (_a = page.meta.favicon) != null ? _a : defaultFavicon;
+  const {
+    title,
+    description,
+    keywords,
+    socialImage
+  } = page.meta;
+  const {
+    canonicalUrl,
+    isIndexingBlocked
+  } = page.seo;
+  const fontFamilyParamValue = React.useMemo(() => {
+    if ((siteData == null ? void 0 : siteData.site) == null) {
+      return page.fonts.map(({
+        family,
+        variants
+      }) => {
+        return `${family.replace(/ /g, "+")}:${variants.join()}`;
+      }).join("|");
+    }
+    return siteData.site.googleFonts.edges.filter((edge) => edge != null).map(({
+      activeVariants,
+      node: {
+        family,
+        variants
+      }
+    }) => {
+      const activeVariantSpecifiers = variants.filter((variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)).map((variant) => variant.specifier).join();
+      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
+    }).join("|");
+  }, [siteData, page]);
+  const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
+  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
+  const previousHeadSnippets = React.useRef(null);
+  React.useEffect(() => {
+    var _a2;
+    const headSnippetsToCleanUp = ((_a2 = previousHeadSnippets.current) != null ? _a2 : []).filter((previousSnippet) => previousSnippet.cleanup != null).filter((previousSnippet) => !headSnippets.some((snippet) => previousSnippet.id === snippet.id));
+    headSnippetsToCleanUp.forEach((snippetToCleanUp) => {
+      if (snippetToCleanUp.cleanup == null)
+        return;
+      const cleanUp = new Function(snippetToCleanUp.cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    });
+    previousHeadSnippets.current = headSnippets;
+  }, [headSnippets]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Head__default["default"], {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("style", {
+        children: `
+            html {
+              font-family: sans-serif;
+            }
+            div#__next {
+              overflow: hidden;
+            }
+          `
+      }), /* @__PURE__ */ jsxRuntime.jsx("link", {
+        rel: "icon",
+        type: favicon.mimetype,
+        href: favicon.publicUrl
+      }), canonicalUrl && /* @__PURE__ */ jsxRuntime.jsx("link", {
+        rel: "canonical",
+        href: canonicalUrl
+      }), isIndexingBlocked && /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        name: "robots",
+        content: "noindex"
+      }), title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("title", {
+          children: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:title",
+          content: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:title",
+          content: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "name",
+          content: title
+        })]
+      }), description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "description",
+          content: description
+        })]
+      }), keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        name: "keywords",
+        content: keywords
+      }), socialImage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:image:type",
+          content: socialImage.mimetype
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:card",
+          content: "summary_large_image"
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "image",
+          content: socialImage.publicUrl
+        })]
+      }), fontFamilyParamValue !== "" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("link", {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
+        })
+      }), headSnippets.map(snippetToElement).map((children) => React.Children.map(children, (child) => {
+        if (typeof child === "string")
+          return child;
+        if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
+          return child;
+        return null;
+      }))]
+    }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
+      documentReference: reactPage.createDocumentReference(page.id)
+    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
+      code: snippet.code,
+      cleanup: snippet.cleanup
+    }, snippet.id))]
+  });
+}
+const FORWARDED_NEXT_DYNAMIC_REF_KEY = "__forwarded_next_dynamic_ref__";
+function saveForwardedRef(props, ref) {
+  return __spreadProps(__spreadValues({}, props), {
+    [FORWARDED_NEXT_DYNAMIC_REF_KEY]: ref
+  });
+}
+function loadForwardedRef(_a) {
+  var _b = _a, {
+    [FORWARDED_NEXT_DYNAMIC_REF_KEY]: ref
+  } = _b, props = __objRest(_b, [
+    __restKey(FORWARDED_NEXT_DYNAMIC_REF_KEY)
+  ]);
+  return __spreadProps(__spreadValues({}, props), {
+    ref
+  });
+}
+function resolve(obj) {
+  return obj && obj.__esModule ? obj.default : obj;
+}
+function forwardNextDynamicRef(nextDynamicThunk) {
+  const Dynamic = nextDynamicThunk((loaderComponent) => loaderComponent.then((moduleOrComponent) => ({
+    __esModule: true,
+    default: (props) => React.createElement(resolve(moduleOrComponent), loadForwardedRef(props))
+  })));
+  return React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Dynamic, __spreadValues({}, saveForwardedRef(props, ref))));
+}
+const keys = (o) => Object.keys(o);
+const coalesce = (...args) => {
+  let i;
+  for (i = 0; i < args.length - 1; i += 1) {
+    if (args[i] != null)
+      return args[i];
+  }
+  return args[i];
+};
+function shallowMerge(a, b) {
+  const bKeys = keys(b);
+  const merged = __spreadValues({}, a);
+  bKeys.forEach((key) => {
+    merged[key] = coalesce(merged[key], b[key]);
+  });
+  return merged;
+}
+const DEVICES = [
+  { id: "desktop", minWidth: 769 },
+  { id: "tablet", minWidth: 576, maxWidth: 768 },
+  { id: "mobile", maxWidth: 575 }
+];
+const getDevice = (deviceId) => {
+  const device = DEVICES.find(({ id }) => id === deviceId);
+  if (device == null)
+    throw new Error(`Unrecognized device ID: "${deviceId}".`);
+  return device;
+};
+function defaultStrategy(value, fallbacks) {
+  return value || fallbacks[0];
+}
+function shallowMergeFallbacks(value, fallbacks) {
+  return [value, ...fallbacks].filter((override) => Boolean(override)).reduce((a, b) => ({
+    deviceId: a.deviceId || b.deviceId,
+    value: shallowMerge(a.value, b.value)
+  }));
+}
+function findDeviceOverride(values = [], deviceId, strategy = defaultStrategy) {
+  const value = values.find(({ deviceId: d }) => d === deviceId);
+  const fallbacks = DEVICES.slice(0, DEVICES.findIndex((d) => d.id === deviceId) + 1).reverse().map((d) => values.find((v) => v.deviceId === d.id)).filter((override) => Boolean(override));
+  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : void 0;
+}
+function join(responsiveValues, joinFn, strategy) {
+  return DEVICES.map(({ id }) => id).map((deviceId) => {
+    const value = joinFn(responsiveValues.map((responsiveValue) => {
+      const deviceValue = responsiveValue && findDeviceOverride(responsiveValue, deviceId, strategy);
+      return deviceValue == null ? void 0 : deviceValue.value;
+    }));
+    if (value == null)
+      return null;
+    return { deviceId, value };
+  }).filter((override) => Boolean(override));
+}
+const getDeviceMediaQuery = (device) => {
+  const parts = ["@media only screen"];
+  if (device.minWidth != null) {
+    parts.push(`(min-width: ${device.minWidth}px)`);
+  }
+  if (device.maxWidth != null) {
+    parts.push(`(max-width: ${device.maxWidth}px)`);
+  }
+  return parts.join(" and ");
+};
+const MakeswiftComponentType = {
+  Box: "./components/Box/index.js",
+  Button: "./components/Button/index.js",
+  Carousel: "./components/Carousel/index.js",
+  Countdown: "./components/Countdown/index.js",
+  Divider: "./components/Divider/index.js",
+  Embed: "./components/Embed/index.js",
+  Form: "./components/Form/index.js",
+  Image: "./components/Image/index.js",
+  Navigation: "./components/Navigation/index.js",
+  Root: "./components/Root/index.js",
+  SocialLinks: "./components/SocialLinks/index.js",
+  Text: "./components/Text/index.js",
+  Video: "./components/Video/index.js"
+};
+const DEFAULT_BOX_ANIMATE_TYPE = "none";
+const DEFAULT_BOX_ANIMATE_DELAY = 0;
+const DEFAULT_BOX_ANIMATE_DURATION = 0.75;
+const DEFAULT_ITEM_ANIMATE_TYPE = "none";
+const DEFAULT_ITEM_ANIMATE_DELAY = 0;
+const DEFAULT_ITEM_ANIMATE_DURATION = 0.75;
+const DEFAULT_ITEM_STAGGER_DURATION = 0;
+function registerComponent$c(runtime) {
+  function isHiddenBasedOnAnimationType(props, deviceId, property) {
+    var _a, _b;
+    const animateIn = props[property];
+    return ((_b = (_a = findDeviceOverride(animateIn, deviceId)) == null ? void 0 : _a.value) != null ? _b : "none") === "none";
+  }
+  const isHiddenBasedOnBoxAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "boxAnimateType");
+  const isHiddenBasedOnItemAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "itemAnimateType");
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Box.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Box,
+    label: "Box",
+    props: {
+      id: image.ElementID(),
+      backgrounds: image.Backgrounds(),
+      width: image.Width(),
+      height: image.ResponsiveIconRadioGroup({
+        label: "Height",
+        options: [
+          { value: "auto", label: "Auto", icon: "HeightAuto16" },
+          { value: "stretch", label: "Stretch", icon: "HeightMatch16" }
+        ],
+        defaultValue: "auto"
+      }),
+      verticalAlign: image.ResponsiveIconRadioGroup({
+        label: "Align items",
+        options: [
+          { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
+          { value: "center", label: "Middle", icon: "VerticalAlignMiddle16" },
+          { value: "flex-end", label: "Bottom", icon: "VerticalAlignEnd16" },
+          {
+            value: "space-between",
+            label: "Space between",
+            icon: "VerticalAlignSpaceBetween16"
+          }
+        ],
+        defaultValue: "flex-start"
+      }),
+      margin: image.Margin(),
+      padding: image.Padding({
+        preset: [
+          {
+            deviceId: "desktop",
+            value: {
+              paddingTop: { value: 10, unit: "px" },
+              paddingRight: { value: 10, unit: "px" },
+              paddingBottom: { value: 10, unit: "px" },
+              paddingLeft: { value: 10, unit: "px" }
+            }
+          }
+        ]
+      }),
+      border: image.Border(),
+      borderRadius: image.BorderRadius(),
+      boxShadow: image.Shadows(),
+      rowGap: image.GapY((props) => ({
+        hidden: props.children == null
+      })),
+      columnGap: image.GapX((props) => ({
+        hidden: props.children == null
+      })),
+      boxAnimateType: image.ResponsiveSelect({
+        label: "Animate box in",
+        labelOrientation: "vertical",
+        options: [
+          { value: "none", label: "None" },
+          { value: "fadeIn", label: "Fade in" },
+          { value: "fadeRight", label: "Fade right" },
+          { value: "fadeDown", label: "Fade down" },
+          { value: "fadeLeft", label: "Fade left" },
+          { value: "fadeUp", label: "Fade up" },
+          { value: "blurIn", label: "Blur in" },
+          { value: "scaleUp", label: "Scale up" },
+          { value: "scaleDown", label: "Scale down" }
+        ],
+        defaultValue: "none"
+      }),
+      boxAnimateDuration: image.ResponsiveNumber((props, device) => ({
+        label: "Box duration",
+        defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
+        min: 0.1,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
+      boxAnimateDelay: image.ResponsiveNumber((props, device) => ({
+        label: "Box delay",
+        defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
+        min: 0,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
+      itemAnimateType: image.ResponsiveSelect({
+        label: "Animate items in",
+        labelOrientation: "vertical",
+        options: [
+          { value: "none", label: "None" },
+          { value: "fadeIn", label: "Fade in" },
+          { value: "fadeRight", label: "Fade right" },
+          { value: "fadeDown", label: "Fade down" },
+          { value: "fadeLeft", label: "Fade left" },
+          { value: "fadeUp", label: "Fade up" },
+          { value: "blurIn", label: "Blur in" },
+          { value: "scaleUp", label: "Scale up" },
+          { value: "scaleDown", label: "Scale down" }
+        ],
+        defaultValue: "none"
+      }),
+      itemAnimateDuration: image.ResponsiveNumber((props, device) => ({
+        label: "Items duration",
+        defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
+        min: 0.1,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemAnimateDelay: image.ResponsiveNumber((props, device) => ({
+        label: "Items delay",
+        defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
+        min: 0,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemStaggerDuration: image.ResponsiveNumber((props, device) => ({
+        label: "Stagger",
+        min: 0,
+        step: 0.05,
+        suffix: "s",
+        defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      hidePlaceholder: image.Checkbox((props) => ({
+        label: "Hide placeholder",
+        hidden: props.children != null
+      })),
+      children: image.Grid()
+    }
+  });
+}
+function registerComponent$b(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Button.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Button,
+    label: "Button",
+    props: {
+      id: image.ElementID(),
+      children: image.TextInput({ placeholder: "Button text" }),
+      link: image.Link({
+        defaultValue: {
+          type: "OPEN_PAGE",
+          payload: {
+            pageId: null,
+            openInNewTab: false
+          }
+        }
+      }),
+      variant: image.ResponsiveSelect({
+        label: "Style",
+        labelOrientation: "horizontal",
+        options: [
+          { value: "flat", label: "Flat" },
+          { value: "outline", label: "Outline" },
+          { value: "shadow", label: "Floating" },
+          { value: "clear", label: "Clear" },
+          { value: "blocky", label: "Blocky" },
+          { value: "bubbly", label: "Bubbly" },
+          { value: "skewed", label: "Skewed" }
+        ],
+        defaultValue: "flat"
+      }),
+      shape: image.ResponsiveIconRadioGroup({
+        label: "Shape",
+        options: [
+          { label: "Pill", value: "pill", icon: "ButtonPill16" },
+          { label: "Rounded", value: "rounded", icon: "ButtonRounded16" },
+          { label: "Square", value: "square", icon: "ButtonSquare16" }
+        ],
+        defaultValue: "rounded"
+      }),
+      size: image.ResponsiveIconRadioGroup({
+        label: "Size",
+        options: [
+          { label: "Small", value: "small", icon: "SizeSmall16" },
+          { label: "Medium", value: "medium", icon: "SizeMedium16" },
+          { label: "Large", value: "large", icon: "SizeLarge16" }
+        ],
+        defaultValue: "medium"
+      }),
+      color: image.ResponsiveColor((props, device) => {
+        var _a;
+        const variant = props.variant;
+        const hidden = ((_a = findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
+        return { placeholder: "black", hidden };
+      }),
+      textColor: image.ResponsiveColor({
+        label: "Text color",
+        placeholder: "white"
+      }),
+      textStyle: image.TextStyle(),
+      width: image.Width(),
+      margin: image.Margin()
+    }
+  });
+}
+function registerComponent$a(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Carousel.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Carousel,
+    label: "Carousel",
+    icon: "Carousel40",
+    props: {
+      id: image.ElementID(),
+      images: image.Images({
+        preset: [
+          { key: uuid__default["default"](), props: {} },
+          { key: uuid__default["default"](), props: {} },
+          { key: uuid__default["default"](), props: {} }
+        ]
+      }),
+      width: image.Width({ defaultValue: { value: 400, unit: "px" } }),
+      margin: image.Margin(),
+      pageSize: image.ResponsiveNumber((props) => {
+        var _a;
+        const images = props.images;
+        const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
+        return {
+          label: "Images shown",
+          defaultValue: 1,
+          min: 1,
+          max: imagesLength,
+          step: 1
+        };
+      }),
+      step: image.ResponsiveNumber((props, device) => {
+        var _a, _b;
+        const pageSize = props.pageSize;
+        const pageSizeValue = (_b = (_a = findDeviceOverride(pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
+        return {
+          label: "Step",
+          defaultValue: 1,
+          min: 1,
+          max: pageSizeValue,
+          step: 1
+        };
+      }),
+      slideAlignment: image.ResponsiveIconRadioGroup({
+        label: "Alignment",
+        options: [
+          { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
+          { label: "Middle", value: "center", icon: "VerticalAlignMiddle16" },
+          { label: "Bottom", value: "flex-end", icon: "VerticalAlignEnd16" }
+        ],
+        defaultValue: "center"
+      }),
+      gap: image.GapX({
+        label: "Gap",
+        step: 5,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      autoplay: image.Checkbox({ label: "Autoplay" }),
+      delay: image.Number((props) => ({
+        label: "Delay",
+        preset: 5,
+        min: 1,
+        step: 0.1,
+        suffix: "seconds",
+        hidden: !props.autoplay
+      })),
+      showArrows: image.Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: image.ResponsiveIconRadioGroup((props) => ({
+        label: "Arrow position",
+        options: [
+          { label: "Inside", value: "inside", icon: "ArrowInside16" },
+          { label: "Center", value: "center", icon: "ArrowCenter16" },
+          { label: "Outside", value: "outside", icon: "ArrowOutside16" }
+        ],
+        defaultValue: "inside",
+        hidden: props.showArrows === false
+      })),
+      arrowColor: image.ResponsiveColor((props) => ({
+        label: "Arrow color",
+        placeholder: "black",
+        hidden: props.showArrows === false
+      })),
+      arrowBackground: image.ResponsiveColor((props) => ({
+        label: "Arrow background",
+        placeholder: "white",
+        hidden: props.showArrows === false
+      })),
+      showDots: image.Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: image.ResponsiveColor((props) => ({
+        label: "Dot color",
+        placeholder: "black",
+        hidden: props.showDots === false
+      })),
+      slideBorder: image.Border(),
+      slideBorderRadius: image.BorderRadius()
+    }
+  });
+}
+function registerComponent$9(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Countdown.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Countdown,
+    label: "Countdown",
+    icon: "Countdown40",
+    props: {
+      id: image.ElementID(),
+      date: image.Date(() => ({
+        preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
+      })),
+      variant: image.ResponsiveIconRadioGroup({
+        label: "Style",
+        options: [
+          { label: "Filled", value: "filled", icon: "CountdownSolid16" },
+          {
+            label: "Filled split",
+            value: "filled-split",
+            icon: "CountdownSolidSplit16"
+          },
+          { label: "Outline", value: "outline", icon: "CountdownOutline16" },
+          {
+            label: "Outline split",
+            value: "outline-split",
+            icon: "CountdownOutlineSplit16"
+          },
+          { label: "Clear", value: "clear", icon: "CountdownNaked16" }
+        ],
+        defaultValue: "filled"
+      }),
+      shape: image.ResponsiveIconRadioGroup({
+        label: "Shape",
+        options: [
+          { label: "Pill", value: "pill", icon: "ButtonPill16" },
+          { label: "Rounded", value: "rounded", icon: "ButtonRounded16" },
+          { label: "Square", value: "square", icon: "ButtonSquare16" }
+        ],
+        defaultValue: "rounded"
+      }),
+      size: image.ResponsiveIconRadioGroup({
+        label: "Size",
+        options: [
+          { label: "Small", value: "small", icon: "SizeSmall16" },
+          { label: "Medium", value: "medium", icon: "SizeMedium16" },
+          { label: "Large", value: "large", icon: "SizeLarge16" }
+        ],
+        defaultValue: "medium"
+      }),
+      gap: image.GapX({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Gap",
+        step: 1,
+        min: 0,
+        max: 100,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      numberFont: image.Font({ label: "Number font" }),
+      numberColor: image.ResponsiveColor({
+        label: "Number color",
+        placeholder: "white"
+      }),
+      blockColor: image.ResponsiveColor({
+        label: "Block color",
+        placeholder: "black"
+      }),
+      labelFont: image.Font({ label: "Label font" }),
+      labelColor: image.ResponsiveColor({
+        label: "Label color",
+        placeholder: "black"
+      }),
+      width: image.Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: image.Margin(),
+      daysLabel: image.TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: image.TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: image.TextInput({
+        label: "Minutes label",
+        placeholder: "Minutes"
+      }),
+      secondsLabel: image.TextInput({
+        label: "Seconds label",
+        placeholder: "Seconds"
+      })
+    }
+  });
+}
+function registerComponent$8(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Divider.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Divider,
+    label: "Divider",
+    icon: "Divider40",
+    props: {
+      id: image.ElementID(),
+      variant: image.ResponsiveSelect({
+        label: "Style",
+        labelOrientation: "horizontal",
+        options: [
+          { value: "solid", label: "Solid" },
+          { value: "dashed", label: "Dashed" },
+          { value: "dotted", label: "Dotted" },
+          { value: "blended", label: "Blended" }
+        ],
+        defaultValue: "solid"
+      }),
+      thickness: image.ResponsiveLength({
+        label: "Height",
+        defaultValue: { value: 1, unit: "px" },
+        options: [{ value: "px", label: "Pixels", icon: "Px16" }]
+      }),
+      color: image.ResponsiveColor({ placeholder: "black" }),
+      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: image.Margin()
+    }
+  });
+}
+function registerComponent$7(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Embed.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Embed,
+    label: "Embed",
+    icon: "Code40",
+    props: {
+      id: image.ElementID(),
+      html: image.TextArea({ label: "Code", rows: 20 }),
+      width: image.Width({}),
+      margin: image.Margin()
+    }
+  });
+}
+const Alignments = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+const Shapes = Object.freeze({
+  SQUARE: "square",
+  ROUNDED: "rounded",
+  PILL: "pill"
+});
+const Sizes = Object.freeze({
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+});
+const Contrasts = Object.freeze({
+  LIGHT: "light",
+  DARK: "dark"
+});
+const Context$1 = React.createContext({});
+function useFormContext() {
+  return React.useContext(Context$1);
+}
+const { Provider } = Context$1;
+function registerComponent$6(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Form.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Form,
+    label: "Form",
+    icon: "Form40",
+    props: {
+      id: image.ElementID(),
+      tableId: image.Table(),
+      fields: image.TableFormFields(),
+      submitLink: image.Link((props) => ({
+        label: "Redirect to",
+        options: [
+          { value: "OPEN_PAGE", label: "Open page" },
+          { value: "OPEN_URL", label: "Open URL" }
+        ],
+        hidden: props.tableId == null
+      })),
+      gap: image.GapY((props) => ({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Gap",
+        defaultValue: { value: 0, unit: "px" },
+        hidden: props.tableId == null
+      })),
+      shape: image.ResponsiveIconRadioGroup((props) => ({
+        label: "Shape",
+        options: [
+          { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
+          { label: "Rounded", value: Shapes.ROUNDED, icon: "ButtonRounded16" },
+          { label: "Square", value: Shapes.SQUARE, icon: "ButtonSquare16" }
+        ],
+        defaultValue: Shapes.ROUNDED,
+        hidden: props.tableId == null
+      })),
+      size: image.ResponsiveIconRadioGroup((props) => ({
+        label: "Size",
+        options: [
+          { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
+          { label: "Medium", value: Sizes.MEDIUM, icon: "SizeMedium16" },
+          { label: "Large", value: Sizes.LARGE, icon: "SizeLarge16" }
+        ],
+        defaultValue: Sizes.MEDIUM,
+        hidden: (props == null ? void 0 : props.tableId) == null
+      })),
+      contrast: image.ResponsiveIconRadioGroup((props) => ({
+        label: "Color",
+        options: [
+          { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
+          { label: "Dark mode", value: Contrasts.DARK, icon: "Moon16" }
+        ],
+        defaultValue: Contrasts.LIGHT,
+        hidden: props.tableId == null
+      })),
+      labelTextStyle: image.TextStyle({ label: "Label text style" }),
+      labelTextColor: image.ResponsiveColor((props, device) => {
+        const hidden = props.tableId == null;
+        const responsiveContrast = props.contrast;
+        const contrast = findDeviceOverride(responsiveContrast, device);
+        return {
+          hidden,
+          label: "Label text color",
+          placeholder: (contrast == null ? void 0 : contrast.value) === Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
+        };
+      }),
+      submitTextStyle: image.TextStyle({ label: "Button text style" }),
+      brandColor: image.ResponsiveColor((props) => ({
+        label: "Button color",
+        placeholder: "black",
+        hidden: props.tableId == null
+      })),
+      submitTextColor: image.ResponsiveColor((props) => ({
+        label: "Button text color",
+        placeholder: "white",
+        hidden: props.tableId == null
+      })),
+      submitLabel: image.TextInput((props) => ({
+        label: "Button label",
+        placeholder: "Submit",
+        hidden: props.tableId == null
+      })),
+      submitVariant: image.ResponsiveSelect((props) => ({
+        label: "Button style",
+        options: [
+          { value: "flat", label: "Flat" },
+          { value: "outline", label: "Outline" },
+          { value: "shadow", label: "Floating" },
+          { value: "clear", label: "Clear" },
+          { value: "blocky", label: "Blocky" },
+          { value: "bubbly", label: "Bubbly" },
+          { value: "skewed", label: "Skewed" }
+        ],
+        defaultValue: "flat",
+        hidden: props.tableId == null
+      })),
+      submitWidth: image.ResponsiveLength((props) => ({
+        label: "Button width",
+        hidden: props.tableId == null
+      })),
+      submitAlignment: image.ResponsiveIconRadioGroup((props) => ({
+        label: "Button alignment",
+        options: [
+          { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
+          { label: "Center", value: Alignments.CENTER, icon: "AlignCenter16" },
+          { label: "Right", value: Alignments.RIGHT, icon: "AlignRight16" }
+        ],
+        defaultValue: Alignments.CENTER,
+        hidden: props.tableId == null
+      })),
+      width: image.Width({
+        preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: image.Margin()
+    }
+  });
+}
+function registerComponent$5(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Image.cjs2.js");
+  })))), {
+    type: MakeswiftComponentType.Image,
+    label: "Image",
+    props: {
+      id: image.ElementID(),
+      file: image.Image(),
+      altText: image.TextInput({ label: "Alt text" }),
+      link: image.Link({ label: "On click" }),
+      width: image.Width(),
+      margin: image.Margin(),
+      padding: image.Padding(),
+      border: image.Border(),
+      borderRadius: image.BorderRadius(),
+      boxShadow: image.Shadows(),
+      opacity: image.ResponsiveOpacity()
+    }
+  });
+}
+function registerComponent$4(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Navigation.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Navigation,
+    label: "Navigation",
+    icon: "Navigation40",
+    props: {
+      id: image.ElementID(),
+      links: image.NavigationLinks(),
+      linkTextStyle: image.TextStyle((props) => {
+        const links = props.links;
+        return {
+          label: "Link text style",
+          hidden: links == null || links.length === 0
+        };
+      }),
+      showLogo: image.Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: image.Image((props) => ({
+        label: "Logo",
+        hidden: props.showLogo === false
+      })),
+      logoWidth: image.ResponsiveLength((props) => ({
+        preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
+        label: "Logo width",
+        min: 0,
+        max: 1e3,
+        options: [{ value: "px", label: "Pixels", icon: "Px16" }],
+        hidden: props.showLogo === false
+      })),
+      logoAltText: image.TextInput((props) => ({
+        label: "Logo alt text",
+        hidden: props.showLogo === false
+      })),
+      logoLink: image.Link((props) => ({
+        label: "Logo on click",
+        hidden: props.showLogo === false
+      })),
+      alignment: image.ResponsiveIconRadioGroup({
+        label: "Alignment",
+        options: [
+          { label: "Left", value: "flex-start", icon: "AlignLeft16" },
+          { label: "Center", value: "center", icon: "AlignCenter16" },
+          { label: "End", value: "flex-end", icon: "AlignRight16" }
+        ],
+        defaultValue: "flex-end"
+      }),
+      gutter: image.GapX({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Link gap",
+        min: 0,
+        max: 100,
+        step: 1,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      mobileMenuAnimation: image.ResponsiveSelect({
+        label: "Mobile menu",
+        options: [
+          { value: "coverRight", label: "Cover from right" },
+          { value: "coverLeft", label: "Cover from left" }
+        ]
+      }),
+      mobileMenuOpenIconColor: image.ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Open icon color",
+          placeholder: "rgba(161, 168, 194, 0.5)",
+          hidden
+        };
+      }),
+      mobileMenuCloseIconColor: image.ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Close icon color",
+          placeholder: "rgba(161, 168, 194, 0.5)",
+          hidden
+        };
+      }),
+      mobileMenuBackgroundColor: image.ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Menu BG color",
+          placeholder: "black",
+          hidden
+        };
+      }),
+      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: image.Margin()
+    }
+  });
+}
+function registerComponent$3(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Root.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Root,
+    label: "Page",
+    hidden: true,
+    props: {
+      children: image.Grid(),
+      backgrounds: image.Backgrounds(),
+      rowGap: image.GapY(),
+      columnGap: image.GapX()
+    }
+  });
+}
+function registerComponent$2(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./SocialLinks.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.SocialLinks,
+    label: "Social Links",
+    icon: "SocialLinks40",
+    props: {
+      id: image.ElementID(),
+      links: image.SocialLinks({
+        preset: {
+          links: [
+            {
+              id: "facebook",
+              payload: { type: "facebook", url: "https://www.facebook.com" }
+            },
+            {
+              id: "instagram",
+              payload: { type: "instagram", url: "https://www.instagram.com" }
+            },
+            {
+              id: "twitter",
+              payload: { type: "twitter", url: "https://www.twitter.com" }
+            }
+          ],
+          openInNewTab: false
+        }
+      }),
+      shape: image.ResponsiveIconRadioGroup((props) => {
+        const links = props.links;
+        return {
+          label: "Shape",
+          options: [
+            { label: "Naked", value: "naked", icon: "Star16" },
+            { label: "Circle", value: "circle", icon: "StarCircle16" },
+            { label: "Rounded", value: "rounded", icon: "StarRoundedSquare16" },
+            { label: "Square", value: "square", icon: "StarSquare16" }
+          ],
+          defaultValue: "naked",
+          hidden: links == null || links.links.length === 0
+        };
+      }),
+      size: image.ResponsiveIconRadioGroup((props) => {
+        const links = props.links;
+        return {
+          label: "Size",
+          options: [
+            { label: "Small", value: "small", icon: "SizeSmall16" },
+            { label: "Medium", value: "medium", icon: "SizeMedium16" },
+            { label: "Large", value: "large", icon: "SizeLarge16" }
+          ],
+          defaultValue: "medium",
+          hidden: links == null || links.links.length === 0
+        };
+      }),
+      hoverStyle: image.ResponsiveSelect((props) => {
+        const links = props.links;
+        const hidden = links == null || links.links.length === 0;
+        return {
+          label: "On hover",
+          options: [
+            { value: "none", label: "None" },
+            { value: "grow", label: "Grow" },
+            { value: "shrink", label: "Shrink" },
+            { value: "fade", label: "Fade" }
+          ],
+          defaultValue: "none",
+          labelOrientation: "horizontal",
+          hidden
+        };
+      }),
+      fill: image.ResponsiveColor((props) => {
+        const links = props.links;
+        const hidden = links == null || links.links.length === 0;
+        return {
+          label: "Icon color",
+          hidden
+        };
+      }),
+      backgroundColor: image.ResponsiveColor((props) => {
+        const links = props.links;
+        const hidden = links == null || links.links.length === 0;
+        return {
+          label: "Shape color",
+          hidden
+        };
+      }),
+      alignment: image.ResponsiveIconRadioGroup({
+        label: "Alignment",
+        options: [
+          { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },
+          { label: "center", value: "center", icon: "AlignCenter16" },
+          { label: "flex-end", value: "flex-end", icon: "AlignRight16" }
+        ],
+        defaultValue: "center"
+      }),
+      gutter: image.GapX({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Link gap",
+        min: 0,
+        max: 100,
+        step: 1,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: image.Margin({
+        preset: [
+          {
+            deviceId: "desktop",
+            value: {
+              marginTop: { value: 10, unit: "px" },
+              marginRight: "auto",
+              marginBottom: { value: 10, unit: "px" },
+              marginLeft: "auto"
+            }
+          }
+        ]
+      })
+    }
+  });
+}
+function registerComponent$1(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Text.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Text,
+    label: "Text",
+    props: {
+      id: image.ElementID(),
+      text: image.RichText(() => ({
+        preset: {
+          document: {
+            nodes: [
+              {
+                object: "block",
+                type: "paragraph",
+                nodes: [
+                  {
+                    object: "text",
+                    text: ipsum__default["default"](3),
+                    marks: [
+                      {
+                        object: "mark",
+                        type: "typography",
+                        data: {
+                          value: {
+                            id: null,
+                            style: [
+                              {
+                                deviceId: "mobile",
+                                value: { fontSize: { value: 16, unit: "px" } }
+                              },
+                              {
+                                deviceId: "desktop",
+                                value: {
+                                  fontWeight: 400,
+                                  fontSize: { value: 18, unit: "px" },
+                                  lineHeight: 1.5
+                                }
+                              }
+                            ]
+                          }
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      })),
+      width: image.Width({
+        preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: image.Margin({
+        preset: [
+          {
+            deviceId: "desktop",
+            value: {
+              marginTop: null,
+              marginRight: "auto",
+              marginBottom: { value: 20, unit: "px" },
+              marginLeft: "auto"
+            }
+          }
+        ]
+      })
+    }
+  });
+}
+function registerComponent(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+    return require("./Video.cjs.js");
+  })))), {
+    type: MakeswiftComponentType.Video,
+    label: "Video",
+    icon: "Video40",
+    props: {
+      id: image.ElementID(),
+      video: image.Video({ preset: { controls: true } }),
+      width: image.Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: image.Margin(),
+      borderRadius: image.BorderRadius()
+    }
+  });
+}
+function registerBuiltinComponents(runtime) {
+  const unregisterBoxComponent = registerComponent$c(runtime);
+  const unregisterButtonComponent = registerComponent$b(runtime);
+  const unregisterCarouselComponent = registerComponent$a(runtime);
+  const unregisterCountdownComponent = registerComponent$9(runtime);
+  const unregisterDividerComponent = registerComponent$8(runtime);
+  const unregisterEmbedComponent = registerComponent$7(runtime);
+  const unregisterFormComponent = registerComponent$6(runtime);
+  const unregisterImageComponent = registerComponent$5(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();
+    unregisterCarouselComponent();
+    unregisterCountdownComponent();
+    unregisterDividerComponent();
+    unregisterEmbedComponent();
+    unregisterFormComponent();
+    unregisterImageComponent();
+    unregisterNavigationComponent();
+    unregisterRootComponent();
+    unregisterSocialLinksComponent();
+    unregisterTextComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
+  };
+}
+var _path;
+function _extends() {
+  _extends = 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.apply(this, arguments);
+}
+var SvgWarning20 = function SvgWarning202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends({
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.89864 18H17.1014C18.4183 18 19.2633 16.6003 18.65 15.4349L11.5486 1.94236C10.8925 0.69577 9.10749 0.695766 8.45139 1.94236L1.35003 15.4349C0.736692 16.6003 1.58174 18 2.89864 18ZM9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6V11C11 11.5523 10.5523 12 10 12C9.44771 12 9 11.5523 9 11V6ZM11.25 14.75C11.25 15.4404 10.6904 16 10 16C9.30964 16 8.75 15.4404 8.75 14.75C8.75 14.0596 9.30964 13.5 10 13.5C10.6904 13.5 11.25 14.0596 11.25 14.75Z"
+  })));
+};
+const ErrorDiv = styled__default["default"]("div")`
+  width: 100%;
+  height: 54px;
+  background-color: #fcedf2;
+  border-radius: 6px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #c73e6d;
+  fill: currentColor;
+  font-family: Heebo, sans-serif;
+  font-size: 16px;
+`;
+const FallbackComponent = React.forwardRef(function FallbackComponent2({
+  text
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ErrorDiv, {
+    ref,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(SvgWarning20, {}), /* @__PURE__ */ jsxRuntime.jsx("span", {
+      children: text
+    })]
+  });
+});
+function isNonNullable(value) {
+  return value != null;
+}
+function mapSideColor(swatches, _c) {
+  var _d = _c, { color: color2 } = _d, restOfSide = __objRest(_d, ["color"]);
+  return __spreadProps(__spreadValues({}, restOfSide), {
+    color: color2 && {
+      alpha: color2.alpha,
+      swatch: swatches.find((s) => s && s.id === color2.swatchId)
+    }
+  });
+}
+function useBorder(value) {
+  const swatchIds = value == null ? [] : [
+    ...Array.from(new Set(value.map(({ value: { borderTop, borderLeft, borderBottom, borderRight } }) => [
+      borderTop && borderTop.color && borderTop.color.swatchId,
+      borderBottom && borderBottom.color && borderBottom.color.swatchId,
+      borderLeft && borderLeft.color && borderLeft.color.swatchId,
+      borderRight && borderRight.color && borderRight.color.swatchId
+    ]).reduce((a, b) => a.concat(b)).filter(isNonNullable)))
+  ];
+  const skip = value == null || swatchIds.length === 0;
+  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
+  if (value == null || error != null)
+    return null;
+  const { swatches = [] } = data;
+  return value.map((_a) => {
+    var _b = _a, { value: { borderTop, borderBottom, borderLeft, borderRight } } = _b, rest = __objRest(_b, ["value"]);
+    return __spreadProps(__spreadValues({}, rest), {
+      value: {
+        borderTop: borderTop && mapSideColor(swatches, borderTop),
+        borderBottom: borderBottom && mapSideColor(swatches, borderBottom),
+        borderLeft: borderLeft && mapSideColor(swatches, borderLeft),
+        borderRight: borderRight && mapSideColor(swatches, borderRight)
+      }
+    });
+  });
+}
+function useResponsiveColor(color2) {
+  const swatchIds = color2 == null ? [] : [...Array.from(new Set(color2.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
+  const skip = swatchIds.length === 0;
+  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
+  if (color2 == null || error != null)
+    return null;
+  const { swatches = [] } = data;
+  return color2.map((_a) => {
+    var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
+    const { swatchId, alpha } = v;
+    const swatch = swatches.find((s) => s && s.id === swatchId);
+    return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
+  }).filter(isNonNullable);
+}
+function useFile(fileId) {
+  const { error, data = {} } = useQuery(FILE_BY_ID, {
+    skip: fileId == null,
+    variables: { id: fileId }
+  });
+  if (fileId == null || error != null)
+    return null;
+  return data.file;
+}
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+function usePage(pageId) {
+  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
+    skip: pageId == null,
+    variables: { ids: [pageId] }
+  });
+  if (pageId == null || error != null)
+    return null;
+  const { pagePathnamesById: [page] = [] } = data;
+  return page;
+}
+function responsiveStyle(responsiveValues, join$1, strategy) {
+  return join(responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
+    const device = getDevice(deviceId);
+    const mediaQuery = getDeviceMediaQuery(device);
+    return __spreadProps(__spreadValues({}, acc), {
+      [mediaQuery]: __spreadValues(__spreadValues({}, acc[mediaQuery]), value)
+    });
+  }, {});
+}
+function responsiveWidth(widthData, defaultValue = "100%") {
+  return __spreadValues({
+    maxWidth: "100%"
+  }, responsiveStyle([widthData], ([width = defaultValue]) => ({
+    width: typeof width === "object" ? `${width.value}${width.unit}` : width
+  })));
+}
+function colorToString(color2) {
+  return color2 && color2.swatch ? `hsla(${color2.swatch.hue},${color2.swatch.saturation}%,${color2.swatch.lightness}%,${color2.alpha})` : "";
+}
+function murmur2(str) {
+  var h = 0;
+  var k, i = 0, len = str.length;
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+    k ^= k >>> 24;
+    h = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 255) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 255) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 255;
+      h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  h ^= h >>> 13;
+  h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+var unitlessKeys = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0)
+      cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var isCustomProperty = function isCustomProperty2(property) {
+  return property.charCodeAt(1) === 45;
+};
+var isProcessableValue = function isProcessableValue2(value) {
+  return value != null && typeof value !== "boolean";
+};
+var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
+});
+var processStyleValue = function processStyleValue2(key, value) {
+  switch (key) {
+    case "animation":
+    case "animationName": {
+      if (typeof value === "string") {
+        return value.replace(animationRegex, function(match, p1, p2) {
+          cursor = {
+            name: p1,
+            styles: p2,
+            next: cursor
+          };
+          return p1;
+        });
+      }
+    }
+  }
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
+    return value + "px";
+  }
+  return value;
+};
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return "";
+  }
+  if (interpolation.__emotion_styles !== void 0) {
+    return interpolation;
+  }
+  switch (typeof interpolation) {
+    case "boolean": {
+      return "";
+    }
+    case "object": {
+      if (interpolation.anim === 1) {
+        cursor = {
+          name: interpolation.name,
+          styles: interpolation.styles,
+          next: cursor
+        };
+        return interpolation.name;
+      }
+      if (interpolation.styles !== void 0) {
+        var next = interpolation.next;
+        if (next !== void 0) {
+          while (next !== void 0) {
+            cursor = {
+              name: next.name,
+              styles: next.styles,
+              next: cursor
+            };
+            next = next.next;
+          }
+        }
+        var styles = interpolation.styles + ";";
+        return styles;
+      }
+      return createStringFromObject(mergedProps, registered, interpolation);
+    }
+    case "function": {
+      if (mergedProps !== void 0) {
+        var previousCursor = cursor;
+        var result = interpolation(mergedProps);
+        cursor = previousCursor;
+        return handleInterpolation(mergedProps, registered, result);
+      }
+      break;
+    }
+  }
+  if (registered == null) {
+    return interpolation;
+  }
+  var cached = registered[interpolation];
+  return cached !== void 0 ? cached : interpolation;
+}
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = "";
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var _key in obj) {
+      var value = obj[_key];
+      if (typeof value !== "object") {
+        if (registered != null && registered[value] !== void 0) {
+          string += _key + "{" + registered[value] + "}";
+        } else if (isProcessableValue(value)) {
+          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
+        }
+      } else {
+        if (_key === "NO_COMPONENT_SELECTOR" && false) {
+          throw new Error("Component selectors can only be used in conjunction with @emotion/babel-plugin.");
+        }
+        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+          switch (_key) {
+            case "animation":
+            case "animationName": {
+              string += processStyleName(_key) + ":" + interpolated + ";";
+              break;
+            }
+            default: {
+              string += _key + "{" + interpolated + "}";
+            }
+          }
+        }
+      }
+    }
+  }
+  return string;
+}
+var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+var cursor;
+var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
+    return args[0];
+  }
+  var stringMode = true;
+  var styles = "";
+  cursor = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    styles += strings[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+    if (stringMode) {
+      styles += strings[i];
+    }
+  }
+  labelPattern.lastIndex = 0;
+  var identifierName = "";
+  var match;
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += "-" + match[1];
+  }
+  var name = murmur2(styles) + identifierName;
+  return {
+    name,
+    styles,
+    next: cursor
+  };
+};
+var isBrowser = true;
+var registerStyles = function registerStyles2(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+  if ((isStringTag === false || isBrowser === false) && cache.registered[className] === void 0) {
+    cache.registered[className] = serialized.styles;
+  }
+};
+var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
+  if (cache.inserted[serialized.name] === void 0) {
+    var current = serialized;
+    do {
+      cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
+      current = current.next;
+    } while (current !== void 0);
+  }
+};
+const isServer = typeof window === "undefined";
+const useInsertionEffectSpecifier = "useInsertionEffect";
+const useInsertionEffect = (_e = React__namespace[useInsertionEffectSpecifier]) != null ? _e : React__namespace.useLayoutEffect;
+function useStyle(style) {
+  const serialized = serializeStyles([style], css.cache.registered);
+  registerStyles(css.cache, serialized, false);
+  useInsertionEffect(() => {
+    insertStyles(css.cache, serialized, false);
+  });
+  if (isServer)
+    insertStyles(css.cache, serialized, false);
+  return `${css.cache.key}-${serialized.name}`;
+}
+function useStyleControlCssObject(style, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return __spreadValues(__spreadValues({}, properties.includes(image.StyleControlProperty.Width) && {
+    maxWidth: "100%"
+  }), responsiveStyle([
+    style == null ? void 0 : style.width,
+    style == null ? void 0 : style.margin,
+    style == null ? void 0 : style.padding,
+    useBorder(style == null ? void 0 : style.border),
+    style == null ? void 0 : style.borderRadius,
+    style == null ? void 0 : style.textStyle
+  ], ([width, margin, padding, border, borderRadius, textStyle]) => {
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(image.StyleControlProperty.Width) && {
+      width: (_a = widthToString(width)) != null ? _a : "100%"
+    }), properties.includes(image.StyleControlProperty.Margin) && {
+      marginTop: (_b = marginToString(margin == null ? void 0 : margin.marginTop)) != null ? _b : 0,
+      marginRight: (_c = marginToString(margin == null ? void 0 : margin.marginRight)) != null ? _c : "auto",
+      marginBottom: (_d = marginToString(margin == null ? void 0 : margin.marginBottom)) != null ? _d : 0,
+      marginLeft: (_e2 = marginToString(margin == null ? void 0 : margin.marginLeft)) != null ? _e2 : "auto"
+    }), properties.includes(image.StyleControlProperty.Padding) && {
+      paddingTop: (_f = paddingToString(padding == null ? void 0 : padding.paddingTop)) != null ? _f : 0,
+      paddingRight: (_g = paddingToString(padding == null ? void 0 : padding.paddingRight)) != null ? _g : 0,
+      paddingBottom: (_h = paddingToString(padding == null ? void 0 : padding.paddingBottom)) != null ? _h : 0,
+      paddingLeft: (_i = paddingToString(padding == null ? void 0 : padding.paddingLeft)) != null ? _i : 0
+    }), properties.includes(image.StyleControlProperty.Border) && {
+      borderTop: (_j = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _j : "0 solid black",
+      borderRight: (_k = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _k : "0 solid black",
+      borderBottom: (_l = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _l : "0 solid black",
+      borderLeft: (_m = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _m : "0 solid black"
+    }), properties.includes(image.StyleControlProperty.BorderRadius) && {
+      borderTopLeftRadius: (_n = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _n : 0,
+      borderTopRightRadius: (_o = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _o : 0,
+      borderBottomRightRadius: (_p = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _p : 0,
+      borderBottomLeftRadius: (_q = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _q : 0
+    }), properties.includes(image.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: textStyle.fontFamily }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
+      textTransform: (_r = textStyle == null ? void 0 : textStyle.textTransform) != null ? _r : [],
+      fontStyle: (_s = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _s : []
+    }));
+  }));
+  function widthToString(widthProperty) {
+    if (widthProperty == null)
+      return null;
+    return `${widthProperty.value}${widthProperty.unit}`;
+  }
+  function marginToString(marginProperty) {
+    if (marginProperty == null)
+      return null;
+    if (marginProperty === "auto")
+      return marginProperty;
+    return `${marginProperty.value}${marginProperty.unit}`;
+  }
+  function paddingToString(paddingProperty) {
+    if (paddingProperty == null)
+      return null;
+    return `${paddingProperty.value}${paddingProperty.unit}`;
+  }
+  function borderSideToString(borderSide) {
+    if (borderSide == null)
+      return null;
+    const { width, color: color2, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color2 != null ? colorToString(color2) : "black"}`;
+  }
+  function borderRadiusToString(borderRadius) {
+    if (borderRadius == null)
+      return null;
+    return `${borderRadius.value}${borderRadius.unit}`;
+  }
+  function fontSizeToString(fontSize) {
+    return `${fontSize.value}${fontSize.unit}`;
+  }
+}
+function useFormattedStyle(styleControlData, controlDefinition) {
+  const style = useStyleControlCssObject(styleControlData, controlDefinition);
+  return useStyle(style);
+}
+function RenderHook({
+  hook: useHook,
+  parameters,
+  children
+}) {
+  return children(useHook(...parameters));
+}
+function useCheckboxControlValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function useColorValue(data, definition) {
+  var _a, _b;
+  const result = useQuery(SWATCHES_BY_ID, {
+    variables: { ids: [data == null ? void 0 : data.swatchId] },
+    skip: (data == null ? void 0 : data.swatchId) == null
+  });
+  if (data === void 0) {
+    const { defaultValue } = definition.config;
+    if (defaultValue === void 0)
+      return void 0;
+    let defaultColor;
+    try {
+      defaultColor = ColorHelper__default["default"](definition.config.defaultValue);
+    } catch {
+      defaultColor = ColorHelper__default["default"]();
+    }
+    return defaultColor.rgb().string();
+  }
+  const [swatch] = (_b = (_a = result.data) == null ? void 0 : _a.swatches) != null ? _b : [null];
+  return ColorHelper__default["default"]({ h: swatch == null ? void 0 : swatch.hue, s: swatch == null ? void 0 : swatch.saturation, l: swatch == null ? void 0 : swatch.lightness }).alpha(data.alpha).rgb().string();
+}
+function useComboboxControlValue(data) {
+  return data == null ? void 0 : data.value;
+}
+function useImageControlValue(data, definition) {
+  var _a;
+  const format = (_a = definition.config.format) != null ? _a : image.ImageControlValueFormat.URL;
+  const file = useFile(data);
+  if (format === image.ImageControlValueFormat.URL) {
+    return file == null ? void 0 : file.publicUrl;
+  }
+  if (file == null || file.dimensions == null)
+    return void 0;
+  return {
+    url: file.publicUrl,
+    dimensions: { width: file.dimensions.width, height: file.dimensions.height }
+  };
+}
+function useLinkControlValue(link, _definition) {
+  var _a;
+  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a = link.payload.elementIdConfig) == null ? void 0 : _a.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let href = "#";
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page)
+          href = `/${page.pathname}`;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        const { to, subject = "", body = "" } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        href = `#${elementId != null ? elementId : ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  const handleClick = React.useCallback((event) => {
+    if (event.defaultPrevented)
+      return;
+    if (link && link.type === "SCROLL_TO_ELEMENT") {
+      let hash;
+      try {
+        hash = new URL(`http://www.example.com/${href}`).hash;
+      } catch (error) {
+        console.error(`Link received invalid href: ${href}`, error);
+      }
+      if (href != null && href === hash) {
+        event.preventDefault();
+        const view = event.view;
+        scrollIntoView__default["default"](view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
+  }, [link, href, block]);
+  const res = React.useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick]);
+  return res;
+}
+function ListControlValue({
+  definition,
+  data,
+  children
+}) {
+  return (data != null ? data : []).reduce((renderFn, item) => (listControlValue) => /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
+    definition: definition.config.type,
+    data: item.value,
+    children: (value) => renderFn([value, ...listControlValue])
+  }), children)([]);
+}
+function useNumber(numberControlData, controlDefinition) {
+  return numberControlData != null ? numberControlData : controlDefinition.config.defaultValue;
+}
+function useSelectControlValue(data, definition) {
+  return data != null ? data : definition == null ? void 0 : definition.config.defaultValue;
+}
+function ShapeControlValue({
+  definition,
+  data,
+  children
+}) {
+  return Object.entries(definition.config.type).reduceRight((renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
+    definition: controlDefinition,
+    data: data == null ? void 0 : data[key],
+    children: (value) => renderFn(__spreadProps(__spreadValues({}, shapeControlValue), {
+      [key]: value
+    }))
+  }), children)({});
+}
+function useTextAreaValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function useTextInputValue(data, definition) {
+  return data != null ? data : definition.config.defaultValue;
+}
+function ControlValue({
+  data,
+  definition,
+  children
+}) {
+  switch (definition.type) {
+    case textInput.CheckboxControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useCheckboxControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.NumberControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useNumber,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.TextInputControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useTextInputValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.TextAreaControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useTextAreaValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.SelectControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useSelectControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case color.ColorControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useColorValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case image.ImageControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useImageControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case textInput.LinkControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useLinkControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case shape.ComboboxControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useComboboxControlValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
+    case shape.ShapeControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(ShapeControlValue, {
+        definition,
+        data,
+        children: (value) => children(value)
+      });
+    case shape.ListControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(ListControlValue, {
+        definition,
+        data,
+        children: (value) => children(value)
+      });
+    default:
+      return children(data);
+  }
+}
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function useSlot(data, control) {
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Slot.Placeholder, {
+      control
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Slot, {
+    control,
+    children: data.elements.map((element, i) => /* @__PURE__ */ jsxRuntime.jsx(Slot.Item, {
+      control,
+      grid: data.columns,
+      index: i,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Element, {
+        element
+      })
+    }, element.key))
+  });
+}
+function Slot(_f) {
+  var _g = _f, {
+    as,
+    control,
+    children,
+    className
+  } = _g, restOfProps = __objRest(_g, [
+    "as",
+    "control",
+    "children",
+    "className"
+  ]);
+  const As = as != null ? as : "div";
+  const [element, setElement] = React.useState(null);
+  const baseClassName = useStyle({
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  });
+  React.useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: css.cx(baseClassName, className),
+    children
+  }));
+}
+Slot.Placeholder = SlotPlaceholder;
+Slot.Item = SlotItem;
+function SlotItem(_h) {
+  var _i = _h, {
+    as,
+    control,
+    grid,
+    index,
+    children,
+    className
+  } = _i, restOfProps = __objRest(_i, [
+    "as",
+    "control",
+    "grid",
+    "index",
+    "children",
+    "className"
+  ]);
+  const As = as != null ? as : "div";
+  const [element, setElement] = React.useState(null);
+  const baseClassName = useStyle(__spreadValues({
+    display: "flex"
+  }, responsiveStyle([grid], ([{
+    count = 12,
+    spans = [[12]]
+  } = {}]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, index);
+    const span = spans[rowIndex][columnIndex];
+    const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
+    return span === 0 ? {
+      display: "none"
+    } : {
+      flexBasis,
+      minWidth: flexBasis
+    };
+  })));
+  React.useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+    });
+  }, [element, control, index]);
+  return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: css.cx(baseClassName, className),
+    children
+  }));
+}
+function SlotPlaceholder({
+  control
+}) {
+  const [element, setElement] = React.useState(null);
+  React.useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: setElement,
+    className: useStyle({
+      width: "100%",
+      background: "rgba(161, 168, 194, 0.18)",
+      height: "80px"
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      height: "100%",
+      className: useStyle({
+        overflow: "visible",
+        padding: 8
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("rect", {
+        x: 0,
+        y: 0,
+        width: "100%",
+        height: "100%",
+        strokeWidth: 2,
+        strokeDasharray: "4 2",
+        fill: "none",
+        stroke: "rgba(161, 168, 194, 0.40)",
+        rx: "4",
+        ry: "4"
+      })
+    })
+  });
+}
+function pollBoxModel({
+  element,
+  onBoxModelChange
+}) {
+  let currentBoxModel = null;
+  const handleAnimationFrameRequest = () => {
+    const measuredBoxModel = boxModels.getBox(element);
+    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      currentBoxModel = measuredBoxModel;
+      onBoxModelChange(currentBoxModel);
+    }
+    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  };
+  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  return () => {
+    cancelAnimationFrame(animationFrameHandle);
+  };
+}
+function useDeviceMode() {
+  return "desktop";
+}
+function useWidth(value, descriptor, props) {
+  const deviceMode = useDeviceMode();
+  const options = React.useMemo(() => typeof descriptor.options === "function" ? descriptor.options(props, deviceMode) : descriptor.options, [props, deviceMode]);
+  return React.useMemo(() => options.format === image.WidthControlValueFormats.ClassName ? css.css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
+}
+function PropsValue({
+  element,
+  children
+}) {
+  var _a;
+  const store = useStore();
+  const propControllerDescriptorsRef = React.useRef((_a = reactPage.getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
+  const props = element.props;
+  const documentKey = useDocumentKey();
+  const propControllers = useSelector((state) => {
+    if (documentKey == null)
+      return null;
+    return reactPage.getPropControllers(state, documentKey, element.key);
+  });
+  return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
+    var _a2;
+    switch (descriptor.type) {
+      case textInput.CheckboxControlType:
+      case textInput.NumberControlType:
+      case textInput.TextInputControlType:
+      case textInput.TextAreaControlType:
+      case textInput.SelectControlType:
+      case color.ColorControlType:
+      case image.ImageControlType:
+      case shape.ComboboxControlType:
+      case shape.ShapeControlType:
+      case shape.ListControlType:
+      case textInput.LinkControlType:
+        return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
+          definition: descriptor,
+          data: props[propName],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        });
+      case image.StyleControlType:
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+          hook: useFormattedStyle,
+          parameters: [props[propName], descriptor],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      case slot.SlotControlType: {
+        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+          hook: useSlot,
+          parameters: [props[propName], control],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      }
+      case image.Types.Width:
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+          hook: useWidth,
+          parameters: [props[propName], descriptor, props],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      case image.Types.ResponsiveColor:
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+          hook: useResponsiveColor,
+          parameters: [props[propName]],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      default:
+        return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+          [propName]: props[propName]
+        }));
+    }
+  }, children)({});
+}
+function suppressWarningAndFindDomNode(instance) {
+  const error = console.error;
+  console.error = (...args) => {
+    if (typeof args[0] === "string" && args[0].includes("%s is deprecated in StrictMode."))
+      return;
+    return error.apply(console, args);
+  };
+  const foundDomNode = reactDom.findDOMNode(instance);
+  console.error = error;
+  return foundDomNode;
+}
+class FindDomNodeClassComponent extends React.Component {
+  componentDidMount() {
+    this.setInnerRef(suppressWarningAndFindDomNode(this));
+  }
+  componentDidUpdate() {
+    this.setInnerRef(suppressWarningAndFindDomNode(this));
+  }
+  setInnerRef(current) {
+    const {
+      innerRef
+    } = this.props;
+    if (innerRef == null)
+      return;
+    if (typeof innerRef === "function")
+      innerRef(current);
+    else
+      innerRef.current = current;
+  }
+  render() {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: this.props.children
+    });
+  }
+}
+const FindDomNode = React.forwardRef(function FindDomNode2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FindDomNodeClassComponent, __spreadProps(__spreadValues({}, props), {
+    innerRef: ref
+  }));
+});
+const storeContextDefaultValue = reactPage.configureStore();
+function createReactRuntime(store) {
+  return {
+    registerComponent(component, {
+      type,
+      label,
+      icon = "Cube40",
+      hidden = false,
+      props
+    }) {
+      const unregisterComponent = store.dispatch(actions.registerComponentEffect(type, {
+        label,
+        icon,
+        hidden
+      }, props != null ? props : {}));
+      const unregisterReactComponent = store.dispatch(actions.registerReactComponentEffect(type, component));
+      return () => {
+        unregisterComponent();
+        unregisterReactComponent();
+      };
+    }
+  };
+}
+const ReactRuntime = createReactRuntime(storeContextDefaultValue);
+registerBuiltinComponents(ReactRuntime);
+const Context = React.createContext(storeContextDefaultValue);
+function RuntimeProvider({
+  client: client2,
+  children,
+  rootElements
+}) {
+  const [store, setStore] = React.useState(() => {
+    const store2 = reactPage.configureStore({
+      preloadedState: storeContextDefaultValue.getState(),
+      rootElements
+    });
+    return store2;
+  });
+  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))));
+    return () => {
+      unregisterDocuments.forEach((unregisterDocument) => {
+        unregisterDocument();
+      });
+    };
+  }, [store, rootElements]);
+  React.useEffect(() => {
+    const isInBuilder = window.parent !== window;
+    if (isInBuilder)
+      setReactBuilderPreviewStore();
+    async function setReactBuilderPreviewStore() {
+      const ReactBuilderPreview = await Promise.resolve().then(function() {
+        return require("./react-builder-preview.cjs.js");
+      });
+      setStore((store2) => ReactBuilderPreview.configureStore({
+        preloadedState: store2.getState(),
+        client: client2.apolloClient
+      }));
+    }
+  }, [client2]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
+    value: store,
+    children: /* @__PURE__ */ jsxRuntime.jsx(MakeswiftProvider, {
+      client: client2,
+      children
+    })
+  });
+}
+const PageContext = React.createContext(null);
+function usePageIdOrNull() {
+  return React.useContext(PageContext);
+}
+function usePageId() {
+  const pageIdOrNull = usePageIdOrNull();
+  if (pageIdOrNull == null)
+    throw new Error("`usePageId` must be used with `<PageProvider>`");
+  return pageIdOrNull;
+}
+function PageProvider({
+  id,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, {
+    value: id,
+    children
+  });
+}
+const DocumentContext = React.createContext(null);
+function useDocumentKey() {
+  return React.useContext(DocumentContext);
+}
+function useStore() {
+  return React.useContext(Context);
+}
+function useSelector(selector) {
+  const store = useStore();
+  return withSelector.useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
+}
+function useComponent(type) {
+  return useSelector((state) => reactPage.getReactComponent(state, type));
+}
+function useElementId(elementKey) {
+  const documentKey = useDocumentKey();
+  return useSelector((state) => documentKey == null || elementKey == null ? null : reactPage.getElementId(state, documentKey, elementKey));
+}
+function useDocument(documentKey) {
+  return useSelector((state) => reactPage.getDocument(state, documentKey));
+}
+function useIsInBuilder() {
+  return useSelector((state) => reactPage.getIsInBuilder(state));
+}
+function useDispatch() {
+  const store = React.useContext(Context);
+  return store.dispatch;
+}
+const originalError = console.error;
+let patched = false;
+function suppressRefWarning(ownerName) {
+  if (patched === false) {
+    console.error = (...args) => {
+      if (typeof args[0] === "string" && args[0].includes("Function components cannot be given refs.") && args[0].includes(`Check the render method of \`${ownerName}\`.`)) {
+        return;
+      }
+      return originalError(...args);
+    };
+    patched = true;
+  }
+}
+const ElementData = React.memo(React.forwardRef(function ElementData2({
+  elementData
+}, ref) {
+  const Component = useComponent(elementData.type);
+  const [handle, setHandle] = React.useState(null);
+  const [foundDomNode, setFoundDomNode] = React.useState(null);
+  React.useImperativeHandle(ref, () => handle != null ? handle : foundDomNode, [handle, foundDomNode]);
+  suppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
+  if (Component == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref: setHandle,
+      text: "Component not found"
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(FindDomNode, {
+    ref: setFoundDomNode,
+    children: /* @__PURE__ */ jsxRuntime.jsx(PropsValue, {
+      element: elementData,
+      children: (props) => /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
+        key: elementData.key,
+        ref: setHandle
+      }))
+    })
+  });
+}));
+const DisableRegisterElement = React.createContext(false);
+const ElementReference = React.memo(React.forwardRef(function ElementReference2({
+  elementReference
+}, ref) {
+  var _a;
+  const {
+    error,
+    data
+  } = useQuery(ELEMENT_REFERENCE_GLOBAL_ELEMENT, {
+    variables: {
+      id: elementReference.value
+    }
+  });
+  const globalElementData = (_a = data == null ? void 0 : data.globalElement) == null ? void 0 : _a.data;
+  const elementReferenceDocument = useDocument(elementReference.key);
+  if (error != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref,
+      text: "Something went wrong!"
+    });
+  }
+  if (globalElementData == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref,
+      text: "This global component doesn't exist"
+    });
+  }
+  return elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
+    document: elementReferenceDocument,
+    ref
+  }) : /* @__PURE__ */ jsxRuntime.jsx(DisableRegisterElement.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
+      elementData: globalElementData,
+      ref
+    })
+  });
+}));
+const Element = React.memo(React.forwardRef(function Element2({
+  element
+}, ref) {
+  const elementKey = element.key;
+  const dispatch = useDispatch();
+  const documentKey = useDocumentKey();
+  const [handle, setHandle] = React.useState(null);
+  const isRegisterElementDisabled = React.useContext(DisableRegisterElement);
+  React.useImperativeHandle(ref, () => handle, [handle]);
+  React.useEffect(() => {
+    if (documentKey == null || isRegisterElementDisabled)
+      return;
+    return dispatch(actions.registerComponentHandleEffect(documentKey, elementKey, handle));
+  }, [dispatch, documentKey, elementKey, handle, isRegisterElementDisabled]);
+  React.useEffect(() => {
+    if (documentKey == null || isRegisterElementDisabled)
+      return;
+    return dispatch(actions.mountComponentEffect(documentKey, elementKey));
+  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
+  return reactPage.isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
+    ref: setHandle,
+    elementReference: element
+  }, elementKey) : /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
+    ref: setHandle,
+    elementData: element
+  }, elementKey);
+}));
+const Document = React.memo(React.forwardRef(function Document2({
+  document: document2
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DocumentContext.Provider, {
+    value: document2.key,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Element, {
+      ref,
+      element: document2.rootElement
+    })
+  });
+}));
+const DocumentReference = React.memo(React.forwardRef(function DocumentReference2({
+  documentReference
+}, ref) {
+  const document2 = useDocument(documentReference.key);
+  if (document2 == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref,
+      text: "Document not found"
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Document, {
+    ref,
+    document: document2
+  });
+}));
+exports.Alignments = Alignments;
+exports.Contrasts = Contrasts;
+exports.DEFAULT_BOX_ANIMATE_DELAY = DEFAULT_BOX_ANIMATE_DELAY;
+exports.DEFAULT_BOX_ANIMATE_DURATION = DEFAULT_BOX_ANIMATE_DURATION;
+exports.DEFAULT_BOX_ANIMATE_TYPE = DEFAULT_BOX_ANIMATE_TYPE;
+exports.DEFAULT_ITEM_ANIMATE_DELAY = DEFAULT_ITEM_ANIMATE_DELAY;
+exports.DEFAULT_ITEM_ANIMATE_DURATION = DEFAULT_ITEM_ANIMATE_DURATION;
+exports.DEFAULT_ITEM_ANIMATE_TYPE = DEFAULT_ITEM_ANIMATE_TYPE;
+exports.DEFAULT_ITEM_STAGGER_DURATION = DEFAULT_ITEM_STAGGER_DURATION;
+exports.DEVICES = DEVICES;
+exports.DocumentReference = DocumentReference;
+exports.Element = Element;
+exports.FILES_BY_ID = FILES_BY_ID;
+exports.MakeswiftClient = MakeswiftClient;
+exports.MakeswiftComponentType = MakeswiftComponentType;
+exports.PAGE_SNIPPETS_QUERY = PAGE_SNIPPETS_QUERY;
+exports.Page = Page;
+exports.PageProvider = PageProvider;
+exports.Provider = Provider;
+exports.ReactRuntime = ReactRuntime;
+exports.RuntimeProvider = RuntimeProvider;
+exports.SITE_FONTS_QUERY = SITE_FONTS_QUERY;
+exports.SWATCHES_BY_ID = SWATCHES_BY_ID;
+exports.Shapes = Shapes;
+exports.Sizes = Sizes;
+exports.TABLE_BY_ID = TABLE_BY_ID;
+exports.TYPOGRAPHIES_BY_ID = TYPOGRAPHIES_BY_ID;
+exports.colorToString = colorToString;
+exports.deepEqual = deepEqual;
+exports.findDeviceOverride = findDeviceOverride;
+exports.forwardNextDynamicRef = forwardNextDynamicRef;
+exports.getDevice = getDevice;
+exports.getDeviceMediaQuery = getDeviceMediaQuery;
+exports.getIndexes = getIndexes;
+exports.isNonNullable = isNonNullable;
+exports.join = join;
+exports.shallowMergeFallbacks = shallowMergeFallbacks;
+exports.useBorder = useBorder;
+exports.useElementId = useElementId;
+exports.useFile = useFile;
+exports.useFormContext = useFormContext;
+exports.useIsInBuilder = useIsInBuilder;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useMutation = useMutation;
+exports.usePage = usePage;
+exports.usePageId = usePageId;
+exports.useQuery = useQuery;
+exports.useResponsiveColor = useResponsiveColor;
+//# sourceMappingURL=index.cjs.js.map