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

package/dist/index.es.js

@@ -0,0 +1,3104 @@
+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;
+import * as React from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, useCallback, Component, memo, useImperativeHandle } from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
+import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getComponentPropControllerDescriptors, l as getPropControllers, m as configureStore, n as getDocument, o as getElementId, p as getIsInBuilder, q as getReactComponent, c as createDocument } from "./react-page.es.js";
+import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
+import dynamic from "next/dynamic";
+import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
+import { BatchHttpLink } from "@apollo/client/link/batch-http";
+import { KeyUtils } from "slate";
+import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
+import { T as Types, E as ElementID, B as Backgrounds, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox, g as Grid, h as TextInput, L as Link, i as ResponsiveColor, j as TextStyle, k as Images, N as Number, D as Date$1, F as Font, l as ResponsiveLength, m as TextArea, n as Table, o as TableFormFields, p as Image, q as ResponsiveOpacity, r as NavigationLinks, s as SocialLinks, t as RichText, V as Video, u as StyleControlProperty, v as ImageControlValueFormat, I as ImageControlType, w as StyleControlType, x as WidthControlValueFormats } from "./image.es.js";
+import { S as ShapeControlType, L as ListControlType, C as ComboboxControlType } from "./shape.es.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { L as LinkControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
+import { C as ColorControlType } from "./color.es.js";
+import { S as SlotControlType } from "./slot.es.js";
+import { cache, cx, css } from "@emotion/css";
+import ColorHelper from "color";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { g as getBox } from "./box-models.es.js";
+import { findDOMNode } from "react-dom";
+import parse from "html-react-parser";
+import Head from "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+import "set-cookie-parser";
+import uuid from "uuid/v4";
+import ipsum from "corporate-ipsum";
+const SCRIPT_TAG = "script";
+function BodySnippet({
+  code,
+  cleanup
+}) {
+  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 = gql`
+  query SwatchesById($ids: [ID!]!) {
+    swatches(ids: $ids) {
+      id
+      hue
+      saturation
+      lightness
+    }
+  }
+`;
+const FILE_BY_ID = gql`
+  query FileById($id: ID!) {
+    file(id: $id) {
+      id
+      name
+      publicUrl
+      extension
+      dimensions {
+        width
+        height
+      }
+    }
+  }
+`;
+const FILES_BY_ID = gql`
+  query FilesById($ids: [ID!]!) {
+    files(ids: $ids) {
+      id
+      name
+      publicUrl
+      extension
+      dimensions {
+        width
+        height
+      }
+    }
+  }
+`;
+const PAGE_PATHNAMES_BY_ID = gql`
+  query PagePathnamesById($ids: [ID!]!) {
+    pagePathnamesById(ids: $ids) {
+      id
+      pathname
+    }
+  }
+`;
+const TYPOGRAPHY_FRAGMENT = 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 = gql`
+  query TypographiesById($ids: [ID!]!) {
+    typographies(ids: $ids) {
+      ...Typography
+    }
+  }
+
+  ${TYPOGRAPHY_FRAGMENT}
+`;
+const TABLE_BY_ID = 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 = gql`
+  query ElementReferenceGlobalElement($id: ID!) {
+    globalElement(id: $id) {
+      id
+      data
+    }
+  }
+`;
+const INTROSPECTION_QUERY = 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, client, store) {
+  var _a, _b, _c;
+  const descriptors = 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]) => {
+        getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          swatchIds.add(swatchId);
+        });
+        getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+        getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+        getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+        getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+        getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        if (descriptor.type === ShapeControlType) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.config.type, prop);
+        }
+        if (descriptor.type === ListControlType) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          prop.forEach((item) => {
+            getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
+          });
+        }
+        if (descriptor.type === Types.Shape) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          getResourcesFromElementDescriptors(descriptor.options.type, prop);
+        }
+        if (descriptor.type === Types.List) {
+          const prop = props[propName];
+          if (prop == null)
+            return;
+          prop.forEach((item) => {
+            getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
+          });
+        }
+      });
+    };
+    let element2;
+    if (isElementReference(current)) {
+      const query = await client.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 client.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 cache2 = new InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache2.restore(cacheData);
+  return new ApolloClient({
+    link: new BatchHttpLink({
+      uri,
+      batchMax: 100
+    }),
+    cache: cache2
+  });
+}
+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: PagePathnameSliceFragmentDoc,
+        data: __spreadProps(__spreadValues({}, pagePathnameSlice), {
+          id
+        })
+      });
+    });
+    KeyUtils.resetGenerator();
+    return this.apolloClient.cache.extract();
+  }
+  updateCacheData(cacheData) {
+    this.apolloClient.cache.restore(cacheData);
+  }
+}
+const Context$2 = createContext(void 0);
+function useQuery(query, options) {
+  const client = useContext(Context$2);
+  return useQuery$1(query, __spreadValues({
+    client: client == null ? void 0 : client.apolloClient
+  }, options));
+}
+function useMutation(mutation, options) {
+  const client = useContext(Context$2);
+  return useMutation$1(mutation, __spreadValues({
+    client: client == null ? void 0 : client.apolloClient
+  }, options));
+}
+function MakeswiftProvider({
+  client,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Context$2.Provider, {
+    value: client,
+    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 Children.map(parse(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 createElement(element.type, __spreadProps(__spreadValues({}, element.props), {
+      key
+    }));
+  });
+}
+const filterUsedSnippetProperties = ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+}) => ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+});
+const PAGE_SNIPPETS_QUERY = gql`
+  query PageById($id: ID!) {
+    page(id: $id) {
+      __typename
+      id
+      snippets {
+        __typename
+        id
+        name
+        code
+        cleanup
+        location
+        shouldAddToNewPages
+        liveEnabled
+        builderEnabled
+      }
+    }
+  }
+`;
+const SITE_FONTS_QUERY = 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] = 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 = 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 = useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
+  const headSnippets = useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
+  const previousHeadSnippets = useRef(null);
+  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__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Head, {
+      children: [/* @__PURE__ */ jsx("style", {
+        children: `
+            html {
+              font-family: sans-serif;
+            }
+            div#__next {
+              overflow: hidden;
+            }
+          `
+      }), /* @__PURE__ */ jsx("link", {
+        rel: "icon",
+        type: favicon.mimetype,
+        href: favicon.publicUrl
+      }), canonicalUrl && /* @__PURE__ */ jsx("link", {
+        rel: "canonical",
+        href: canonicalUrl
+      }), isIndexingBlocked && /* @__PURE__ */ jsx("meta", {
+        name: "robots",
+        content: "noindex"
+      }), title && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("title", {
+          children: title
+        }), /* @__PURE__ */ jsx("meta", {
+          property: "og:title",
+          content: title
+        }), /* @__PURE__ */ jsx("meta", {
+          name: "twitter:title",
+          content: title
+        }), /* @__PURE__ */ jsx("meta", {
+          itemProp: "name",
+          content: title
+        })]
+      }), description && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("meta", {
+          name: "description",
+          content: description
+        }), /* @__PURE__ */ jsx("meta", {
+          property: "og:description",
+          content: description
+        }), /* @__PURE__ */ jsx("meta", {
+          name: "twitter:description",
+          content: description
+        }), /* @__PURE__ */ jsx("meta", {
+          itemProp: "description",
+          content: description
+        })]
+      }), keywords && /* @__PURE__ */ jsx("meta", {
+        name: "keywords",
+        content: keywords
+      }), socialImage && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("meta", {
+          property: "og:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsx("meta", {
+          property: "og:image:type",
+          content: socialImage.mimetype
+        }), /* @__PURE__ */ jsx("meta", {
+          name: "twitter:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsx("meta", {
+          name: "twitter:card",
+          content: "summary_large_image"
+        }), /* @__PURE__ */ jsx("meta", {
+          itemProp: "image",
+          content: socialImage.publicUrl
+        })]
+      }), fontFamilyParamValue !== "" && /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx("link", {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
+        })
+      }), headSnippets.map(snippetToElement).map((children) => Children.map(children, (child) => {
+        if (typeof child === "string")
+          return child;
+        if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
+          return child;
+        return null;
+      }))]
+    }), /* @__PURE__ */ jsx(DocumentReference, {
+      documentReference: createDocumentReference(page.id)
+    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ 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) => createElement(resolve(moduleOrComponent), loadForwardedRef(props))
+  })));
+  return forwardRef((props, ref) => /* @__PURE__ */ 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(() => patch(import("./Box.es.js")))), {
+    type: MakeswiftComponentType.Box,
+    label: "Box",
+    props: {
+      id: ElementID(),
+      backgrounds: Backgrounds(),
+      width: Width(),
+      height: ResponsiveIconRadioGroup({
+        label: "Height",
+        options: [
+          { value: "auto", label: "Auto", icon: "HeightAuto16" },
+          { value: "stretch", label: "Stretch", icon: "HeightMatch16" }
+        ],
+        defaultValue: "auto"
+      }),
+      verticalAlign: 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: Margin(),
+      padding: 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: Border(),
+      borderRadius: BorderRadius(),
+      boxShadow: Shadows(),
+      rowGap: GapY((props) => ({
+        hidden: props.children == null
+      })),
+      columnGap: GapX((props) => ({
+        hidden: props.children == null
+      })),
+      boxAnimateType: 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: ResponsiveNumber((props, device) => ({
+        label: "Box duration",
+        defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
+        min: 0.1,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
+      boxAnimateDelay: ResponsiveNumber((props, device) => ({
+        label: "Box delay",
+        defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
+        min: 0,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
+      itemAnimateType: 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: ResponsiveNumber((props, device) => ({
+        label: "Items duration",
+        defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
+        min: 0.1,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemAnimateDelay: ResponsiveNumber((props, device) => ({
+        label: "Items delay",
+        defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
+        min: 0,
+        step: 0.05,
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemStaggerDuration: ResponsiveNumber((props, device) => ({
+        label: "Stagger",
+        min: 0,
+        step: 0.05,
+        suffix: "s",
+        defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      hidePlaceholder: Checkbox((props) => ({
+        label: "Hide placeholder",
+        hidden: props.children != null
+      })),
+      children: Grid()
+    }
+  });
+}
+function registerComponent$b(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Button.es.js")))), {
+    type: MakeswiftComponentType.Button,
+    label: "Button",
+    props: {
+      id: ElementID(),
+      children: TextInput({ placeholder: "Button text" }),
+      link: Link({
+        defaultValue: {
+          type: "OPEN_PAGE",
+          payload: {
+            pageId: null,
+            openInNewTab: false
+          }
+        }
+      }),
+      variant: 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: 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: 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: 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: ResponsiveColor({
+        label: "Text color",
+        placeholder: "white"
+      }),
+      textStyle: TextStyle(),
+      width: Width(),
+      margin: Margin()
+    }
+  });
+}
+function registerComponent$a(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Carousel.es.js")))), {
+    type: MakeswiftComponentType.Carousel,
+    label: "Carousel",
+    icon: "Carousel40",
+    props: {
+      id: ElementID(),
+      images: Images({
+        preset: [
+          { key: uuid(), props: {} },
+          { key: uuid(), props: {} },
+          { key: uuid(), props: {} }
+        ]
+      }),
+      width: Width({ defaultValue: { value: 400, unit: "px" } }),
+      margin: Margin(),
+      pageSize: 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: 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: 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: GapX({
+        label: "Gap",
+        step: 5,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      autoplay: Checkbox({ label: "Autoplay" }),
+      delay: Number((props) => ({
+        label: "Delay",
+        preset: 5,
+        min: 1,
+        step: 0.1,
+        suffix: "seconds",
+        hidden: !props.autoplay
+      })),
+      showArrows: Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: 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: ResponsiveColor((props) => ({
+        label: "Arrow color",
+        placeholder: "black",
+        hidden: props.showArrows === false
+      })),
+      arrowBackground: ResponsiveColor((props) => ({
+        label: "Arrow background",
+        placeholder: "white",
+        hidden: props.showArrows === false
+      })),
+      showDots: Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: ResponsiveColor((props) => ({
+        label: "Dot color",
+        placeholder: "black",
+        hidden: props.showDots === false
+      })),
+      slideBorder: Border(),
+      slideBorderRadius: BorderRadius()
+    }
+  });
+}
+function registerComponent$9(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Countdown.es.js")))), {
+    type: MakeswiftComponentType.Countdown,
+    label: "Countdown",
+    icon: "Countdown40",
+    props: {
+      id: ElementID(),
+      date: Date$1(() => ({
+        preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
+      })),
+      variant: 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: 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: 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: GapX({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Gap",
+        step: 1,
+        min: 0,
+        max: 100,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      numberFont: Font({ label: "Number font" }),
+      numberColor: ResponsiveColor({
+        label: "Number color",
+        placeholder: "white"
+      }),
+      blockColor: ResponsiveColor({
+        label: "Block color",
+        placeholder: "black"
+      }),
+      labelFont: Font({ label: "Label font" }),
+      labelColor: ResponsiveColor({
+        label: "Label color",
+        placeholder: "black"
+      }),
+      width: Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: Margin(),
+      daysLabel: TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: TextInput({
+        label: "Minutes label",
+        placeholder: "Minutes"
+      }),
+      secondsLabel: TextInput({
+        label: "Seconds label",
+        placeholder: "Seconds"
+      })
+    }
+  });
+}
+function registerComponent$8(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Divider.es.js")))), {
+    type: MakeswiftComponentType.Divider,
+    label: "Divider",
+    icon: "Divider40",
+    props: {
+      id: ElementID(),
+      variant: 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: ResponsiveLength({
+        label: "Height",
+        defaultValue: { value: 1, unit: "px" },
+        options: [{ value: "px", label: "Pixels", icon: "Px16" }]
+      }),
+      color: ResponsiveColor({ placeholder: "black" }),
+      width: Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: Margin()
+    }
+  });
+}
+function registerComponent$7(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Embed.es.js")))), {
+    type: MakeswiftComponentType.Embed,
+    label: "Embed",
+    icon: "Code40",
+    props: {
+      id: ElementID(),
+      html: TextArea({ label: "Code", rows: 20 }),
+      width: Width({}),
+      margin: 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 = createContext({});
+function useFormContext() {
+  return useContext(Context$1);
+}
+const { Provider } = Context$1;
+function registerComponent$6(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Form.es.js")))), {
+    type: MakeswiftComponentType.Form,
+    label: "Form",
+    icon: "Form40",
+    props: {
+      id: ElementID(),
+      tableId: Table(),
+      fields: TableFormFields(),
+      submitLink: Link((props) => ({
+        label: "Redirect to",
+        options: [
+          { value: "OPEN_PAGE", label: "Open page" },
+          { value: "OPEN_URL", label: "Open URL" }
+        ],
+        hidden: props.tableId == null
+      })),
+      gap: GapY((props) => ({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Gap",
+        defaultValue: { value: 0, unit: "px" },
+        hidden: props.tableId == null
+      })),
+      shape: 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: 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: 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: TextStyle({ label: "Label text style" }),
+      labelTextColor: 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: TextStyle({ label: "Button text style" }),
+      brandColor: ResponsiveColor((props) => ({
+        label: "Button color",
+        placeholder: "black",
+        hidden: props.tableId == null
+      })),
+      submitTextColor: ResponsiveColor((props) => ({
+        label: "Button text color",
+        placeholder: "white",
+        hidden: props.tableId == null
+      })),
+      submitLabel: TextInput((props) => ({
+        label: "Button label",
+        placeholder: "Submit",
+        hidden: props.tableId == null
+      })),
+      submitVariant: 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: ResponsiveLength((props) => ({
+        label: "Button width",
+        hidden: props.tableId == null
+      })),
+      submitAlignment: 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: Width({
+        preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: Margin()
+    }
+  });
+}
+function registerComponent$5(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Image.es2.js")))), {
+    type: MakeswiftComponentType.Image,
+    label: "Image",
+    props: {
+      id: ElementID(),
+      file: Image(),
+      altText: TextInput({ label: "Alt text" }),
+      link: Link({ label: "On click" }),
+      width: Width(),
+      margin: Margin(),
+      padding: Padding(),
+      border: Border(),
+      borderRadius: BorderRadius(),
+      boxShadow: Shadows(),
+      opacity: ResponsiveOpacity()
+    }
+  });
+}
+function registerComponent$4(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Navigation.es.js")))), {
+    type: MakeswiftComponentType.Navigation,
+    label: "Navigation",
+    icon: "Navigation40",
+    props: {
+      id: ElementID(),
+      links: NavigationLinks(),
+      linkTextStyle: TextStyle((props) => {
+        const links = props.links;
+        return {
+          label: "Link text style",
+          hidden: links == null || links.length === 0
+        };
+      }),
+      showLogo: Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: Image((props) => ({
+        label: "Logo",
+        hidden: props.showLogo === false
+      })),
+      logoWidth: 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: TextInput((props) => ({
+        label: "Logo alt text",
+        hidden: props.showLogo === false
+      })),
+      logoLink: Link((props) => ({
+        label: "Logo on click",
+        hidden: props.showLogo === false
+      })),
+      alignment: 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: GapX({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Link gap",
+        min: 0,
+        max: 100,
+        step: 1,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      mobileMenuAnimation: ResponsiveSelect({
+        label: "Mobile menu",
+        options: [
+          { value: "coverRight", label: "Cover from right" },
+          { value: "coverLeft", label: "Cover from left" }
+        ]
+      }),
+      mobileMenuOpenIconColor: 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: 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: ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Menu BG color",
+          placeholder: "black",
+          hidden
+        };
+      }),
+      width: Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: Margin()
+    }
+  });
+}
+function registerComponent$3(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Root.es.js")))), {
+    type: MakeswiftComponentType.Root,
+    label: "Page",
+    hidden: true,
+    props: {
+      children: Grid(),
+      backgrounds: Backgrounds(),
+      rowGap: GapY(),
+      columnGap: GapX()
+    }
+  });
+}
+function registerComponent$2(runtime) {
+  return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./SocialLinks.es.js")))), {
+    type: MakeswiftComponentType.SocialLinks,
+    label: "Social Links",
+    icon: "SocialLinks40",
+    props: {
+      id: ElementID(),
+      links: 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: 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: 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: 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: ResponsiveColor((props) => {
+        const links = props.links;
+        const hidden = links == null || links.links.length === 0;
+        return {
+          label: "Icon color",
+          hidden
+        };
+      }),
+      backgroundColor: ResponsiveColor((props) => {
+        const links = props.links;
+        const hidden = links == null || links.links.length === 0;
+        return {
+          label: "Shape color",
+          hidden
+        };
+      }),
+      alignment: 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: GapX({
+        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        label: "Link gap",
+        min: 0,
+        max: 100,
+        step: 1,
+        defaultValue: { value: 0, unit: "px" }
+      }),
+      width: Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: 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(() => patch(import("./Text.es.js")))), {
+    type: MakeswiftComponentType.Text,
+    label: "Text",
+    props: {
+      id: ElementID(),
+      text: RichText(() => ({
+        preset: {
+          document: {
+            nodes: [
+              {
+                object: "block",
+                type: "paragraph",
+                nodes: [
+                  {
+                    object: "text",
+                    text: ipsum(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: Width({
+        preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: 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(() => patch(import("./Video.es.js")))), {
+    type: MakeswiftComponentType.Video,
+    label: "Video",
+    icon: "Video40",
+    props: {
+      id: ElementID(),
+      video: Video({ preset: { controls: true } }),
+      width: Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: Margin(),
+      borderRadius: 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.createElement("svg", _extends({
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React.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("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 = forwardRef(function FallbackComponent2({
+  text
+}, ref) {
+  return /* @__PURE__ */ jsxs(ErrorDiv, {
+    ref,
+    children: [/* @__PURE__ */ jsx(SvgWarning20, {}), /* @__PURE__ */ jsx("span", {
+      children: text
+    })]
+  });
+});
+function isNonNullable(value) {
+  return value != null;
+}
+function mapSideColor(swatches, _c) {
+  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
+  return __spreadProps(__spreadValues({}, restOfSide), {
+    color: color && {
+      alpha: color.alpha,
+      swatch: swatches.find((s) => s && s.id === color.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(color) {
+  const swatchIds = color == null ? [] : [...Array.from(new Set(color.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 (color == null || error != null)
+    return null;
+  const { swatches = [] } = data;
+  return color.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 ? useEffect : 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(color) {
+  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.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 cache2 = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache2[arg] === void 0)
+      cache2[arg] = fn(arg);
+    return cache2[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(cache2, serialized, isStringTag) {
+  var className = cache2.key + "-" + serialized.name;
+  if ((isStringTag === false || isBrowser === false) && cache2.registered[className] === void 0) {
+    cache2.registered[className] = serialized.styles;
+  }
+};
+var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
+  registerStyles(cache2, serialized, isStringTag);
+  var className = cache2.key + "-" + serialized.name;
+  if (cache2.inserted[serialized.name] === void 0) {
+    var current = serialized;
+    do {
+      cache2.insert(serialized === current ? "." + className : "", current, cache2.sheet, true);
+      current = current.next;
+    } while (current !== void 0);
+  }
+};
+const isServer = typeof window === "undefined";
+const useInsertionEffectSpecifier = "useInsertionEffect";
+const useInsertionEffect = (_e = React[useInsertionEffectSpecifier]) != null ? _e : React.useLayoutEffect;
+function useStyle(style) {
+  const serialized = serializeStyles([style], cache.registered);
+  registerStyles(cache, serialized, false);
+  useInsertionEffect(() => {
+    insertStyles(cache, serialized, false);
+  });
+  if (isServer)
+    insertStyles(cache, serialized, false);
+  return `${cache.key}-${serialized.name}`;
+}
+function useStyleControlCssObject(style, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return __spreadValues(__spreadValues({}, properties.includes(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(StyleControlProperty.Width) && {
+      width: (_a = widthToString(width)) != null ? _a : "100%"
+    }), properties.includes(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(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(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(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(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, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "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(definition.config.defaultValue);
+    } catch {
+      defaultColor = ColorHelper();
+    }
+    return defaultColor.rgb().string();
+  }
+  const [swatch] = (_b = (_a = result.data) == null ? void 0 : _a.swatches) != null ? _b : [null];
+  return ColorHelper({ 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 : ImageControlValueFormat.URL;
+  const file = useFile(data);
+  if (format === 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 = 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(view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
+  }, [link, href, block]);
+  const res = useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick]);
+  return res;
+}
+function ListControlValue({
+  definition,
+  data,
+  children
+}) {
+  return (data != null ? data : []).reduce((renderFn, item) => (listControlValue) => /* @__PURE__ */ 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__ */ 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 CheckboxControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useCheckboxControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case NumberControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useNumber,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case TextInputControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useTextInputValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case TextAreaControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useTextAreaValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case SelectControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useSelectControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case ColorControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useColorValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case ImageControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useImageControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case LinkControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useLinkControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
+    case ComboboxControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useComboboxControlValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
+    case ShapeControlType:
+      return /* @__PURE__ */ jsx(ShapeControlValue, {
+        definition,
+        data,
+        children: (value) => children(value)
+      });
+    case ListControlType:
+      return /* @__PURE__ */ 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__ */ jsx(Slot.Placeholder, {
+      control
+    });
+  }
+  return /* @__PURE__ */ jsx(Slot, {
+    control,
+    children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, {
+      control,
+      grid: data.columns,
+      index: i,
+      children: /* @__PURE__ */ 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] = useState(null);
+  const baseClassName = useStyle({
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  });
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: 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] = 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
+    };
+  })));
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+    });
+  }, [element, control, index]);
+  return /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: cx(baseClassName, className),
+    children
+  }));
+}
+function SlotPlaceholder({
+  control
+}) {
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsx("div", {
+    ref: setElement,
+    className: useStyle({
+      width: "100%",
+      background: "rgba(161, 168, 194, 0.18)",
+      height: "80px"
+    }),
+    children: /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      height: "100%",
+      className: useStyle({
+        overflow: "visible",
+        padding: 8
+      }),
+      children: /* @__PURE__ */ 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 = 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 = useMemo(() => typeof descriptor.options === "function" ? descriptor.options(props, deviceMode) : descriptor.options, [props, deviceMode]);
+  return useMemo(() => options.format === WidthControlValueFormats.ClassName ? css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
+}
+function PropsValue({
+  element,
+  children
+}) {
+  var _a;
+  const store = useStore();
+  const propControllerDescriptorsRef = useRef((_a = getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
+  const props = element.props;
+  const documentKey = useDocumentKey();
+  const propControllers = useSelector((state) => {
+    if (documentKey == null)
+      return null;
+    return getPropControllers(state, documentKey, element.key);
+  });
+  return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
+    var _a2;
+    switch (descriptor.type) {
+      case CheckboxControlType:
+      case NumberControlType:
+      case TextInputControlType:
+      case TextAreaControlType:
+      case SelectControlType:
+      case ColorControlType:
+      case ImageControlType:
+      case ComboboxControlType:
+      case ShapeControlType:
+      case ListControlType:
+      case LinkControlType:
+        return /* @__PURE__ */ jsx(ControlValue, {
+          definition: descriptor,
+          data: props[propName],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        });
+      case StyleControlType:
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useFormattedStyle,
+          parameters: [props[propName], descriptor],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      case SlotControlType: {
+        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useSlot,
+          parameters: [props[propName], control],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      }
+      case Types.Width:
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useWidth,
+          parameters: [props[propName], descriptor, props],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      case Types.ResponsiveColor:
+        return /* @__PURE__ */ 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 = findDOMNode(instance);
+  console.error = error;
+  return foundDomNode;
+}
+class FindDomNodeClassComponent extends 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__ */ jsx(Fragment, {
+      children: this.props.children
+    });
+  }
+}
+const FindDomNode = forwardRef(function FindDomNode2(props, ref) {
+  return /* @__PURE__ */ jsx(FindDomNodeClassComponent, __spreadProps(__spreadValues({}, props), {
+    innerRef: ref
+  }));
+});
+const storeContextDefaultValue = configureStore();
+function createReactRuntime(store) {
+  return {
+    registerComponent(component, {
+      type,
+      label,
+      icon = "Cube40",
+      hidden = false,
+      props
+    }) {
+      const unregisterComponent = store.dispatch(registerComponentEffect(type, {
+        label,
+        icon,
+        hidden
+      }, props != null ? props : {}));
+      const unregisterReactComponent = store.dispatch(registerReactComponentEffect(type, component));
+      return () => {
+        unregisterComponent();
+        unregisterReactComponent();
+      };
+    }
+  };
+}
+const ReactRuntime = createReactRuntime(storeContextDefaultValue);
+registerBuiltinComponents(ReactRuntime);
+const Context = createContext(storeContextDefaultValue);
+function RuntimeProvider({
+  client,
+  children,
+  rootElements
+}) {
+  const [store, setStore] = useState(() => {
+    const store2 = configureStore({
+      preloadedState: storeContextDefaultValue.getState(),
+      rootElements
+    });
+    return store2;
+  });
+  useEffect(() => {
+    var _a;
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(registerDocumentEffect(createDocument(documentKey, rootElement))));
+    return () => {
+      unregisterDocuments.forEach((unregisterDocument) => {
+        unregisterDocument();
+      });
+    };
+  }, [store, rootElements]);
+  useEffect(() => {
+    const isInBuilder = window.parent !== window;
+    if (isInBuilder)
+      setReactBuilderPreviewStore();
+    async function setReactBuilderPreviewStore() {
+      const ReactBuilderPreview = await import("./react-builder-preview.es.js");
+      setStore((store2) => ReactBuilderPreview.configureStore({
+        preloadedState: store2.getState(),
+        client: client.apolloClient
+      }));
+    }
+  }, [client]);
+  return /* @__PURE__ */ jsx(Context.Provider, {
+    value: store,
+    children: /* @__PURE__ */ jsx(MakeswiftProvider, {
+      client,
+      children
+    })
+  });
+}
+const PageContext = createContext(null);
+function usePageIdOrNull() {
+  return 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__ */ jsx(PageContext.Provider, {
+    value: id,
+    children
+  });
+}
+const DocumentContext = createContext(null);
+function useDocumentKey() {
+  return useContext(DocumentContext);
+}
+function useStore() {
+  return useContext(Context);
+}
+function useSelector(selector) {
+  const store = useStore();
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
+}
+function useComponent(type) {
+  return useSelector((state) => getReactComponent(state, type));
+}
+function useElementId(elementKey) {
+  const documentKey = useDocumentKey();
+  return useSelector((state) => documentKey == null || elementKey == null ? null : getElementId(state, documentKey, elementKey));
+}
+function useDocument(documentKey) {
+  return useSelector((state) => getDocument(state, documentKey));
+}
+function useIsInBuilder() {
+  return useSelector((state) => getIsInBuilder(state));
+}
+function useDispatch() {
+  const store = 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 = memo(forwardRef(function ElementData2({
+  elementData
+}, ref) {
+  const Component2 = useComponent(elementData.type);
+  const [handle, setHandle] = useState(null);
+  const [foundDomNode, setFoundDomNode] = useState(null);
+  useImperativeHandle(ref, () => handle != null ? handle : foundDomNode, [handle, foundDomNode]);
+  suppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
+  if (Component2 == null) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref: setHandle,
+      text: "Component not found"
+    });
+  }
+  return /* @__PURE__ */ jsx(FindDomNode, {
+    ref: setFoundDomNode,
+    children: /* @__PURE__ */ jsx(PropsValue, {
+      element: elementData,
+      children: (props) => /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
+        key: elementData.key,
+        ref: setHandle
+      }))
+    })
+  });
+}));
+const DisableRegisterElement = createContext(false);
+const ElementReference = memo(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__ */ jsx(FallbackComponent, {
+      ref,
+      text: "Something went wrong!"
+    });
+  }
+  if (globalElementData == null) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref,
+      text: "This global component doesn't exist"
+    });
+  }
+  return elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, {
+    document: elementReferenceDocument,
+    ref
+  }) : /* @__PURE__ */ jsx(DisableRegisterElement.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx(ElementData, {
+      elementData: globalElementData,
+      ref
+    })
+  });
+}));
+const Element = memo(forwardRef(function Element2({
+  element
+}, ref) {
+  const elementKey = element.key;
+  const dispatch = useDispatch();
+  const documentKey = useDocumentKey();
+  const [handle, setHandle] = useState(null);
+  const isRegisterElementDisabled = useContext(DisableRegisterElement);
+  useImperativeHandle(ref, () => handle, [handle]);
+  useEffect(() => {
+    if (documentKey == null || isRegisterElementDisabled)
+      return;
+    return dispatch(registerComponentHandleEffect(documentKey, elementKey, handle));
+  }, [dispatch, documentKey, elementKey, handle, isRegisterElementDisabled]);
+  useEffect(() => {
+    if (documentKey == null || isRegisterElementDisabled)
+      return;
+    return dispatch(mountComponentEffect(documentKey, elementKey));
+  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
+  return isElementReference(element) ? /* @__PURE__ */ jsx(ElementReference, {
+    ref: setHandle,
+    elementReference: element
+  }, elementKey) : /* @__PURE__ */ jsx(ElementData, {
+    ref: setHandle,
+    elementData: element
+  }, elementKey);
+}));
+const Document = memo(forwardRef(function Document2({
+  document: document2
+}, ref) {
+  return /* @__PURE__ */ jsx(DocumentContext.Provider, {
+    value: document2.key,
+    children: /* @__PURE__ */ jsx(Element, {
+      ref,
+      element: document2.rootElement
+    })
+  });
+}));
+const DocumentReference = memo(forwardRef(function DocumentReference2({
+  documentReference
+}, ref) {
+  const document2 = useDocument(documentReference.key);
+  if (document2 == null) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref,
+      text: "Document not found"
+    });
+  }
+  return /* @__PURE__ */ jsx(Document, {
+    ref,
+    document: document2
+  });
+}));
+export { Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, getIndexes as K, isNonNullable as L, MakeswiftComponentType as M, FILES_BY_ID as N, useElementId as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, forwardNextDynamicRef as U, deepEqual as V, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page as o, colorToString as p, useIsomorphicLayoutEffect as q, Shapes as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
+//# sourceMappingURL=index.es.js.map