@makeswift/runtime 0.0.0-6baa2a2 → 0.0.0-76a2297

package/dist/react.es2.js

@@ -29,239 +29,39 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import * as React from "react";
 import { forwardRef, createContext, useContext, useMemo, useState, useLayoutEffect, useCallback, useEffect, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, memo } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
-import { gql, useQuery as useQuery$1, ApolloClient, InMemoryCache } from "@apollo/client";
-import { combineReducers, createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import { A as ActionTypes, r as registerComponentHandleEffect, e as mountComponentEffect, f as registerComponentEffect, g as registerReactComponentEffect } from "./actions.es.js";
-import { T as Types, E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea, o as NavigationLinks, p as SocialLinks$1, q as RichText } from "./descriptors.es.js";
+import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
+import { a as createDocumentReference, g as getIsInBuilder, b as configureStore, d as getElementId, e as getReactComponent, f as getDocument, i as isElementReference } from "./react-page.es.js";
+import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect } from "./actions.es.js";
 import styled, { css, keyframes, createGlobalStyle } from "styled-components";
 import { useReducedMotion, useAnimation, motion } from "framer-motion";
+import { getDataFromTree } from "@apollo/client/react/ssr";
+import uuid from "uuid/v4";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import "html-react-parser";
+import "next/head";
 import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
 import NextImage from "next/image";
 import ReactPlayer from "react-player";
+import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText, V as Video$1 } from "./descriptors.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import NextLink from "next/link";
 import { useGesture } from "react-use-gesture";
 import { wrap } from "@popmotion/popcorn";
-import uuid from "uuid/v4";
+import { Field as Field$1, getIn, Formik } from "formik";
 import { normalize } from "polished";
 import { Value } from "slate";
 import Hotkeys from "slate-hotkeys";
 import ipsum from "corporate-ipsum";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
