@makeswift/runtime 0.0.0-ef05bba → 0.0.0-f5b044f

package/dist/react.cjs2.js

@@ -30,27 +30,34 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 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 ssr = require("@apollo/client/react/ssr");
+var slate = require("slate");
+var uuid = require("uuid/v4");
 var jsxRuntime = require("react/jsx-runtime");
+require("html-react-parser");
+require("next/head");
 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");
 var ipsum = require("corporate-ipsum");
 var slateReact = require("slate-react");
@@ -61,7 +68,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,224 +86,16 @@ 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 uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
 var NextImage__default = /* @__PURE__ */ _interopDefaultLegacy(NextImage);
 var ReactPlayer__default = /* @__PURE__ */ _interopDefaultLegacy(ReactPlayer);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var NextLink__default = /* @__PURE__ */ _interopDefaultLegacy(NextLink);
-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 +105,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 +219,168 @@ 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 typePolicies = {
+  Query: {
+    fields: {
+      swatches(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Swatch",
+          id
+        }, true));
+      },
+      file(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "File",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      files(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "File",
+          id
+        }, true));
+      },
+      typographies(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Typography",
+          id
+        }, true));
+      },
+      pagePathnamesById(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "PagePathnameSlice",
+          id
+        }, true));
+      },
+      globalElement(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "GlobalElement",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      table(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Table",
+          id: args == null ? void 0 : args.id
+        }, true);
+      }
+    }
+  }
+};
+const PrefetchContext = React.createContext(false);
+function useIsPrefetching() {
+  return React.useContext(PrefetchContext);
+}
+function createApolloClient({
+  uri,
+  cacheData
+}) {
+  const cache = new client.InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache.restore(cacheData);
+  return new client.ApolloClient({
+    uri,
+    cache
+  });
+}
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "apolloClient");
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    const id = uuid__default["default"]();
+    await ssr.getDataFromTree(/* @__PURE__ */ jsxRuntime.jsx(PrefetchContext.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
+        client: this,
+        rootElements: /* @__PURE__ */ new Map([[id, element]]),
+        children: /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
+          documentReference: reactPage.createDocumentReference(id)
+        })
+      })
+    }));
+    slate.KeyUtils.resetGenerator();
+    return this.apolloClient.cache.extract();
+  }
+  updateCacheData(cacheData) {
+    this.apolloClient.cache.restore(cacheData);
+  }
+}
+const Context$2 = React.createContext(void 0);
 function useQuery(query, options) {
-  const client$1 = React.useContext(Context$1);
+  const client$1 = React.useContext(Context$2);
   return client.useQuery(query, __spreadValues({
-    client: client$1
+    client: client$1 == null ? void 0 : client$1.apolloClient
+  }, options));
+}
+function useMutation(mutation, options) {
+  const client$1 = React.useContext(Context$2);
+  return client.useMutation(mutation, __spreadValues({
+    client: client$1 == null ? void 0 : client$1.apolloClient
   }, options));
 }
-function ApolloProvider({
+function MakeswiftProvider({
   client: client2,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$1.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
     value: client2,
     children
   });
@@ -647,8 +593,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 +668,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 +1144,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 +1231,7 @@ function Parallax(_g) {
     children: children(getProps)
   }));
 }
