@makeswift/runtime 0.0.0-ef05bba → 0.0.0-f750971

package/dist/react.cjs2.js

@@ -33,22 +33,22 @@ var __objRest = (source, exclude) => {
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var client = require("@apollo/client");
-var redux = require("redux");
-var thunk = require("redux-thunk");
+var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
-var descriptors = require("./descriptors.cjs.js");
 var styled = require("styled-components");
 var framerMotion = require("framer-motion");
 var jsxRuntime = require("react/jsx-runtime");
 var boxModels = require("./box-models.cjs.js");
 var NextImage = require("next/image");
 var ReactPlayer = require("react-player");
+var descriptors = require("./descriptors.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var NextLink = require("next/link");
 var reactUseGesture = require("react-use-gesture");
 var popcorn = require("@popmotion/popcorn");
 var uuid = require("uuid/v4");
+var formik = require("formik");
 var polished = require("polished");
 var slate = require("slate");
 var Hotkeys = require("slate-hotkeys");
@@ -61,7 +61,7 @@ function _interopDefaultLegacy(e) {
 function _interopNamespace(e) {
   if (e && e.__esModule)
     return e;
-  var n = { __proto__: null, [Symbol.toStringTag]: "Module" };
+  var n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
     Object.keys(e).forEach(function(k) {
       if (k !== "default") {
@@ -79,7 +79,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
-var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
 var ReactPlayer__default = /* @__PURE__ */ _interopDefaultLegacy(ReactPlayer);
@@ -90,213 +89,6 @@ var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
 var Hotkeys__default = /* @__PURE__ */ _interopDefaultLegacy(Hotkeys);
 var ipsum__default = /* @__PURE__ */ _interopDefaultLegacy(ipsum);
 var Lists__default = /* @__PURE__ */ _interopDefaultLegacy(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 actions.ActionTypes.REGISTER_REACT_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.component);
-    case actions.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 actions.ActionTypes.REGISTER_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.meta);
-    case actions.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 actions.ActionTypes.REGISTER_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.propControllerDescriptors);
-    case actions.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 descriptors.Types.Grid:
-      return prop.elements;
-    default:
-      return [];
-  }
-}
-function getElementId$1(descriptor, prop) {
-  if (prop == null)
-    return null;
-  switch (descriptor.type) {
-    case descriptors.Types.ElementID:
-      return prop;
-    default:
-      return null;
-  }
-}
-const reducer = redux.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, descriptors2) {
-  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 = descriptors2.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 descriptors2 = getPropControllerDescriptors(state);
-  if (rootElement == null)
-    return /* @__PURE__ */ new Map();
-  return normalizeElement(rootElement, descriptors2);
-}
-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 descriptors2 = getComponentPropControllerDescriptors(state, element.type);
-  if (descriptors2 == null)
-    return null;
-  const elementId = Object.entries(descriptors2).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 redux.createStore(reducer, __spreadProps(__spreadValues({}, preloadedState), { documents: getInitialState$3({ rootElements }) }), redux.applyMiddleware(thunk__default["default"]));
-}
 const PlaceholderBase$1 = styled__default["default"].div`
   width: 100%;
   background: rgba(161, 168, 194, 0.18);
@@ -306,7 +98,7 @@ const PlaceholderBase$1 = styled__default["default"].div`
   hide
 }) => hide === true ? "hidden" : "initial"};
 `;
-var Placeholder$1 = React.forwardRef(function Placeholder2(_a, ref) {
+var Placeholder$2 = React.forwardRef(function Placeholder2(_a, ref) {
   var _b = _a, {
     hide = false
   } = _b, restOfProps = __objRest(_b, [
@@ -420,21 +212,51 @@ const TYPOGRAPHIES_BY_ID = client.gql`
 
   ${TYPOGRAPHY_FRAGMENT}
 `;
+const TABLE_BY_ID = client.gql`
+  query TableById($id: ID!) {
+    table(id: $id) {
+      id
+      name
+      columns {
+        id
+        name
+        ... on MultipleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+        ... on SingleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`;
 function isNonNullable(value) {
   return value != null;
 }
-const Context$1 = React.createContext(void 0);
+const Context$2 = React.createContext(void 0);
 function useQuery(query, options) {
-  const client$1 = React.useContext(Context$1);
+  const client$1 = React.useContext(Context$2);
   return client.useQuery(query, __spreadValues({
     client: client$1
   }, options));
 }
+function useMutation(mutation, options) {
+  const client$1 = React.useContext(Context$2);
+  return client.useMutation(mutation, __spreadValues({
+    client: client$1
+  }, options));
+}
 function ApolloProvider({
   client: client2,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$1.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
     value: client2,
     children
   });
@@ -647,8 +469,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);
@@ -722,6 +544,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,
@@ -1192,8 +1020,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, [
@@ -1279,7 +1107,7 @@ function Parallax(_g) {
     children: children(getProps)
   }));
 }
-const Container$8 = styled__default["default"].div`
+const Container$c = styled__default["default"].div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1333,7 +1161,7 @@ function BackgroundVideo({
   }, [aspectRatio, zoom]);
   if (!ReactPlayer__default["default"].canPlay(url))
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$8, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$c, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], {
       url,
@@ -1412,10 +1240,10 @@ const AbsoluteFill = styled__default["default"].div`
   right: 0;
   bottom: 0;
 `;
-const Container$7 = styled__default["default"](AbsoluteFill)`
+const Container$b = styled__default["default"](AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled__default["default"](Container$7)`
+const BackgroundsContainer$1 = styled__default["default"](Container$b)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => styled.css`
         display: ${visibility === true ? "block" : "none"};
@@ -1439,7 +1267,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsxRuntime.jsx(Container$7, {
+            return /* @__PURE__ */ jsxRuntime.jsx(Container$b, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1475,7 +1303,7 @@ function Backgrounds({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$7, __spreadValues({}, getParallaxProps({
+              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$b, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1493,7 +1321,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsxRuntime.jsx(Container$7, {
+            return /* @__PURE__ */ jsxRuntime.jsx(Container$b, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1510,7 +1338,7 @@ function Backgrounds({
             } = bg.payload;
             return /* @__PURE__ */ jsxRuntime.jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$7, __spreadProps(__spreadValues({}, getParallaxProps({})), {
+              children: (getParallaxProps) => /* @__PURE__ */ jsxRuntime.jsx(Container$b, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1578,7 +1406,7 @@ const Grid$1 = styled__default["default"](framerMotion.motion.div)`
   alignContent
 }))}
 `;
-const GridItem$1 = styled__default["default"](framerMotion.motion.div)`
+const GridItem$2 = styled__default["default"](framerMotion.motion.div)`
   display: flex;
 
   /* IE11 doesn't recognize space-between and treats it as stretch, so we fall back to flex-start */
@@ -1689,7 +1517,7 @@ const Box = React.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__ */ jsxRuntime.jsx(GridItem$1, {
+      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(GridItem$2, {
         grid: children.columns,
         index,
         columnGap,
@@ -1700,13 +1528,13 @@ const Box = React.forwardRef(function Box2({
         children: /* @__PURE__ */ jsxRuntime.jsx(Element$1, {
           element: child
         })
-      }, child.key)) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder$1, {
+      }, child.key)) : /* @__PURE__ */ jsxRuntime.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",
@@ -1971,7 +1799,7 @@ const Link = React.forwardRef(function Link2(_k, ref) {
     }))
   });
 });
-const StyledButton = styled__default["default"](Link)`
+const StyledButton$1 = styled__default["default"](Link)`
   display: table;
   border: 0;
   outline: 0;
@@ -2163,7 +1991,7 @@ const StyledButton = styled__default["default"](Link)`
 })}
     ${cssTextStyle()}
 `;
-const Button = React.forwardRef(function Button2(_m, ref) {
+const Button$1 = React.forwardRef(function Button2(_m, ref) {
   var _n = _m, {
     id,
     children,
@@ -2189,7 +2017,7 @@ const Button = React.forwardRef(function Button2(_m, ref) {
     "width",
     "margin"
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledButton$1, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     id,
     color: useColor(color),
@@ -2204,8 +2032,8 @@ const Button = React.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: {
@@ -2405,7 +2233,7 @@ const ImageComponent = React.forwardRef(function Image2({
     })
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2454,7 +2282,7 @@ const RightChevron = () => /* @__PURE__ */ jsxRuntime.jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$6 = styled__default["default"].div`
+const Container$a = styled__default["default"].div`
   position: relative;
   height: 100%;
 `;