-function isElementReference(element) {
-  return !("props" in element);
-}
-function createDocument(rootElement) {
-  return { rootElement };
-}
-function getInitialState$3({
-  rootElements = /* @__PURE__ */ new Map()
-} = {}) {
-  const initialState = /* @__PURE__ */ new Map();
-  rootElements.forEach((rootElement, elementKey) => {
-    initialState.set(elementKey, createDocument(rootElement));
-  });
-  return initialState;
-}
-function getDocuments(state) {
-  return state;
-}
-function getDocument(state, documentKey) {
-  var _a;
-  return (_a = getDocuments(state).get(documentKey)) != null ? _a : null;
-}
-function getDocumentRootElement$1(state, documentKey) {
-  var _a, _b;
-  return (_b = (_a = getDocument(state, documentKey)) == null ? void 0 : _a.rootElement) != null ? _b : null;
-}
-function reducer$4(state = getInitialState$3(), _action) {
-  return state;
-}
-function getInitialState$2({
-  reactComponents = /* @__PURE__ */ new Map()
-} = {}) {
-  return reactComponents;
-}
-function getReactComponents(state) {
-  return state;
-}
-function getReactComponent$1(state, type) {
-  var _a;
-  return (_a = getReactComponents(state).get(type)) != null ? _a : null;
-}
-function reducer$3(state = getInitialState$2(), action) {
-  switch (action.type) {
-    case ActionTypes.REGISTER_REACT_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.component);
-    case ActionTypes.UNREGISTER_REACT_COMPONENT: {
-      const nextState = new Map(state);
-      const deleted = nextState.delete(action.payload.type);
-      return deleted ? nextState : state;
-    }
-    default:
-      return state;
-  }
-}
-function getInitialState$1({
-  componentsMeta = /* @__PURE__ */ new Map()
-} = {}) {
-  return componentsMeta;
-}
-function getComponentsMeta(state) {
-  return state;
-}
-function reducer$2(state = getInitialState$1(), action) {
-  switch (action.type) {
-    case ActionTypes.REGISTER_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.meta);
-    case ActionTypes.UNREGISTER_COMPONENT: {
-      const nextState = new Map(state);
-      const deleted = nextState.delete(action.payload.type);
-      return deleted ? nextState : state;
-    }
-    default:
-      return state;
-  }
-}
-function getInitialState({
-  propControllerDescriptors = /* @__PURE__ */ new Map()
-} = {}) {
-  return propControllerDescriptors;
-}
-function getPropControllerDescriptors$1(state) {
-  return state;
-}
-function getComponentPropControllerDescriptors$1(state, componentType) {
-  var _a;
-  return (_a = getPropControllerDescriptors$1(state).get(componentType)) != null ? _a : null;
-}
-function reducer$1(state = getInitialState(), action) {
-  switch (action.type) {
-    case ActionTypes.REGISTER_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.propControllerDescriptors);
-    case ActionTypes.UNREGISTER_COMPONENT: {
-      const nextState = new Map(state);
-      const deleted = nextState.delete(action.payload.type);
-      return deleted ? nextState : state;
-    }
-    default:
-      return state;
-  }
-}
-function getElementChildren(descriptor, prop) {
-  if (prop == null)
-    return [];
-  switch (descriptor.type) {
-    case Types.Grid:
-      return prop.elements;
-    default:
-      return [];
-  }
-}
-function getElementId$1(descriptor, prop) {
-  if (prop == null)
-    return null;
-  switch (descriptor.type) {
-    case Types.ElementID:
-      return prop;
-    default:
-      return null;
-  }
-}
-const reducer = combineReducers({
-  documents: reducer$4,
-  reactComponents: reducer$3,
-  componentsMeta: reducer$2,
-  propControllers: reducer$1,
-  isInBuilder: (_state = false, _action) => false
-});
-function getDocumentsStateSlice(state) {
-  return state.documents;
-}
-function getDocumentRootElement(state, documentKey) {
-  return getDocumentRootElement$1(getDocumentsStateSlice(state), documentKey);
-}
-function getReactComponentsStateSlice(state) {
-  return state.reactComponents;
-}
-function getReactComponent(state, type) {
-  return getReactComponent$1(getReactComponentsStateSlice(state), type);
-}
-function getPropControllersStateSlice(state) {
-  return state.propControllers;
-}
-function getPropControllerDescriptors(state) {
-  return getPropControllerDescriptors$1(getPropControllersStateSlice(state));
-}
-function getComponentPropControllerDescriptors(state, componentType) {
-  return getComponentPropControllerDescriptors$1(getPropControllersStateSlice(state), componentType);
-}
-function normalizeElement(element, descriptors) {
-  const elements = /* @__PURE__ */ new Map();
-  const remaining = [element];
-  let current;
-  while (current = remaining.pop()) {
-    elements.set(current.key, current);
-    if (isElementReference(current))
-      continue;
-    const elementDescriptors = descriptors.get(element.type);
-    if (elementDescriptors == null)
-      continue;
-    const parent = current;
-    const children = Object.entries(elementDescriptors).reduce((acc, [propName, descriptor]) => {
-      return [...acc, ...getElementChildren(descriptor, parent.props[propName])];
-    }, []);
-    remaining.push(...children);
-  }
-  return elements;
-}
-function getDocumentElements(state, documentKey) {
-  const rootElement = getDocumentRootElement(state, documentKey);
-  const descriptors = getPropControllerDescriptors(state);
-  if (rootElement == null)
-    return /* @__PURE__ */ new Map();
-  return normalizeElement(rootElement, descriptors);
-}
-function getElement(state, documentKey, elementKey) {
-  var _a;
-  return (_a = getDocumentElements(state, documentKey).get(elementKey)) != null ? _a : null;
-}
-function getElementPropControllerDescriptors(state, documentKey, elementKey) {
-  const element = getElement(state, documentKey, elementKey);
-  if (element == null || isElementReference(element))
-    return null;
-  return getComponentPropControllerDescriptors(state, element.type);
-}
-function getElementId(state, documentKey, elementKey) {
-  const element = getElement(state, documentKey, elementKey);
-  if (element == null || isElementReference(element))
-    return null;
-  const descriptors = getComponentPropControllerDescriptors(state, element.type);
-  if (descriptors == null)
-    return null;
-  const elementId = Object.entries(descriptors).reduce((acc, [propName, descriptor]) => {
-    if (acc != null)
-      return acc;
-    return getElementId$1(descriptor, element.props[propName]);
-  }, null);
-  return elementId;
-}
-function getIsInBuilder(state) {
-  return state.isInBuilder;
-}
-function configureStore({
-  rootElements,
-  preloadedState
-} = {}) {
-  return createStore(reducer, __spreadProps(__spreadValues({}, preloadedState), { documents: getInitialState$3({ rootElements }) }), applyMiddleware(thunk));
-}
 const PlaceholderBase$1 = styled.div`
   width: 100%;
   background: rgba(161, 168, 194, 0.18);
@@ -271,7 +71,7 @@ const PlaceholderBase$1 = styled.div`
   hide
 }) => hide === true ? "hidden" : "initial"};
 `;
-var Placeholder$1 = forwardRef(function Placeholder(_a, ref) {
+var Placeholder$2 = forwardRef(function Placeholder(_a, ref) {
   var _b = _a, {
     hide = false
   } = _b, restOfProps = __objRest(_b, [
@@ -385,21 +185,157 @@ const TYPOGRAPHIES_BY_ID = gql`
 
   ${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
+          }
+        }
+      }
+    }
+  }
+`;
 function isNonNullable(value) {
   return value != null;
 }
-const Context$1 = createContext(void 0);
+const typePolicies = {
+  Query: {
+    fields: {
+      swatches(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Swatch",
+          id
+        }, true));
+      },
+      file(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "File",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      files(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "File",
+          id
+        }, true));
+      },
+      typographies(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Typography",
+          id
+        }, true));
+      },
+      pagePathnamesById(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "PagePathnameSlice",
+          id
+        }, true));
+      },
+      globalElement(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "GlobalElement",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      table(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Table",
+          id: args == null ? void 0 : args.id
+        }, true);
+      }
+    }
+  }
+};
+function createApolloClient({
+  uri,
+  cacheData
+}) {
+  const cache = new InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache.restore(cacheData);
+  return new ApolloClient({
+    uri,
+    cache
+  });
+}
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "apolloClient");
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    const id = uuid();
+    await getDataFromTree(/* @__PURE__ */ jsx(RuntimeProvider, {
+      client: this,
+      defaultRootElements: /* @__PURE__ */ new Map([[id, element]]),
+      children: /* @__PURE__ */ jsx(DocumentReference, {
+        documentReference: createDocumentReference(id)
+      })
+    }));
+    return this.apolloClient.cache.extract();
+  }
+}
+const Context$2 = createContext(void 0);
 function useQuery(query, options) {
-  const client = useContext(Context$1);
+  const client = useContext(Context$2);
   return useQuery$1(query, __spreadValues({
-    client
+    client: client == null ? void 0 : client.apolloClient
+  }, options));
+}
+function useMutation(mutation, options) {
+  const client = useContext(Context$2);
+  return useMutation$1(mutation, __spreadValues({
+    client: client == null ? void 0 : client.apolloClient
   }, options));
 }
-function ApolloProvider({
+function MakeswiftProvider({
   client,
   children
 }) {
-  return /* @__PURE__ */ jsx(Context$1.Provider, {
+  return /* @__PURE__ */ jsx(Context$2.Provider, {
     value: client,
     children
   });
@@ -612,8 +548,8 @@ function shallowMerge(a, b) {
 }
 const DEVICES = [
   { id: "desktop", minWidth: 769 },
-  { id: "tablet", minWidth: 476, maxWidth: 768 },
-  { id: "mobile", maxWidth: 475 }
+  { id: "tablet", minWidth: 576, maxWidth: 768 },
+  { id: "mobile", maxWidth: 575 }
 ];
 const getDevice = (deviceId) => {
   const device = DEVICES.find(({ id }) => id === deviceId);
@@ -687,6 +623,12 @@ function usePage(pageId) {
   const { pagePathnamesById: [page] = [] } = data;
   return page;
 }
+function useTable(tableId) {
+  return useQuery(TABLE_BY_ID, {
+    skip: tableId == null,
+    variables: { id: tableId }
+  });
+}
 const defaultExitedProps = {
   opacity: 0,
   x: 0,
@@ -1157,8 +1099,8 @@ function getScrollParent(element) {
     return element;
   return getScrollParent(parentElement);
 }
-function Parallax(_g) {
-  var _h = _g, {
+function Parallax(_g2) {
+  var _h = _g2, {
     strength,
     children
   } = _h, rest = __objRest(_h, [
@@ -1244,7 +1186,7 @@ function Parallax(_g) {
     children: children(getProps)
   }));
 }
-const Container$8 = styled.div`
+const Container$d = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1298,7 +1240,7 @@ function BackgroundVideo({
   }, [aspectRatio, zoom]);
   if (!ReactPlayer.canPlay(url))
     return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsxs(Container$8, {
+  return /* @__PURE__ */ jsxs(Container$d, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
       url,
@@ -1377,10 +1319,10 @@ const AbsoluteFill = styled.div`
   right: 0;
   bottom: 0;
 `;
-const Container$7 = styled(AbsoluteFill)`
+const Container$c = styled(AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled(Container$7)`
+const BackgroundsContainer$1 = styled(Container$c)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => css`
         display: ${visibility === true ? "block" : "none"};
@@ -1404,7 +1346,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsx(Container$7, {
+            return /* @__PURE__ */ jsx(Container$c, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1440,7 +1382,7 @@ function Backgrounds({
             }
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$7, __spreadValues({}, getParallaxProps({
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$c, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1458,7 +1400,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsx(Container$7, {
+            return /* @__PURE__ */ jsx(Container$c, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1475,7 +1417,7 @@ function Backgrounds({
             } = bg.payload;
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$7, __spreadProps(__spreadValues({}, getParallaxProps({})), {
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$c, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1543,7 +1485,7 @@ const Grid$1 = styled(motion.div)`
   alignContent
 }))}
 `;
-const GridItem$1 = styled(motion.div)`
+const GridItem$2 = styled(motion.div)`
   display: flex;
 
   /* IE11 doesn't recognize space-between and treats it as stretch, so we fall back to flex-start */
@@ -1654,7 +1596,7 @@ const Box = forwardRef(function Box2({
       animate: animate == null ? void 0 : animate.parent,
       initial: initial == null ? void 0 : initial.parent,
       transition: transition == null ? void 0 : transition.parent,
-      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem$1, {
+      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem$2, {
         grid: children.columns,
         index,
         columnGap,
@@ -1665,13 +1607,13 @@ const Box = forwardRef(function Box2({
         children: /* @__PURE__ */ jsx(Element$1, {
           element: child
         })
-      }, child.key)) : /* @__PURE__ */ jsx(Placeholder$1, {
+      }, child.key)) : /* @__PURE__ */ jsx(Placeholder$2, {
         hide: hidePlaceholder
       })
     })
   }, key == null ? void 0 : key.container);
 });
-function registerComponent$a(runtime) {
+function registerComponent$c(runtime) {
   return runtime.registerComponent(Box, {
     type: "./components/Box/index.js",
     label: "Box",
@@ -1843,7 +1785,7 @@ function registerComponent$a(runtime) {
         suffix: "s",
         defaultValue: DEFAULT_ITEM_STAGGER_DURATION
       }),
-      hidePlaceholder: Checkbox({
+      hidePlaceholder: Checkbox$1({
         label: "Hide placeholder"
       }),
       children: Grid$2()
@@ -1936,7 +1878,7 @@ const Link = forwardRef(function Link2(_k, ref) {
     }))
   });
 });
-const StyledButton = styled(Link)`
+const StyledButton$1 = styled(Link)`
   display: table;
   border: 0;
   outline: 0;
@@ -2128,7 +2070,7 @@ const StyledButton = styled(Link)`
 })}
     ${cssTextStyle()}
 `;
-const Button = forwardRef(function Button2(_m, ref) {
+const Button$1 = forwardRef(function Button2(_m, ref) {
   var _n = _m, {
     id,
     children,
@@ -2154,7 +2096,7 @@ const Button = forwardRef(function Button2(_m, ref) {
     "width",
     "margin"
   ]);
-  return /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsx(StyledButton$1, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     id,
     color: useColor(color),
@@ -2169,8 +2111,8 @@ const Button = forwardRef(function Button2(_m, ref) {
     children: children == null ? "Button Text" : children
   }));
 });
-function registerComponent$9(runtime) {
-  return runtime.registerComponent(Button, {
+function registerComponent$b(runtime) {
+  return runtime.registerComponent(Button$1, {
     type: "./components/Button/index.js",
     label: "Button",
     props: {
@@ -2265,6 +2207,10 @@ const placeholders = {
   image: {
     src: "data:image/svg+xml,%3Csvg width='360' height='240' viewBox='0 0 360 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M260 59C260 78.33 244.33 94 225 94C205.67 94 190 78.33 190 59C190 39.67 205.67 24 225 24C244.33 24 260 39.67 260 59Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M319 250H417L291.485 124.485C286.799 119.799 279.201 119.799 274.515 124.485L234 165L319 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath d='M311 250L-89 250L102.515 58.4853C107.201 53.799 114.799 53.799 119.485 58.4853L311 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A",
     dimensions: { width: 360, height: 240 }
+  },
+  video: {
+    src: "data:image/svg+xml,%3Csvg width='712' height='400' viewBox='0 0 712 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M712 0H0V400H712V0ZM356 240C378.091 240 396 222.091 396 200C396 177.909 378.091 160 356 160C333.909 160 316 177.909 316 200C316 222.091 333.909 240 356 240Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M344 216.503V183.497C344 181.95 345.681 180.989 347.014 181.773L375.069 198.276C376.384 199.049 376.384 200.951 375.069 201.724L347.014 218.227C345.681 219.011 344 218.05 344 216.503Z' fill='%23A1A8C2' fill-opacity='0.4'/%3E%3C/svg%3E%0A",
+    dimensions: { width: 712, height: 400 }
   }
 };
 function loadImage(src) {
@@ -2370,7 +2316,7 @@ const ImageComponent = forwardRef(function Image2({
     })
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$a(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2419,7 +2365,7 @@ const RightChevron = () => /* @__PURE__ */ jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$6 = styled.div`
+const Container$b = styled.div`
   position: relative;
   height: 100%;
 `;