-const Container$8 = styled__default["default"].div`
+const Container$d = styled__default["default"].div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1333,7 +1285,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$d, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], {
       url,
@@ -1412,10 +1364,10 @@ const AbsoluteFill = styled__default["default"].div`
   right: 0;
   bottom: 0;
 `;
-const Container$7 = styled__default["default"](AbsoluteFill)`
+const Container$c = styled__default["default"](AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled__default["default"](Container$7)`
+const BackgroundsContainer$1 = styled__default["default"](Container$c)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => styled.css`
         display: ${visibility === true ? "block" : "none"};
@@ -1424,6 +1376,9 @@ const BackgroundsContainer$1 = styled__default["default"](Container$7)`
 function Backgrounds({
   backgrounds
 }) {
+  const isPrefetching = useIsPrefetching();
+  if (isPrefetching)
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (backgrounds == null)
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -1439,7 +1394,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsxRuntime.jsx(Container$7, {
+            return /* @__PURE__ */ jsxRuntime.jsx(Container$c, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1475,7 +1430,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$c, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1493,7 +1448,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsxRuntime.jsx(Container$7, {
+            return /* @__PURE__ */ jsxRuntime.jsx(Container$c, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1510,7 +1465,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$c, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1578,7 +1533,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 +1644,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 +1655,20 @@ 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$c(runtime) {
+  function isHiddenBasedOnAnimationType(props, deviceId, property) {
+    var _a, _b;
+    const animateIn = props[property];
+    return ((_b = (_a = findDeviceOverride(animateIn, deviceId)) == null ? void 0 : _a.value) != null ? _b : "none") === "none";
+  }
+  const isHiddenBasedOnBoxAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "boxAnimateType");
+  const isHiddenBasedOnItemAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "itemAnimateType");
   return runtime.registerComponent(Box, {
     type: "./components/Box/index.js",
     label: "Box",
@@ -1775,8 +1737,12 @@ function registerComponent$a(runtime) {
       border: descriptors.Border(),
       borderRadius: descriptors.BorderRadius(),
       boxShadow: descriptors.Shadows(),
-      rowGap: descriptors.GapY({}),
-      columnGap: descriptors.GapX({}),
+      rowGap: descriptors.GapY((props) => ({
+        hidden: props.children == null
+      })),
+      columnGap: descriptors.GapX((props) => ({
+        hidden: props.children == null
+      })),
       boxAnimateType: descriptors.ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
@@ -1810,20 +1776,22 @@ function registerComponent$a(runtime) {
         }],
         defaultValue: "none"
       }),
-      boxAnimateDuration: descriptors.ResponsiveNumber({
+      boxAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
         step: 0.05,
-        suffix: "s"
-      }),
-      boxAnimateDelay: descriptors.ResponsiveNumber({
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
+      boxAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
         step: 0.05,
-        suffix: "s"
-      }),
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
       itemAnimateType: descriptors.ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
@@ -1857,30 +1825,34 @@ function registerComponent$a(runtime) {
         }],
         defaultValue: "none"
       }),
-      itemAnimateDuration: descriptors.ResponsiveNumber({
+      itemAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
         step: 0.05,
-        suffix: "s"
-      }),
-      itemAnimateDelay: descriptors.ResponsiveNumber({
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
         step: 0.05,
-        suffix: "s"
-      }),
-      itemStaggerDuration: descriptors.ResponsiveNumber({
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemStaggerDuration: descriptors.ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
         suffix: "s",
-        defaultValue: DEFAULT_ITEM_STAGGER_DURATION
-      }),
-      hidePlaceholder: descriptors.Checkbox({
-        label: "Hide placeholder"
-      }),
+        defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      hidePlaceholder: descriptors.Checkbox((props) => ({
+        label: "Hide placeholder",
+        hidden: props.children != null
+      })),
       children: descriptors.Grid()
     }
   });
@@ -1971,7 +1943,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 +2135,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 +2161,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 +2176,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$b(runtime) {
+  return runtime.registerComponent(Button$1, {
     type: "./components/Button/index.js",
     label: "Button",
     props: {
@@ -2300,6 +2272,10 @@ const placeholders = {
   image: {
     src: "data:image/svg+xml,%3Csvg width='360' height='240' viewBox='0 0 360 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M260 59C260 78.33 244.33 94 225 94C205.67 94 190 78.33 190 59C190 39.67 205.67 24 225 24C244.33 24 260 39.67 260 59Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M319 250H417L291.485 124.485C286.799 119.799 279.201 119.799 274.515 124.485L234 165L319 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath d='M311 250L-89 250L102.515 58.4853C107.201 53.799 114.799 53.799 119.485 58.4853L311 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A",
     dimensions: { width: 360, height: 240 }
+  },
+  video: {
+    src: "data:image/svg+xml,%3Csvg width='712' height='400' viewBox='0 0 712 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M712 0H0V400H712V0ZM356 240C378.091 240 396 222.091 396 200C396 177.909 378.091 160 356 160C333.909 160 316 177.909 316 200C316 222.091 333.909 240 356 240Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M344 216.503V183.497C344 181.95 345.681 180.989 347.014 181.773L375.069 198.276C376.384 199.049 376.384 200.951 375.069 201.724L347.014 218.227C345.681 219.011 344 218.05 344 216.503Z' fill='%23A1A8C2' fill-opacity='0.4'/%3E%3C/svg%3E%0A",
+    dimensions: { width: 712, height: 400 }
   }
 };
 function loadImage(src) {
@@ -2359,6 +2335,7 @@ const ImageComponent = React.forwardRef(function Image2({
   const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder2.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = React.useState(null);
   const isInBuilder = useIsInBuilder();
+  const isPrefetching = useIsPrefetching();
   React.useEffect(() => {
     if (dataDimensions)
       return;
@@ -2378,6 +2355,8 @@ const ImageComponent = React.forwardRef(function Image2({
   const dimensions = dataDimensions != null ? dataDimensions : measuredDimensions;
   if (!dimensions)
     return null;
+  if (isPrefetching)
+    return null;
   return /* @__PURE__ */ jsxRuntime.jsx(ImageContainer, {
     as: link ? Link : "div",
     link,
@@ -2405,7 +2384,7 @@ const ImageComponent = React.forwardRef(function Image2({
     })
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$a(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2454,7 +2433,7 @@ const RightChevron = () => /* @__PURE__ */ jsxRuntime.jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$6 = styled__default["default"].div`
+const Container$b = styled__default["default"].div`
   position: relative;
   height: 100%;
 `;
@@ -2754,7 +2733,7 @@ const Carousel = React.forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$6, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$b, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ClipMask, {
         children: /* @__PURE__ */ jsxRuntime.jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2830,7 +2809,7 @@ const Carousel = React.forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2950,14 +2929,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$a = styled__default["default"].div`
   display: flex;
   ${cssWidth("560px")}
   ${cssMargin()}
@@ -2967,7 +2946,7 @@ const Container$5 = styled__default["default"].div`
       return styled.css`
             font-size: 18px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 14px;
             }
           `;
@@ -2975,7 +2954,7 @@ const Container$5 = styled__default["default"].div`
       return styled.css`
             font-size: 32px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 18px;
             }
           `;
@@ -2983,7 +2962,7 @@ const Container$5 = styled__default["default"].div`
       return styled.css`
             font-size: 24px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 16px;
             }
           `;
@@ -3120,7 +3099,7 @@ const Container$5 = styled__default["default"].div`
 })}
   }
 
-  ${Label} {
+  ${Label$3} {
     ${(p) => cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
   swatch: {
     hue: 0,
@@ -3197,7 +3176,7 @@ const Countdown = React.forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$5, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$a, {
     ref,
     id,
     width,
@@ -3216,7 +3195,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 +3203,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 +3211,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 +3219,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$8(runtime) {
   return runtime.registerComponent(Countdown, {
     type: "./components/Countdown/index.js",
     label: "Countdown",
@@ -3382,7 +3361,7 @@ const IE11MinHeightContainer = styled__default["default"].div`
   ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$4 = styled__default["default"].div`
+const Container$9 = styled__default["default"].div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3441,7 +3420,7 @@ const Divider = React.forwardRef(function Divider2({
     id,
     width,
     margin,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Container$4, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(Container$9, {
       children: /* @__PURE__ */ jsxRuntime.jsx(Line, {
         variant,
         thickness,
@@ -3450,7 +3429,7 @@ const Divider = React.forwardRef(function Divider2({
     })
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$7(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3500,7 +3479,7 @@ function registerComponent$5(runtime) {
     }
   });
 }
-const Container$3 = styled__default["default"].div`
+const Container$8 = styled__default["default"].div`
   min-height: 15px;
   ${cssWidth()}
   ${cssMargin()}
@@ -3580,7 +3559,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$8, {
     ref: setContainer,
     id,
     margin,
@@ -3590,7 +3569,7 @@ const Embed = React.forwardRef(function Embed2({
     }
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Embed, {
     type: "./components/Embed/index.js",
     label: "Embed",
@@ -3606,9 +3585,9 @@ function registerComponent$4(runtime) {
     }
   });
 }
-var _path$r;
-function _extends$r() {
-  _extends$r = Object.assign || function(target) {
+var _path$t;
+function _extends$u() {
+  _extends$u = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3619,82 +3598,1860 @@ function _extends$r() {
     }
     return target;
   };
-  return _extends$r.apply(this, arguments);
+  return _extends$u.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$u({
+    width: 12,
+    height: 12,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$t || (_path$t = /* @__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$7 = 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))
-  });
-}
-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,
+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$7, {
+    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}"`);
+  }
+}
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.8)";
+    case Contrasts.DARK:
+      return "rgba(255, 255, 255, 0.95)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+const Base$1 = styled__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$6 = 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$6, {
+    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$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 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$5, {
+    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$4 = 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$4, {
+      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$t() {
+  _extends$t = 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$t.apply(this, arguments);
+}
+var SvgSpinner20 = function SvgSpinner202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$t({
+    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$5(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$s;
+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 SvgMobileMenu28 = function SvgMobileMenu282(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$s({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 28
+  }, props), _path$s || (_path$s = /* @__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$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 SvgCaretDown8 = function SvgCaretDown82(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$r({
+    width: 8,
+    height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /* @__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) {
+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) {
@@ -3705,20 +5462,20 @@ function _extends$p() {
     }
     return target;
   };
-  return _extends$p.apply(this, arguments);
+  return _extends$q.apply(this, arguments);
 }
 var SvgPlus8 = function SvgPlus82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$p({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$q({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M4 0a1 1 0 0 0-1 1v2H1a1 1 0 1 0 0 2h2v2a1 1 0 0 0 2 0V5h2a1 1 0 0 0 0-2H5V1a1 1 0 0 0-1-1z"
   })));
 };
-var _path$o;
-function _extends$o() {
-  _extends$o = Object.assign || function(target) {
+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) {
@@ -3729,20 +5486,20 @@ function _extends$o() {
     }
     return target;
   };
-  return _extends$o.apply(this, arguments);
+  return _extends$p.apply(this, arguments);
 }
 var SvgArrowDown8 = function SvgArrowDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$o({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$p({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M5 1a1 1 0 0 0-2 0v3.586l-.293-.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0-1.414-1.414L5 4.586V1z"
   })));
 };
-var _path$n;
-function _extends$n() {
-  _extends$n = Object.assign || function(target) {
+var _path$o;
+function _extends$o() {
+  _extends$o = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3753,14 +5510,14 @@ function _extends$n() {
     }
     return target;
   };
-  return _extends$n.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 var SvgChevronDown8 = function SvgChevronDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$n({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$o({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.293 2.293a1 1 0 0 1 1.414 0L4 4.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"
@@ -3835,22 +5592,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 +5623,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",
@@ -3896,9 +5653,9 @@ function DropDownButton(_q) {
     })]
   });
 }
-var _path$m;
-function _extends$m() {
-  _extends$m = Object.assign || function(target) {
+var _path$n;
+function _extends$n() {
+  _extends$n = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3909,14 +5666,14 @@ function _extends$m() {
     }
     return target;
   };
-  return _extends$m.apply(this, arguments);
+  return _extends$n.apply(this, arguments);
 }
 var SvgTimes16 = function SvgTimes162(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$m({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$n({
     width: 16,
     height: 16,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$m || (_path$m = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M13.707 3.707a1 1 0 0 0-1.414-1.414L8 6.586 3.707 2.293a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L8 9.414l4.293 4.293a1 1 0 0 0 1.414-1.414L9.414 8l4.293-4.293Z"
@@ -3927,7 +5684,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 +5697,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,10 +5756,10 @@ 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`
+const Container$3 = styled__default["default"].div`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -4056,7 +5813,7 @@ function MobileMenu({
   onClose = () => {
   }
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
     animation,
     backgroundColor: useColor(backgroundColor),
     open,
@@ -4082,7 +5839,7 @@ function MobileMenu({
     })]
   });
 }
-const Container$1 = styled__default["default"].nav`
+const Container$2 = styled__default["default"].nav`
   display: flex;
   align-items: center;
   ${cssWidth()}
@@ -4139,7 +5896,7 @@ const Navigation = React.forwardRef(function Navigation2({
   margin
 }, ref) {
   const [isOpen, setIsOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container$1, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
     ref,
     id,
     margin,
@@ -4164,7 +5921,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, {
@@ -4187,7 +5944,7 @@ const Navigation = React.forwardRef(function Navigation2({
     })]
   });
 });
-function registerComponent$3(runtime) {
+function registerComponent$4(runtime) {
   return runtime.registerComponent(Navigation, {
     type: "./components/Navigation/index.js",
     label: "Navigation",
@@ -4291,7 +6048,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", {
@@ -4364,7 +6121,7 @@ const Root = React.forwardRef(function Page2({
     })]
   });
 });
-function registerComponent$2(runtime) {
+function registerComponent$3(runtime) {
   return runtime.registerComponent(Root, {
     type: "./components/Root/index.js",
     label: "Page",
@@ -4377,6 +6134,30 @@ function registerComponent$2(runtime) {
     }
   });
 }
+var _path$m;
+function _extends$m() {
+  _extends$m = 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$m.apply(this, arguments);
+}
+var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$m({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20
+  }, props), _path$m || (_path$m = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M13.741 8.297a96.837 96.837 0 0 0 1.443-4.128c.345-1.085.518-1.751.518-1.998 0-.266-.058-.472-.173-.62a.572.572 0 0 0-.476-.218c-.257 0-.52.213-.787.638-.267.426-.56 1.11-.883 2.054l-1.38 3.97 1.738.302Zm-1.836 3.695a8.343 8.343 0 0 1-1.125-.124 5.915 5.915 0 0 1-1.015-.274c.147.293.278.586.393.879.116.293.21.582.284.866.22-.275.453-.525.696-.75.245-.224.5-.423.767-.597Zm-1.56-4.162-1.49-4.286c-.388-1.09-.687-1.801-.899-2.136-.212-.334-.442-.501-.69-.501a.575.575 0 0 0-.469.22c-.12.146-.18.343-.18.59 0 .422.161 1.154.483 2.198.323 1.044.806 2.413 1.45 4.107a.464.464 0 0 1 .235-.213 1.13 1.13 0 0 1 .414-.061c.055 0 .166.005.332.013.165.01.437.033.814.069Zm-1.353 6.634c.156 0 .3-.07.428-.212a.672.672 0 0 0 .193-.46c0-.174-.126-.58-.379-1.216a12.3 12.3 0 0 0-.946-1.875c-.276-.458-.548-.803-.815-1.037-.267-.234-.52-.35-.759-.35-.194 0-.408.12-.642.363-.235.243-.352.47-.352.68 0 .22.115.55.345.989.23.44.538.907.925 1.402.405.54.787.96 1.146 1.263.36.303.644.453.856.453Zm-4.142-.33c.13.157.308.386.538.688.608.833 1.17 1.25 1.685 1.25a.734.734 0 0 0 .47-.165c.137-.11.206-.224.206-.343 0-.138-.092-.367-.276-.687a8.797 8.797 0 0 0-.759-1.085c-.369-.467-.675-.808-.918-1.024-.244-.215-.44-.323-.587-.323-.322 0-.619.172-.89.516a1.902 1.902 0 0 0-.408 1.215c0 .376.094.795.283 1.257.19.463.463.927.821 1.394a5.472 5.472 0 0 0 2.023 1.669c.806.39 1.696.584 2.672.584 1.795 0 3.298-.666 4.508-1.998 1.21-1.333 1.815-3.002 1.815-5.008 0-.613-.046-1.1-.138-1.463-.09-.361-.244-.625-.456-.79-.377-.311-1.11-.59-2.202-.837a15.366 15.366 0 0 0-3.417-.371c-.33 0-.566.055-.704.165-.138.11-.207.297-.207.563 0 .623.35 1.074 1.05 1.353.7.28 1.831.419 3.396.419h.566a.38.38 0 0 1 .31.144c.078.096.132.24.16.433-.158.147-.479.314-.967.502-.488.187-.86.373-1.119.556a4.957 4.957 0 0 0-1.332 1.435c-.336.554-.504 1.078-.504 1.573 0 .302.071.666.214 1.092.143.426.214.689.214.79v.096l-.028.124c-.404-.028-.724-.264-.959-.708-.235-.444-.352-1.037-.352-1.78v-.122a.758.758 0 0 1-.214.137.6.6 0 0 1-.228.04c-.083 0-.16-.005-.234-.02a2.287 2.287 0 0 1-.249-.061c.027.1.048.199.062.295.014.096.021.172.021.227 0 .339-.134.63-.4.872a1.366 1.366 0 0 1-.953.364c-.58 0-1.169-.282-1.768-.845-.598-.563-.897-1.114-.897-1.655 0-.101.012-.19.035-.268a.45.45 0 0 1 .117-.2Zm9.885-5.604c.83.157 1.413.504 1.754 1.044.34.54.511 1.393.511 2.556 0 2.307-.697 4.196-2.092 5.666C13.513 19.265 11.73 20 9.558 20a6.938 6.938 0 0 1-2.492-.46 6.169 6.169 0 0 1-2.078-1.284c-.663-.605-1.16-1.243-1.49-1.916A4.622 4.622 0 0 1 3 14.273c0-.788.17-1.397.511-1.828.34-.43.878-.723 1.615-.878a7.523 7.523 0 0 1-.304-.811 1.986 1.986 0 0 1-.097-.508c0-.412.22-.833.657-1.264.437-.431.85-.646 1.235-.646.166 0 .34.03.525.089.184.06.395.159.635.296C7.068 6.727 6.553 5.186 6.231 4.1c-.323-1.086-.484-1.834-.484-2.246 0-.568.147-1.02.442-1.353C6.484.168 6.884 0 7.39 0c.865 0 1.961 1.923 3.286 5.77.23.659.405 1.167.525 1.525.102-.285.244-.687.428-1.21 1.326-3.81 2.466-5.714 3.424-5.714.47 0 .844.158 1.126.474.28.316.42.74.42 1.27 0 .404-.154 1.14-.462 2.212-.309 1.072-.776 2.473-1.402 4.203Z"
+  })));
+};
 var _path$l;
 function _extends$l() {
   _extends$l = Object.assign || function(target) {
@@ -4392,13 +6173,13 @@ function _extends$l() {
   };
   return _extends$l.apply(this, arguments);
 }
-var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$l || (_path$l = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M13.741 8.297a96.837 96.837 0 0 0 1.443-4.128c.345-1.085.518-1.751.518-1.998 0-.266-.058-.472-.173-.62a.572.572 0 0 0-.476-.218c-.257 0-.52.213-.787.638-.267.426-.56 1.11-.883 2.054l-1.38 3.97 1.738.302Zm-1.836 3.695a8.343 8.343 0 0 1-1.125-.124 5.915 5.915 0 0 1-1.015-.274c.147.293.278.586.393.879.116.293.21.582.284.866.22-.275.453-.525.696-.75.245-.224.5-.423.767-.597Zm-1.56-4.162-1.49-4.286c-.388-1.09-.687-1.801-.899-2.136-.212-.334-.442-.501-.69-.501a.575.575 0 0 0-.469.22c-.12.146-.18.343-.18.59 0 .422.161 1.154.483 2.198.323 1.044.806 2.413 1.45 4.107a.464.464 0 0 1 .235-.213 1.13 1.13 0 0 1 .414-.061c.055 0 .166.005.332.013.165.01.437.033.814.069Zm-1.353 6.634c.156 0 .3-.07.428-.212a.672.672 0 0 0 .193-.46c0-.174-.126-.58-.379-1.216a12.3 12.3 0 0 0-.946-1.875c-.276-.458-.548-.803-.815-1.037-.267-.234-.52-.35-.759-.35-.194 0-.408.12-.642.363-.235.243-.352.47-.352.68 0 .22.115.55.345.989.23.44.538.907.925 1.402.405.54.787.96 1.146 1.263.36.303.644.453.856.453Zm-4.142-.33c.13.157.308.386.538.688.608.833 1.17 1.25 1.685 1.25a.734.734 0 0 0 .47-.165c.137-.11.206-.224.206-.343 0-.138-.092-.367-.276-.687a8.797 8.797 0 0 0-.759-1.085c-.369-.467-.675-.808-.918-1.024-.244-.215-.44-.323-.587-.323-.322 0-.619.172-.89.516a1.902 1.902 0 0 0-.408 1.215c0 .376.094.795.283 1.257.19.463.463.927.821 1.394a5.472 5.472 0 0 0 2.023 1.669c.806.39 1.696.584 2.672.584 1.795 0 3.298-.666 4.508-1.998 1.21-1.333 1.815-3.002 1.815-5.008 0-.613-.046-1.1-.138-1.463-.09-.361-.244-.625-.456-.79-.377-.311-1.11-.59-2.202-.837a15.366 15.366 0 0 0-3.417-.371c-.33 0-.566.055-.704.165-.138.11-.207.297-.207.563 0 .623.35 1.074 1.05 1.353.7.28 1.831.419 3.396.419h.566a.38.38 0 0 1 .31.144c.078.096.132.24.16.433-.158.147-.479.314-.967.502-.488.187-.86.373-1.119.556a4.957 4.957 0 0 0-1.332 1.435c-.336.554-.504 1.078-.504 1.573 0 .302.071.666.214 1.092.143.426.214.689.214.79v.096l-.028.124c-.404-.028-.724-.264-.959-.708-.235-.444-.352-1.037-.352-1.78v-.122a.758.758 0 0 1-.214.137.6.6 0 0 1-.228.04c-.083 0-.16-.005-.234-.02a2.287 2.287 0 0 1-.249-.061c.027.1.048.199.062.295.014.096.021.172.021.227 0 .339-.134.63-.4.872a1.366 1.366 0 0 1-.953.364c-.58 0-1.169-.282-1.768-.845-.598-.563-.897-1.114-.897-1.655 0-.101.012-.19.035-.268a.45.45 0 0 1 .117-.2Zm9.885-5.604c.83.157 1.413.504 1.754 1.044.34.54.511 1.393.511 2.556 0 2.307-.697 4.196-2.092 5.666C13.513 19.265 11.73 20 9.558 20a6.938 6.938 0 0 1-2.492-.46 6.169 6.169 0 0 1-2.078-1.284c-.663-.605-1.16-1.243-1.49-1.916A4.622 4.622 0 0 1 3 14.273c0-.788.17-1.397.511-1.828.34-.43.878-.723 1.615-.878a7.523 7.523 0 0 1-.304-.811 1.986 1.986 0 0 1-.097-.508c0-.412.22-.833.657-1.264.437-.431.85-.646 1.235-.646.166 0 .34.03.525.089.184.06.395.159.635.296C7.068 6.727 6.553 5.186 6.231 4.1c-.323-1.086-.484-1.834-.484-2.246 0-.568.147-1.02.442-1.353C6.484.168 6.884 0 7.39 0c.865 0 1.961 1.923 3.286 5.77.23.659.405 1.167.525 1.525.102-.285.244-.687.428-1.21 1.326-3.81 2.466-5.714 3.424-5.714.47 0 .844.158 1.126.474.28.316.42.74.42 1.27 0 .404-.154 1.14-.462 2.212-.309 1.072-.776 2.473-1.402 4.203Z"
+    d: "M18.281 11.438 16.132 10l2.149-1.438v2.876Zm-7.422 6.096v-4.008l3.727-2.492 3.008 2.011-6.735 4.49Zm-.859-5.5L6.961 10 10 7.966 13.04 10 10 12.033Zm-.859 5.5-6.734-4.489 3.008-2.01 3.726 2.491v4.008ZM1.719 8.562 3.869 10l-2.15 1.438V8.562Zm7.422-6.097v4.01L5.415 8.965 2.407 6.954l6.734-4.489Zm1.718 0 6.735 4.49-3.008 2.011-3.727-2.492V2.465Zm9.126 4.338a.857.857 0 0 0-.368-.565L10.477.144a.862.862 0 0 0-.954 0L.383 6.238A.872.872 0 0 0 0 6.953v6.093c0 .282.148.56.383.715l9.14 6.094a.856.856 0 0 0 .954 0l9.14-6.094a.863.863 0 0 0 .383-.715V6.953a.631.631 0 0 0-.015-.15Z"
   })));
 };
 var _path$k;
@@ -4416,13 +6197,13 @@ function _extends$k() {
   };
   return _extends$k.apply(this, arguments);
 }
-var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
+var SvgLogoDribbble20 = function SvgLogoDribbble202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$k || (_path$k = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M18.281 11.438 16.132 10l2.149-1.438v2.876Zm-7.422 6.096v-4.008l3.727-2.492 3.008 2.011-6.735 4.49Zm-.859-5.5L6.961 10 10 7.966 13.04 10 10 12.033Zm-.859 5.5-6.734-4.489 3.008-2.01 3.726 2.491v4.008ZM1.719 8.562 3.869 10l-2.15 1.438V8.562Zm7.422-6.097v4.01L5.415 8.965 2.407 6.954l6.734-4.489Zm1.718 0 6.735 4.49-3.008 2.011-3.727-2.492V2.465Zm9.126 4.338a.857.857 0 0 0-.368-.565L10.477.144a.862.862 0 0 0-.954 0L.383 6.238A.872.872 0 0 0 0 6.953v6.093c0 .282.148.56.383.715l9.14 6.094a.856.856 0 0 0 .954 0l9.14-6.094a.863.863 0 0 0 .383-.715V6.953a.631.631 0 0 0-.015-.15Z"
+    d: "M19.797 7.988a10.062 10.062 0 0 0-.585-1.88 9.886 9.886 0 0 0-.922-1.698C15.203-.169 8.988-1.378 4.409 1.71a9.985 9.985 0 0 0-2.7 2.7A9.965 9.965 0 0 0 .202 7.988a10.148 10.148 0 0 0 0 4.027 10.008 10.008 0 0 0 13.691 7.2 10.002 10.002 0 0 0 5.904-11.226Zm-1.26 1.927a19.75 19.75 0 0 0-5.947-.28c-.062-.145-.121-.293-.182-.439a30.32 30.32 0 0 0-.568-1.24 10.978 10.978 0 0 0 4.758-3.379 8.502 8.502 0 0 1 1.942 5.338h-.003Zm-2.896-6.322a9.298 9.298 0 0 1-4.462 3.09 43.362 43.362 0 0 0-3.192-4.98 8.523 8.523 0 0 1 7.654 1.89ZM6.357 2.28A51.177 51.177 0 0 1 9.528 7.2 31.562 31.562 0 0 1 1.643 8.24 8.542 8.542 0 0 1 6.357 2.28ZM1.461 10c0-.09.004-.182.007-.273a31.285 31.285 0 0 0 8.767-1.217c.245.48.479.967.693 1.454-.112.03-.225.065-.336.102a13.512 13.512 0 0 0-6.946 5.636A8.508 8.508 0 0 1 1.465 10h-.004Zm8.544 8.545a8.508 8.508 0 0 1-5.44-1.958c.112.09.191.15.191.15s1.637-3.57 6.702-5.336c.019-.007.039-.012.058-.017a35.57 35.57 0 0 1 1.823 6.484 8.525 8.525 0 0 1-3.334.677Zm4.772-1.463a36.725 36.725 0 0 0-1.662-6.099 12.377 12.377 0 0 1 5.323.373 8.546 8.546 0 0 1-3.661 5.727Z"
   })));
 };
 var _path$j;
@@ -4440,13 +6221,13 @@ function _extends$j() {
   };
   return _extends$j.apply(this, arguments);
 }
-var SvgLogoDribbble20 = function SvgLogoDribbble202(props) {
+var SvgLogoFacebook20 = function SvgLogoFacebook202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$j || (_path$j = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M19.797 7.988a10.062 10.062 0 0 0-.585-1.88 9.886 9.886 0 0 0-.922-1.698C15.203-.169 8.988-1.378 4.409 1.71a9.985 9.985 0 0 0-2.7 2.7A9.965 9.965 0 0 0 .202 7.988a10.148 10.148 0 0 0 0 4.027 10.008 10.008 0 0 0 13.691 7.2 10.002 10.002 0 0 0 5.904-11.226Zm-1.26 1.927a19.75 19.75 0 0 0-5.947-.28c-.062-.145-.121-.293-.182-.439a30.32 30.32 0 0 0-.568-1.24 10.978 10.978 0 0 0 4.758-3.379 8.502 8.502 0 0 1 1.942 5.338h-.003Zm-2.896-6.322a9.298 9.298 0 0 1-4.462 3.09 43.362 43.362 0 0 0-3.192-4.98 8.523 8.523 0 0 1 7.654 1.89ZM6.357 2.28A51.177 51.177 0 0 1 9.528 7.2 31.562 31.562 0 0 1 1.643 8.24 8.542 8.542 0 0 1 6.357 2.28ZM1.461 10c0-.09.004-.182.007-.273a31.285 31.285 0 0 0 8.767-1.217c.245.48.479.967.693 1.454-.112.03-.225.065-.336.102a13.512 13.512 0 0 0-6.946 5.636A8.508 8.508 0 0 1 1.465 10h-.004Zm8.544 8.545a8.508 8.508 0 0 1-5.44-1.958c.112.09.191.15.191.15s1.637-3.57 6.702-5.336c.019-.007.039-.012.058-.017a35.57 35.57 0 0 1 1.823 6.484 8.525 8.525 0 0 1-3.334.677Zm4.772-1.463a36.725 36.725 0 0 0-1.662-6.099 12.377 12.377 0 0 1 5.323.373 8.546 8.546 0 0 1-3.661 5.727Z"
+    d: "M18.896 0H1.104C.494 0 0 .494 0 1.104v17.792C0 19.506.494 20 1.104 20h9.58v-7.734H8.086V9.238h2.598V7.01c0-2.583 1.577-3.989 3.881-3.989 1.104 0 2.053.082 2.33.119v2.699l-1.59.001c-1.254 0-1.496.596-1.496 1.47v1.928h2.997l-.39 3.028h-2.607V20h5.087c.61 0 1.104-.494 1.104-1.104V1.104C20 .494 19.506 0 18.896 0"
   })));
 };
 var _path$i;
@@ -4464,13 +6245,13 @@ function _extends$i() {
   };
   return _extends$i.apply(this, arguments);
 }
-var SvgLogoFacebook20 = function SvgLogoFacebook202(props) {
+var SvgLogoGithub20 = function SvgLogoGithub202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$i || (_path$i = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M18.896 0H1.104C.494 0 0 .494 0 1.104v17.792C0 19.506.494 20 1.104 20h9.58v-7.734H8.086V9.238h2.598V7.01c0-2.583 1.577-3.989 3.881-3.989 1.104 0 2.053.082 2.33.119v2.699l-1.59.001c-1.254 0-1.496.596-1.496 1.47v1.928h2.997l-.39 3.028h-2.607V20h5.087c.61 0 1.104-.494 1.104-1.104V1.104C20 .494 19.506 0 18.896 0"
+    d: "M9.996.003a9.762 9.762 0 0 0-3.16 19.072.5.5 0 0 0 .683-.47c0-.234-.01-.85-.013-1.665-2.782.59-3.37-1.313-3.37-1.313a2.608 2.608 0 0 0-1.11-1.431c-.908-.607.07-.594.07-.594a2.098 2.098 0 0 1 1.53 1.007 2.155 2.155 0 0 0 2.91.814c.047-.5.273-.964.636-1.31-2.221-.246-4.554-1.09-4.554-4.836a3.735 3.735 0 0 1 1.028-2.625 3.448 3.448 0 0 1 .098-2.59s.84-.263 2.75 1a9.704 9.704 0 0 1 5.007 0c1.909-1.266 2.747-1 2.747-1 .369.817.404 1.747.099 2.59a3.726 3.726 0 0 1 1.028 2.625c0 3.76-2.338 4.588-4.566 4.83.482.475.73 1.138.68 1.812 0 1.31-.013 2.363-.013 2.686a.498.498 0 0 0 .688.469A9.76 9.76 0 0 0 9.996.003"
   })));
 };
 var _path$h;
@@ -4488,13 +6269,13 @@ function _extends$h() {
   };
   return _extends$h.apply(this, arguments);
 }
-var SvgLogoGithub20 = function SvgLogoGithub202(props) {
+var SvgLogoInstagram20 = function SvgLogoInstagram202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$h || (_path$h = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M9.996.003a9.762 9.762 0 0 0-3.16 19.072.5.5 0 0 0 .683-.47c0-.234-.01-.85-.013-1.665-2.782.59-3.37-1.313-3.37-1.313a2.608 2.608 0 0 0-1.11-1.431c-.908-.607.07-.594.07-.594a2.098 2.098 0 0 1 1.53 1.007 2.155 2.155 0 0 0 2.91.814c.047-.5.273-.964.636-1.31-2.221-.246-4.554-1.09-4.554-4.836a3.735 3.735 0 0 1 1.028-2.625 3.448 3.448 0 0 1 .098-2.59s.84-.263 2.75 1a9.704 9.704 0 0 1 5.007 0c1.909-1.266 2.747-1 2.747-1 .369.817.404 1.747.099 2.59a3.726 3.726 0 0 1 1.028 2.625c0 3.76-2.338 4.588-4.566 4.83.482.475.73 1.138.68 1.812 0 1.31-.013 2.363-.013 2.686a.498.498 0 0 0 .688.469A9.76 9.76 0 0 0 9.996.003"
+    d: "M15.338 3.462a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4M10 13.332a3.333 3.333 0 1 1 0-6.664 3.333 3.333 0 0 1 0 6.665m0-8.468a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27M10 0C7.284 0 6.943.012 5.877.06 4.813.109 4.086.278 3.45.525a4.919 4.919 0 0 0-1.772 1.153A4.905 4.905 0 0 0 .525 3.45C.278 4.086.109 4.813.06 5.877.011 6.944 0 7.284 0 10s.011 3.057.06 4.123c.049 1.065.218 1.79.465 2.428a4.898 4.898 0 0 0 1.153 1.77 4.882 4.882 0 0 0 1.772 1.154c.636.248 1.363.417 2.427.465 1.066.048 1.407.06 4.123.06s3.056-.012 4.123-.06c1.065-.048 1.791-.217 2.427-.465a4.87 4.87 0 0 0 1.771-1.154 4.888 4.888 0 0 0 1.154-1.77c.247-.637.416-1.363.465-2.428.048-1.066.06-1.407.06-4.123s-.012-3.056-.06-4.123c-.049-1.064-.218-1.791-.465-2.427a4.895 4.895 0 0 0-1.154-1.772A4.907 4.907 0 0 0 16.55.525C15.914.278 15.188.109 14.123.06 13.056.012 12.716 0 10 0m0 1.802c2.67 0 2.986.01 4.041.058.975.045 1.505.207 1.857.345.466.18.799.398 1.149.748.351.349.567.683.749 1.149.137.353.299.882.344 1.857.048 1.055.058 1.37.058 4.04s-.01 2.987-.058 4.042c-.045.975-.207 1.504-.344 1.857a3.11 3.11 0 0 1-.749 1.15c-.35.35-.683.566-1.149.748-.352.137-.882.3-1.857.344-1.055.049-1.37.058-4.041.058-2.67 0-2.987-.01-4.041-.058-.975-.044-1.504-.207-1.857-.344a3.104 3.104 0 0 1-1.15-.748 3.133 3.133 0 0 1-.748-1.15c-.137-.353-.3-.882-.344-1.857-.048-1.055-.058-1.371-.058-4.041 0-2.67.01-2.986.058-4.041.044-.975.207-1.504.344-1.857.182-.466.399-.8.748-1.15a3.09 3.09 0 0 1 1.15-.747c.353-.138.882-.3 1.857-.345C7.014 1.812 7.33 1.802 10 1.802"
   })));
 };
 var _path$g;
@@ -4512,13 +6293,13 @@ function _extends$g() {
   };
   return _extends$g.apply(this, arguments);
 }
-var SvgLogoInstagram20 = function SvgLogoInstagram202(props) {
+var SvgLogoLinkedin20 = function SvgLogoLinkedin202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$g || (_path$g = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M15.338 3.462a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4M10 13.332a3.333 3.333 0 1 1 0-6.664 3.333 3.333 0 0 1 0 6.665m0-8.468a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27M10 0C7.284 0 6.943.012 5.877.06 4.813.109 4.086.278 3.45.525a4.919 4.919 0 0 0-1.772 1.153A4.905 4.905 0 0 0 .525 3.45C.278 4.086.109 4.813.06 5.877.011 6.944 0 7.284 0 10s.011 3.057.06 4.123c.049 1.065.218 1.79.465 2.428a4.898 4.898 0 0 0 1.153 1.77 4.882 4.882 0 0 0 1.772 1.154c.636.248 1.363.417 2.427.465 1.066.048 1.407.06 4.123.06s3.056-.012 4.123-.06c1.065-.048 1.791-.217 2.427-.465a4.87 4.87 0 0 0 1.771-1.154 4.888 4.888 0 0 0 1.154-1.77c.247-.637.416-1.363.465-2.428.048-1.066.06-1.407.06-4.123s-.012-3.056-.06-4.123c-.049-1.064-.218-1.791-.465-2.427a4.895 4.895 0 0 0-1.154-1.772A4.907 4.907 0 0 0 16.55.525C15.914.278 15.188.109 14.123.06 13.056.012 12.716 0 10 0m0 1.802c2.67 0 2.986.01 4.041.058.975.045 1.505.207 1.857.345.466.18.799.398 1.149.748.351.349.567.683.749 1.149.137.353.299.882.344 1.857.048 1.055.058 1.37.058 4.04s-.01 2.987-.058 4.042c-.045.975-.207 1.504-.344 1.857a3.11 3.11 0 0 1-.749 1.15c-.35.35-.683.566-1.149.748-.352.137-.882.3-1.857.344-1.055.049-1.37.058-4.041.058-2.67 0-2.987-.01-4.041-.058-.975-.044-1.504-.207-1.857-.344a3.104 3.104 0 0 1-1.15-.748 3.133 3.133 0 0 1-.748-1.15c-.137-.353-.3-.882-.344-1.857-.048-1.055-.058-1.371-.058-4.041 0-2.67.01-2.986.058-4.041.044-.975.207-1.504.344-1.857.182-.466.399-.8.748-1.15a3.09 3.09 0 0 1 1.15-.747c.353-.138.882-.3 1.857-.345C7.014 1.812 7.33 1.802 10 1.802"
+    d: "M.516 19.639h3.896V7.296H.516v12.343ZM2.365 5.752h-.028a2.153 2.153 0 0 1-2.325-2.14 2.376 2.376 0 1 1 2.353 2.14ZM20 19.64h-4.417v-6.388c0-1.672-.692-2.816-2.211-2.816-.954 0-1.803.608-2.11 1.512-.09.328-.122.67-.09 1.009v6.683H6.791s.056-11.315 0-12.344h4.376v1.937c.259-.846 1.657-2.056 3.888-2.056 2.769 0 4.945 1.776 4.945 5.599v6.864Z"
   })));
 };
 var _path$f;
@@ -4536,13 +6317,13 @@ function _extends$f() {
   };
   return _extends$f.apply(this, arguments);
 }
-var SvgLogoLinkedin20 = function SvgLogoLinkedin202(props) {
+var SvgLogoMedium20 = function SvgLogoMedium202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$f || (_path$f = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M.516 19.639h3.896V7.296H.516v12.343ZM2.365 5.752h-.028a2.153 2.153 0 0 1-2.325-2.14 2.376 2.376 0 1 1 2.353 2.14ZM20 19.64h-4.417v-6.388c0-1.672-.692-2.816-2.211-2.816-.954 0-1.803.608-2.11 1.512-.09.328-.122.67-.09 1.009v6.683H6.791s.056-11.315 0-12.344h4.376v1.937c.259-.846 1.657-2.056 3.888-2.056 2.769 0 4.945 1.776 4.945 5.599v6.864Z"
+    d: "M2.372 5.264a.785.785 0 0 0-.252-.659L.252 2.34V2H6.05l4.482 9.905L14.473 2H20v.34L18.404 3.88a.472.472 0 0 0-.178.451v11.335a.474.474 0 0 0 .178.452l1.559 1.542v.34H12.12v-.34l1.615-1.58c.159-.16.159-.207.159-.45V6.467L9.403 17.962h-.607L3.566 6.468v7.704c-.043.323.064.65.29.884l2.1 2.568v.338H0v-.338l2.1-2.568a1.03 1.03 0 0 0 .272-.884V5.264Z"
   })));
 };
 var _path$e;
@@ -4560,13 +6341,13 @@ function _extends$e() {
   };
   return _extends$e.apply(this, arguments);
 }
-var SvgLogoMedium20 = function SvgLogoMedium202(props) {
+var SvgLogoPinterest20 = function SvgLogoPinterest202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$e || (_path$e = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M2.372 5.264a.785.785 0 0 0-.252-.659L.252 2.34V2H6.05l4.482 9.905L14.473 2H20v.34L18.404 3.88a.472.472 0 0 0-.178.451v11.335a.474.474 0 0 0 .178.452l1.559 1.542v.34H12.12v-.34l1.615-1.58c.159-.16.159-.207.159-.45V6.467L9.403 17.962h-.607L3.566 6.468v7.704c-.043.323.064.65.29.884l2.1 2.568v.338H0v-.338l2.1-2.568a1.03 1.03 0 0 0 .272-.884V5.264Z"
+    d: "M9.995 0A9.996 9.996 0 0 0 5.984 19.15a8.848 8.848 0 0 1 .172-2.296c.193-.811 1.286-5.445 1.286-5.445a3.863 3.863 0 0 1-.32-1.583c0-1.481.86-2.587 1.928-2.587a1.34 1.34 0 0 1 1.349 1.5 21.432 21.432 0 0 1-.883 3.545 1.547 1.547 0 0 0 1.578 1.925c1.894 0 3.17-2.432 3.17-5.314 0-2.19-1.475-3.83-4.16-3.83a4.733 4.733 0 0 0-4.917 4.54c-.003.082-.004.164-.003.245a2.882 2.882 0 0 0 .659 1.962c.165.135.223.36.143.558-.047.182-.157.628-.203.802a.342.342 0 0 1-.5.25c-1.397-.57-2.047-2.098-2.047-3.816 0-2.84 2.394-6.246 7.143-6.246 3.816 0 6.329 2.764 6.329 5.725 0 3.92-2.181 6.85-5.394 6.85a2.873 2.873 0 0 1-2.442-1.244s-.58 2.303-.703 2.747a8.331 8.331 0 0 1-1.006 2.14c5.293 1.569 10.855-1.452 12.423-6.745C21.153 7.542 18.134 1.979 12.84.412A10.007 10.007 0 0 0 9.995 0"
   })));
 };
 var _path$d;
@@ -4584,13 +6365,13 @@ function _extends$d() {
   };
   return _extends$d.apply(this, arguments);
 }
-var SvgLogoPinterest20 = function SvgLogoPinterest202(props) {
+var SvgLogoReddit20 = function SvgLogoReddit202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$d || (_path$d = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M9.995 0A9.996 9.996 0 0 0 5.984 19.15a8.848 8.848 0 0 1 .172-2.296c.193-.811 1.286-5.445 1.286-5.445a3.863 3.863 0 0 1-.32-1.583c0-1.481.86-2.587 1.928-2.587a1.34 1.34 0 0 1 1.349 1.5 21.432 21.432 0 0 1-.883 3.545 1.547 1.547 0 0 0 1.578 1.925c1.894 0 3.17-2.432 3.17-5.314 0-2.19-1.475-3.83-4.16-3.83a4.733 4.733 0 0 0-4.917 4.54c-.003.082-.004.164-.003.245a2.882 2.882 0 0 0 .659 1.962c.165.135.223.36.143.558-.047.182-.157.628-.203.802a.342.342 0 0 1-.5.25c-1.397-.57-2.047-2.098-2.047-3.816 0-2.84 2.394-6.246 7.143-6.246 3.816 0 6.329 2.764 6.329 5.725 0 3.92-2.181 6.85-5.394 6.85a2.873 2.873 0 0 1-2.442-1.244s-.58 2.303-.703 2.747a8.331 8.331 0 0 1-1.006 2.14c5.293 1.569 10.855-1.452 12.423-6.745C21.153 7.542 18.134 1.979 12.84.412A10.007 10.007 0 0 0 9.995 0"
+    d: "M13.438 13.082a1.501 1.501 0 1 1 1.502-1.502 1.503 1.503 0 0 1-1.44 1.562c-.026 0-.05.002-.077 0l.015-.06Zm.271 2.567A5.774 5.774 0 0 1 10 16.808a5.768 5.768 0 0 1-3.708-1.157.404.404 0 0 1 .57-.57 4.903 4.903 0 0 0 3.123.944 4.916 4.916 0 0 0 3.138-.915.419.419 0 1 1 .586.6v-.06Zm-8.724-4.128a1.501 1.501 0 1 1 3.002 0 1.501 1.501 0 0 1-3.002 0ZM20 10.018a2.192 2.192 0 0 0-3.709-1.5 10.681 10.681 0 0 0-5.78-1.848l.975-4.685 3.214.677a1.5 1.5 0 1 0 .194-.916l-3.678-.737a.466.466 0 0 0-.554.355v.006l-1.113 5.21a10.71 10.71 0 0 0-5.855 1.847 2.192 2.192 0 1 0-2.418 3.588 4.557 4.557 0 0 0 0 .662c0 3.363 3.92 6.095 8.754 6.095 4.835 0 8.753-2.732 8.753-6.095a4.29 4.29 0 0 0 0-.662A2.194 2.194 0 0 0 20 10.02Z"
   })));
 };
 var _path$c;
@@ -4608,13 +6389,13 @@ function _extends$c() {
   };
   return _extends$c.apply(this, arguments);
 }
-var SvgLogoReddit20 = function SvgLogoReddit202(props) {
+var SvgLogoRss20 = function SvgLogoRss202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$c || (_path$c = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M13.438 13.082a1.501 1.501 0 1 1 1.502-1.502 1.503 1.503 0 0 1-1.44 1.562c-.026 0-.05.002-.077 0l.015-.06Zm.271 2.567A5.774 5.774 0 0 1 10 16.808a5.768 5.768 0 0 1-3.708-1.157.404.404 0 0 1 .57-.57 4.903 4.903 0 0 0 3.123.944 4.916 4.916 0 0 0 3.138-.915.419.419 0 1 1 .586.6v-.06Zm-8.724-4.128a1.501 1.501 0 1 1 3.002 0 1.501 1.501 0 0 1-3.002 0ZM20 10.018a2.192 2.192 0 0 0-3.709-1.5 10.681 10.681 0 0 0-5.78-1.848l.975-4.685 3.214.677a1.5 1.5 0 1 0 .194-.916l-3.678-.737a.466.466 0 0 0-.554.355v.006l-1.113 5.21a10.71 10.71 0 0 0-5.855 1.847 2.192 2.192 0 1 0-2.418 3.588 4.557 4.557 0 0 0 0 .662c0 3.363 3.92 6.095 8.754 6.095 4.835 0 8.753-2.732 8.753-6.095a4.29 4.29 0 0 0 0-.662A2.194 2.194 0 0 0 20 10.02Z"
+    d: "M15 19C15 11.28 8.72 5 1 5a1 1 0 1 0 0 2c6.617 0 12 5.383 12 12a1 1 0 1 0 2 0m5 0C20 8.523 11.477 0 1 0a1 1 0 1 0 0 2c9.374 0 17 7.626 17 17a1 1 0 1 0 2 0m-10 0c0-4.963-4.037-9-9-9a1 1 0 1 0 0 2c3.859 0 7 3.141 7 7a1 1 0 1 0 2 0m-5-1.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"
   })));
 };
 var _path$b;
@@ -4632,13 +6413,13 @@ function _extends$b() {
   };
   return _extends$b.apply(this, arguments);
 }
-var SvgLogoRss20 = function SvgLogoRss202(props) {
+var SvgLogoSnapchat20 = function SvgLogoSnapchat202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$b || (_path$b = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M15 19C15 11.28 8.72 5 1 5a1 1 0 1 0 0 2c6.617 0 12 5.383 12 12a1 1 0 1 0 2 0m5 0C20 8.523 11.477 0 1 0a1 1 0 1 0 0 2c9.374 0 17 7.626 17 17a1 1 0 1 0 2 0m-10 0c0-4.963-4.037-9-9-9a1 1 0 1 0 0 2c3.859 0 7 3.141 7 7a1 1 0 1 0 2 0m-5-1.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"
+    d: "M10.126 19c-.051 0-.102-.002-.153-.004a1.674 1.674 0 0 1-.099.004c-1.185 0-1.946-.516-2.68-1.014-.509-.345-.988-.669-1.553-.76a5.282 5.282 0 0 0-.814-.065c-.478 0-.855.07-1.13.122-.167.031-.31.06-.42.06-.115 0-.239-.026-.293-.201-.046-.155-.08-.302-.113-.445-.084-.37-.143-.596-.305-.62C.687 15.797.15 15.42.03 15.148A.325.325 0 0 1 0 15.034a.205.205 0 0 1 .177-.21c2.89-.457 4.184-3.288 4.238-3.408l.005-.01c.177-.344.211-.642.103-.886-.198-.449-.845-.646-1.272-.775-.105-.033-.205-.062-.283-.092-.854-.324-.925-.656-.89-.825.056-.288.458-.49.783-.49a.57.57 0 0 1 .234.044c.384.173.73.26 1.03.26.412 0 .592-.166.614-.188-.01-.187-.023-.382-.037-.585-.086-1.31-.192-2.937.24-3.866 1.295-2.783 4.041-3 4.852-3L10.15 1h.048c.813 0 3.565.216 4.86 3.001.433.93.326 2.559.24 3.867l-.004.057-.033.53c.02.018.187.173.56.186.286-.01.613-.097.972-.259a.755.755 0 0 1 .3-.056c.122 0 .245.023.347.063l.007.003c.29.098.48.292.484.497.004.191-.15.48-.898.764-.078.029-.177.06-.282.092-.43.13-1.075.326-1.273.774-.11.244-.074.543.103.887 0 .003.003.006.004.01.054.12 1.349 2.95 4.239 3.407a.206.206 0 0 1 .177.211.356.356 0 0 1-.03.116c-.12.268-.656.646-2.536.925-.154.023-.214.215-.305.617-.033.147-.067.29-.114.442-.04.13-.125.193-.268.193h-.024c-.1 0-.241-.018-.421-.052a5.942 5.942 0 0 0-1.13-.114c-.264 0-.538.022-.814.065-.564.091-1.043.415-1.549.759-.737.5-1.497 1.015-2.683 1.015"
   })));
 };
 var _path$a;
@@ -4656,13 +6437,13 @@ function _extends$a() {
   };
   return _extends$a.apply(this, arguments);
 }
-var SvgLogoSnapchat20 = function SvgLogoSnapchat202(props) {
+var SvgLogoSoundcloud20 = function SvgLogoSoundcloud202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$a || (_path$a = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M10.126 19c-.051 0-.102-.002-.153-.004a1.674 1.674 0 0 1-.099.004c-1.185 0-1.946-.516-2.68-1.014-.509-.345-.988-.669-1.553-.76a5.282 5.282 0 0 0-.814-.065c-.478 0-.855.07-1.13.122-.167.031-.31.06-.42.06-.115 0-.239-.026-.293-.201-.046-.155-.08-.302-.113-.445-.084-.37-.143-.596-.305-.62C.687 15.797.15 15.42.03 15.148A.325.325 0 0 1 0 15.034a.205.205 0 0 1 .177-.21c2.89-.457 4.184-3.288 4.238-3.408l.005-.01c.177-.344.211-.642.103-.886-.198-.449-.845-.646-1.272-.775-.105-.033-.205-.062-.283-.092-.854-.324-.925-.656-.89-.825.056-.288.458-.49.783-.49a.57.57 0 0 1 .234.044c.384.173.73.26 1.03.26.412 0 .592-.166.614-.188-.01-.187-.023-.382-.037-.585-.086-1.31-.192-2.937.24-3.866 1.295-2.783 4.041-3 4.852-3L10.15 1h.048c.813 0 3.565.216 4.86 3.001.433.93.326 2.559.24 3.867l-.004.057-.033.53c.02.018.187.173.56.186.286-.01.613-.097.972-.259a.755.755 0 0 1 .3-.056c.122 0 .245.023.347.063l.007.003c.29.098.48.292.484.497.004.191-.15.48-.898.764-.078.029-.177.06-.282.092-.43.13-1.075.326-1.273.774-.11.244-.074.543.103.887 0 .003.003.006.004.01.054.12 1.349 2.95 4.239 3.407a.206.206 0 0 1 .177.211.356.356 0 0 1-.03.116c-.12.268-.656.646-2.536.925-.154.023-.214.215-.305.617-.033.147-.067.29-.114.442-.04.13-.125.193-.268.193h-.024c-.1 0-.241-.018-.421-.052a5.942 5.942 0 0 0-1.13-.114c-.264 0-.538.022-.814.065-.564.091-1.043.415-1.549.759-.737.5-1.497 1.015-2.683 1.015"
+    d: "M0 13.23c0 .252.09.442.27.571.18.129.372.175.577.137.192-.038.327-.107.405-.208.077-.101.116-.267.116-.5v-2.736a.68.68 0 0 0-.2-.496.661.661 0 0 0-.489-.204.65.65 0 0 0-.479.204.68.68 0 0 0-.2.496v2.736Zm2.141 1.171c0 .183.063.319.19.41.127.092.29.137.489.137.204 0 .37-.045.498-.137.127-.091.191-.227.191-.41v-6.38a.67.67 0 0 0-.2-.487.663.663 0 0 0-.489-.202.648.648 0 0 0-.479.202.667.667 0 0 0-.2.487v6.38Zm2.13.302c0 .182.066.319.196.41a.854.854 0 0 0 .503.137.812.812 0 0 0 .488-.137c.127-.091.191-.228.191-.41V8.879a.693.693 0 0 0-.2-.5.645.645 0 0 0-.479-.208.667.667 0 0 0-.493.208.686.686 0 0 0-.206.5v5.824Zm2.141.028c0 .346.23.519.689.519.459 0 .689-.173.689-.519V5.293c0-.529-.17-.889-.479-.928-.209-.028-.402-.027-.601.143-.198.17-.298.477-.298.785v9.438Zm2.178.273V4.736c0-.327.096-.522.288-.585a5.392 5.392 0 0 1 3.891.529 5.487 5.487 0 0 1 1.986 1.854 5.58 5.58 0 0 1 .88 2.591 3.01 3.01 0 0 1 1.21-.246c.868 0 1.612.312 2.229.935S20 11.185 20 12.06a3.09 3.09 0 0 1-.926 2.256c-.617.623-1.358.935-2.22.935l-8.096-.01a.221.221 0 0 1-.126-.104.285.285 0 0 1-.042-.133Z"
   })));
 };
 var _path$9;
@@ -4680,13 +6461,13 @@ function _extends$9() {
   };
   return _extends$9.apply(this, arguments);
 }
-var SvgLogoSoundcloud20 = function SvgLogoSoundcloud202(props) {
+var SvgLogoSpotify20 = function SvgLogoSpotify202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$9 || (_path$9 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M0 13.23c0 .252.09.442.27.571.18.129.372.175.577.137.192-.038.327-.107.405-.208.077-.101.116-.267.116-.5v-2.736a.68.68 0 0 0-.2-.496.661.661 0 0 0-.489-.204.65.65 0 0 0-.479.204.68.68 0 0 0-.2.496v2.736Zm2.141 1.171c0 .183.063.319.19.41.127.092.29.137.489.137.204 0 .37-.045.498-.137.127-.091.191-.227.191-.41v-6.38a.67.67 0 0 0-.2-.487.663.663 0 0 0-.489-.202.648.648 0 0 0-.479.202.667.667 0 0 0-.2.487v6.38Zm2.13.302c0 .182.066.319.196.41a.854.854 0 0 0 .503.137.812.812 0 0 0 .488-.137c.127-.091.191-.228.191-.41V8.879a.693.693 0 0 0-.2-.5.645.645 0 0 0-.479-.208.667.667 0 0 0-.493.208.686.686 0 0 0-.206.5v5.824Zm2.141.028c0 .346.23.519.689.519.459 0 .689-.173.689-.519V5.293c0-.529-.17-.889-.479-.928-.209-.028-.402-.027-.601.143-.198.17-.298.477-.298.785v9.438Zm2.178.273V4.736c0-.327.096-.522.288-.585a5.392 5.392 0 0 1 3.891.529 5.487 5.487 0 0 1 1.986 1.854 5.58 5.58 0 0 1 .88 2.591 3.01 3.01 0 0 1 1.21-.246c.868 0 1.612.312 2.229.935S20 11.185 20 12.06a3.09 3.09 0 0 1-.926 2.256c-.617.623-1.358.935-2.22.935l-8.096-.01a.221.221 0 0 1-.126-.104.285.285 0 0 1-.042-.133Z"
+    d: "M10 0C4.477 0 0 4.477 0 10c0 5.522 4.477 10 10 10 5.522 0 10-4.478 10-10-.016-5.516-4.483-9.984-10-10m4.6 14.454a.594.594 0 0 1-.81.225c-.014-.007-.027-.016-.04-.025-2.35-1.454-5.3-1.75-8.8-.95a.618.618 0 1 1-.3-1.199c3.8-.851 7.1-.5 9.7 1.099a.6.6 0 0 1 .277.801c-.008.017-.018.033-.027.049m1.205-2.754a.753.753 0 0 1-1.034.26l-.016-.01A12.959 12.959 0 0 0 4.8 10.8a.76.76 0 0 1-.455-1.45A14.625 14.625 0 0 1 15.6 10.7a.706.706 0 0 1 .216.975c-.004.009-.01.016-.016.025m.1-2.8C12.7 7 7.35 6.8 4.3 7.75a.918.918 0 0 1-.617-1.728c.024-.008.047-.016.071-.022 3.551-1.05 9.4-.85 13.1 1.35.45.267.605.843.35 1.3a1.047 1.047 0 0 1-1.3.25"
   })));
 };
 var _path$8;
@@ -4704,13 +6485,13 @@ function _extends$8() {
   };
   return _extends$8.apply(this, arguments);
 }
-var SvgLogoSpotify20 = function SvgLogoSpotify202(props) {
+var SvgLogoTelegram20 = function SvgLogoTelegram202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$8 || (_path$8 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M10 0C4.477 0 0 4.477 0 10c0 5.522 4.477 10 10 10 5.522 0 10-4.478 10-10-.016-5.516-4.483-9.984-10-10m4.6 14.454a.594.594 0 0 1-.81.225c-.014-.007-.027-.016-.04-.025-2.35-1.454-5.3-1.75-8.8-.95a.618.618 0 1 1-.3-1.199c3.8-.851 7.1-.5 9.7 1.099a.6.6 0 0 1 .277.801c-.008.017-.018.033-.027.049m1.205-2.754a.753.753 0 0 1-1.034.26l-.016-.01A12.959 12.959 0 0 0 4.8 10.8a.76.76 0 0 1-.455-1.45A14.625 14.625 0 0 1 15.6 10.7a.706.706 0 0 1 .216.975c-.004.009-.01.016-.016.025m.1-2.8C12.7 7 7.35 6.8 4.3 7.75a.918.918 0 0 1-.617-1.728c.024-.008.047-.016.071-.022 3.551-1.05 9.4-.85 13.1 1.35.45.267.605.843.35 1.3a1.047 1.047 0 0 1-1.3.25"
+    d: "M18.54 1.2.778 8.458s-.84.3-.774.852c.066.553.752.807.752.807l4.468 1.566 10.728-7.096s.62-.392.597 0c0 0 .111.07-.22.391-.333.324-8.429 7.904-8.429 7.904l-.583 5.182c.247.112.473-.066.473-.066l2.887-2.742 4.501 3.593c1.216.554 1.66-.598 1.66-.598L20 1.638c0-1.106-1.46-.438-1.46-.438"
   })));
 };
 var _path$7;
@@ -4728,13 +6509,13 @@ function _extends$7() {
   };
   return _extends$7.apply(this, arguments);
 }
-var SvgLogoTelegram20 = function SvgLogoTelegram202(props) {
+var SvgLogoTumblr20 = function SvgLogoTumblr202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$7 || (_path$7 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M18.54 1.2.778 8.458s-.84.3-.774.852c.066.553.752.807.752.807l4.468 1.566 10.728-7.096s.62-.392.597 0c0 0 .111.07-.22.391-.333.324-8.429 7.904-8.429 7.904l-.583 5.182c.247.112.473-.066.473-.066l2.887-2.742 4.501 3.593c1.216.554 1.66-.598 1.66-.598L20 1.638c0-1.106-1.46-.438-1.46-.438"
+    d: "M15.083 15.965a4.357 4.357 0 0 1-1.543.345 1.728 1.728 0 0 1-1.842-1.97V8.115h3.844V5.087h-3.835V0H8.904a.154.154 0 0 0-.138.15A6.12 6.12 0 0 1 5 5.533v2.582h1.937v6.533c-.034 2.921 2.329 5.318 5.278 5.351.157.002.314-.003.472-.014 1.407-.025 2.968-.636 3.313-1.171l-.917-2.851"
   })));
 };
 var _path$6;
@@ -4752,13 +6533,13 @@ function _extends$6() {
   };
   return _extends$6.apply(this, arguments);
 }
-var SvgLogoTumblr20 = function SvgLogoTumblr202(props) {
+var SvgLogoTwitch20 = function SvgLogoTwitch202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$6 || (_path$6 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M15.083 15.965a4.357 4.357 0 0 1-1.543.345 1.728 1.728 0 0 1-1.842-1.97V8.115h3.844V5.087h-3.835V0H8.904a.154.154 0 0 0-.138.15A6.12 6.12 0 0 1 5 5.533v2.582h1.937v6.533c-.034 2.921 2.329 5.318 5.278 5.351.157.002.314-.003.472-.014 1.407-.025 2.968-.636 3.313-1.171l-.917-2.851"
+    d: "M1.406 0 0 3.433v14.03h5.001V20h2.812l2.656-2.537h4.063L20 12.238V0H1.406zm1.719 1.791h15v9.552L15 14.328h-5l-2.656 2.537v-2.537H3.125V1.791zm10 8.651h1.876V5.224h-1.876v5.218zm-5 0H10V5.224H8.125v5.218z"
   })));
 };
 var _path$5;
@@ -4776,13 +6557,13 @@ function _extends$5() {
   };
   return _extends$5.apply(this, arguments);
 }
-var SvgLogoTwitch20 = function SvgLogoTwitch202(props) {
+var SvgLogoTwitter20 = function SvgLogoTwitter202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$5 || (_path$5 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M1.406 0 0 3.433v14.03h5.001V20h2.812l2.656-2.537h4.063L20 12.238V0H1.406zm1.719 1.791h15v9.552L15 14.328h-5l-2.656 2.537v-2.537H3.125V1.791zm10 8.651h1.876V5.224h-1.876v5.218zm-5 0H10V5.224H8.125v5.218z"
+    d: "M6.29 18.254c7.547 0 11.675-6.253 11.675-11.675 0-.178-.004-.354-.012-.53A8.339 8.339 0 0 0 20 3.924a8.165 8.165 0 0 1-2.356.646 4.12 4.12 0 0 0 1.804-2.27 8.198 8.198 0 0 1-2.606.996A4.104 4.104 0 0 0 9.85 7.039a11.652 11.652 0 0 1-8.458-4.287 4.101 4.101 0 0 0 1.27 5.477 4.058 4.058 0 0 1-1.858-.513l-.001.052a4.104 4.104 0 0 0 3.292 4.023 4.107 4.107 0 0 1-1.853.07 4.107 4.107 0 0 0 3.833 2.85 8.233 8.233 0 0 1-5.096 1.757A8.33 8.33 0 0 1 0 16.411a11.614 11.614 0 0 0 6.29 1.843"
   })));
 };
 var _path$4;
@@ -4800,13 +6581,13 @@ function _extends$4() {
   };
   return _extends$4.apply(this, arguments);
 }
-var SvgLogoTwitter20 = function SvgLogoTwitter202(props) {
+var SvgLogoWhatsapp20 = function SvgLogoWhatsapp202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$4 || (_path$4 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M6.29 18.254c7.547 0 11.675-6.253 11.675-11.675 0-.178-.004-.354-.012-.53A8.339 8.339 0 0 0 20 3.924a8.165 8.165 0 0 1-2.356.646 4.12 4.12 0 0 0 1.804-2.27 8.198 8.198 0 0 1-2.606.996A4.104 4.104 0 0 0 9.85 7.039a11.652 11.652 0 0 1-8.458-4.287 4.101 4.101 0 0 0 1.27 5.477 4.058 4.058 0 0 1-1.858-.513l-.001.052a4.104 4.104 0 0 0 3.292 4.023 4.107 4.107 0 0 1-1.853.07 4.107 4.107 0 0 0 3.833 2.85 8.233 8.233 0 0 1-5.096 1.757A8.33 8.33 0 0 1 0 16.411a11.614 11.614 0 0 0 6.29 1.843"
+    d: "M14.785 11.957c-.246-.135-1.455-.783-1.683-.873-.226-.091-.39-.14-.568.104-.177.242-.679.784-.83.944-.152.162-.3.177-.546.043-.246-.135-1.043-.428-1.969-1.31-.719-.687-1.192-1.52-1.329-1.774-.137-.255 0-.384.13-.503.116-.107.261-.281.392-.421.13-.142.176-.244.266-.406.09-.163.054-.31-.005-.437-.058-.125-.512-1.369-.703-1.875-.19-.505-.4-.43-.548-.436-.146-.005-.312-.032-.479-.037a.925.925 0 0 0-.68.285c-.24.24-.909.819-.956 2.042-.046 1.224.807 2.44.926 2.61.12.17 1.63 2.822 4.14 3.913 2.51 1.091 2.523.758 2.984.734.461-.024 1.505-.546 1.736-1.12.231-.572.25-1.07.191-1.175-.059-.107-.223-.176-.469-.309m-4.604 5.896a8.18 8.18 0 0 1-4.497-1.34l-3.14.997 1.02-3.011a8.025 8.025 0 0 1-1.556-4.755c0-4.474 3.667-8.112 8.173-8.112 4.507 0 8.173 3.638 8.173 8.111 0 4.472-3.666 8.11-8.173 8.11m0-17.852C4.76 0 .363 4.362.363 9.742c0 1.841.515 3.563 1.41 5.03L0 20l5.435-1.727a9.838 9.838 0 0 0 4.746 1.212c5.423 0 9.82-4.362 9.82-9.742 0-5.381-4.397-9.744-9.82-9.744"
   })));
 };
 var _path$3;
@@ -4824,13 +6605,13 @@ function _extends$3() {
   };
   return _extends$3.apply(this, arguments);
 }
-var SvgLogoWhatsapp20 = function SvgLogoWhatsapp202(props) {
+var SvgLogoVimeo20 = function SvgLogoVimeo202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$3 || (_path$3 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M14.785 11.957c-.246-.135-1.455-.783-1.683-.873-.226-.091-.39-.14-.568.104-.177.242-.679.784-.83.944-.152.162-.3.177-.546.043-.246-.135-1.043-.428-1.969-1.31-.719-.687-1.192-1.52-1.329-1.774-.137-.255 0-.384.13-.503.116-.107.261-.281.392-.421.13-.142.176-.244.266-.406.09-.163.054-.31-.005-.437-.058-.125-.512-1.369-.703-1.875-.19-.505-.4-.43-.548-.436-.146-.005-.312-.032-.479-.037a.925.925 0 0 0-.68.285c-.24.24-.909.819-.956 2.042-.046 1.224.807 2.44.926 2.61.12.17 1.63 2.822 4.14 3.913 2.51 1.091 2.523.758 2.984.734.461-.024 1.505-.546 1.736-1.12.231-.572.25-1.07.191-1.175-.059-.107-.223-.176-.469-.309m-4.604 5.896a8.18 8.18 0 0 1-4.497-1.34l-3.14.997 1.02-3.011a8.025 8.025 0 0 1-1.556-4.755c0-4.474 3.667-8.112 8.173-8.112 4.507 0 8.173 3.638 8.173 8.111 0 4.472-3.666 8.11-8.173 8.11m0-17.852C4.76 0 .363 4.362.363 9.742c0 1.841.515 3.563 1.41 5.03L0 20l5.435-1.727a9.838 9.838 0 0 0 4.746 1.212c5.423 0 9.82-4.362 9.82-9.742 0-5.381-4.397-9.744-9.82-9.744"
+    d: "M19.992 5.157c-.087 2.029-1.445 4.804-4.076 8.323C13.197 17.16 10.895 19 9.011 19c-1.165 0-2.151-1.121-2.957-3.364-.54-2.06-1.08-4.12-1.615-6.174-.6-2.246-1.244-3.37-1.93-3.37-.57.248-1.1.58-1.568.985L0 5.816c.986-.9 1.958-1.804 2.916-2.71 1.313-1.184 2.299-1.808 2.958-1.871 1.553-.158 2.51.948 2.87 3.319.386 2.558.654 4.148.805 4.772.45 2.12.943 3.18 1.479 3.178.417 0 1.045-.685 1.883-2.055a8.28 8.28 0 0 0 1.345-3.134c.12-1.186-.329-1.775-1.345-1.775a3.7 3.7 0 0 0-1.48.326c.989-3.336 2.873-4.957 5.652-4.862 2.059.06 3.027 1.446 2.907 4.159"
   })));
 };
 var _path$2;
@@ -4848,13 +6629,13 @@ function _extends$2() {
   };
   return _extends$2.apply(this, arguments);
 }
-var SvgLogoVimeo20 = function SvgLogoVimeo202(props) {
+var SvgLogoYelp20 = function SvgLogoYelp202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$2 || (_path$2 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M19.992 5.157c-.087 2.029-1.445 4.804-4.076 8.323C13.197 17.16 10.895 19 9.011 19c-1.165 0-2.151-1.121-2.957-3.364-.54-2.06-1.08-4.12-1.615-6.174-.6-2.246-1.244-3.37-1.93-3.37-.57.248-1.1.58-1.568.985L0 5.816c.986-.9 1.958-1.804 2.916-2.71 1.313-1.184 2.299-1.808 2.958-1.871 1.553-.158 2.51.948 2.87 3.319.386 2.558.654 4.148.805 4.772.45 2.12.943 3.18 1.479 3.178.417 0 1.045-.685 1.883-2.055a8.28 8.28 0 0 0 1.345-3.134c.12-1.186-.329-1.775-1.345-1.775a3.7 3.7 0 0 0-1.48.326c.989-3.336 2.873-4.957 5.652-4.862 2.059.06 3.027 1.446 2.907 4.159"
+    d: "M6.861.39a14.07 14.07 0 0 0-2.298.789c-.504.223-.693.8-.415 1.25l4.37 7.047c.49.79 1.787.467 1.787-.446V.894c0-.52-.475-.932-1.03-.891C8.471.062 7.665.19 6.86.39m11.06 8.885a7.736 7.736 0 0 0-2.116-2.71c-.433-.355-1.104-.273-1.427.173l-2.6 3.59c-.5.69.198 1.585 1.058 1.356l4.47-1.193c.557-.15.844-.721.614-1.216m-6.22 5.164 2.465 3.673c.307.458.977.558 1.425.215a7.851 7.851 0 0 0 2.21-2.638c.25-.486-.019-1.067-.569-1.234l-4.422-1.337c-.85-.258-1.583.615-1.109 1.32m-6.099 4.295a8.681 8.681 0 0 0 3.332 1.255c.572.089 1.098-.31 1.118-.85l.163-4.328c.031-.833-1.072-1.247-1.67-.628L5.432 17.4c-.386.4-.307 1.027.17 1.333M3.758 9.387l4.18 1.899c.804.365.68 1.465-.188 1.667L3.24 14c-.563.13-1.118-.23-1.185-.767a7.178 7.178 0 0 1 .377-3.33c.184-.51.81-.751 1.328-.516"
   })));
 };
 var _path$1;
@@ -4872,36 +6653,12 @@ function _extends$1() {
   };
   return _extends$1.apply(this, arguments);
 }
-var SvgLogoYelp20 = function SvgLogoYelp202(props) {
+var SvgLogoYoutube20 = function SvgLogoYoutube202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$1 || (_path$1 = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M6.861.39a14.07 14.07 0 0 0-2.298.789c-.504.223-.693.8-.415 1.25l4.37 7.047c.49.79 1.787.467 1.787-.446V.894c0-.52-.475-.932-1.03-.891C8.471.062 7.665.19 6.86.39m11.06 8.885a7.736 7.736 0 0 0-2.116-2.71c-.433-.355-1.104-.273-1.427.173l-2.6 3.59c-.5.69.198 1.585 1.058 1.356l4.47-1.193c.557-.15.844-.721.614-1.216m-6.22 5.164 2.465 3.673c.307.458.977.558 1.425.215a7.851 7.851 0 0 0 2.21-2.638c.25-.486-.019-1.067-.569-1.234l-4.422-1.337c-.85-.258-1.583.615-1.109 1.32m-6.099 4.295a8.681 8.681 0 0 0 3.332 1.255c.572.089 1.098-.31 1.118-.85l.163-4.328c.031-.833-1.072-1.247-1.67-.628L5.432 17.4c-.386.4-.307 1.027.17 1.333M3.758 9.387l4.18 1.899c.804.365.68 1.465-.188 1.667L3.24 14c-.563.13-1.118-.23-1.185-.767a7.178 7.178 0 0 1 .377-3.33c.184-.51.81-.751 1.328-.516"
-  })));
-};
-var _path;
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-var SvgLogoYoutube20 = function SvgLogoYoutube202(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 20,
-    height: 20
-  }, props), _path || (_path = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M8 13V7l5 3-5 3Zm11.582-7.814a2.502 2.502 0 0 0-1.769-1.768C16.254 3 10 3 10 3s-6.254 0-7.814.418c-.86.23-1.538.908-1.768 1.768C0 6.746 0 10 0 10s0 3.254.418 4.813c.23.862.908 1.54 1.768 1.769C3.746 17 10 17 10 17s6.254 0 7.813-.418a2.498 2.498 0 0 0 1.769-1.769C20 13.254 20 10 20 10s0-3.254-.418-4.814Z"
   })));
 };
@@ -5041,7 +6798,7 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container = styled__default["default"].div`
+const Container$1 = styled__default["default"].div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -5125,7 +6882,7 @@ const SocialLinks = React.forwardRef(function SocialLinks2({
 }, ref) {
   const fillData = useColor(fill);
   const backgroundColorData = useColor(backgroundColor);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container$1, {
     ref,
     id,
     alignment,
@@ -5161,7 +6918,7 @@ const SocialLinks = React.forwardRef(function SocialLinks2({
     })
   });
 });
-function registerComponent$1(runtime) {
+function registerComponent$2(runtime) {
   return runtime.registerComponent(SocialLinks, {
     type: "./components/SocialLinks/index.js",
     label: "Social Links",
@@ -5409,10 +7166,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 +7207,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 +7335,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()], []);
@@ -5698,7 +7455,7 @@ const Text = React.forwardRef(function Text2({
     onKeyDown: handleKeyDown
   });
 });
-function registerComponent(runtime) {
+function registerComponent$1(runtime) {
   return runtime.registerComponent(Text, {
     type: "./components/Text/index.js",
     label: "Text",
@@ -5776,18 +7533,103 @@ function registerComponent(runtime) {
     }
   });
 }
+const Container = styled__default["default"].div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  ${cssWidth("560px")}
+  ${cssMargin()}
+  ${cssBorderRadius()}
+`;
+const ASPECT_RATIO = 16 / 9;
+const Video = React.forwardRef(function Video2({
+  id,
+  video,
+  width,
+  margin,
+  borderRadius
+}, ref) {
+  const canPlayUrl = video && video.url != null && ReactPlayer__default["default"].canPlay(video.url);
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
+    ref,
+    id,
+    width,
+    margin,
+    borderRadius,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      style: {
+        position: "relative",
+        paddingTop: `${100 / ASPECT_RATIO}%`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: canPlayUrl === true ? /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], __spreadProps(__spreadValues({}, video), {
+          width: "100%",
+          height: "100%",
+          config: {
+            vimeo: {
+              playerOptions: {
+                background: video != null && !video.controls
+              }
+            },
+            wistia: {
+              options: {
+                endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
+              }
+            }
+          }
+        })) : /* @__PURE__ */ jsxRuntime.jsx("img", {
+          width: "100%",
+          src: placeholders.video.src,
+          alt: "Video Placeholder"
+        })
+      })
+    })
+  });
+});
+function registerComponent(runtime) {
+  return runtime.registerComponent(Video, {
+    type: "./components/Video/index.js",
+    label: "Video",
+    icon: "Video40",
+    props: {
+      id: descriptors.ElementID(),
+      video: descriptors.Video({
+        preset: {
+          controls: true
+        }
+      }),
+      width: descriptors.Width({
+        defaultValue: {
+          value: 560,
+          unit: "px"
+        }
+      }),
+      margin: descriptors.Margin(),
+      borderRadius: descriptors.BorderRadius()
+    }
+  });
+}
 function registerBuiltinComponents(runtime) {
-  const unregisterBoxComponent = registerComponent$a(runtime);
-  const unregisterButtonComponent = registerComponent$9(runtime);
-  const unregisterCarouselComponent = registerComponent$7(runtime);
-  const unregisterCountdownComponent = registerComponent$6(runtime);
-  const unregisterDividerComponent = registerComponent$5(runtime);
-  const unregisterEmbedComponent = registerComponent$4(runtime);
-  const unregisterImageComponent = registerComponent$8(runtime);
-  const unregisterNavigationComponent = registerComponent$3(runtime);
-  const unregisterRootComponent = registerComponent$2(runtime);
-  const unregisterSocialLinksComponent = registerComponent$1(runtime);
-  const unregisterTextComponent = registerComponent(runtime);
+  const unregisterBoxComponent = registerComponent$c(runtime);
+  const unregisterButtonComponent = registerComponent$b(runtime);
+  const unregisterCarouselComponent = registerComponent$9(runtime);
+  const unregisterCountdownComponent = registerComponent$8(runtime);
+  const unregisterDividerComponent = registerComponent$7(runtime);
+  const unregisterEmbedComponent = registerComponent$6(runtime);
+  const unregisterFormComponent = registerComponent$5(runtime);
+  const unregisterImageComponent = registerComponent$a(runtime);
+  const unregisterNavigationComponent = registerComponent$4(runtime);
+  const unregisterRootComponent = registerComponent$3(runtime);
+  const unregisterSocialLinksComponent = registerComponent$2(runtime);
+  const unregisterTextComponent = registerComponent$1(runtime);
+  const unregisterVideoComponent = registerComponent(runtime);
   return () => {
     unregisterBoxComponent();
     unregisterButtonComponent();
@@ -5795,14 +7637,67 @@ function registerBuiltinComponents(runtime) {
     unregisterCountdownComponent();
     unregisterDividerComponent();
     unregisterEmbedComponent();
+    unregisterFormComponent();
     unregisterImageComponent();
     unregisterNavigationComponent();
     unregisterRootComponent();
     unregisterSocialLinksComponent();
     unregisterTextComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
+  };
+}
+var _path;
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
   };