@@ -2754,7 +2582,7 @@ const Carousel = React.forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$6, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$a, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ClipMask, {
         children: /* @__PURE__ */ jsxRuntime.jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2830,7 +2658,7 @@ const Carousel = React.forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$8(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2950,14 +2778,14 @@ const Block$1 = styled__default["default"].div`
   padding: 0.5em;
   font-size: 1em;
 `;
-const Label = styled__default["default"].div`
+const Label$3 = styled__default["default"].div`
   margin-top: 0.25em;
 `;
 const Segment = styled__default["default"].div`
   flex: 1;
   text-align: center;
 `;
-const Container$5 = styled__default["default"].div`
+const Container$9 = styled__default["default"].div`
   display: flex;
   ${cssWidth("560px")}
   ${cssMargin()}
@@ -2967,7 +2795,7 @@ const Container$5 = styled__default["default"].div`
       return styled.css`
             font-size: 18px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 14px;
             }
           `;
@@ -2975,7 +2803,7 @@ const Container$5 = styled__default["default"].div`
       return styled.css`
             font-size: 32px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 18px;
             }
           `;
@@ -2983,7 +2811,7 @@ const Container$5 = styled__default["default"].div`
       return styled.css`
             font-size: 24px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 16px;
             }
           `;
@@ -3120,7 +2948,7 @@ const Container$5 = styled__default["default"].div`
 })}
   }
 
-  ${Label} {
+  ${Label$3} {
     ${(p) => cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
   swatch: {
     hue: 0,
@@ -3197,7 +3025,7 @@ const Countdown = React.forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$5, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$9, {
     ref,
     id,
     width,
@@ -3216,7 +3044,7 @@ const Countdown = React.forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: days
         })
-      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label$3, {
         children: daysLabel == null ? "Days" : daysLabel
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs(Segment, {
@@ -3224,7 +3052,7 @@ const Countdown = React.forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: hours
         })
-      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label$3, {
         children: hoursLabel == null ? "Hours" : hoursLabel
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs(Segment, {
@@ -3232,7 +3060,7 @@ const Countdown = React.forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: minutes
         })
-      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label$3, {
         children: minutesLabel == null ? "Minutes" : minutesLabel
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs(Segment, {
@@ -3240,13 +3068,13 @@ const Countdown = React.forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: seconds
         })
-      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      }), /* @__PURE__ */ jsxRuntime.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",
@@ -3382,7 +3210,7 @@ const IE11MinHeightContainer = styled__default["default"].div`
   ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$4 = styled__default["default"].div`
+const Container$8 = styled__default["default"].div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3441,7 +3269,7 @@ const Divider = React.forwardRef(function Divider2({
     id,
     width,
     margin,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Container$4, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(Container$8, {
       children: /* @__PURE__ */ jsxRuntime.jsx(Line, {
         variant,
         thickness,
@@ -3450,7 +3278,7 @@ const Divider = React.forwardRef(function Divider2({
     })
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3500,7 +3328,7 @@ function registerComponent$5(runtime) {
     }
   });
 }
-const Container$3 = styled__default["default"].div`
+const Container$7 = styled__default["default"].div`
   min-height: 15px;
   ${cssWidth()}
   ${cssMargin()}
@@ -3580,7 +3408,7 @@ const Embed = React.forwardRef(function Embed2({
   }, [container, html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Container$3, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container$7, {
     ref: setContainer,
     id,
     margin,
@@ -3590,7 +3418,7 @@ const Embed = React.forwardRef(function Embed2({
     }
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$5(runtime) {
   return runtime.registerComponent(Embed, {
     type: "./components/Embed/index.js",
     label: "Embed",
@@ -3606,9 +3434,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) {
@@ -3619,85 +3447,1863 @@ 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__namespace.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 28,
-    height: 28
-  }, props), _path$r || (_path$r = /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", _extends$t({
+    width: 12,
+    height: 12,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$s || (_path$s = /* @__PURE__ */ React__namespace.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__default["default"].div`
-  ${(p) => cssMediaRules([p.gutter], ([gutter = {
-  value: 0,
-  unit: "px"
-}]) => styled.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 = React.createContext({});
+function useFormContext() {
+  return React.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 styled.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 }
+  ]) => styled.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__default["default"].input`
+  ${cssField()}
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
       `)}
 `;
-const PlaceholderLink$1 = styled__default["default"].div`
-  width: ${(props) => props.width}px;
-  height: ${(props) => props.button === true ? 32 : 8}px;
+var Input$2 = React.forwardRef(function Input2(_o, ref) {
+  var _p = _o, {
+    error = false,
+    form
+  } = _p, restOfProps = __objRest(_p, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+const Container$6 = styled__default["default"].div`
+  display: flex;
+  flex-direction: column;
+  ${cssWidth()};
+  ${cssMargin()};
+`;
+const Label$2 = styled__default["default"].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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: links$1.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(GutterContainer, {
-      gutter,
-      first: i === 0,
-      last: i === links$1.length - 1,
-      children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderLink$1, __spreadValues({}, link))
-    }, i))
+const Input$1 = styled__default["default"].div`
+  min-width: 80px;
+  height: 32px;
+  border-radius: 4px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a1a8c2;
+  opacity: 0.4;
+`;
+const Button = styled__default["default"].div`
+  min-width: 140px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #a1a8c2;
+  opacity: 0.4;
+`;
+var Placeholder$1 = React.forwardRef(function Placeholder3({
+  width,
+  margin
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$6, {
+    ref,
+    width,
+    margin,
+    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Label$2, {}), /* @__PURE__ */ jsxRuntime.jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Label$2, {}), /* @__PURE__ */ jsxRuntime.jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end"
+      },
+      children: /* @__PURE__ */ jsxRuntime.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__namespace.createElement("svg", _extends$q({
-    width: 8,
-    height: 8,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.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) {
+const Base$1 = styled__default["default"].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]) => styled.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__ */ jsxRuntime.jsx(Base$1, __spreadProps(__spreadValues({}, props), {
+    contrast,
+    size,
+    textStyle: labelTextStyle,
+    textColor: useColor(labelTextColor)
+  }));
+}
+var SingleLineTextTableField = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "text",
+      error: error != null
+    }))]
+  });
+});
+const Base = styled__default["default"].textarea`
+  resize: vertical;
+  ${cssField()}
+`;
+var TextArea = React.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__ */ jsxRuntime.jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    rows: 4,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+var LongTextTableField = React.forwardRef(function LongTextTableField2(_u, ref) {
+  var _v = _u, {
+    id,
+    label = "",
+    error,
+    hideLabel = false
+  } = _v, restOfProps = __objRest(_v, [
+    "id",
+    "label",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.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__default["default"]({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$5 = styled__default["default"].div`
+  position: relative;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeCheckbox = styled__default["default"].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]) => styled.css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenCheckbox = styled__default["default"].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
+} = {}]) => styled.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]) => styled.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
+} = {}]) => styled.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
+}]) => styled.css`
+            border-color: ${colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => styled.css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var Checkbox = React.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__ */ jsxRuntime.jsxs(Container$5, {
+    size,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
+      type: "checkbox",
+      ref,
+      error,
+      size,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsxRuntime.jsx(FakeCheckbox, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel$2 = styled__default["default"](Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+      `)}
+`;
+const CheckboxContainer$1 = styled__default["default"].span`
+  margin-right: 8px;
+`;
+var CheckboxTableField = React.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__ */ jsxRuntime.jsxs(StyledLabel$2, {
+    htmlFor: id,
+    size,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(CheckboxContainer$1, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        checked: value,
+        onChange: handleChange,
+        ref,
+        id,
+        error: error != null
+      }))
+    }), label]
+  });
+});
+const MainLabel = styled__default["default"](Label$1)`
+  margin: 0 0 4px 0;
+`;
+const StyledLabel$1 = styled__default["default"](Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const CheckboxContainer = styled__default["default"].span`
+  margin-right: 8px;
+`;
+var MultipleSelectTableField = React.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 = React.useRef({
+    validity: {
+      valueMissing: required === true && value.length === 0,
+      typeMismatch: false
+    }
+  });
+  React.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__ */ jsxRuntime.jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(MainLabel, {
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$1, {
+      htmlFor: option.id,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(CheckboxContainer, {
+        children: /* @__PURE__ */ jsxRuntime.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__default["default"]({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$4 = styled__default["default"].div`
+  position: relative;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeRadioButton = styled__default["default"].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]) => styled.css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenRadioButton = styled__default["default"].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
+}]) => styled.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
+}]) => styled.css`
+            background-color: ${getCheckmarkColor(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => styled.css`
+            border-color: ${colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => styled.css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var RadioButton = React.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__ */ jsxRuntime.jsxs(Container$4, {
+    size,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+      ref,
+      error,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsxRuntime.jsx(FakeRadioButton, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel = styled__default["default"](Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const RadioButtonContainer = styled__default["default"].span`
+  margin-right: 8px;
+`;
+var TableColumnRadioButtonGroup = React.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 = React.useRef({
+    validity: {
+      valueMissing: required === true && value === "",
+      typeMismatch: false
+    }
+  });
+  React.useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      as: "p",
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, {
+      htmlFor: option.id,
+      "aria-label": label,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(RadioButtonContainer, {
+        children: /* @__PURE__ */ jsxRuntime.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__default["default"].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]) => styled.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__default["default"].select`
+  appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+`;
+var TableColumnSingleSelect = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
+      error,
+      shape,
+      size,
+      contrast,
+      brandColor,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+        children: value === "" ? "-" : value
+      }), /* @__PURE__ */ jsxRuntime.jsxs(Select, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        ref,
+        id,
+        value,
+        children: [/* @__PURE__ */ jsxRuntime.jsx("option", {
+          value: "",
+          children: "-"
+        }), tableColumn.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", {
+          value: option.name,
+          children: option.name
+        }, option.id))]
+      }))]
+    })]
+  });
+});
+var SingleSelectTableField = React.forwardRef(function SingleSelectTableField2(_I, ref) {
+  var _J = _I, {
+    type
+  } = _J, restOfProps = __objRest(_J, [
+    "type"
+  ]);
+  return type === "select" ? /* @__PURE__ */ jsxRuntime.jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  })) : /* @__PURE__ */ jsxRuntime.jsx(TableColumnRadioButtonGroup, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  }));
+});
+var PhoneNumberTableField = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "tel",
+      error: error != null
+    }))]
+  });
+});
+var EmailTableField = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "email",
+      error: error != null
+    }))]
+  });
+});
+var URLTableField = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "url",
+      error: error != null
+    }))]
+  });
+});
+var NumberTableField = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "number",
+      error: error != null
+    }))]
+  });
+});
+const Label = styled__default["default"].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]) => styled.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 Input = styled__default["default"].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]) => styled.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
+      size
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input, {
+      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 = React.useRef(null);
+  if (!tableColumn)
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(formik.Field, {
+    name: tableColumn.name,
+    validate,
+    children: ({
+      field,
+      form
+    }) => hidden ? /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, field), {
+      ref: input,
+      type: "hidden"
+    })) : /* @__PURE__ */ jsxRuntime.jsx(TableColumnField, __spreadProps(__spreadValues({}, field), {
+      type,
+      form,
+      tableColumn,
+      ref: input,
+      id,
+      error: formik.getIn(form.touched, field.name) && formik.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__namespace.createElement("svg", _extends$s({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20
+  }, props), _g || (_g = /* @__PURE__ */ React__namespace.createElement("g", {
+    fill: "none",
+    strokeWidth: 2,
+    transform: "translate(1 1)"
+  }, /* @__PURE__ */ React__namespace.createElement("circle", {
+    stroke: "currentColor",
+    cx: 9,
+    cy: 9,
+    r: 9,
+    strokeOpacity: 0.4
+  }), /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M9 18A9 9 0 0 0 9 0"
+  }))));
+};
+const spin = styled.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Icon = styled__default["default"](SvgSpinner20)`
+  display: inline-flex;
+  animation: ${spin} 1s linear infinite;
+  stroke: currentColor;
+`;
+function Spinner() {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, {});
+}
+function useTableFormFieldRefs(propController, { fieldsCount }) {
+  const [container, setContainer] = React.useState(null);
+  const [items, setItems] = React.useState(Array(fieldsCount + 1).fill(null));
+  const isInBuilder = useIsInBuilder();
+  React.useEffect(() => {
+    if (!isInBuilder)
+      return;
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+    };
+    function handleAnimationFrameRequest() {
+      if (propController == null)
+        return;
+      if (container != null)
+        propController.tableFormLayoutChange({ layout: boxModels.getBox(container) });
+      items.map((item, index) => {
+        if (item == null)
+          return;
+        propController.tableFormFieldLayoutChange({ index, layout: boxModels.getBox(item) });
+      });
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  }, [propController, container, items, isInBuilder]);
+  const itemRefs = React.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__default["default"].form`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => styled.css`
+        font-size: ${getSizeFontSize(size)}px;
+      `)}
+  ${cssWidth()}
+  ${cssMargin()}
+`;
+const GridItem$1 = styled__default["default"].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__default["default"]((props) => /* @__PURE__ */ jsxRuntime.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]) => styled.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__default["default"].div`
+  padding: 8px 16px;
+  background-color: #f19eb9;
+  border-radius: 4px;
+  margin-top: 16px;
+`;
+const IconContainer = styled__default["default"].div`
+  fill: currentColor;
+`;
+const ErrorMessage = styled__default["default"].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 = client.gql`
+  mutation CreateTableRecord($input: CreateTableRecordInput!) {
+    createTableRecord(input: $input) {
+      tableRecord {
+        id
+      }
+    }
+  }
+`;
+const Form = React.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 = React.useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.fields) != null ? _a : [];
+  }, [fieldsProp]);
+  const grid = React.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] = React.useState(null);
+  const [propControllers, setPropControllers] = React.useState(null);
+  const [initialValues, setInitialValues] = React.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] = React.useState(false);
+  const linkRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
+    getBoxModel() {
+      return refEl instanceof Element ? boxModels.getBox(refEl) : null;
+    },
+    setPropControllers
+  }), [refEl, setPropControllers]);
+  React.useEffect(() => {
+    container(refEl);
+  }, [container, refEl]);
+  React.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);
+      }
+    }
+  }
+  React.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__ */ jsxRuntime.jsx(Provider, {
+    value: {
+      shape,
+      size,
+      contrast,
+      brandColor: brandColorData,
+      labelTextStyle,
+      labelTextColor
+    },
+    children: tableId == null ? /* @__PURE__ */ jsxRuntime.jsx(Placeholder$1, {
+      ref: setRefEl,
+      width,
+      margin
+    }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(formik.Formik, {
+        onSubmit: handleSubmit,
+        initialValues,
+        initialStatus: {
+          error: null
+        },
+        enableReinitialize: true,
+        children: (formik$1) => {
+          const error = formik$1.status && formik$1.status.error;
+          const errors = fields.map((field) => {
+            const tableColumn = getTableColumn(field);
+            return tableColumn && formik.getIn(formik$1.touched, tableColumn.name) && formik.getIn(formik$1.errors, tableColumn.name);
+          }).filter((message) => typeof message === "string");
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */ jsxRuntime.jsxs(GridForm, {
+              ref: setRefEl,
+              id,
+              width,
+              margin,
+              size,
+              onSubmit: formik$1.handleSubmit,
+              onReset: formik$1.handleReset,
+              noValidate: true,
+              children: [fields.map((field, index) => {
+                const tableColumn = getTableColumn(field);
+                return /* @__PURE__ */ jsxRuntime.jsx(GridItem$1, {
+                  ref: items[index],
+                  grid,
+                  index,
+                  rowGap: gap,
+                  columnGap: gap,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Field, {
+                    tableColumn,
+                    tableFormField: field
+                  })
+                }, field.id);
+              }), /* @__PURE__ */ jsxRuntime.jsxs(GridItem$1, {
+                ref: items[fields.length],
+                grid,
+                index: fields.length,
+                rowGap: gap,
+                columnGap: gap,
+                children: [/* @__PURE__ */ jsxRuntime.jsx(StyledButton, {
+                  type: "submit",
+                  disabled: formik$1.isSubmitting || isDone,
+                  shape,
+                  size,
+                  color: brandColor,
+                  variant: submitVariant,
+                  textColor: submitTextColor,
+                  width: submitWidth,
+                  alignment: submitAlignment,
+                  textStyle: submitTextStyle,
+                  children: formik$1.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : isDone ? /* @__PURE__ */ jsxRuntime.jsx(IconContainer, {
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgCheck12, {})
+                  }) : submitLabel
+                }), (errors.length > 0 || error) && /* @__PURE__ */ jsxRuntime.jsxs(ErrorContainer, {
+                  children: [errors.map((message) => /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, {
+                    children: message
+                  }, message)), error != null && /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, {
+                    children: error
+                  })]
+                })]
+              })]
+            }), submitLink != null && /* @__PURE__ */ jsxRuntime.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: descriptors.ElementID(),
+      tableId: descriptors.Table(),
+      fields: descriptors.TableFormFields(),
+      submitLink: descriptors.Link({
+        label: "Redirect to",
+        options: [{
+          value: "OPEN_PAGE",
+          label: "Open page"
+        }, {
+          value: "OPEN_URL",
+          label: "Open URL"
+        }]
+      }),
+      gap: descriptors.GapY({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 10,
+            unit: "px"
+          }
+        }],
+        label: "Gap",
+        defaultValue: {
+          value: 0,
+          unit: "px"
+        }
+      }),
+      shape: descriptors.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: descriptors.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: descriptors.ResponsiveIconRadioGroup({
+        label: "Color",
+        options: [{
+          label: "Light mode",
+          value: Contrasts.LIGHT,
+          icon: "Sun16"
+        }, {
+          label: "Dark mode",
+          value: Contrasts.DARK,
+          icon: "Moon16"
+        }],
+        defaultValue: Contrasts.LIGHT
+      }),
+      labelTextStyle: descriptors.TextStyle({
+        label: "Label text style"
+      }),
+      labelTextColor: descriptors.ResponsiveColor({
+        label: "Label text color"
+      }),
+      submitTextStyle: descriptors.TextStyle({
+        label: "Button text style"
+      }),
+      brandColor: descriptors.ResponsiveColor({
+        label: "Button color",
+        placeholder: "black"
+      }),
+      submitTextColor: descriptors.ResponsiveColor({
+        label: "Button text color",
+        placeholder: "white"
+      }),
+      submitLabel: descriptors.TextInput({
+        label: "Button label",
+        placeholder: "Submit"
+      }),
+      submitVariant: descriptors.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: descriptors.ResponsiveLength({
+        label: "Button width"
+      }),
+      submitAlignment: descriptors.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: descriptors.Width({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 550,
+            unit: "px"
+          }
+        }],
+        defaultValue: {
+          value: 100,
+          unit: "%"
+        }
+      }),
+      margin: descriptors.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__namespace.createElement("svg", _extends$r({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 28
+  }, props), _path$r || (_path$r = /* @__PURE__ */ React__namespace.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__default["default"].div`
+  ${(p) => cssMediaRules([p.gutter], ([gutter = {
+  value: 0,
+  unit: "px"
+}]) => styled.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__default["default"].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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: links$1.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(GutterContainer, {
+      gutter,
+      first: i === 0,
+      last: i === links$1.length - 1,
+      children: /* @__PURE__ */ jsxRuntime.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__namespace.createElement("svg", _extends$q({
+    width: 8,
+    height: 8,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.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];
         }
@@ -3835,22 +5441,22 @@ const StyledDropDownItem = styled__default["default"](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__ */ jsxRuntime.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"
@@ -3866,7 +5472,7 @@ function DropDownButton(_q) {
   }, [setPosition]);
   return /* @__PURE__ */ jsxRuntime.jsxs(DropDownContainer, {
     ref: container,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(Button, __spreadProps(__spreadValues({}, restOfProps), {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
@@ -3927,7 +5533,7 @@ const DropDownMenu = styled__default["default"].div`
   flex-direction: column;
   padding: 8px;
 `;
-const ButtonLink$1 = styled__default["default"](Button)`
+const ButtonLink$1 = styled__default["default"](Button$1)`
   margin: 8px 0;
 `;
 const StyledLink$2 = styled__default["default"](Link)`
@@ -3940,24 +5546,24 @@ const StyledLink$2 = styled__default["default"](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__ */ jsxRuntime.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",
@@ -3999,7 +5605,7 @@ function MobileDropDownButton(_u) {
     })]
   });
 }
-const ButtonLink = styled__default["default"](Button)`
+const ButtonLink = styled__default["default"](Button$1)`
   margin: 8px 0;
 `;
 const Container$2 = styled__default["default"].div`
@@ -4164,7 +5770,7 @@ const Navigation = React.forwardRef(function Navigation2({
           gutter,
           first: i === 0,
           last: i === links2.length - 1,
-          children: [link.type === "button" && /* @__PURE__ */ jsxRuntime.jsx(Button, __spreadProps(__spreadValues({}, link.payload), {
+          children: [link.type === "button" && /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, link.payload), {
             children: link.payload.label
           })), link.type === "dropdown" && /* @__PURE__ */ jsxRuntime.jsx(DropDownButton, __spreadValues({}, link.payload))]
         }, link.id)) : /* @__PURE__ */ jsxRuntime.jsx(LinksPlaceholder, {
@@ -4291,7 +5897,7 @@ const PlaceholderBase = styled__default["default"].div`
   height: 80px;
   padding: 8px;
 `;
-var Placeholder = React.forwardRef(function Placeholder3(props, ref) {
+var Placeholder = React.forwardRef(function Placeholder4(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(PlaceholderBase, __spreadProps(__spreadValues({}, props), {
     ref,
     children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
@@ -5409,10 +7015,10 @@ const Span = styled__default["default"].span`
             `}
       `, shallowMergeFallbacks)}
 `;
-function Mark(_w) {
-  var _x = _w, {
+function Mark(__) {
+  var _$ = __, {
     value
-  } = _x, restOfProps = __objRest(_x, [
+  } = _$, restOfProps = __objRest(_$, [
     "value"
   ]);
   const typographyStyle = useTypographyMark(value);
@@ -5450,10 +7056,10 @@ const StyledBlock = styled__default["default"].div`
           border-left: 5px solid rgba(0, 0, 0, 0.1);
         ` : ""}
 `;
-var Block = React.forwardRef(function Block2(_y, ref) {
-  var _z = _y, {
+var Block = React.forwardRef(function Block2(_aa, ref) {
+  var _ba = _aa, {
     textAlign
-  } = _z, restOfProps = __objRest(_z, [
+  } = _ba, restOfProps = __objRest(_ba, [
     "textAlign"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(StyledBlock, __spreadProps(__spreadValues({}, restOfProps), {
@@ -5578,10 +7184,10 @@ function Inlines() {
     }
   };
 }
-const RichTextEditor = styled__default["default"](React.forwardRef(function RichTextEditor2(_A, ref) {
-  var _B = _A, {
+const RichTextEditor = styled__default["default"](React.forwardRef(function RichTextEditor2(_ca, ref) {
+  var _da = _ca, {
     placeholder: placeholder2 = "Write some text..."
-  } = _B, restOfProps = __objRest(_B, [
+  } = _da, restOfProps = __objRest(_da, [
     "placeholder"
   ]);
   const plugins = React.useMemo(() => [Lists__default["default"](), LinkPlugin(), Inlines(), DeviceOverridesBlockPlugin(), DeviceOverridesMarksPlugin()], []);
@@ -5777,13 +7383,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);
@@ -5795,6 +7402,7 @@ function registerBuiltinComponents(runtime) {
     unregisterCountdownComponent();
     unregisterDividerComponent();
     unregisterEmbedComponent();
+    unregisterFormComponent();
     unregisterImageComponent();
     unregisterNavigationComponent();
     unregisterRootComponent();
@@ -5802,7 +7410,7 @@ function registerBuiltinComponents(runtime) {
     unregisterTextComponent();
   };
 }
-const contextDefaultValue = configureStore();
+const contextDefaultValue = reactPage.configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -5834,7 +7442,7 @@ function RuntimeProvider({
   makeswiftApiEndpoint
 }) {
   const [store, setStore] = React.useState(() => {
-    const store2 = configureStore({
+    const store2 = reactPage.configureStore({
       preloadedState: contextDefaultValue.getState(),
       rootElements: defaultRootElements
     });
@@ -5904,6 +7512,25 @@ function RuntimeProvider({
     })
   });
 }
+const PageContext = React.createContext(null);
+function usePageIdOrNull() {
+  return React.useContext(PageContext);
+}
+function usePageId() {
+  const pageIdOrNull = usePageIdOrNull();
+  if (pageIdOrNull == null)
+    throw new Error("`usePageId` must be used with `<PageProvider>`");
+  return pageIdOrNull;
+}
+function PageProvider({
+  id,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, {
+    value: id,
+    children
+  });
+}
 const DocumentContext = React.createContext(null);
 function useDocumentKey() {
   return React.useContext(DocumentContext);
@@ -5913,17 +7540,17 @@ function useSelector(selector) {
   return withSelector.useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
 }
 function useComponent(type) {
-  return useSelector((state) => getReactComponent(state, type));
+  return useSelector((state) => reactPage.getReactComponent(state, type));
 }
 function useElementId(elementKey) {
   const documentKey = useDocumentKey();
-  return useSelector((state) => documentKey == null || elementKey == null ? null : getElementId(state, documentKey, elementKey));
+  return useSelector((state) => documentKey == null || elementKey == null ? null : reactPage.getElementId(state, documentKey, elementKey));
 }
-function useDocumentRootElement(documentKey) {
-  return useSelector((state) => getDocumentRootElement(state, documentKey));
+function useDocument(documentKey) {
+  return useSelector((state) => reactPage.getDocument(state, documentKey));
 }
 function useIsInBuilder() {
-  return useSelector((state) => getIsInBuilder(state));
+  return useSelector((state) => reactPage.getIsInBuilder(state));
 }
 function useDispatch() {
   const store = React.useContext(Context);
@@ -5953,24 +7580,64 @@ const ElementData = React.memo(React.forwardRef(function ElementData2({
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ref,
-    children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
-      children: "Not Implemented"
-    }), /* @__PURE__ */ jsxRuntime.jsx("pre", {
-      children: /* @__PURE__ */ jsxRuntime.jsx("code", {
-        children: JSON.stringify(elementReference, null, 2)
-      })
-    })]
+  var _a;
+  const {
+    error,
+    data
+  } = useQuery(client.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__ */ jsxRuntime.jsxs("div", {
+      ref,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
+        children: "Something went wrong!"
+      }), /* @__PURE__ */ jsxRuntime.jsx("pre", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("code", {
+          children: JSON.stringify(error, null, 2)
+        })
+      })]
+    });
+  }
+  if (globalElementData == null) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
+        children: "Not Found"
+      }), /* @__PURE__ */ jsxRuntime.jsx("pre", {
+        children: /* @__PURE__ */ jsxRuntime.jsx("code", {
+          children: JSON.stringify(elementReference, null, 2)
+        })
+      })]
+    });
+  }
+  return elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
+    document: elementReferenceDocument,
+    ref
+  }) : /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
+    elementData: globalElementData,
+    ref
   });
 }));
-const Element$1 = React.memo(function Element2({
+const Element$1 = React.memo(React.forwardRef(function Element2({
   element
-}) {
+}, ref) {
   const elementKey = element.key;
   const dispatch = useDispatch();
   const documentKey = useDocumentKey();
   const [handle, setHandle] = React.useState(null);
+  React.useImperativeHandle(ref, () => handle, [handle]);
   React.useEffect(() => {
     if (documentKey == null)
       return;
@@ -5981,40 +7648,48 @@ const Element$1 = React.memo(function Element2({
       return;
     return dispatch(actions.mountComponentEffect(documentKey, elementKey));
   }, [dispatch, documentKey, elementKey]);
-  return isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
+  return reactPage.isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
     ref: setHandle,
     elementReference: element
   }, elementKey) : /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
     ref: setHandle,
     elementData: element
   }, elementKey);
-});
-const Document = React.memo(function Document2({
-  documentKey
-}) {
-  const documentRootElement = useDocumentRootElement(documentKey);
-  if (documentRootElement == null) {
+}));
+const Document = React.memo(React.forwardRef(function Document2({
+  document
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DocumentContext.Provider, {
+    value: document.key,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Element$1, {
+      ref,
+      element: document.rootElement
+    })
+  });
+}));
+const DocumentReference = React.memo(React.forwardRef(function DocumentReference2({
+  documentReference
+}, ref) {
+  const document = useDocument(documentReference.key);
+  if (document == null) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref,
       children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
         children: "Document Not Found"
       }), /* @__PURE__ */ jsxRuntime.jsx("pre", {
         children: /* @__PURE__ */ jsxRuntime.jsx("code", {
-          children: JSON.stringify({
-            documentKey
-          }, null, 2)
+          children: JSON.stringify(documentReference, null, 2)
         })
       })]
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DocumentContext.Provider, {
-    value: documentKey,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Element$1, {
-      element: documentRootElement
-    })
+  return /* @__PURE__ */ jsxRuntime.jsx(Document, {
+    ref,
+    document
   });
-});
+}));
 exports.Box = Box;
-exports.Button = Button;
+exports.Button = Button$1;
 exports.Carousel = Carousel;
 exports.Countdown = Countdown;
 exports.DEFAULT_BOX_ANIMATE_DELAY = DEFAULT_BOX_ANIMATE_DELAY;
@@ -6025,17 +7700,18 @@ exports.DEFAULT_ITEM_ANIMATE_DURATION = DEFAULT_ITEM_ANIMATE_DURATION;
 exports.DEFAULT_ITEM_ANIMATE_TYPE = DEFAULT_ITEM_ANIMATE_TYPE;
 exports.DEFAULT_ITEM_STAGGER_DURATION = DEFAULT_ITEM_STAGGER_DURATION;
 exports.Divider = Divider;
-exports.Document = Document;
+exports.DocumentReference = DocumentReference;
 exports.Element = Element$1;
 exports.Embed = Embed;
+exports.Form = Form;
 exports.ImageComponent = ImageComponent;
 exports.Navigation = Navigation;
+exports.PageProvider = PageProvider;
 exports.ReactRuntime = ReactRuntime;
 exports.Root = Root;
 exports.RuntimeProvider = RuntimeProvider;
 exports.SocialLinks = SocialLinks;
 exports.Text = Text;
-exports.createDocument = createDocument;
 exports.cssBorder = cssBorder;
 exports.cssBorderRadius = cssBorderRadius;
 exports.cssBoxShadow = cssBoxShadow;
@@ -6045,15 +7721,8 @@ exports.cssMediaRules = cssMediaRules;
 exports.cssPadding = cssPadding;
 exports.cssTextStyle = cssTextStyle;
 exports.cssWidth = cssWidth;
-exports.getComponentPropControllerDescriptors = getComponentPropControllerDescriptors$1;
-exports.getComponentsMeta = getComponentsMeta;
-exports.getDocumentRootElement = getDocumentRootElement$1;
-exports.getElementPropControllerDescriptors = getElementPropControllerDescriptors;
-exports.getInitialState = getInitialState$3;
-exports.reducer = reducer$3;
-exports.reducer$1 = reducer$2;
-exports.reducer$2 = reducer$1;
 exports.registerBuiltinComponents = registerBuiltinComponents;
-exports.registerComponent = registerComponent$a;
+exports.registerComponent = registerComponent$b;
 exports.useIsInBuilder = useIsInBuilder;
+exports.usePageId = usePageId;
 //# sourceMappingURL=react.cjs2.js.map