@makeswift/runtime 0.0.0-ef05bba → 0.0.0-f750971

package/dist/react.es2.js

@@ -32,236 +32,29 @@ var __objRest = (source, exclude) => {
 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 { g as getIsInBuilder, a as configureStore, b as getElementId, d as getReactComponent, e 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 { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
 import NextImage from "next/image";
 import ReactPlayer from "react-player";
+import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText } from "./descriptors.es.js";
 import 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 +64,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 +178,51 @@ 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 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
   }, options));
 }
+function useMutation(mutation, options) {
+  const client = useContext(Context$2);
+  return useMutation$1(mutation, __spreadValues({
+    client
+  }, options));
+}
 function ApolloProvider({
   client,
   children
 }) {
-  return /* @__PURE__ */ jsx(Context$1.Provider, {
+  return /* @__PURE__ */ jsx(Context$2.Provider, {
     value: client,
     children
   });
@@ -612,8 +435,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 +510,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 +986,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 +1073,7 @@ function Parallax(_g) {
     children: children(getProps)
   }));
 }
-const Container$8 = styled.div`
+const Container$c = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1298,7 +1127,7 @@ function BackgroundVideo({
   }, [aspectRatio, zoom]);
   if (!ReactPlayer.canPlay(url))
     return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsxs(Container$8, {
+  return /* @__PURE__ */ jsxs(Container$c, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
       url,
@@ -1377,10 +1206,10 @@ const AbsoluteFill = styled.div`
   right: 0;
   bottom: 0;
 `;
-const Container$7 = styled(AbsoluteFill)`
+const Container$b = styled(AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled(Container$7)`
+const BackgroundsContainer$1 = styled(Container$b)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => css`
         display: ${visibility === true ? "block" : "none"};
@@ -1404,7 +1233,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsx(Container$7, {
+            return /* @__PURE__ */ jsx(Container$b, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1440,7 +1269,7 @@ function Backgrounds({
             }
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$7, __spreadValues({}, getParallaxProps({
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$b, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1458,7 +1287,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsx(Container$7, {
+            return /* @__PURE__ */ jsx(Container$b, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1475,7 +1304,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$b, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1543,7 +1372,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 +1483,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 +1494,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$b(runtime) {
   return runtime.registerComponent(Box, {
     type: "./components/Box/index.js",
     label: "Box",
@@ -1843,7 +1672,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 +1765,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 +1957,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 +1983,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 +1998,8 @@ const Button = forwardRef(function Button2(_m, ref) {
     children: children == null ? "Button Text" : children
   }));
 });
-function registerComponent$9(runtime) {
-  return runtime.registerComponent(Button, {
+function registerComponent$a(runtime) {
+  return runtime.registerComponent(Button$1, {
     type: "./components/Button/index.js",
     label: "Button",
     props: {
@@ -2370,7 +2199,7 @@ const ImageComponent = forwardRef(function Image2({
     })
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2419,7 +2248,7 @@ const RightChevron = () => /* @__PURE__ */ jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$6 = styled.div`
+const Container$a = styled.div`
   position: relative;
   height: 100%;
 `;
@@ -2719,7 +2548,7 @@ const Carousel = forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxs(Container$6, {
+    children: [/* @__PURE__ */ jsxs(Container$a, {
       children: [/* @__PURE__ */ jsx(ClipMask, {
         children: /* @__PURE__ */ jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2795,7 +2624,7 @@ const Carousel = forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$8(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2858,7 +2687,7 @@ function registerComponent$7(runtime) {
           unit: "px"
         }
       }),
-      autoplay: Checkbox({
+      autoplay: Checkbox$1({
         label: "Autoplay"
       }),
       delay: Number$1({
@@ -2868,7 +2697,7 @@ function registerComponent$7(runtime) {
         step: 0.1,
         suffix: "seconds"
       }),
-      showArrows: Checkbox({
+      showArrows: Checkbox$1({
         preset: true,
         label: "Show arrows"
       }),
@@ -2897,7 +2726,7 @@ function registerComponent$7(runtime) {
         label: "Arrow background",
         placeholder: "white"
       }),
-      showDots: Checkbox({
+      showDots: Checkbox$1({
         preset: true,
         label: "Show dots"
       }),
@@ -2915,14 +2744,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$9 = styled.div`
   display: flex;
   ${cssWidth("560px")}
   ${cssMargin()}
@@ -2932,7 +2761,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 18px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 14px;
             }
           `;
@@ -2940,7 +2769,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 32px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 18px;
             }
           `;
@@ -2948,7 +2777,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 24px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 16px;
             }
           `;
@@ -3085,7 +2914,7 @@ const Container$5 = styled.div`
 })}
   }
 
-  ${Label} {
+  ${Label$3} {
     ${(p) => cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
   swatch: {
     hue: 0,
@@ -3162,7 +2991,7 @@ const Countdown = forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxs(Container$5, {
+  return /* @__PURE__ */ jsxs(Container$9, {
     ref,
     id,
     width,
@@ -3181,7 +3010,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 +3018,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 +3026,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 +3034,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$7(runtime) {
   return runtime.registerComponent(Countdown, {
     type: "./components/Countdown/index.js",
     label: "Countdown",
@@ -3347,7 +3176,7 @@ const IE11MinHeightContainer = styled.div`
   ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$4 = styled.div`
+const Container$8 = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3406,7 +3235,7 @@ const Divider = forwardRef(function Divider2({
     id,
     width,
     margin,
-    children: /* @__PURE__ */ jsx(Container$4, {
+    children: /* @__PURE__ */ jsx(Container$8, {
       children: /* @__PURE__ */ jsx(Line, {
         variant,
         thickness,
@@ -3415,7 +3244,7 @@ const Divider = forwardRef(function Divider2({
     })
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3465,7 +3294,7 @@ function registerComponent$5(runtime) {
     }
   });
 }
-const Container$3 = styled.div`
+const Container$7 = styled.div`
   min-height: 15px;
   ${cssWidth()}
   ${cssMargin()}
@@ -3545,7 +3374,7 @@ const Embed = forwardRef(function Embed2({
   }, [container, html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsx(Container$3, {
+  return /* @__PURE__ */ jsx(Container$7, {
     ref: setContainer,
     id,
     margin,
@@ -3555,14 +3384,14 @@ const Embed = forwardRef(function Embed2({
     }
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$5(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 +3400,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,87 +3413,1865 @@ 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$6 = 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$6, {
+    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];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$q.apply(this, arguments);
+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}"`);
+  }
 }
-var SvgCaretDown8 = function SvgCaretDown82(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends$q({
-    width: 8,
-    height: 8,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /* @__PURE__ */ React.createElement("path", {
-    d: "M1 2a1 1 0 0 0-.707 1.707l3 3a1 1 0 0 0 1.414 0l3-3A1 1 0 0 0 7 2H1z"
-  })));
-};
-var _path$p;
-function _extends$p() {
-  _extends$p = 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];
+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$5 = 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$5, {
+    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$4 = 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$4, {
+    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$3 = 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$3, {
+      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$4(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);
+}
+var SvgCaretDown8 = function SvgCaretDown82(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends$q({
+    width: 8,
+    height: 8,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$q || (_path$q = /* @__PURE__ */ React.createElement("path", {
+    d: "M1 2a1 1 0 0 0-.707 1.707l3 3a1 1 0 0 0 1.414 0l3-3A1 1 0 0 0 7 2H1z"
+  })));
+};
+var _path$p;
+function _extends$p() {
+  _extends$p = 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];
         }
       }
     }
@@ -3800,22 +5407,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 +5438,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 +5499,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 +5512,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,7 +5571,7 @@ function MobileDropDownButton(_u) {
     })]
   });
 }
-const ButtonLink = styled(Button)`
+const ButtonLink = styled(Button$1)`
   margin: 8px 0;
 `;
 const Container$2 = styled.div`
@@ -4129,7 +5736,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, {
@@ -4163,7 +5770,7 @@ function registerComponent$3(runtime) {
       linkTextStyle: TextStyle({
         label: "Link text style"
       }),
-      showLogo: Checkbox({
+      showLogo: Checkbox$1({
         preset: true,
         label: "Show logo"
       }),
@@ -4256,7 +5863,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,7 +5931,7 @@ const Root = forwardRef(function Page2({
           children: /* @__PURE__ */ jsx(Element$1, {
             element: child
           })
-        }, child.key)) : /* @__PURE__ */ jsx(Placeholder2, {})
+        }, child.key)) : /* @__PURE__ */ jsx(Placeholder3, {})
       })
     })]
   });
@@ -5374,10 +6981,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 +7022,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 +7150,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()], []);
@@ -5742,13 +7349,14 @@ function registerComponent(runtime) {
   });
 }
 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 unregisterBoxComponent = registerComponent$b(runtime);
+  const unregisterButtonComponent = registerComponent$a(runtime);
+  const unregisterCarouselComponent = registerComponent$8(runtime);
+  const unregisterCountdownComponent = registerComponent$7(runtime);
+  const unregisterDividerComponent = registerComponent$6(runtime);
+  const unregisterEmbedComponent = registerComponent$5(runtime);
+  const unregisterFormComponent = registerComponent$4(runtime);
+  const unregisterImageComponent = registerComponent$9(runtime);
   const unregisterNavigationComponent = registerComponent$3(runtime);
   const unregisterRootComponent = registerComponent$2(runtime);
   const unregisterSocialLinksComponent = registerComponent$1(runtime);
@@ -5760,6 +7368,7 @@ function registerBuiltinComponents(runtime) {
     unregisterCountdownComponent();
     unregisterDividerComponent();
     unregisterEmbedComponent();
+    unregisterFormComponent();
     unregisterImageComponent();
     unregisterNavigationComponent();
     unregisterRootComponent();
@@ -5867,6 +7476,25 @@ function RuntimeProvider({
     })
   });
 }
+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 +7510,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 +7544,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 +7619,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 { Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, ImageComponent as I, Navigation as N, PageProvider as P, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$b as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
 //# sourceMappingURL=react.es2.js.map