+  return _extends.apply(this, arguments);
 }
-const contextDefaultValue = configureStore();
+var SvgWarning20 = function SvgWarning202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends({
+    width: 20,
+    height: 20,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.899 18H17.1a1.75 1.75 0 0 0 1.549-2.565L11.549 1.942c-.656-1.246-2.442-1.246-3.098 0L1.35 15.435A1.75 1.75 0 0 0 2.899 18ZM9 6a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V6Zm2.25 8.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"
+  })));
+};
+const ErrorDiv = styled__default["default"]("div")`
+  width: 100%;
+  height: 54px;
+  background-color: #fcedf2;
+  border-radius: 6px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #c73e6d;
+  fill: currentColor;
+  font-family: Heebo, sans-serif;
+  font-size: 16px;
+`;
+const FallbackComponent = React.forwardRef(function FallbackComponent2({
+  text
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ErrorDiv, {
+    ref,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(SvgWarning20, {}), /* @__PURE__ */ jsxRuntime.jsx("span", {
+      children: text
+    })]
+  });
+});
+const contextDefaultValue = reactPage.configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -5828,39 +7723,31 @@ function createReactRuntime(store) {
 const ReactRuntime = createReactRuntime(contextDefaultValue);
 const Context = React.createContext(contextDefaultValue);
 function RuntimeProvider({
+  client: client2,
   children,
-  defaultRootElements,
-  registerComponents,
-  makeswiftApiEndpoint
+  rootElements
 }) {
   const [store, setStore] = React.useState(() => {
-    const store2 = configureStore({
+    const store2 = reactPage.configureStore({
       preloadedState: contextDefaultValue.getState(),
-      rootElements: defaultRootElements
+      rootElements
     });
     const runtime = createReactRuntime(store2);
     registerBuiltinComponents(runtime);
-    registerComponents == null ? void 0 : registerComponents(runtime);
     return store2;
   });
-  const [client$1, setClient] = React.useState(new client.ApolloClient({
-    uri: makeswiftApiEndpoint,
-    cache: new client.InMemoryCache()
-  }));
-  React.useEffect(() => {
-    setClient(({
-      cache
-    }) => new client.ApolloClient({
-      uri: makeswiftApiEndpoint,
-      cache
-    }));
-  }, [makeswiftApiEndpoint]);
   React.useEffect(() => {
     return registerBuiltinComponents(createReactRuntime(store));
   }, [store]);
   React.useEffect(() => {
-    return registerComponents == null ? void 0 : registerComponents(createReactRuntime(store));
-  }, [store, registerComponents]);
+    var _a;
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(reactPage.createDocument(documentKey, rootElement))));
+    return () => {
+      unregisterDocuments.forEach((unregisterDocument) => {
+        unregisterDocument();
+      });
+    };
+  }, [store, rootElements]);
   React.useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (isInBuilder)