@@ -2719,7 +2665,7 @@ const Carousel = forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxs(Container$6, {
+    children: [/* @__PURE__ */ jsxs(Container$b, {
       children: [/* @__PURE__ */ jsx(ClipMask, {
         children: /* @__PURE__ */ jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2795,7 +2741,7 @@ const Carousel = forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2858,7 +2804,7 @@ function registerComponent$7(runtime) {
           unit: "px"
         }
       }),
-      autoplay: Checkbox({
+      autoplay: Checkbox$1({
         label: "Autoplay"
       }),
       delay: Number$1({
@@ -2868,7 +2814,7 @@ function registerComponent$7(runtime) {
         step: 0.1,
         suffix: "seconds"
       }),
-      showArrows: Checkbox({
+      showArrows: Checkbox$1({
         preset: true,
         label: "Show arrows"
       }),
@@ -2897,7 +2843,7 @@ function registerComponent$7(runtime) {
         label: "Arrow background",
         placeholder: "white"
       }),
-      showDots: Checkbox({
+      showDots: Checkbox$1({
         preset: true,
         label: "Show dots"
       }),
@@ -2915,14 +2861,14 @@ const Block$1 = styled.div`
   padding: 0.5em;
   font-size: 1em;
 `;
-const Label = styled.div`
+const Label$3 = styled.div`
   margin-top: 0.25em;
 `;
 const Segment = styled.div`
   flex: 1;
   text-align: center;
 `;
-const Container$5 = styled.div`
+const Container$a = styled.div`
   display: flex;
   ${cssWidth("560px")}
   ${cssMargin()}
@@ -2932,7 +2878,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 18px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 14px;
             }
           `;
@@ -2940,7 +2886,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 32px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 18px;
             }
           `;
@@ -2948,7 +2894,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 24px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 16px;
             }
           `;
@@ -3085,7 +3031,7 @@ const Container$5 = styled.div`
 })}
   }
 
-  ${Label} {
+  ${Label$3} {
     ${(p) => cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
   swatch: {
     hue: 0,
@@ -3162,7 +3108,7 @@ const Countdown = forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxs(Container$5, {
+  return /* @__PURE__ */ jsxs(Container$a, {
     ref,
     id,
     width,
@@ -3181,7 +3127,7 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: days
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: daysLabel == null ? "Days" : daysLabel
       })]
     }), /* @__PURE__ */ jsxs(Segment, {
@@ -3189,7 +3135,7 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: hours
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: hoursLabel == null ? "Hours" : hoursLabel
       })]
     }), /* @__PURE__ */ jsxs(Segment, {
@@ -3197,7 +3143,7 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: minutes
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: minutesLabel == null ? "Minutes" : minutesLabel
       })]
     }), /* @__PURE__ */ jsxs(Segment, {
@@ -3205,13 +3151,13 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: seconds
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: secondsLabel == null ? "Seconds" : secondsLabel
       })]
     })]
   });
 });
-function registerComponent$6(runtime) {
+function registerComponent$8(runtime) {
   return runtime.registerComponent(Countdown, {
     type: "./components/Countdown/index.js",
     label: "Countdown",
@@ -3347,7 +3293,7 @@ const IE11MinHeightContainer = styled.div`
   ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$4 = styled.div`
+const Container$9 = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3406,7 +3352,7 @@ const Divider = forwardRef(function Divider2({
     id,
     width,
     margin,
-    children: /* @__PURE__ */ jsx(Container$4, {
+    children: /* @__PURE__ */ jsx(Container$9, {
       children: /* @__PURE__ */ jsx(Line, {
         variant,
         thickness,
@@ -3415,7 +3361,7 @@ const Divider = forwardRef(function Divider2({
     })
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$7(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3465,7 +3411,7 @@ function registerComponent$5(runtime) {
     }
   });
 }
-const Container$3 = styled.div`
+const Container$8 = styled.div`
   min-height: 15px;
   ${cssWidth()}
   ${cssMargin()}
@@ -3545,7 +3491,7 @@ const Embed = forwardRef(function Embed2({
   }, [container, html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsx(Container$3, {
+  return /* @__PURE__ */ jsx(Container$8, {
     ref: setContainer,
     id,
     margin,
@@ -3555,14 +3501,14 @@ const Embed = forwardRef(function Embed2({
     }
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Embed, {
     type: "./components/Embed/index.js",
     label: "Embed",
     icon: "Code40",
     props: {
       id: ElementID(),
-      html: TextArea({
+      html: TextArea$1({
         label: "Code",
         rows: 20
       }),
@@ -3571,9 +3517,9 @@ function registerComponent$4(runtime) {
     }
   });
 }
-var _path$r;
-function _extends$r() {
-  _extends$r = Object.assign || function(target) {
+var _path$s;
+function _extends$t() {
+  _extends$t = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3584,66 +3530,1844 @@ function _extends$r() {
     }
     return target;
   };
-  return _extends$r.apply(this, arguments);
+  return _extends$t.apply(this, arguments);
 }
-var SvgMobileMenu28 = function SvgMobileMenu282(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 28,
-    height: 28
-  }, props), _path$r || (_path$r = /* @__PURE__ */ React.createElement("path", {
-    d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
+var SvgCheck12 = function SvgCheck122(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends$t({
+    width: 12,
+    height: 12,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$s || (_path$s = /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.707 1.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 1.414-1.414L4 8.086l6.293-6.293a1 1 0 0 1 1.414 0Z"
   })));
 };
-const GutterContainer = styled.div`
-  ${(p) => cssMediaRules([p.gutter], ([gutter = {
-  value: 0,
-  unit: "px"
-}]) => css`
-        padding-left: ${p.first ? "0px" : `${gutter.value / 2}${gutter.unit}`};
-        padding-right: ${p.last ? "0px" : `${gutter.value / 2}${gutter.unit}`};
+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 getSizeHeight$2(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 30;
+    case Sizes.MEDIUM:
+      return 38;
+    case Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeHorizontalPadding(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 8;
+    case Sizes.MEDIUM:
+      return 12;
+    case Sizes.LARGE:
+      return 16;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeVerticalPadding(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 3;
+    case Sizes.MEDIUM:
+      return 7;
+    case Sizes.LARGE:
+      return 11;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getShapeBorderRadius(shape) {
+  switch (shape) {
+    case Shapes.SQUARE:
+      return 0;
+    case Shapes.ROUNDED:
+      return 4;
+    case Shapes.PILL:
+      return 500;
+    default:
+      throw new Error(`Invalid form shape "${shape}"`);
+  }
+}
+function getContrastBorderColor(contrast, error) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
+    case Contrasts.DARK:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastBackgroundColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "white";
+    case Contrasts.DARK:
+      return "rgba(0, 0, 0, 0.7)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastColor$1(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.95)";
+    case Contrasts.DARK:
+      return "white";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastPlaceholderColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.3)";
+    case Contrasts.DARK:
+      return "rgba(255,255,255,0.3)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function cssField() {
+  return css`
+    display: block;
+    width: 100%;
+    outline: none;
+    border-width: 1px;
+    border-style: solid;
+    transition: border-color 200ms;
+    ${(props) => cssMediaRules([props.shape, props.size, props.contrast, props.brandColor], ([
+    shape = Shapes.ROUNDED,
+    size = Sizes.MEDIUM,
+    contrast = Contrasts.LIGHT,
+    brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+  ]) => css`
+          padding: ${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px;
+          border-radius: ${getShapeBorderRadius(shape)}px;
+          border-color: ${getContrastBorderColor(contrast, props.error)};
+          color: ${getContrastColor$1(contrast)};
+          background-color: ${getContrastBackgroundColor(contrast)};
+
+          :focus,
+          :focus-within {
+            border-color: ${colorToString(brandColor)};
+          }
+
+          ::placeholder {
+            color: ${getContrastPlaceholderColor(contrast)};
+          }
+        `)}
+  `;
+}
+function getSizeHeight$1(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 36;
+    case Sizes.MEDIUM:
+      return 42;
+    case Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const Base$2 = styled.input`
+  ${cssField()}
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
       `)}
 `;
-const PlaceholderLink$1 = styled.div`
-  width: ${(props) => props.width}px;
-  height: ${(props) => props.button === true ? 32 : 8}px;
+var Input$2 = forwardRef(function Input(_o, ref) {
+  var _p = _o, {
+    error = false,
+    form
+  } = _p, restOfProps = __objRest(_p, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+const Container$7 = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${cssWidth()};
+  ${cssMargin()};
+`;
+const Label$2 = styled.div`
+  max-width: 120px;
+  min-width: 60px;
+  height: 8px;
+  border-radius: 2px;
   background-color: #a1a8c2;
-  border-radius: ${(props) => props.button === true ? 6 : 2}px;
   opacity: 0.4;
+  margin-bottom: 8px;
 `;
-const links$1 = [{
-  width: 50
-}, {
-  width: 70
-}, {
-  width: 60
-}, {
-  width: 80,
-  button: true
-}];
-function LinksPlaceholder({
-  gutter
-}) {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: links$1.map((link, i) => /* @__PURE__ */ jsx(GutterContainer, {
-      gutter,
-      first: i === 0,
-      last: i === links$1.length - 1,
-      children: /* @__PURE__ */ jsx(PlaceholderLink$1, __spreadValues({}, link))
-    }, i))
+const Input$1 = styled.div`
+  min-width: 80px;
+  height: 32px;
+  border-radius: 4px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a1a8c2;
+  opacity: 0.4;
+`;
+const Button = styled.div`
+  min-width: 140px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #a1a8c2;
+  opacity: 0.4;
+`;
+var Placeholder$1 = forwardRef(function Placeholder2({
+  width,
+  margin
+}, ref) {
+  return /* @__PURE__ */ jsxs(Container$7, {
+    ref,
+    width,
+    margin,
+    children: [/* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsx(Label$2, {}), /* @__PURE__ */ jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsx(Label$2, {}), /* @__PURE__ */ jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end"
+      },
+      children: /* @__PURE__ */ jsx(Button, {})
+    })]
   });
+});
+function getSizeHeight(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 14;
+    case Sizes.MEDIUM:
+      return 18;
+    case Sizes.LARGE:
+      return 22;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
 }
-var _path$q;
-function _extends$q() {
-  _extends$q = 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];
-        }
-      }
-    }
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.8)";
+    case Contrasts.DARK:
+      return "rgba(255, 255, 255, 0.95)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+const Base$1 = styled.label`
+  display: block;
+  margin: 0 0 0.25em 0;
+  ${cssTextStyle()}
+  ${(props) => cssMediaRules([props.size, props.contrast, props.textColor], ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => css`
+        min-height: ${getSizeHeight(size)}px;
+        color: ${textColor == null ? getContrastColor(contrast) : colorToString(textColor)};
+      `)}
+`;
+function Label$1(props) {
+  const {
+    contrast,
+    size,
+    labelTextStyle,
+    labelTextColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Base$1, __spreadProps(__spreadValues({}, props), {
+    contrast,
+    size,
+    textStyle: labelTextStyle,
+    textColor: useColor(labelTextColor)
+  }));
+}
+var SingleLineTextTableField = forwardRef(function SingleLineTextTableField2(_q, ref) {
+  var _r = _q, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _r, restOfProps = __objRest(_r, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "text",
+      error: error != null
+    }))]
+  });
+});
+const Base = styled.textarea`
+  resize: vertical;
+  ${cssField()}
+`;
+var TextArea = forwardRef(function TextArea2(_s, ref) {
+  var _t = _s, {
+    error = false,
+    form
+  } = _t, restOfProps = __objRest(_t, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    rows: 4,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+var LongTextTableField = forwardRef(function LongTextTableField2(_u, ref) {
+  var _v = _u, {
+    id,
+    label = "",
+    error,
+    hideLabel = false
+  } = _v, restOfProps = __objRest(_v, [
+    "id",
+    "label",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      error: error != null
+    }))]
+  });
+});
+function getCheckmarkColor$1({
+  swatch: {
+    hue: h,
+    saturation: s,
+    lightness: l
+  },
+  alpha: a
+}) {
+  return ColorHelper({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$6 = styled.div`
+  position: relative;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeCheckbox = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-radius: 4px;
+  pointer-events: none;
+  border-width: 1px;
+  ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenCheckbox = styled.input`
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+
+    & ~ ${FakeCheckbox} {
+      opacity: 0.5;
+    }
+  }
+
+  &:checked ~ ${FakeCheckbox} {
+    ${(props) => cssMediaRules([props.brandColor], ([{
+  swatch = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha = 1
+} = {}]) => css`
+          background-color: ${colorToString({
+  swatch,
+  alpha
+})};
+        `)}
+    border-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: content-box;
+      width: 25%;
+      height: 50%;
+      ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+            border-width: ${getSizeHeight(size) * 0.1}px;
+            border-left: 0;
+            border-top: 0;
+          `)}
+      border-style: solid;
+      ${(props) => cssMediaRules([props.brandColor], ([{
+  swatch = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha = 1
+} = {}]) => css`
+            border-color: ${getCheckmarkColor$1({
+  swatch,
+  alpha
+})};
+          `)}
+      transform: rotate(45deg) translate3d(91%, -23%, 0);
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+            border-color: ${colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var Checkbox = forwardRef(function Checkbox2(_w, ref) {
+  var _x = _w, {
+    error,
+    className,
+    style,
+    form
+  } = _x, restOfProps = __objRest(_x, [
+    "error",
+    "className",
+    "style",
+    "form"
+  ]);
+  const {
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Container$6, {
+    size,
+    children: [/* @__PURE__ */ jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
+      type: "checkbox",
+      ref,
+      error,
+      size,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsx(FakeCheckbox, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel$2 = styled(Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+      `)}
+`;
+const CheckboxContainer$1 = styled.span`
+  margin-right: 8px;
+`;
+var CheckboxTableField = forwardRef(function CheckboxTableField2(_y, ref) {
+  var _z = _y, {
+    form,
+    id,
+    name,
+    label = "",
+    value = false,
+    error
+  } = _z, restOfProps = __objRest(_z, [
+    "form",
+    "id",
+    "name",
+    "label",
+    "value",
+    "error"
+  ]);
+  const {
+    size
+  } = useFormContext();
+  function handleChange(event) {
+    form.setFieldValue(name, event.currentTarget.checked);
+  }
+  return /* @__PURE__ */ jsxs(StyledLabel$2, {
+    htmlFor: id,
+    size,
+    children: [/* @__PURE__ */ jsx(CheckboxContainer$1, {
+      children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        checked: value,
+        onChange: handleChange,
+        ref,
+        id,
+        error: error != null
+      }))
+    }), label]
+  });
+});
+const MainLabel = styled(Label$1)`
+  margin: 0 0 4px 0;
+`;
+const StyledLabel$1 = styled(Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const CheckboxContainer = styled.span`
+  margin-right: 8px;
+`;
+var MultipleSelectTableField = forwardRef(function MultipleSelectTableField2(_A, ref) {
+  var _B = _A, {
+    tableColumn,
+    label = "",
+    required,
+    value = [],
+    onChange,
+    hideLabel = false
+  } = _B, restOfProps = __objRest(_B, [
+    "tableColumn",
+    "label",
+    "required",
+    "value",
+    "onChange",
+    "hideLabel"
+  ]);
+  const handle = useRef({
+    validity: {
+      valueMissing: required === true && value.length === 0,
+      typeMismatch: false
+    }
+  });
+  useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked && value.filter((v) => v !== event.currentTarget.value).length === 0;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsx(MainLabel, {
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel$1, {
+      htmlFor: option.id,
+      children: [/* @__PURE__ */ jsx(CheckboxContainer, {
+        children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+          "aria-label": label,
+          onChange: handleChange,
+          checked: value.includes(option.name),
+          id: option.id,
+          value: option.name
+        }))
+      }), option.name]
+    }, option.id))]
+  });
+});
+function getCheckmarkColor({
+  swatch: {
+    hue: h,
+    saturation: s,
+    lightness: l
+  } = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: a
+}) {
+  return ColorHelper({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$5 = styled.div`
+  position: relative;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeRadioButton = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-radius: 50%;
+  pointer-events: none;
+  border-width: 1px;
+  ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenRadioButton = styled.input.attrs({
+  type: "radio"
+})`
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+
+    & ~ ${FakeRadioButton} {
+      opacity: 0.5;
+    }
+  }
+
+  &:checked ~ ${FakeRadioButton} {
+    ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+          background-color: ${colorToString(brandColor)};
+        `)}
+    border-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: content-box;
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+            background-color: ${getCheckmarkColor(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+            border-color: ${colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var RadioButton = forwardRef(function RadioButton2(_C, ref) {
+  var _D = _C, {
+    error,
+    className,
+    style,
+    form
+  } = _D, restOfProps = __objRest(_D, [
+    "error",
+    "className",
+    "style",
+    "form"
+  ]);
+  const {
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Container$5, {
+    size,
+    children: [/* @__PURE__ */ jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+      ref,
+      error,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsx(FakeRadioButton, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel = styled(Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const RadioButtonContainer = styled.span`
+  margin-right: 8px;
+`;
+var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGroup2(_E, ref) {
+  var _F = _E, {
+    tableColumn,
+    label = "",
+    value = "",
+    required = false,
+    hideLabel = false,
+    onChange
+  } = _F, restOfProps = __objRest(_F, [
+    "tableColumn",
+    "label",
+    "value",
+    "required",
+    "hideLabel",
+    "onChange"
+  ]);
+  const handle = useRef({
+    validity: {
+      valueMissing: required === true && value === "",
+      typeMismatch: false
+    }
+  });
+  useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      as: "p",
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel, {
+      htmlFor: option.id,
+      "aria-label": label,
+      children: [/* @__PURE__ */ jsx(RadioButtonContainer, {
+        children: /* @__PURE__ */ jsx(RadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+          onChange: handleChange,
+          checked: value === option.name,
+          id: option.id,
+          value: option.name
+        }))
+      }), option.name]
+    }, option.id))]
+  });
+});
+const Container$4 = styled.div`
+  ${cssField()}
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  border-color: #f19eb9;
+
+  &:focus,
+  &:focus-within {
+    border-color: #e54e7f;
+  }
+
+  ${(props) => cssMediaRules([props.size, props.contrast], ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT]) => css`
+        min-height: ${getSizeHeight$2(size)}px;
+        max-height: ${getSizeHeight$2(size)}px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          right: ${getSizeHorizontalPadding(size)}px;
+          top: 50%;
+          transform: translate3d(0, -25%, 0);
+          border: solid 0.35em transparent;
+          border-top-color: ${getContrastColor$1(contrast)};
+        }
+      `)}
+`;
+const Select = styled.select`
+  appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+`;
+var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_G, ref) {
+  var _H = _G, {
+    id,
+    tableColumn,
+    value = "",
+    label = "",
+    error = false,
+    hideLabel = false,
+    form
+  } = _H, restOfProps = __objRest(_H, [
+    "id",
+    "tableColumn",
+    "value",
+    "label",
+    "error",
+    "hideLabel",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxs(Container$4, {
+      error,
+      shape,
+      size,
+      contrast,
+      brandColor,
+      children: [/* @__PURE__ */ jsx("span", {
+        children: value === "" ? "-" : value
+      }), /* @__PURE__ */ jsxs(Select, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        ref,
+        id,
+        value,
+        children: [/* @__PURE__ */ jsx("option", {
+          value: "",
+          children: "-"
+        }), tableColumn.options.map((option) => /* @__PURE__ */ jsx("option", {
+          value: option.name,
+          children: option.name
+        }, option.id))]
+      }))]
+    })]
+  });
+});
+var SingleSelectTableField = forwardRef(function SingleSelectTableField2(_I, ref) {
+  var _J = _I, {
+    type
+  } = _J, restOfProps = __objRest(_J, [
+    "type"
+  ]);
+  return type === "select" ? /* @__PURE__ */ jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  })) : /* @__PURE__ */ jsx(TableColumnRadioButtonGroup, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  }));
+});
+var PhoneNumberTableField = forwardRef(function PhoneNumberTableField2(_K, ref) {
+  var _L = _K, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _L, restOfProps = __objRest(_L, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "tel",
+      error: error != null
+    }))]
+  });
+});
+var EmailTableField = forwardRef(function EmailTableField2(_M, ref) {
+  var _N = _M, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _N, restOfProps = __objRest(_N, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "email",
+      error: error != null
+    }))]
+  });
+});
+var URLTableField = forwardRef(function URLTableField2(_O, ref) {
+  var _P = _O, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _P, restOfProps = __objRest(_P, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "url",
+      error: error != null
+    }))]
+  });
+});
+var NumberTableField = forwardRef(function NumberTableField2(_Q, ref) {
+  var _R = _Q, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _R, restOfProps = __objRest(_R, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "number",
+      error: error != null
+    }))]
+  });
+});
+const Label = styled.div`
+  display: block;
+  max-width: 120px;
+  min-width: 60px;
+  border-radius: 2px;
+  background-color: #5f49f4;
+  opacity: 0.4;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        margin: calc(0.25 * ${getSizeHeight(size)}px + 2px) 0;
+        min-height: ${0.5 * getSizeHeight(size)}px;
+        max-height: ${0.5 * getSizeHeight(size)}px;
+      `)}
+`;
+const Input2 = styled.div`
+  display: block;
+  width: 100%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #5f49f4;
+  opacity: 0.4;
+  ${(props) => cssMediaRules([props.shape, props.size], ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+        border-radius: ${getShapeBorderRadius(shape)}px;
+      `)}
+`;
+function PlaceholderTableField() {
+  const {
+    size,
+    shape
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Label, {
+      size
+    }), /* @__PURE__ */ jsx(Input2, {
+      shape,
+      size
+    })]
+  });
+}
+function getTypeMismatchErrorMessage(tableColumn, label) {
+  switch ((tableColumn || {}).__typename) {
+    case "PhoneNumberTableColumn":
+      return `${label} field must be a valid phone number.`;
+    case "EmailTableColumn":
+      return `${label} field must be a valid email.`;
+    case "URLTableColumn":
+      return `${label} field must be a valid URL.`;
+    case "NumberTableColumn":
+      return `${label} field must be a valid number.`;
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "CheckboxTableColumn":
+    default:
+      return `${label} field is invalid.`;
+  }
+}
+function getTableColumnField(tableColumn) {
+  switch ((tableColumn || {}).__typename) {
+    case "SingleLineTextTableColumn":
+      return SingleLineTextTableField;
+    case "LongTextTableColumn":
+      return LongTextTableField;
+    case "CheckboxTableColumn":
+      return CheckboxTableField;
+    case "MultipleSelectTableColumn":
+      return MultipleSelectTableField;
+    case "SingleSelectTableColumn":
+      return SingleSelectTableField;
+    case "PhoneNumberTableColumn":
+      return PhoneNumberTableField;
+    case "EmailTableColumn":
+      return EmailTableField;
+    case "URLTableColumn":
+      return URLTableField;
+    case "NumberTableColumn":
+      return NumberTableField;
+    default:
+      return SingleLineTextTableField;
+  }
+}
+function Field({
+  tableColumn,
+  tableFormField: {
+    id,
+    label = "",
+    placeholder: placeholder2,
+    required = false,
+    hidden = false,
+    type = "radio",
+    hideLabel = false
+  }
+}) {
+  const TableColumnField = getTableColumnField(tableColumn);
+  const input = useRef(null);
+  if (!tableColumn)
+    return /* @__PURE__ */ jsx(PlaceholderTableField, {});
+  function validate() {
+    let errorMessage;
+    if (input.current) {
+      const {
+        validity = {}
+      } = input.current;
+      if (validity.valueMissing)
+        errorMessage = `${label} is required.`;
+      if (validity.typeMismatch)
+        errorMessage = getTypeMismatchErrorMessage(tableColumn, label);
+    }
+    return errorMessage;
+  }
+  return /* @__PURE__ */ jsx(Field$1, {
+    name: tableColumn.name,
+    validate,
+    children: ({
+      field,
+      form
+    }) => hidden ? /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, field), {
+      ref: input,
+      type: "hidden"
+    })) : /* @__PURE__ */ jsx(TableColumnField, __spreadProps(__spreadValues({}, field), {
+      type,
+      form,
+      tableColumn,
+      ref: input,
+      id,
+      error: getIn(form.touched, field.name) && getIn(form.errors, field.name),
+      label,
+      placeholder: placeholder2,
+      required,
+      hideLabel
+    }))
+  });
+}
+var _g;
+function _extends$s() {
+  _extends$s = 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$s.apply(this, arguments);
+}
+var SvgSpinner20 = function SvgSpinner202(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends$s({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20
+  }, props), _g || (_g = /* @__PURE__ */ React.createElement("g", {
+    fill: "none",
+    strokeWidth: 2,
+    transform: "translate(1 1)"
+  }, /* @__PURE__ */ React.createElement("circle", {
+    stroke: "currentColor",
+    cx: 9,
+    cy: 9,
+    r: 9,
+    strokeOpacity: 0.4
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M9 18A9 9 0 0 0 9 0"
+  }))));
+};
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Icon = styled(SvgSpinner20)`
+  display: inline-flex;
+  animation: ${spin} 1s linear infinite;
+  stroke: currentColor;
+`;
+function Spinner() {
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+function useTableFormFieldRefs(propController, { fieldsCount }) {
+  const [container, setContainer] = useState(null);
+  const [items, setItems] = useState(Array(fieldsCount + 1).fill(null));
+  const isInBuilder = useIsInBuilder();
+  useEffect(() => {
+    if (!isInBuilder)
+      return;
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+    };
+    function handleAnimationFrameRequest() {
+      if (propController == null)
+        return;
+      if (container != null)
+        propController.tableFormLayoutChange({ layout: getBox(container) });
+      items.map((item, index) => {
+        if (item == null)
+          return;
+        propController.tableFormFieldLayoutChange({ index, layout: getBox(item) });
+      });
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  }, [propController, container, items, isInBuilder]);
+  const itemRefs = useMemo(() => Array.from({ length: fieldsCount + 1 }).map((_, index) => (item) => {
+    setItems((is) => [...is.slice(0, index), item, ...is.slice(index + 1)]);
+  }), [fieldsCount, setItems]);
+  return { container: setContainer, items: itemRefs };
+}
+const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
+function getSizeFontSize(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 12;
+    case Sizes.MEDIUM:
+      return 14;
+    case Sizes.LARGE:
+      return 18;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const Alignments = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+const GridForm = styled.form`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        font-size: ${getSizeFontSize(size)}px;
+      `)}
+  ${cssWidth()}
+  ${cssMargin()}
+`;
+const GridItem$1 = styled.div`
+  align-self: flex-end;
+  flex-direction: column;
+  ${cssGridItem()}
+`;
+function getAlignmentMargin(alignment) {
+  switch (alignment) {
+    case Alignments.LEFT:
+      return "0 auto 0 0";
+    case Alignments.RIGHT:
+      return "0 0 0 auto";
+    default:
+      return "0 auto";
+  }
+}
+const StyledButton = styled((props) => /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, props), {
+  as: "button"
+})))`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${(props) => cssMediaRules([props.size, props.alignment], ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+        margin: ${getAlignmentMargin(alignment)};
+        padding-top: 0;
+        padding-bottom: 0;
+      `)}
+`;
+const ErrorContainer = styled.div`
+  padding: 8px 16px;
+  background-color: #f19eb9;
+  border-radius: 4px;
+  margin-top: 16px;
+`;
+const IconContainer = styled.div`
+  fill: currentColor;
+`;
+const ErrorMessage = styled.p`
+  font-size: 12px;
+  margin: 8px 0;
+  color: rgba(127, 0, 0, 0.95);
+`;
+function getTableColumnDefaultValue(tableColumn) {
+  switch (tableColumn.__typename) {
+    case "CheckboxTableColumn":
+      return false;
+    case "MultipleSelectTableColumn":
+      return [];
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "SingleSelectTableColumn":
+    case "PhoneNumberTableColumn":
+    case "EmailTableColumn":
+    case "URLTableColumn":
+    case "NumberTableColumn":
+    default:
+      return "";
+  }
+}
+const CREATE_TABLE_RECORD = gql`
+  mutation CreateTableRecord($input: CreateTableRecordInput!) {
+    createTableRecord(input: $input) {
+      tableRecord {
+        id
+      }
+    }
+  }
+`;
+const Form = forwardRef(function Form2({
+  id,
+  tableId,
+  fields: fieldsProp,
+  submitLabel = "Submit",
+  submitLink,
+  shape,
+  size,
+  contrast,
+  brandColor,
+  gap,
+  width,
+  margin,
+  submitTextStyle,
+  submitVariant,
+  submitTextColor,
+  submitWidth,
+  submitAlignment,
+  labelTextStyle,
+  labelTextColor
+}, ref) {
+  const fields = useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.fields) != null ? _a : [];
+  }, [fieldsProp]);
+  const grid = useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.grid) != null ? _a : [];
+  }, [fieldsProp]);
+  const {
+    data: {
+      table
+    } = {}
+  } = useTable(tableId);
+  const [createTableRecord] = useMutation(CREATE_TABLE_RECORD);
+  const [refEl, setRefEl] = useState(null);
+  const [propControllers, setPropControllers] = useState(null);
+  const [initialValues, setInitialValues] = useState(() => fields.reduce((acc, formField) => {
+    const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+    const defaultValue = formField ? formField.defaultValue : null;
+    if (tableColumn) {
+      acc[tableColumn.name] = defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue;
+    }
+    return acc;
+  }, {}));
+  const controller = propControllers == null ? void 0 : propControllers.fields;
+  const {
+    container,
+    items
+  } = useTableFormFieldRefs(controller, {
+    fieldsCount: fields.length
+  });
+  const [isDone, setIsDone] = useState(false);
+  const linkRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    getBoxModel() {
+      return refEl instanceof Element ? getBox(refEl) : null;
+    },
+    setPropControllers
+  }), [refEl, setPropControllers]);
+  useEffect(() => {
+    container(refEl);
+  }, [container, refEl]);
+  useEffect(() => {
+    if (!isDone)
+      return;
+    let timeoutId = setTimeout(() => setIsDone(false), 2500);
+    return () => clearTimeout(timeoutId);
+  }, [isDone]);
+  function getTableColumn({
+    tableColumnId
+  }) {
+    return table && table.columns.find((field) => tableColumnId === field.id);
+  }
+  async function handleSubmit(values, {
+    setSubmitting,
+    resetForm,
+    setStatus
+  }) {
+    if (table) {
+      const columns = [];
+      fields.forEach((field) => {
+        const tableColumn = getTableColumn(field);
+        if (tableColumn) {
+          const data = values[tableColumn.name];
+          if (data) {
+            columns.push({
+              columnId: field.tableColumnId,
+              data
+            });
+            if (field.autofill) {
+              localStorage.setItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`, JSON.stringify(data));
+            }
+          }
+        }
+      });
+      try {
+        await createTableRecord({
+          variables: {
+            input: {
+              data: {
+                tableId: table.id,
+                columns
+              }
+            }
+          }
+        });
+        setIsDone(true);
+        setInitialValues((prev) => fields.reduce((acc, field) => {
+          const tableColumn = getTableColumn(field);
+          if (tableColumn) {
+            const data = values[tableColumn.name];
+            if (data && field.autofill)
+              return __spreadProps(__spreadValues({}, acc), {
+                [tableColumn.name]: data
+              });
+          }
+          return acc;
+        }, __spreadValues({}, prev)));
+        resetForm();
+        if (linkRef.current != null)
+          linkRef.current.click();
+      } catch (error) {
+        setStatus({
+          error: "An unexpected error has occurred, please try again later"
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    }
+  }
+  useEffect(() => {
+    setInitialValues((prev) => fields.reduce((acc, formField) => {
+      const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+      if (tableColumn && formField.autofill) {
+        const storedValue = localStorage.getItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`);
+        if (storedValue) {
+          try {
+            acc[tableColumn.name] = JSON.parse(storedValue);
+          } catch (e) {
+          }
+        }
+      }
+      return acc;
+    }, __spreadValues({}, prev)));
+  }, [fields, table]);
+  const brandColorData = useColor(brandColor);
+  return /* @__PURE__ */ jsx(Provider, {
+    value: {
+      shape,
+      size,
+      contrast,
+      brandColor: brandColorData,
+      labelTextStyle,
+      labelTextColor
+    },
+    children: tableId == null ? /* @__PURE__ */ jsx(Placeholder$1, {
+      ref: setRefEl,
+      width,
+      margin
+    }) : /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx(Formik, {
+        onSubmit: handleSubmit,
+        initialValues,
+        initialStatus: {
+          error: null
+        },
+        enableReinitialize: true,
+        children: (formik) => {
+          const error = formik.status && formik.status.error;
+          const errors = fields.map((field) => {
+            const tableColumn = getTableColumn(field);
+            return tableColumn && getIn(formik.touched, tableColumn.name) && getIn(formik.errors, tableColumn.name);
+          }).filter((message) => typeof message === "string");
+          return /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsxs(GridForm, {
+              ref: setRefEl,
+              id,
+              width,
+              margin,
+              size,
+              onSubmit: formik.handleSubmit,
+              onReset: formik.handleReset,
+              noValidate: true,
+              children: [fields.map((field, index) => {
+                const tableColumn = getTableColumn(field);
+                return /* @__PURE__ */ jsx(GridItem$1, {
+                  ref: items[index],
+                  grid,
+                  index,
+                  rowGap: gap,
+                  columnGap: gap,
+                  children: /* @__PURE__ */ jsx(Field, {
+                    tableColumn,
+                    tableFormField: field
+                  })
+                }, field.id);
+              }), /* @__PURE__ */ jsxs(GridItem$1, {
+                ref: items[fields.length],
+                grid,
+                index: fields.length,
+                rowGap: gap,
+                columnGap: gap,
+                children: [/* @__PURE__ */ jsx(StyledButton, {
+                  type: "submit",
+                  disabled: formik.isSubmitting || isDone,
+                  shape,
+                  size,
+                  color: brandColor,
+                  variant: submitVariant,
+                  textColor: submitTextColor,
+                  width: submitWidth,
+                  alignment: submitAlignment,
+                  textStyle: submitTextStyle,
+                  children: formik.isSubmitting ? /* @__PURE__ */ jsx(Spinner, {}) : isDone ? /* @__PURE__ */ jsx(IconContainer, {
+                    children: /* @__PURE__ */ jsx(SvgCheck12, {})
+                  }) : submitLabel
+                }), (errors.length > 0 || error) && /* @__PURE__ */ jsxs(ErrorContainer, {
+                  children: [errors.map((message) => /* @__PURE__ */ jsx(ErrorMessage, {
+                    children: message
+                  }, message)), error != null && /* @__PURE__ */ jsx(ErrorMessage, {
+                    children: error
+                  })]
+                })]
+              })]
+            }), submitLink != null && /* @__PURE__ */ jsx(Link, {
+              ref: linkRef,
+              hidden: true,
+              link: submitLink
+            })]
+          });
+        }
+      })
+    })
+  });
+});
+function registerComponent$5(runtime) {
+  return runtime.registerComponent(Form, {
+    type: "./components/Form/index.js",
+    label: "Form",
+    icon: "Form40",
+    props: {
+      id: ElementID(),
+      tableId: Table(),
+      fields: TableFormFields(),
+      submitLink: Link$1({
+        label: "Redirect to",
+        options: [{
+          value: "OPEN_PAGE",
+          label: "Open page"
+        }, {
+          value: "OPEN_URL",
+          label: "Open URL"
+        }]
+      }),
+      gap: GapY({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 10,
+            unit: "px"
+          }
+        }],
+        label: "Gap",
+        defaultValue: {
+          value: 0,
+          unit: "px"
+        }
+      }),
+      shape: ResponsiveIconRadioGroup({
+        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
+      }),
+      size: ResponsiveIconRadioGroup({
+        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
+      }),
+      contrast: ResponsiveIconRadioGroup({
+        label: "Color",
+        options: [{
+          label: "Light mode",
+          value: Contrasts.LIGHT,
+          icon: "Sun16"
+        }, {
+          label: "Dark mode",
+          value: Contrasts.DARK,
+          icon: "Moon16"
+        }],
+        defaultValue: Contrasts.LIGHT
+      }),
+      labelTextStyle: TextStyle({
+        label: "Label text style"
+      }),
+      labelTextColor: ResponsiveColor({
+        label: "Label text color"
+      }),
+      submitTextStyle: TextStyle({
+        label: "Button text style"
+      }),
+      brandColor: ResponsiveColor({
+        label: "Button color",
+        placeholder: "black"
+      }),
+      submitTextColor: ResponsiveColor({
+        label: "Button text color",
+        placeholder: "white"
+      }),
+      submitLabel: TextInput({
+        label: "Button label",
+        placeholder: "Submit"
+      }),
+      submitVariant: ResponsiveSelect({
+        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"
+      }),
+      submitWidth: ResponsiveLength({
+        label: "Button width"
+      }),
+      submitAlignment: ResponsiveIconRadioGroup({
+        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
+      }),
+      width: Width({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 550,
+            unit: "px"
+          }
+        }],
+        defaultValue: {
+          value: 100,
+          unit: "%"
+        }
+      }),
+      margin: Margin()
+    }
+  });
+}
+var _path$r;
+function _extends$r() {
+  _extends$r = 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$r.apply(this, arguments);
+}
+var SvgMobileMenu28 = function SvgMobileMenu282(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends$r({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 28
+  }, props), _path$r || (_path$r = /* @__PURE__ */ React.createElement("path", {
+    d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
+  })));
+};
+const GutterContainer = styled.div`
+  ${(p) => cssMediaRules([p.gutter], ([gutter = {
+  value: 0,
+  unit: "px"
+}]) => css`
+        padding-left: ${p.first ? "0px" : `${gutter.value / 2}${gutter.unit}`};
+        padding-right: ${p.last ? "0px" : `${gutter.value / 2}${gutter.unit}`};
+      `)}
+`;
+const PlaceholderLink$1 = styled.div`
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.button === true ? 32 : 8}px;
+  background-color: #a1a8c2;
+  border-radius: ${(props) => props.button === true ? 6 : 2}px;
+  opacity: 0.4;
+`;
+const links$1 = [{
+  width: 50
+}, {
+  width: 70
+}, {
+  width: 60
+}, {
+  width: 80,
+  button: true
+}];
+function LinksPlaceholder({
+  gutter
+}) {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: links$1.map((link, i) => /* @__PURE__ */ jsx(GutterContainer, {
+      gutter,
+      first: i === 0,
+      last: i === links$1.length - 1,
+      children: /* @__PURE__ */ jsx(PlaceholderLink$1, __spreadValues({}, link))
+    }, i))
+  });
+}
+var _path$q;
+function _extends$q() {
+  _extends$q = 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$q.apply(this, arguments);
@@ -3800,22 +5524,22 @@ const StyledDropDownItem = styled(Link)`
     background-color: rgba(0, 0, 0, 0.04);
   }
 `;
-function DropDownItem$1(_o) {
-  var _p = _o, {
+function DropDownItem$1(_S) {
+  var _T = _S, {
     color
-  } = _p, restOfProps = __objRest(_p, [
+  } = _T, restOfProps = __objRest(_T, [
     "color"
   ]);
   return /* @__PURE__ */ jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
     color: useColor(color)
   }));
 }
-function DropDownButton(_q) {
-  var _r = _q, {
+function DropDownButton(_U) {
+  var _V = _U, {
     label,
     caret = "caret",
     links: links2 = []
-  } = _r, restOfProps = __objRest(_r, [
+  } = _V, restOfProps = __objRest(_V, [
     "label",
     "caret",
     "links"
@@ -3831,7 +5555,7 @@ function DropDownButton(_q) {
   }, [setPosition]);
   return /* @__PURE__ */ jsxs(DropDownContainer, {
     ref: container,
-    children: [/* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, restOfProps), {
+    children: [/* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
       children: /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
@@ -3892,7 +5616,7 @@ const DropDownMenu = styled.div`
   flex-direction: column;
   padding: 8px;
 `;
-const ButtonLink$1 = styled(Button)`
+const ButtonLink$1 = styled(Button$1)`
   margin: 8px 0;
 `;
 const StyledLink$2 = styled(Link)`
@@ -3905,24 +5629,24 @@ const StyledLink$2 = styled(Link)`
         color: ${color == null ? "black" : colorToString(color)};
       `)}
 `;
-function DropDownItem(_s) {
-  var _t = _s, {
+function DropDownItem(_W) {
+  var _X = _W, {
     color
-  } = _t, restOfProps = __objRest(_t, [
+  } = _X, restOfProps = __objRest(_X, [
     "color"
   ]);
   return /* @__PURE__ */ jsx(StyledLink$2, __spreadProps(__spreadValues({}, restOfProps), {
     color: useColor(color)
   }));
 }
-function MobileDropDownButton(_u) {
-  var _v = _u, {
+function MobileDropDownButton(_Y) {
+  var _Z = _Y, {
     label,
     caret,
     links: links2 = [],
     onClose = () => {
     }
-  } = _v, restOfProps = __objRest(_v, [
+  } = _Z, restOfProps = __objRest(_Z, [
     "label",
     "caret",
     "links",
@@ -3964,10 +5688,10 @@ function MobileDropDownButton(_u) {
     })]
   });
 }
-const ButtonLink = styled(Button)`
+const ButtonLink = styled(Button$1)`
   margin: 8px 0;
 `;
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -4021,7 +5745,7 @@ function MobileMenu({
   onClose = () => {
   }
 }) {
-  return /* @__PURE__ */ jsxs(Container$2, {
+  return /* @__PURE__ */ jsxs(Container$3, {
     animation,
     backgroundColor: useColor(backgroundColor),
     open,
@@ -4047,7 +5771,7 @@ function MobileMenu({
     })]
   });
 }
-const Container$1 = styled.nav`
+const Container$2 = styled.nav`
   display: flex;
   align-items: center;
   ${cssWidth()}
@@ -4104,7 +5828,7 @@ const Navigation = forwardRef(function Navigation2({
   margin
 }, ref) {
   const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Container$1, {
+  return /* @__PURE__ */ jsxs(Container$2, {
     ref,
     id,
     margin,
@@ -4129,7 +5853,7 @@ const Navigation = forwardRef(function Navigation2({
           gutter,
           first: i === 0,
           last: i === links2.length - 1,
-          children: [link.type === "button" && /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, link.payload), {
+          children: [link.type === "button" && /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, link.payload), {
             children: link.payload.label
           })), link.type === "dropdown" && /* @__PURE__ */ jsx(DropDownButton, __spreadValues({}, link.payload))]
         }, link.id)) : /* @__PURE__ */ jsx(LinksPlaceholder, {
@@ -4152,7 +5876,7 @@ const Navigation = forwardRef(function Navigation2({
     })]
   });
 });
-function registerComponent$3(runtime) {
+function registerComponent$4(runtime) {
   return runtime.registerComponent(Navigation, {
     type: "./components/Navigation/index.js",
     label: "Navigation",
@@ -4163,7 +5887,7 @@ function registerComponent$3(runtime) {
       linkTextStyle: TextStyle({
         label: "Link text style"
       }),
-      showLogo: Checkbox({
+      showLogo: Checkbox$1({
         preset: true,
         label: "Show logo"
       }),
@@ -4256,7 +5980,7 @@ const PlaceholderBase = styled.div`
   height: 80px;
   padding: 8px;
 `;
-var Placeholder2 = forwardRef(function Placeholder3(props, ref) {
+var Placeholder3 = forwardRef(function Placeholder4(props, ref) {
   return /* @__PURE__ */ jsx(PlaceholderBase, __spreadProps(__spreadValues({}, props), {
     ref,
     children: /* @__PURE__ */ jsx("svg", {
@@ -4324,12 +6048,12 @@ const Root = forwardRef(function Page2({
           children: /* @__PURE__ */ jsx(Element$1, {
             element: child
           })
-        }, child.key)) : /* @__PURE__ */ jsx(Placeholder2, {})
+        }, child.key)) : /* @__PURE__ */ jsx(Placeholder3, {})
       })
     })]
   });
 });
-function registerComponent$2(runtime) {
+function registerComponent$3(runtime) {
   return runtime.registerComponent(Root, {
     type: "./components/Root/index.js",
     label: "Page",
@@ -5006,7 +6730,7 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container = styled.div`
+const Container$1 = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -5090,7 +6814,7 @@ const SocialLinks = forwardRef(function SocialLinks2({
 }, ref) {
   const fillData = useColor(fill);
   const backgroundColorData = useColor(backgroundColor);
-  return /* @__PURE__ */ jsx(Container, {
+  return /* @__PURE__ */ jsx(Container$1, {
     ref,
     id,
     alignment,
@@ -5126,7 +6850,7 @@ const SocialLinks = forwardRef(function SocialLinks2({
     })
   });
 });
-function registerComponent$1(runtime) {
+function registerComponent$2(runtime) {
   return runtime.registerComponent(SocialLinks, {
     type: "./components/SocialLinks/index.js",
     label: "Social Links",
@@ -5374,10 +7098,10 @@ const Span = styled.span`
             `}
       `, shallowMergeFallbacks)}
 `;
-function Mark(_w) {
-  var _x = _w, {
+function Mark(__) {
+  var _$ = __, {
     value
-  } = _x, restOfProps = __objRest(_x, [
+  } = _$, restOfProps = __objRest(_$, [
     "value"
   ]);
   const typographyStyle = useTypographyMark(value);
@@ -5415,10 +7139,10 @@ const StyledBlock = styled.div`
           border-left: 5px solid rgba(0, 0, 0, 0.1);
         ` : ""}
 `;
-var Block = forwardRef(function Block2(_y, ref) {
-  var _z = _y, {
+var Block = forwardRef(function Block2(_aa, ref) {
+  var _ba = _aa, {
     textAlign
-  } = _z, restOfProps = __objRest(_z, [
+  } = _ba, restOfProps = __objRest(_ba, [
     "textAlign"
   ]);
   return /* @__PURE__ */ jsx(StyledBlock, __spreadProps(__spreadValues({}, restOfProps), {
@@ -5543,10 +7267,10 @@ function Inlines() {
     }
   };
 }
-const RichTextEditor = styled(forwardRef(function RichTextEditor2(_A, ref) {
-  var _B = _A, {
+const RichTextEditor = styled(forwardRef(function RichTextEditor2(_ca, ref) {
+  var _da = _ca, {
     placeholder: placeholder2 = "Write some text..."
-  } = _B, restOfProps = __objRest(_B, [
+  } = _da, restOfProps = __objRest(_da, [
     "placeholder"
   ]);
   const plugins = useMemo(() => [Lists(), LinkPlugin(), Inlines(), DeviceOverridesBlockPlugin(), DeviceOverridesMarksPlugin()], []);
@@ -5663,7 +7387,7 @@ const Text = forwardRef(function Text2({
     onKeyDown: handleKeyDown
   });
 });
-function registerComponent(runtime) {
+function registerComponent$1(runtime) {
   return runtime.registerComponent(Text, {
     type: "./components/Text/index.js",
     label: "Text",
@@ -5741,18 +7465,103 @@ function registerComponent(runtime) {
     }
   });
 }
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  ${cssWidth("560px")}
+  ${cssMargin()}
+  ${cssBorderRadius()}
+`;
+const ASPECT_RATIO = 16 / 9;
+const Video = forwardRef(function Video2({
+  id,
+  video,
+  width,
+  margin,
+  borderRadius
+}, ref) {
+  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url);
+  return /* @__PURE__ */ jsx(Container, {
+    ref,
+    id,
+    width,
+    margin,
+    borderRadius,
+    children: /* @__PURE__ */ jsx("div", {
+      style: {
+        position: "relative",
+        paddingTop: `${100 / ASPECT_RATIO}%`
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: canPlayUrl === true ? /* @__PURE__ */ jsx(ReactPlayer, __spreadProps(__spreadValues({}, video), {
+          width: "100%",
+          height: "100%",
+          config: {
+            vimeo: {
+              playerOptions: {
+                background: video != null && !video.controls
+              }
+            },
+            wistia: {
+              options: {
+                endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
+              }
+            }
+          }
+        })) : /* @__PURE__ */ jsx("img", {
+          width: "100%",
+          src: placeholders.video.src,
+          alt: "Video Placeholder"
+        })
+      })
+    })
+  });
+});
+function registerComponent(runtime) {
+  return runtime.registerComponent(Video, {
+    type: "./components/Video/index.js",
+    label: "Video",
+    icon: "Video40",
+    props: {
+      id: ElementID(),
+      video: Video$1({
+        preset: {
+          controls: true
+        }
+      }),
+      width: Width({
+        defaultValue: {
+          value: 560,
+          unit: "px"
+        }
+      }),
+      margin: Margin(),
+      borderRadius: BorderRadius()
+    }
+  });
+}
 function registerBuiltinComponents(runtime) {
-  const unregisterBoxComponent = registerComponent$a(runtime);
-  const unregisterButtonComponent = registerComponent$9(runtime);
-  const unregisterCarouselComponent = registerComponent$7(runtime);
-  const unregisterCountdownComponent = registerComponent$6(runtime);
-  const unregisterDividerComponent = registerComponent$5(runtime);
-  const unregisterEmbedComponent = registerComponent$4(runtime);
-  const unregisterImageComponent = registerComponent$8(runtime);
-  const unregisterNavigationComponent = registerComponent$3(runtime);
-  const unregisterRootComponent = registerComponent$2(runtime);
-  const unregisterSocialLinksComponent = registerComponent$1(runtime);
-  const unregisterTextComponent = registerComponent(runtime);
+  const unregisterBoxComponent = registerComponent$c(runtime);
+  const unregisterButtonComponent = registerComponent$b(runtime);
+  const unregisterCarouselComponent = registerComponent$9(runtime);
+  const unregisterCountdownComponent = registerComponent$8(runtime);
+  const unregisterDividerComponent = registerComponent$7(runtime);
+  const unregisterEmbedComponent = registerComponent$6(runtime);
+  const unregisterFormComponent = registerComponent$5(runtime);
+  const unregisterImageComponent = registerComponent$a(runtime);
+  const unregisterNavigationComponent = registerComponent$4(runtime);
+  const unregisterRootComponent = registerComponent$3(runtime);
+  const unregisterSocialLinksComponent = registerComponent$2(runtime);
+  const unregisterTextComponent = registerComponent$1(runtime);
+  const unregisterVideoComponent = registerComponent(runtime);
   return () => {
     unregisterBoxComponent();
     unregisterButtonComponent();
@@ -5760,11 +7569,14 @@ function registerBuiltinComponents(runtime) {
     unregisterCountdownComponent();
     unregisterDividerComponent();
     unregisterEmbedComponent();
+    unregisterFormComponent();
     unregisterImageComponent();
     unregisterNavigationComponent();
     unregisterRootComponent();
     unregisterSocialLinksComponent();
     unregisterTextComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
   };
 }
 const contextDefaultValue = configureStore();
@@ -5793,10 +7605,9 @@ function createReactRuntime(store) {
 const ReactRuntime = createReactRuntime(contextDefaultValue);
 const Context = createContext(contextDefaultValue);
 function RuntimeProvider({
+  client,
   children,
-  defaultRootElements,
-  registerComponents,
-  makeswiftApiEndpoint
+  defaultRootElements
 }) {
   const [store, setStore] = useState(() => {
     const store2 = configureStore({
@@ -5805,27 +7616,11 @@ function RuntimeProvider({
     });
     const runtime = createReactRuntime(store2);
     registerBuiltinComponents(runtime);
-    registerComponents == null ? void 0 : registerComponents(runtime);
     return store2;
   });
-  const [client, setClient] = useState(new ApolloClient({
-    uri: makeswiftApiEndpoint,
-    cache: new InMemoryCache()
-  }));
-  useEffect(() => {
-    setClient(({
-      cache
-    }) => new ApolloClient({
-      uri: makeswiftApiEndpoint,
-      cache
-    }));
-  }, [makeswiftApiEndpoint]);
   useEffect(() => {
     return registerBuiltinComponents(createReactRuntime(store));
   }, [store]);
-  useEffect(() => {
-    return registerComponents == null ? void 0 : registerComponents(createReactRuntime(store));
-  }, [store, registerComponents]);
   useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (isInBuilder)
@@ -5834,7 +7629,7 @@ function RuntimeProvider({
       const ReactBuilderPreview = await import("./react-builder-preview.es.js");
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client
+        client: client.apolloClient
       }));
     }
   }, [client]);
@@ -5861,12 +7656,31 @@ function RuntimeProvider({
   }, []);
   return /* @__PURE__ */ jsx(Context.Provider, {
     value: store,
-    children: /* @__PURE__ */ jsx(ApolloProvider, {
+    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);
@@ -5882,8 +7696,8 @@ function useElementId(elementKey) {
   const documentKey = useDocumentKey();
   return useSelector((state) => documentKey == null || elementKey == null ? null : getElementId(state, documentKey, elementKey));
 }
-function useDocumentRootElement(documentKey) {
-  return useSelector((state) => getDocumentRootElement(state, documentKey));
+function useDocument(documentKey) {
+  return useSelector((state) => getDocument(state, documentKey));
 }
 function useIsInBuilder() {
   return useSelector((state) => getIsInBuilder(state));
@@ -5916,24 +7730,64 @@ const ElementData = memo(forwardRef(function ElementData2({
 const ElementReference = memo(forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  return /* @__PURE__ */ jsxs("div", {
-    ref,
-    children: [/* @__PURE__ */ jsx("p", {
-      children: "Not Implemented"
-    }), /* @__PURE__ */ jsx("pre", {
-      children: /* @__PURE__ */ jsx("code", {
-        children: JSON.stringify(elementReference, null, 2)
-      })
-    })]
+  var _a;
+  const {
+    error,
+    data
+  } = useQuery(gql`
+        query ElementReferenceGlobalElement($id: ID!) {
+          globalElement(id: $id) {
+            id
+            data
+          }
+        }
+      `, {
+    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__ */ jsxs("div", {
+      ref,
+      children: [/* @__PURE__ */ jsx("p", {
+        children: "Something went wrong!"
+      }), /* @__PURE__ */ jsx("pre", {
+        children: /* @__PURE__ */ jsx("code", {
+          children: JSON.stringify(error, null, 2)
+        })
+      })]
+    });
+  }
+  if (globalElementData == null) {
+    return /* @__PURE__ */ jsxs("div", {
+      ref,
+      children: [/* @__PURE__ */ jsx("p", {
+        children: "Not Found"
+      }), /* @__PURE__ */ jsx("pre", {
+        children: /* @__PURE__ */ jsx("code", {
+          children: JSON.stringify(elementReference, null, 2)
+        })
+      })]
+    });
+  }
+  return elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, {
+    document: elementReferenceDocument,
+    ref
+  }) : /* @__PURE__ */ jsx(ElementData, {
+    elementData: globalElementData,
+    ref
   });
 }));
-const Element$1 = memo(function Element2({
+const Element$1 = memo(forwardRef(function Element2({
   element
-}) {
+}, ref) {
   const elementKey = element.key;
   const dispatch = useDispatch();
   const documentKey = useDocumentKey();
   const [handle, setHandle] = useState(null);
+  useImperativeHandle(ref, () => handle, [handle]);
   useEffect(() => {
     if (documentKey == null)
       return;
@@ -5951,30 +7805,38 @@ const Element$1 = memo(function Element2({
     ref: setHandle,
     elementData: element
   }, elementKey);
-});
-const Document = memo(function Document2({
-  documentKey
-}) {
-  const documentRootElement = useDocumentRootElement(documentKey);
-  if (documentRootElement == null) {
+}));
+const Document = memo(forwardRef(function Document2({
+  document
+}, ref) {
+  return /* @__PURE__ */ jsx(DocumentContext.Provider, {
+    value: document.key,
+    children: /* @__PURE__ */ jsx(Element$1, {
+      ref,
+      element: document.rootElement
+    })
+  });
+}));
+const DocumentReference = memo(forwardRef(function DocumentReference2({
+  documentReference
+}, ref) {
+  const document = useDocument(documentReference.key);
+  if (document == null) {
     return /* @__PURE__ */ jsxs("div", {
+      ref,
       children: [/* @__PURE__ */ jsx("p", {
         children: "Document Not Found"
       }), /* @__PURE__ */ jsx("pre", {
         children: /* @__PURE__ */ jsx("code", {
-          children: JSON.stringify({
-            documentKey
-          }, null, 2)
+          children: JSON.stringify(documentReference, null, 2)
         })
       })]
     });
   }
-  return /* @__PURE__ */ jsx(DocumentContext.Provider, {
-    value: documentKey,
-    children: /* @__PURE__ */ jsx(Element$1, {
-      element: documentRootElement
-    })
+  return /* @__PURE__ */ jsx(Document, {
+    ref,
+    document
   });
-});
-export { getDocumentRootElement$1 as A, Box as B, Carousel as C, Document as D, Element$1 as E, createDocument as F, reducer$3 as G, reducer$2 as H, ImageComponent as I, reducer$1 as J, getComponentsMeta as K, getComponentPropControllerDescriptors$1 as L, getElementPropControllerDescriptors as M, Navigation as N, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, Button as b, Countdown as c, Divider as d, Embed as e, Root as f, registerComponent$a as g, DEFAULT_BOX_ANIMATE_TYPE as h, DEFAULT_BOX_ANIMATE_DELAY as i, DEFAULT_BOX_ANIMATE_DURATION as j, DEFAULT_ITEM_ANIMATE_TYPE as k, DEFAULT_ITEM_ANIMATE_DELAY as l, DEFAULT_ITEM_ANIMATE_DURATION as m, DEFAULT_ITEM_STAGGER_DURATION as n, cssMediaRules as o, cssWidth as p, cssMargin as q, registerBuiltinComponents as r, cssPadding as s, cssBorder as t, useIsInBuilder as u, cssBorderRadius as v, cssBoxShadow as w, cssGridItem as x, cssTextStyle as y, getInitialState$3 as z };
+}));
+export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
 //# sourceMappingURL=react.es2.js.map