@@ -5871,10 +7758,10 @@ function RuntimeProvider({
       });
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client: client$1
+        client: client2.apolloClient
       }));
     }
-  }, [client$1]);
+  }, [client2]);
   React.useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (!isInBuilder)
@@ -5898,12 +7785,31 @@ function RuntimeProvider({
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
     value: store,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ApolloProvider, {
-      client: client$1,
+    children: /* @__PURE__ */ jsxRuntime.jsx(MakeswiftProvider, {
+      client: client2,
       children
     })
   });
 }
+const PageContext = React.createContext(null);
+function usePageIdOrNull() {
+  return React.useContext(PageContext);
+}
+function usePageId() {
+  const pageIdOrNull = usePageIdOrNull();
+  if (pageIdOrNull == null)
+    throw new Error("`usePageId` must be used with `<PageProvider>`");
+  return pageIdOrNull;
+}
+function PageProvider({
+  id,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, {
+    value: id,
+    children
+  });
+}
 const DocumentContext = React.createContext(null);
 function useDocumentKey() {
   return React.useContext(DocumentContext);
@@ -5913,17 +7819,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);
@@ -5934,15 +7840,9 @@ const ElementData = React.memo(React.forwardRef(function ElementData2({
 }, ref) {
   const Component = useComponent(elementData.type);
   if (Component == null) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
-      children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
-        children: "Component Not Found"
-      }), /* @__PURE__ */ jsxRuntime.jsx("pre", {
-        children: /* @__PURE__ */ jsxRuntime.jsx("code", {
-          children: JSON.stringify(elementData, null, 2)
-        })
-      })]
+      text: "Component not found"
     });
   }
   return /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, elementData.props), {
@@ -5953,24 +7853,52 @@ 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.jsx(FallbackComponent, {
+      ref,
+      text: "Something went wrong!"
+    });
+  }
+  if (globalElementData == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref,
+      text: "This global component doesn't exist"
+    });
+  }
+  return elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
+    document: elementReferenceDocument,
+    ref
+  }) : /* @__PURE__ */ jsxRuntime.jsx(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 +7909,42 @@ 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) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
-        children: "Document Not Found"
-      }), /* @__PURE__ */ jsxRuntime.jsx("pre", {
-        children: /* @__PURE__ */ jsxRuntime.jsx("code", {
-          children: JSON.stringify({
-            documentKey
-          }, null, 2)
-        })
-      })]
-    });
-  }
+}));
+const Document = React.memo(React.forwardRef(function Document2({
+  document
+}, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(DocumentContext.Provider, {
-    value: documentKey,
+    value: document.key,
     children: /* @__PURE__ */ jsxRuntime.jsx(Element$1, {
-      element: documentRootElement
+      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.jsx(FallbackComponent, {
+      ref,
+      text: "Document not found"
+    });
+  }
+  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 +7955,19 @@ 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.MakeswiftClient = MakeswiftClient;
 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 +7977,16 @@ 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$c;
+exports.useBackgrounds = useBackgrounds;
+exports.useBorder = useBorder;
+exports.useBoxShadow = useBoxShadow;
+exports.useColor = useColor;
+exports.useFile = useFile;
 exports.useIsInBuilder = useIsInBuilder;
+exports.useMediaQuery = useMediaQuery;
+exports.usePage = usePage;
+exports.usePageId = usePageId;
+exports.useTable = useTable;
 //# sourceMappingURL=react.cjs2.js.map