@makeswift/runtime 0.0.0-f94dde1 → 0.0.3

package/dist/{react.es2.js → index.es.js}

@@ -29,239 +29,41 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import * as React from "react";
 import { forwardRef, createContext, useContext, useMemo, useState, useLayoutEffect, useCallback, useEffect, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, memo } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
-import { gql, useQuery as useQuery$1, ApolloClient, InMemoryCache } from "@apollo/client";
-import { combineReducers, createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import { A as ActionTypes, r as registerComponentHandleEffect, e as mountComponentEffect, f as registerComponentEffect, g as registerReactComponentEffect } from "./actions.es.js";
-import { T as Types, E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea, o as NavigationLinks, p as SocialLinks$1, q as RichText } from "./descriptors.es.js";
+import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
+import { a as createDocumentReference, g as getComponentPropControllerDescriptors, b as getIsInBuilder, d as configureStore, e as getElementId, f as getReactComponent, h as getDocument, i as isElementReference, c as createDocument } from "./react-page.es.js";
+import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
 import styled, { css, keyframes, createGlobalStyle } from "styled-components";
 import { useReducedMotion, useAnimation, motion } from "framer-motion";
+import { cx, css as css$1 } from "@emotion/css";
+import { getDataFromTree } from "@apollo/client/react/ssr";
+import { KeyUtils, Value } from "slate";
+import uuid from "uuid/v4";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
-import NextImage from "next/image";
-import ReactPlayer from "react-player";
+import "html-react-parser";
+import "next/head";
+import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText, V as Video$1, T as Types, t as WidthControlValueFormats } from "./descriptors.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import NextLink from "next/link";
 import { useGesture } from "react-use-gesture";
 import { wrap } from "@popmotion/popcorn";
-import uuid from "uuid/v4";
+import NextImage from "next/image";
+import { Field as Field$1, getIn, Formik } from "formik";
+import { p as parse, c as createBox, g as getBox } from "./box-models.es.js";
 import { normalize } from "polished";
-import { Value } from "slate";
+import ReactPlayer from "react-player";
 import Hotkeys from "slate-hotkeys";
 import ipsum from "corporate-ipsum";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
-function isElementReference(element) {
-  return !("props" in element);
-}
-function createDocument(rootElement) {
-  return { rootElement };
-}
-function getInitialState$3({
-  rootElements = /* @__PURE__ */ new Map()
-} = {}) {
-  const initialState = /* @__PURE__ */ new Map();
-  rootElements.forEach((rootElement, elementKey) => {
-    initialState.set(elementKey, createDocument(rootElement));
-  });
-  return initialState;
-}
-function getDocuments(state) {
-  return state;
-}
-function getDocument(state, documentKey) {
-  var _a;
-  return (_a = getDocuments(state).get(documentKey)) != null ? _a : null;
-}
-function getDocumentRootElement$1(state, documentKey) {
-  var _a, _b;
-  return (_b = (_a = getDocument(state, documentKey)) == null ? void 0 : _a.rootElement) != null ? _b : null;
-}
-function reducer$4(state = getInitialState$3(), _action) {
-  return state;
-}
-function getInitialState$2({
-  reactComponents = /* @__PURE__ */ new Map()
-} = {}) {
-  return reactComponents;
-}
-function getReactComponents(state) {
-  return state;
-}
-function getReactComponent$1(state, type) {
-  var _a;
-  return (_a = getReactComponents(state).get(type)) != null ? _a : null;
-}
-function reducer$3(state = getInitialState$2(), action) {
-  switch (action.type) {
-    case ActionTypes.REGISTER_REACT_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.component);
-    case ActionTypes.UNREGISTER_REACT_COMPONENT: {
-      const nextState = new Map(state);
-      const deleted = nextState.delete(action.payload.type);
-      return deleted ? nextState : state;
-    }
-    default:
-      return state;
-  }
-}
-function getInitialState$1({
-  componentsMeta = /* @__PURE__ */ new Map()
-} = {}) {
-  return componentsMeta;
-}
-function getComponentsMeta(state) {
-  return state;
-}
-function reducer$2(state = getInitialState$1(), action) {
-  switch (action.type) {
-    case ActionTypes.REGISTER_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.meta);
-    case ActionTypes.UNREGISTER_COMPONENT: {
-      const nextState = new Map(state);
-      const deleted = nextState.delete(action.payload.type);
-      return deleted ? nextState : state;
-    }
-    default:
-      return state;
-  }
-}
-function getInitialState({
-  propControllerDescriptors = /* @__PURE__ */ new Map()
-} = {}) {
-  return propControllerDescriptors;
-}
-function getPropControllerDescriptors$1(state) {
-  return state;
-}
-function getComponentPropControllerDescriptors$1(state, componentType) {
-  var _a;
-  return (_a = getPropControllerDescriptors$1(state).get(componentType)) != null ? _a : null;
-}
-function reducer$1(state = getInitialState(), action) {
-  switch (action.type) {
-    case ActionTypes.REGISTER_COMPONENT:
-      return new Map(state).set(action.payload.type, action.payload.propControllerDescriptors);
-    case ActionTypes.UNREGISTER_COMPONENT: {
-      const nextState = new Map(state);
-      const deleted = nextState.delete(action.payload.type);
-      return deleted ? nextState : state;
-    }
-    default:
-      return state;
-  }
-}
-function getElementChildren(descriptor, prop) {
-  if (prop == null)
-    return [];
-  switch (descriptor.type) {
-    case Types.Grid:
-      return prop.elements;
-    default:
-      return [];
-  }
-}
-function getElementId$1(descriptor, prop) {
-  if (prop == null)
-    return null;
-  switch (descriptor.type) {
-    case Types.ElementID:
-      return prop;
-    default:
-      return null;
-  }
-}
-const reducer = combineReducers({
-  documents: reducer$4,
-  reactComponents: reducer$3,
-  componentsMeta: reducer$2,
-  propControllers: reducer$1,
-  isInBuilder: (_state = false, _action) => false
-});
-function getDocumentsStateSlice(state) {
-  return state.documents;
-}
-function getDocumentRootElement(state, documentKey) {
-  return getDocumentRootElement$1(getDocumentsStateSlice(state), documentKey);
-}
-function getReactComponentsStateSlice(state) {
-  return state.reactComponents;
-}
-function getReactComponent(state, type) {
-  return getReactComponent$1(getReactComponentsStateSlice(state), type);
-}
-function getPropControllersStateSlice(state) {
-  return state.propControllers;
-}
-function getPropControllerDescriptors(state) {
-  return getPropControllerDescriptors$1(getPropControllersStateSlice(state));
-}
-function getComponentPropControllerDescriptors(state, componentType) {
-  return getComponentPropControllerDescriptors$1(getPropControllersStateSlice(state), componentType);
-}
-function normalizeElement(element, descriptors) {
-  const elements = /* @__PURE__ */ new Map();
-  const remaining = [element];
-  let current;
-  while (current = remaining.pop()) {
-    elements.set(current.key, current);
-    if (isElementReference(current))
-      continue;
-    const elementDescriptors = descriptors.get(element.type);
-    if (elementDescriptors == null)
-      continue;
-    const parent = current;
-    const children = Object.entries(elementDescriptors).reduce((acc, [propName, descriptor]) => {
-      return [...acc, ...getElementChildren(descriptor, parent.props[propName])];
-    }, []);
-    remaining.push(...children);
-  }
-  return elements;
-}
-function getDocumentElements(state, documentKey) {
-  const rootElement = getDocumentRootElement(state, documentKey);
-  const descriptors = getPropControllerDescriptors(state);
-  if (rootElement == null)
-    return /* @__PURE__ */ new Map();
-  return normalizeElement(rootElement, descriptors);
-}
-function getElement(state, documentKey, elementKey) {
-  var _a;
-  return (_a = getDocumentElements(state, documentKey).get(elementKey)) != null ? _a : null;
-}
-function getElementPropControllerDescriptors(state, documentKey, elementKey) {
-  const element = getElement(state, documentKey, elementKey);
-  if (element == null || isElementReference(element))
-    return null;
-  return getComponentPropControllerDescriptors(state, element.type);
-}
-function getElementId(state, documentKey, elementKey) {
-  const element = getElement(state, documentKey, elementKey);
-  if (element == null || isElementReference(element))
-    return null;
-  const descriptors = getComponentPropControllerDescriptors(state, element.type);
-  if (descriptors == null)
-    return null;
-  const elementId = Object.entries(descriptors).reduce((acc, [propName, descriptor]) => {
-    if (acc != null)
-      return acc;
-    return getElementId$1(descriptor, element.props[propName]);
-  }, null);
-  return elementId;
-}
-function getIsInBuilder(state) {
-  return state.isInBuilder;
-}
-function configureStore({
-  rootElements,
-  preloadedState
-} = {}) {
-  return createStore(reducer, __spreadProps(__spreadValues({}, preloadedState), { documents: getInitialState$3({ rootElements }) }), applyMiddleware(thunk));
-}
+import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
 const PlaceholderBase$1 = styled.div`
   width: 100%;
   background: rgba(161, 168, 194, 0.18);
@@ -271,7 +73,7 @@ const PlaceholderBase$1 = styled.div`
   hide
 }) => hide === true ? "hidden" : "initial"};
 `;
-var Placeholder$1 = forwardRef(function Placeholder(_a, ref) {
+var Placeholder$2 = forwardRef(function Placeholder(_a, ref) {
   var _b = _a, {
     hide = false
   } = _b, restOfProps = __objRest(_b, [
@@ -385,21 +187,168 @@ const TYPOGRAPHIES_BY_ID = gql`
 
   ${TYPOGRAPHY_FRAGMENT}
 `;
+const TABLE_BY_ID = gql`
+  query TableById($id: ID!) {
+    table(id: $id) {
+      id
+      name
+      columns {
+        id
+        name
+        ... on MultipleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+        ... on SingleSelectTableColumn {
+          options {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`;
 function isNonNullable(value) {
   return value != null;
 }
-const Context$1 = createContext(void 0);
+const typePolicies = {
+  Query: {
+    fields: {
+      swatches(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Swatch",
+          id
+        }, true));
+      },
+      file(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "File",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      files(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "File",
+          id
+        }, true));
+      },
+      typographies(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "Typography",
+          id
+        }, true));
+      },
+      pagePathnamesById(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
+          __typename: "PagePathnameSlice",
+          id
+        }, true));
+      },
+      globalElement(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "GlobalElement",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      table(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Table",
+          id: args == null ? void 0 : args.id
+        }, true);
+      }
+    }
+  }
+};
+const PrefetchContext = createContext(false);
+function useIsPrefetching() {
+  return useContext(PrefetchContext);
+}
+function createApolloClient({
+  uri,
+  cacheData
+}) {
+  const cache = new InMemoryCache({
+    typePolicies
+  });
+  if (cacheData)
+    cache.restore(cacheData);
+  return new ApolloClient({
+    uri,
+    cache
+  });
+}
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "apolloClient");
+    this.apolloClient = createApolloClient({
+      uri,
+      cacheData
+    });
+  }
+  async prefetch(element) {
+    const id = uuid();
+    await getDataFromTree(/* @__PURE__ */ jsx(PrefetchContext.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsx(RuntimeProvider, {
+        client: this,
+        rootElements: /* @__PURE__ */ new Map([[id, element]]),
+        children: /* @__PURE__ */ jsx(DocumentReference, {
+          documentReference: createDocumentReference(id)
+        })
+      })
+    }));
+    KeyUtils.resetGenerator();
+    return this.apolloClient.cache.extract();
+  }
+  updateCacheData(cacheData) {
+    this.apolloClient.cache.restore(cacheData);
+  }
+}
+const Context$2 = createContext(void 0);
 function useQuery(query, options) {
-  const client = useContext(Context$1);
+  const client = useContext(Context$2);
   return useQuery$1(query, __spreadValues({
-    client
+    client: client == null ? void 0 : client.apolloClient
+  }, options));
+}
+function useMutation(mutation, options) {
+  const client = useContext(Context$2);
+  return useMutation$1(mutation, __spreadValues({
+    client: client == null ? void 0 : client.apolloClient
   }, options));
 }
-function ApolloProvider({
+function MakeswiftProvider({
   client,
   children
 }) {
-  return /* @__PURE__ */ jsx(Context$1.Provider, {
+  return /* @__PURE__ */ jsx(Context$2.Provider, {
     value: client,
     children
   });
@@ -687,6 +636,12 @@ function usePage(pageId) {
   const { pagePathnamesById: [page] = [] } = data;
   return page;
 }
+function useTable(tableId) {
+  return useQuery(TABLE_BY_ID, {
+    skip: tableId == null,
+    variables: { id: tableId }
+  });
+}
 const defaultExitedProps = {
   opacity: 0,
   x: 0,
@@ -1157,8 +1112,8 @@ function getScrollParent(element) {
     return element;
   return getScrollParent(parentElement);
 }
-function Parallax(_g) {
-  var _h = _g, {
+function Parallax(_g2) {
+  var _h = _g2, {
     strength,
     children
   } = _h, rest = __objRest(_h, [
@@ -1244,7 +1199,7 @@ function Parallax(_g) {
     children: children(getProps)
   }));
 }
-const Container$8 = styled.div`
+const Container$d = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1298,7 +1253,7 @@ function BackgroundVideo({
   }, [aspectRatio, zoom]);
   if (!ReactPlayer.canPlay(url))
     return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsxs(Container$8, {
+  return /* @__PURE__ */ jsxs(Container$d, {
     ref: container,
     children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
       url,
@@ -1377,10 +1332,10 @@ const AbsoluteFill = styled.div`
   right: 0;
   bottom: 0;
 `;
-const Container$7 = styled(AbsoluteFill)`
+const Container$c = styled(AbsoluteFill)`
   border-radius: inherit;
 `;
-const BackgroundsContainer$1 = styled(Container$7)`
+const BackgroundsContainer$1 = styled(Container$c)`
   overflow: hidden;
   ${(p) => cssMediaRules([p.visibility], ([visibility]) => css`
         display: ${visibility === true ? "block" : "none"};
@@ -1389,6 +1344,9 @@ const BackgroundsContainer$1 = styled(Container$7)`
 function Backgrounds({
   backgrounds
 }) {
+  const isPrefetching = useIsPrefetching();
+  if (isPrefetching)
+    return /* @__PURE__ */ jsx(Fragment, {});
   if (backgrounds == null)
     return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsx(Fragment, {
@@ -1404,7 +1362,7 @@ function Backgrounds({
         visibility,
         children: [...value].reverse().map((bg) => {
           if (bg.type === "color") {
-            return /* @__PURE__ */ jsx(Container$7, {
+            return /* @__PURE__ */ jsx(Container$c, {
               style: {
                 backgroundColor: getColor(bg.payload)
               }
@@ -1440,7 +1398,7 @@ function Backgrounds({
             }
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$7, __spreadValues({}, getParallaxProps({
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$c, __spreadValues({}, getParallaxProps({
                 style: {
                   backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
                   backgroundPosition,
@@ -1458,7 +1416,7 @@ function Backgrounds({
               isRadial
             } = bg.payload;
             const gradient = `${getStopsStyle(stops)}`;
-            return /* @__PURE__ */ jsx(Container$7, {
+            return /* @__PURE__ */ jsx(Container$c, {
               style: {
                 background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
               }
@@ -1475,7 +1433,7 @@ function Backgrounds({
             } = bg.payload;
             return /* @__PURE__ */ jsx(Parallax, {
               strength: parallax,
-              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$7, __spreadProps(__spreadValues({}, getParallaxProps({})), {
+              children: (getParallaxProps) => /* @__PURE__ */ jsx(Container$c, __spreadProps(__spreadValues({}, getParallaxProps({})), {
                 children: /* @__PURE__ */ jsx(BackgroundVideo, {
                   url,
                   zoom,
@@ -1525,7 +1483,6 @@ var BackgroundsContainer = forwardRef(function BackgroundsContainer2(_i, ref) {
 });
 const StyledBackgroundsContainer = styled(BackgroundsContainer)`
   display: flex;
-  ${cssWidth()}
   ${cssMargin()}
   ${cssBorderRadius()}
   ${(props) => cssMediaRules([props.alignSelf], ([alignSelf = "auto"]) => ({
@@ -1543,7 +1500,7 @@ const Grid$1 = styled(motion.div)`
   alignContent
 }))}
 `;
-const GridItem$1 = styled(motion.div)`
+const GridItem$2 = styled(motion.div)`
   display: flex;
 
   /* IE11 doesn't recognize space-between and treats it as stretch, so we fall back to flex-start */
@@ -1636,8 +1593,8 @@ const Box = forwardRef(function Box2({
   return /* @__PURE__ */ jsx(StyledBackgroundsContainer, {
     ref: setBoxElement,
     id,
+    className: cx(width),
     backgrounds,
-    width,
     margin,
     borderRadius,
     alignSelf: height,
@@ -1654,7 +1611,7 @@ const Box = forwardRef(function Box2({
       animate: animate == null ? void 0 : animate.parent,
       initial: initial == null ? void 0 : initial.parent,
       transition: transition == null ? void 0 : transition.parent,
-      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem$1, {
+      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem$2, {
         grid: children.columns,
         index,
         columnGap,
@@ -1665,20 +1622,29 @@ const Box = forwardRef(function Box2({
         children: /* @__PURE__ */ jsx(Element$1, {
           element: child
         })
-      }, child.key)) : /* @__PURE__ */ jsx(Placeholder$1, {
+      }, child.key)) : /* @__PURE__ */ jsx(Placeholder$2, {
         hide: hidePlaceholder
       })
     })
   }, key == null ? void 0 : key.container);
 });
-function registerComponent$a(runtime) {
+function registerComponent$c(runtime) {
+  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",
     props: {
       id: ElementID(),
       backgrounds: Backgrounds$1(),
-      width: Width(),
+      width: Width({
+        format: Width.Formats.ClassName
+      }),
       height: ResponsiveIconRadioGroup({
         label: "Height",
         options: [{
@@ -1740,8 +1706,12 @@ function registerComponent$a(runtime) {
       border: Border(),
       borderRadius: BorderRadius(),
       boxShadow: Shadows(),
-      rowGap: GapY({}),
-      columnGap: GapX({}),
+      rowGap: GapY((props) => ({
+        hidden: props.children == null
+      })),
+      columnGap: GapX((props) => ({
+        hidden: props.children == null
+      })),
       boxAnimateType: ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
@@ -1775,20 +1745,22 @@ function registerComponent$a(runtime) {
         }],
         defaultValue: "none"
       }),
-      boxAnimateDuration: ResponsiveNumber({
+      boxAnimateDuration: ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
         step: 0.05,
-        suffix: "s"
-      }),
-      boxAnimateDelay: ResponsiveNumber({
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
+      boxAnimateDelay: ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
         step: 0.05,
-        suffix: "s"
-      }),
+        suffix: "s",
+        hidden: isHiddenBasedOnBoxAnimation(props, device)
+      })),
       itemAnimateType: ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
@@ -1822,30 +1794,34 @@ function registerComponent$a(runtime) {
         }],
         defaultValue: "none"
       }),
-      itemAnimateDuration: ResponsiveNumber({
+      itemAnimateDuration: ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
         step: 0.05,
-        suffix: "s"
-      }),
-      itemAnimateDelay: ResponsiveNumber({
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemAnimateDelay: ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
         step: 0.05,
-        suffix: "s"
-      }),
-      itemStaggerDuration: ResponsiveNumber({
+        suffix: "s",
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      itemStaggerDuration: ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
         suffix: "s",
-        defaultValue: DEFAULT_ITEM_STAGGER_DURATION
-      }),
-      hidePlaceholder: Checkbox({
-        label: "Hide placeholder"
-      }),
+        defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
+        hidden: isHiddenBasedOnItemAnimation(props, device)
+      })),
+      hidePlaceholder: Checkbox$1((props) => ({
+        label: "Hide placeholder",
+        hidden: props.children != null
+      })),
       children: Grid$2()
     }
   });
@@ -1936,7 +1912,23 @@ const Link = forwardRef(function Link2(_k, ref) {
     }))
   });
 });
-const StyledButton = styled(Link)`
+function responsiveStyle(responsiveValues, join$1, strategy) {
+  return join(responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
+    const device = getDevice(deviceId);
+    const mediaQuery = getDeviceMediaQuery(device);
+    return __spreadProps(__spreadValues({}, acc), {
+      [mediaQuery]: __spreadValues(__spreadValues({}, acc[mediaQuery]), value)
+    });
+  }, {});
+}
+function responsiveWidth(widthData, defaultValue = "100%") {
+  return __spreadValues({
+    width: "100%"
+  }, responsiveStyle([widthData], ([width = defaultValue]) => ({
+    width: typeof width === "object" ? `${width.value}${width.unit}` : width
+  })));
+}
+const StyledButton$1 = styled(Link)`
   display: table;
   border: 0;
   outline: 0;
@@ -1945,7 +1937,6 @@ const StyledButton = styled(Link)`
   font-family: inherit;
   text-decoration: none;
   text-align: center;
-  ${cssWidth("auto")}
   ${cssMargin()}
   ${(p) => cssMediaRules([p.variant, p.shape, p.size, p.textColor, p.color], ([variant = "flat", shape = "rounded", size = "medium", textColor = {
   swatch: {
@@ -2128,7 +2119,7 @@ const StyledButton = styled(Link)`
 })}
     ${cssTextStyle()}
 `;
-const Button = forwardRef(function Button2(_m, ref) {
+const Button$1 = forwardRef(function Button2(_m, ref) {
   var _n = _m, {
     id,
     children,
@@ -2154,23 +2145,23 @@ const Button = forwardRef(function Button2(_m, ref) {
     "width",
     "margin"
   ]);
-  return /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, restOfProps), {
+  return /* @__PURE__ */ jsx(StyledButton$1, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     id,
-    color: useColor(color),
+    className: cx(css$1(responsiveWidth(width, "auto"))),
+    color,
     link,
     margin,
     shape,
     size,
-    textColor: useColor(textColor),
+    textColor,
     textStyle,
     variant,
-    width,
     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: {
@@ -2248,8 +2239,14 @@ function registerComponent$9(runtime) {
         }],
         defaultValue: "medium"
       }),
-      color: ResponsiveColor({
-        placeholder: "black"
+      color: ResponsiveColor((props, device) => {
+        var _a;
+        const variant = props.variant;
+        const hidden = ((_a = findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
+        return {
+          placeholder: "black",
+          hidden
+        };
       }),
       textColor: ResponsiveColor({
         label: "Text color",
@@ -2265,6 +2262,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) {
@@ -2289,7 +2290,6 @@ function imageSizes(width) {
 const ImageContainer = styled.div`
   line-height: 0;
   overflow: hidden;
-  ${(props) => cssWidth(`${props.dimensions.width}px`)(props)}
   ${cssMargin()}
   ${cssPadding()}
   ${cssBorder()}
@@ -2324,6 +2324,7 @@ const ImageComponent = forwardRef(function Image2({
   const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder2.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = useState(null);
   const isInBuilder = useIsInBuilder();
+  const isPrefetching = useIsPrefetching();
   useEffect(() => {
     if (dataDimensions)
       return;
@@ -2343,14 +2344,15 @@ const ImageComponent = forwardRef(function Image2({
   const dimensions = dataDimensions != null ? dataDimensions : measuredDimensions;
   if (!dimensions)
     return null;
+  const widthClass = css$1(responsiveWidth(width, `${dimensions.width}px`));
+  if (isPrefetching)
+    return null;
   return /* @__PURE__ */ jsx(ImageContainer, {
     as: link ? Link : "div",
     link,
-    dimensions,
     ref,
     id,
-    className,
-    width,
+    className: cx(className, widthClass),
     margin,
     opacity,
     padding,
@@ -2370,7 +2372,7 @@ const ImageComponent = forwardRef(function Image2({
     })
   });
 });
-function registerComponent$8(runtime) {
+function registerComponent$a(runtime) {
   return runtime.registerComponent(ImageComponent, {
     type: "./components/Image/index.js",
     label: "Image",
@@ -2419,7 +2421,7 @@ const RightChevron = () => /* @__PURE__ */ jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container$6 = styled.div`
+const Container$b = styled.div`
   position: relative;
   height: 100%;
 `;
@@ -2427,7 +2429,6 @@ const Wrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  ${cssWidth("400px")}
   ${cssMargin()}
 
   &:focus {
@@ -2706,7 +2707,7 @@ const Carousel = forwardRef(function Carousel2({
   }, [autoplay, delay, paginate, isLastPage]);
   return /* @__PURE__ */ jsxs(Wrapper, {
     ref,
-    width,
+    className: cx(width),
     margin,
     tabIndex: -1,
     onKeyDown: (e) => {
@@ -2719,7 +2720,7 @@ const Carousel = forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxs(Container$6, {
+    children: [/* @__PURE__ */ jsxs(Container$b, {
       children: [/* @__PURE__ */ jsx(ClipMask, {
         children: /* @__PURE__ */ jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
@@ -2767,24 +2768,24 @@ const Carousel = forwardRef(function Carousel2({
       }), /* @__PURE__ */ jsx(LeftSlop, {
         onClick: () => paginate(-1),
         position: arrowPosition,
-        color: useColor(arrowColor),
+        color: arrowColor,
         hidden: !showArrows || isFirstPage,
         children: /* @__PURE__ */ jsx(Arrow, {
-          background: useColor(arrowBackground),
+          background: arrowBackground,
           children: /* @__PURE__ */ jsx(LeftChevron, {})
         })
       }), /* @__PURE__ */ jsx(RightSlop, {
         onClick: () => paginate(1),
         position: arrowPosition,
-        color: useColor(arrowColor),
+        color: arrowColor,
         hidden: !showArrows || isLastPage,
         children: /* @__PURE__ */ jsx(Arrow, {
-          background: useColor(arrowBackground),
+          background: arrowBackground,
           children: /* @__PURE__ */ jsx(RightChevron, {})
         })
       })]
     }), /* @__PURE__ */ jsx(Dots, {
-      color: useColor(dotColor),
+      color: dotColor,
       hidden: !showDots,
       children: Array.from({
         length: pageCount
@@ -2795,7 +2796,7 @@ const Carousel = forwardRef(function Carousel2({
     })]
   });
 });
-function registerComponent$7(runtime) {
+function registerComponent$9(runtime) {
   return runtime.registerComponent(Carousel, {
     type: "./components/Carousel/index.js",
     label: "Carousel",
@@ -2815,23 +2816,36 @@ function registerComponent$7(runtime) {
         }]
       }),
       width: Width({
+        format: Width.Formats.ClassName,
         defaultValue: {
           value: 400,
           unit: "px"
         }
       }),
       margin: Margin(),
-      pageSize: ResponsiveNumber({
-        label: "Images shown",
-        defaultValue: 1,
-        min: 1,
-        step: 1
+      pageSize: ResponsiveNumber((props) => {
+        var _a;
+        const images = props.images;
+        const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
+        return {
+          label: "Images shown",
+          defaultValue: 1,
+          min: 1,
+          max: imagesLength,
+          step: 1
+        };
       }),
-      step: ResponsiveNumber({
-        label: "Step",
-        defaultValue: 1,
-        min: 1,
-        step: 1
+      step: ResponsiveNumber((props, device) => {
+        var _a, _b;
+        const pageSize = props.pageSize;
+        const pageSizeValue = (_b = (_a = findDeviceOverride(pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
+        return {
+          label: "Step",
+          defaultValue: 1,
+          min: 1,
+          max: pageSizeValue,
+          step: 1
+        };
       }),
       slideAlignment: ResponsiveIconRadioGroup({
         label: "Alignment",
@@ -2858,21 +2872,22 @@ function registerComponent$7(runtime) {
           unit: "px"
         }
       }),
-      autoplay: Checkbox({
+      autoplay: Checkbox$1({
         label: "Autoplay"
       }),
-      delay: Number$1({
+      delay: Number$1((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
         step: 0.1,
-        suffix: "seconds"
-      }),
-      showArrows: Checkbox({
+        suffix: "seconds",
+        hidden: !props.autoplay
+      })),
+      showArrows: Checkbox$1({
         preset: true,
         label: "Show arrows"
       }),
-      arrowPosition: ResponsiveIconRadioGroup({
+      arrowPosition: ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [{
           label: "Inside",
@@ -2887,24 +2902,28 @@ function registerComponent$7(runtime) {
           value: "outside",
           icon: "ArrowOutside16"
         }],
-        defaultValue: "inside"
-      }),
-      arrowColor: ResponsiveColor({
+        defaultValue: "inside",
+        hidden: props.showArrows === false
+      })),
+      arrowColor: ResponsiveColor((props) => ({
         label: "Arrow color",
-        placeholder: "black"
-      }),
-      arrowBackground: ResponsiveColor({
+        placeholder: "black",
+        hidden: props.showArrows === false
+      })),
+      arrowBackground: ResponsiveColor((props) => ({
         label: "Arrow background",
-        placeholder: "white"
-      }),
-      showDots: Checkbox({
+        placeholder: "white",
+        hidden: props.showArrows === false
+      })),
+      showDots: Checkbox$1({
         preset: true,
         label: "Show dots"
       }),
-      dotColor: ResponsiveColor({
+      dotColor: ResponsiveColor((props) => ({
         label: "Dot color",
-        placeholder: "black"
-      }),
+        placeholder: "black",
+        hidden: props.showDots === false
+      })),
       slideBorder: Border(),
       slideBorderRadius: BorderRadius()
     }
@@ -2915,16 +2934,15 @@ const Block$1 = styled.div`
   padding: 0.5em;
   font-size: 1em;
 `;
-const Label = styled.div`
+const Label$3 = styled.div`
   margin-top: 0.25em;
 `;
 const Segment = styled.div`
   flex: 1;
   text-align: center;
 `;
-const Container$5 = styled.div`
+const Container$a = styled.div`
   display: flex;
-  ${cssWidth("560px")}
   ${cssMargin()}
   ${(p) => cssMediaRules([p.size], ([size = "medium"]) => {
   switch (size) {
@@ -2932,7 +2950,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 18px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 14px;
             }
           `;
@@ -2940,7 +2958,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 32px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 18px;
             }
           `;
@@ -2948,7 +2966,7 @@ const Container$5 = styled.div`
       return css`
             font-size: 24px;
 
-            ${Label} {
+            ${Label$3} {
               font-size: 16px;
             }
           `;
@@ -3085,7 +3103,7 @@ const Container$5 = styled.div`
 })}
   }
 
-  ${Label} {
+  ${Label$3} {
     ${(p) => cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
   swatch: {
     hue: 0,
@@ -3162,26 +3180,26 @@ const Countdown = forwardRef(function Countdown2({
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [date]);
-  return /* @__PURE__ */ jsxs(Container$5, {
+  return /* @__PURE__ */ jsxs(Container$a, {
     ref,
     id,
-    width,
+    className: cx(width),
     margin,
     variant,
     size,
     shape,
-    labelColor: useColor(labelColor),
+    labelColor,
     labelFont,
-    numberColor: useColor(numberColor),
+    numberColor,
     numberFont,
-    blockColor: useColor(blockColor),
+    blockColor,
     gap,
     children: [/* @__PURE__ */ jsxs(Segment, {
       children: [/* @__PURE__ */ jsx(Block$1, {
         children: /* @__PURE__ */ jsx("span", {
           children: days
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: daysLabel == null ? "Days" : daysLabel
       })]
     }), /* @__PURE__ */ jsxs(Segment, {
@@ -3189,7 +3207,7 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: hours
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: hoursLabel == null ? "Hours" : hoursLabel
       })]
     }), /* @__PURE__ */ jsxs(Segment, {
@@ -3197,7 +3215,7 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: minutes
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: minutesLabel == null ? "Minutes" : minutesLabel
       })]
     }), /* @__PURE__ */ jsxs(Segment, {
@@ -3205,22 +3223,22 @@ const Countdown = forwardRef(function Countdown2({
         children: /* @__PURE__ */ jsx("span", {
           children: seconds
         })
-      }), /* @__PURE__ */ jsx(Label, {
+      }), /* @__PURE__ */ jsx(Label$3, {
         children: secondsLabel == null ? "Seconds" : secondsLabel
       })]
     })]
   });
 });
-function registerComponent$6(runtime) {
+function registerComponent$8(runtime) {
   return runtime.registerComponent(Countdown, {
     type: "./components/Countdown/index.js",
     label: "Countdown",
     icon: "Countdown40",
     props: {
       id: ElementID(),
-      date: Date$1({
+      date: Date$1(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
-      }),
+      })),
       variant: ResponsiveIconRadioGroup({
         label: "Style",
         options: [{
@@ -3316,6 +3334,7 @@ function registerComponent$6(runtime) {
         placeholder: "black"
       }),
       width: Width({
+        format: Width.Formats.ClassName,
         defaultValue: {
           value: 560,
           unit: "px"
@@ -3344,10 +3363,9 @@ function registerComponent$6(runtime) {
 const IE11MinHeightContainer = styled.div`
   display: flex;
   width: 100%;
-  ${cssWidth()}
   ${cssMargin()}
 `;
-const Container$4 = styled.div`
+const Container$9 = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3404,18 +3422,18 @@ const Divider = forwardRef(function Divider2({
   return /* @__PURE__ */ jsx(IE11MinHeightContainer, {
     ref,
     id,
-    width,
+    className: cx(width),
     margin,
-    children: /* @__PURE__ */ jsx(Container$4, {
+    children: /* @__PURE__ */ jsx(Container$9, {
       children: /* @__PURE__ */ jsx(Line, {
         variant,
         thickness,
-        color: useColor(color)
+        color
       })
     })
   });
 });
-function registerComponent$5(runtime) {
+function registerComponent$7(runtime) {
   return runtime.registerComponent(Divider, {
     type: "./components/Divider/index.js",
     label: "Divider",
@@ -3456,6 +3474,7 @@ function registerComponent$5(runtime) {
         placeholder: "black"
       }),
       width: Width({
+        format: Width.Formats.ClassName,
         defaultValue: {
           value: 100,
           unit: "%"
@@ -3465,9 +3484,8 @@ function registerComponent$5(runtime) {
     }
   });
 }
-const Container$3 = styled.div`
+const Container$8 = styled.div`
   min-height: 15px;
-  ${cssWidth()}
   ${cssMargin()}
 `;
 const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
@@ -3545,35 +3563,37 @@ const Embed = forwardRef(function Embed2({
   }, [container, html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsx(Container$3, {
+  return /* @__PURE__ */ jsx(Container$8, {
     ref: setContainer,
     id,
+    className: cx(width),
     margin,
-    width,
     dangerouslySetInnerHTML: {
       __html: html
     }
   });
 });
-function registerComponent$4(runtime) {
+function registerComponent$6(runtime) {
   return runtime.registerComponent(Embed, {
     type: "./components/Embed/index.js",
     label: "Embed",
     icon: "Code40",
     props: {
       id: ElementID(),
-      html: TextArea({
+      html: TextArea$1({
         label: "Code",
         rows: 20
       }),
-      width: Width(),
+      width: Width({
+        format: Width.Formats.ClassName
+      }),
       margin: Margin()
     }
   });
 }
-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) {
@@ -3584,39 +3604,1833 @@ 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.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 28,
-    height: 28
-  }, props), _path$r || (_path$r = /* @__PURE__ */ React.createElement("path", {
-    d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
+var SvgCheck12 = function SvgCheck122(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends$u({
+    width: 12,
+    height: 12,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$t || (_path$t = /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.707 1.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 1.414-1.414L4 8.086l6.293-6.293a1 1 0 0 1 1.414 0Z"
   })));
 };
-const GutterContainer = styled.div`
-  ${(p) => cssMediaRules([p.gutter], ([gutter = {
-  value: 0,
-  unit: "px"
-}]) => css`
-        padding-left: ${p.first ? "0px" : `${gutter.value / 2}${gutter.unit}`};
-        padding-right: ${p.last ? "0px" : `${gutter.value / 2}${gutter.unit}`};
+const Shapes = Object.freeze({
+  SQUARE: "square",
+  ROUNDED: "rounded",
+  PILL: "pill"
+});
+const Sizes = Object.freeze({
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+});
+const Contrasts = Object.freeze({
+  LIGHT: "light",
+  DARK: "dark"
+});
+const Context$1 = createContext({});
+function useFormContext() {
+  return useContext(Context$1);
+}
+const { Provider } = Context$1;
+function getSizeHeight$2(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 30;
+    case Sizes.MEDIUM:
+      return 38;
+    case Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeHorizontalPadding(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 8;
+    case Sizes.MEDIUM:
+      return 12;
+    case Sizes.LARGE:
+      return 16;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeVerticalPadding(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 3;
+    case Sizes.MEDIUM:
+      return 7;
+    case Sizes.LARGE:
+      return 11;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getShapeBorderRadius(shape) {
+  switch (shape) {
+    case Shapes.SQUARE:
+      return 0;
+    case Shapes.ROUNDED:
+      return 4;
+    case Shapes.PILL:
+      return 500;
+    default:
+      throw new Error(`Invalid form shape "${shape}"`);
+  }
+}
+function getContrastBorderColor(contrast, error) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
+    case Contrasts.DARK:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastBackgroundColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "white";
+    case Contrasts.DARK:
+      return "rgba(0, 0, 0, 0.7)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastColor$1(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.95)";
+    case Contrasts.DARK:
+      return "white";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastPlaceholderColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.3)";
+    case Contrasts.DARK:
+      return "rgba(255,255,255,0.3)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function cssField() {
+  return css`
+    display: block;
+    width: 100%;
+    outline: none;
+    border-width: 1px;
+    border-style: solid;
+    transition: border-color 200ms;
+    ${(props) => cssMediaRules([props.shape, props.size, props.contrast, props.brandColor], ([
+    shape = Shapes.ROUNDED,
+    size = Sizes.MEDIUM,
+    contrast = Contrasts.LIGHT,
+    brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+  ]) => css`
+          padding: ${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px;
+          border-radius: ${getShapeBorderRadius(shape)}px;
+          border-color: ${getContrastBorderColor(contrast, props.error)};
+          color: ${getContrastColor$1(contrast)};
+          background-color: ${getContrastBackgroundColor(contrast)};
+
+          :focus,
+          :focus-within {
+            border-color: ${colorToString(brandColor)};
+          }
+
+          ::placeholder {
+            color: ${getContrastPlaceholderColor(contrast)};
+          }
+        `)}
+  `;
+}
+function getSizeHeight$1(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 36;
+    case Sizes.MEDIUM:
+      return 42;
+    case Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const Base$2 = styled.input`
+  ${cssField()}
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
       `)}
 `;
-const PlaceholderLink$1 = styled.div`
-  width: ${(props) => props.width}px;
-  height: ${(props) => props.button === true ? 32 : 8}px;
+var Input$2 = forwardRef(function Input(_o, ref) {
+  var _p = _o, {
+    error = false,
+    form
+  } = _p, restOfProps = __objRest(_p, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+const Container$7 = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${cssMargin()};
+`;
+const Label$2 = styled.div`
+  max-width: 120px;
+  min-width: 60px;
+  height: 8px;
+  border-radius: 2px;
   background-color: #a1a8c2;
-  border-radius: ${(props) => props.button === true ? 6 : 2}px;
   opacity: 0.4;
+  margin-bottom: 8px;
 `;
-const links$1 = [{
-  width: 50
-}, {
-  width: 70
-}, {
-  width: 60
+const Input$1 = styled.div`
+  min-width: 80px;
+  height: 32px;
+  border-radius: 4px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a1a8c2;
+  opacity: 0.4;
+`;
+const Button = styled.div`
+  min-width: 140px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #a1a8c2;
+  opacity: 0.4;
+`;
+var Placeholder$1 = forwardRef(function Placeholder2({
+  className,
+  margin
+}, ref) {
+  return /* @__PURE__ */ jsxs(Container$7, {
+    ref,
+    className,
+    margin,
+    children: [/* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsx(Label$2, {}), /* @__PURE__ */ jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsx(Label$2, {}), /* @__PURE__ */ jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end"
+      },
+      children: /* @__PURE__ */ jsx(Button, {})
+    })]
+  });
+});
+function getSizeHeight(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 14;
+    case Sizes.MEDIUM:
+      return 18;
+    case Sizes.LARGE:
+      return 22;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.8)";
+    case Contrasts.DARK:
+      return "rgba(255, 255, 255, 0.95)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+const Base$1 = styled.label`
+  display: block;
+  margin: 0 0 0.25em 0;
+  ${cssTextStyle()}
+  ${(props) => cssMediaRules([props.size, props.contrast, props.textColor], ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => css`
+        min-height: ${getSizeHeight(size)}px;
+        color: ${textColor == null ? getContrastColor(contrast) : colorToString(textColor)};
+      `)}
+`;
+function Label$1(props) {
+  const {
+    contrast,
+    size,
+    labelTextStyle,
+    labelTextColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Base$1, __spreadProps(__spreadValues({}, props), {
+    contrast,
+    size,
+    textStyle: labelTextStyle,
+    textColor: labelTextColor
+  }));
+}
+var SingleLineTextTableField = forwardRef(function SingleLineTextTableField2(_q, ref) {
+  var _r = _q, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _r, restOfProps = __objRest(_r, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "text",
+      error: error != null
+    }))]
+  });
+});
+const Base = styled.textarea`
+  resize: vertical;
+  ${cssField()}
+`;
+var TextArea = forwardRef(function TextArea2(_s, ref) {
+  var _t = _s, {
+    error = false,
+    form
+  } = _t, restOfProps = __objRest(_t, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    rows: 4,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+var LongTextTableField = forwardRef(function LongTextTableField2(_u, ref) {
+  var _v = _u, {
+    id,
+    label = "",
+    error,
+    hideLabel = false
+  } = _v, restOfProps = __objRest(_v, [
+    "id",
+    "label",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      error: error != null
+    }))]
+  });
+});
+function getCheckmarkColor$1({
+  swatch: {
+    hue: h,
+    saturation: s,
+    lightness: l
+  },
+  alpha: a
+}) {
+  return ColorHelper({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$6 = styled.div`
+  position: relative;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeCheckbox = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-radius: 4px;
+  pointer-events: none;
+  border-width: 1px;
+  ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenCheckbox = styled.input`
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+
+    & ~ ${FakeCheckbox} {
+      opacity: 0.5;
+    }
+  }
+
+  &:checked ~ ${FakeCheckbox} {
+    ${(props) => cssMediaRules([props.brandColor], ([{
+  swatch = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha = 1
+} = {}]) => css`
+          background-color: ${colorToString({
+  swatch,
+  alpha
+})};
+        `)}
+    border-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: content-box;
+      width: 25%;
+      height: 50%;
+      ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+            border-width: ${getSizeHeight(size) * 0.1}px;
+            border-left: 0;
+            border-top: 0;
+          `)}
+      border-style: solid;
+      ${(props) => cssMediaRules([props.brandColor], ([{
+  swatch = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha = 1
+} = {}]) => css`
+            border-color: ${getCheckmarkColor$1({
+  swatch,
+  alpha
+})};
+          `)}
+      transform: rotate(45deg) translate3d(91%, -23%, 0);
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+            border-color: ${colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var Checkbox = forwardRef(function Checkbox2(_w, ref) {
+  var _x = _w, {
+    error,
+    className,
+    style,
+    form
+  } = _x, restOfProps = __objRest(_x, [
+    "error",
+    "className",
+    "style",
+    "form"
+  ]);
+  const {
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Container$6, {
+    size,
+    children: [/* @__PURE__ */ jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
+      type: "checkbox",
+      ref,
+      error,
+      size,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsx(FakeCheckbox, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel$2 = styled(Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+      `)}
+`;
+const CheckboxContainer$1 = styled.span`
+  margin-right: 8px;
+`;
+var CheckboxTableField = forwardRef(function CheckboxTableField2(_y, ref) {
+  var _z = _y, {
+    form,
+    id,
+    name,
+    label = "",
+    value = false,
+    error
+  } = _z, restOfProps = __objRest(_z, [
+    "form",
+    "id",
+    "name",
+    "label",
+    "value",
+    "error"
+  ]);
+  const {
+    size
+  } = useFormContext();
+  function handleChange(event) {
+    form.setFieldValue(name, event.currentTarget.checked);
+  }
+  return /* @__PURE__ */ jsxs(StyledLabel$2, {
+    htmlFor: id,
+    size,
+    children: [/* @__PURE__ */ jsx(CheckboxContainer$1, {
+      children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        checked: value,
+        onChange: handleChange,
+        ref,
+        id,
+        error: error != null
+      }))
+    }), label]
+  });
+});
+const MainLabel = styled(Label$1)`
+  margin: 0 0 4px 0;
+`;
+const StyledLabel$1 = styled(Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const CheckboxContainer = styled.span`
+  margin-right: 8px;
+`;
+var MultipleSelectTableField = forwardRef(function MultipleSelectTableField2(_A, ref) {
+  var _B = _A, {
+    tableColumn,
+    label = "",
+    required,
+    value = [],
+    onChange,
+    hideLabel = false
+  } = _B, restOfProps = __objRest(_B, [
+    "tableColumn",
+    "label",
+    "required",
+    "value",
+    "onChange",
+    "hideLabel"
+  ]);
+  const handle = useRef({
+    validity: {
+      valueMissing: required === true && value.length === 0,
+      typeMismatch: false
+    }
+  });
+  useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked && value.filter((v) => v !== event.currentTarget.value).length === 0;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsx(MainLabel, {
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel$1, {
+      htmlFor: option.id,
+      children: [/* @__PURE__ */ jsx(CheckboxContainer, {
+        children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+          "aria-label": label,
+          onChange: handleChange,
+          checked: value.includes(option.name),
+          id: option.id,
+          value: option.name
+        }))
+      }), option.name]
+    }, option.id))]
+  });
+});
+function getCheckmarkColor({
+  swatch: {
+    hue: h,
+    saturation: s,
+    lightness: l
+  } = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: a
+}) {
+  return ColorHelper({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$5 = styled.div`
+  position: relative;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeRadioButton = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-radius: 50%;
+  pointer-events: none;
+  border-width: 1px;
+  ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenRadioButton = styled.input.attrs({
+  type: "radio"
+})`
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+
+    & ~ ${FakeRadioButton} {
+      opacity: 0.5;
+    }
+  }
+
+  &:checked ~ ${FakeRadioButton} {
+    ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+          background-color: ${colorToString(brandColor)};
+        `)}
+    border-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: content-box;
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+            background-color: ${getCheckmarkColor(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => css`
+            border-color: ${colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules([props.contrast], ([contrast = Contrasts.LIGHT]) => css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var RadioButton = forwardRef(function RadioButton2(_C, ref) {
+  var _D = _C, {
+    error,
+    className,
+    style,
+    form
+  } = _D, restOfProps = __objRest(_D, [
+    "error",
+    "className",
+    "style",
+    "form"
+  ]);
+  const {
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Container$5, {
+    size,
+    children: [/* @__PURE__ */ jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+      ref,
+      error,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsx(FakeRadioButton, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel = styled(Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const RadioButtonContainer = styled.span`
+  margin-right: 8px;
+`;
+var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGroup2(_E, ref) {
+  var _F = _E, {
+    tableColumn,
+    label = "",
+    value = "",
+    required = false,
+    hideLabel = false,
+    onChange
+  } = _F, restOfProps = __objRest(_F, [
+    "tableColumn",
+    "label",
+    "value",
+    "required",
+    "hideLabel",
+    "onChange"
+  ]);
+  const handle = useRef({
+    validity: {
+      valueMissing: required === true && value === "",
+      typeMismatch: false
+    }
+  });
+  useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      as: "p",
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel, {
+      htmlFor: option.id,
+      "aria-label": label,
+      children: [/* @__PURE__ */ jsx(RadioButtonContainer, {
+        children: /* @__PURE__ */ jsx(RadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+          onChange: handleChange,
+          checked: value === option.name,
+          id: option.id,
+          value: option.name
+        }))
+      }), option.name]
+    }, option.id))]
+  });
+});
+const Container$4 = styled.div`
+  ${cssField()}
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  border-color: #f19eb9;
+
+  &:focus,
+  &:focus-within {
+    border-color: #e54e7f;
+  }
+
+  ${(props) => cssMediaRules([props.size, props.contrast], ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT]) => css`
+        min-height: ${getSizeHeight$2(size)}px;
+        max-height: ${getSizeHeight$2(size)}px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          right: ${getSizeHorizontalPadding(size)}px;
+          top: 50%;
+          transform: translate3d(0, -25%, 0);
+          border: solid 0.35em transparent;
+          border-top-color: ${getContrastColor$1(contrast)};
+        }
+      `)}
+`;
+const Select = styled.select`
+  appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+`;
+var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_G, ref) {
+  var _H = _G, {
+    id,
+    tableColumn,
+    value = "",
+    label = "",
+    error = false,
+    hideLabel = false,
+    form
+  } = _H, restOfProps = __objRest(_H, [
+    "id",
+    "tableColumn",
+    "value",
+    "label",
+    "error",
+    "hideLabel",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxs(Container$4, {
+      error,
+      shape,
+      size,
+      contrast,
+      brandColor,
+      children: [/* @__PURE__ */ jsx("span", {
+        children: value === "" ? "-" : value
+      }), /* @__PURE__ */ jsxs(Select, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        ref,
+        id,
+        value,
+        children: [/* @__PURE__ */ jsx("option", {
+          value: "",
+          children: "-"
+        }), tableColumn.options.map((option) => /* @__PURE__ */ jsx("option", {
+          value: option.name,
+          children: option.name
+        }, option.id))]
+      }))]
+    })]
+  });
+});
+var SingleSelectTableField = forwardRef(function SingleSelectTableField2(_I, ref) {
+  var _J = _I, {
+    type
+  } = _J, restOfProps = __objRest(_J, [
+    "type"
+  ]);
+  return type === "select" ? /* @__PURE__ */ jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  })) : /* @__PURE__ */ jsx(TableColumnRadioButtonGroup, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  }));
+});
+var PhoneNumberTableField = forwardRef(function PhoneNumberTableField2(_K, ref) {
+  var _L = _K, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _L, restOfProps = __objRest(_L, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "tel",
+      error: error != null
+    }))]
+  });
+});
+var EmailTableField = forwardRef(function EmailTableField2(_M, ref) {
+  var _N = _M, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _N, restOfProps = __objRest(_N, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "email",
+      error: error != null
+    }))]
+  });
+});
+var URLTableField = forwardRef(function URLTableField2(_O, ref) {
+  var _P = _O, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _P, restOfProps = __objRest(_P, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "url",
+      error: error != null
+    }))]
+  });
+});
+var NumberTableField = forwardRef(function NumberTableField2(_Q, ref) {
+  var _R = _Q, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _R, restOfProps = __objRest(_R, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "number",
+      error: error != null
+    }))]
+  });
+});
+const Label = styled.div`
+  display: block;
+  max-width: 120px;
+  min-width: 60px;
+  border-radius: 2px;
+  background-color: #5f49f4;
+  opacity: 0.4;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        margin: calc(0.25 * ${getSizeHeight(size)}px + 2px) 0;
+        min-height: ${0.5 * getSizeHeight(size)}px;
+        max-height: ${0.5 * getSizeHeight(size)}px;
+      `)}
+`;
+const Input2 = styled.div`
+  display: block;
+  width: 100%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #5f49f4;
+  opacity: 0.4;
+  ${(props) => cssMediaRules([props.shape, props.size], ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+        border-radius: ${getShapeBorderRadius(shape)}px;
+      `)}
+`;
+function PlaceholderTableField() {
+  const {
+    size,
+    shape
+  } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Label, {
+      size
+    }), /* @__PURE__ */ jsx(Input2, {
+      shape,
+      size
+    })]
+  });
+}
+function getTypeMismatchErrorMessage(tableColumn, label) {
+  switch ((tableColumn || {}).__typename) {
+    case "PhoneNumberTableColumn":
+      return `${label} field must be a valid phone number.`;
+    case "EmailTableColumn":
+      return `${label} field must be a valid email.`;
+    case "URLTableColumn":
+      return `${label} field must be a valid URL.`;
+    case "NumberTableColumn":
+      return `${label} field must be a valid number.`;
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "CheckboxTableColumn":
+    default:
+      return `${label} field is invalid.`;
+  }
+}
+function getTableColumnField(tableColumn) {
+  switch ((tableColumn || {}).__typename) {
+    case "SingleLineTextTableColumn":
+      return SingleLineTextTableField;
+    case "LongTextTableColumn":
+      return LongTextTableField;
+    case "CheckboxTableColumn":
+      return CheckboxTableField;
+    case "MultipleSelectTableColumn":
+      return MultipleSelectTableField;
+    case "SingleSelectTableColumn":
+      return SingleSelectTableField;
+    case "PhoneNumberTableColumn":
+      return PhoneNumberTableField;
+    case "EmailTableColumn":
+      return EmailTableField;
+    case "URLTableColumn":
+      return URLTableField;
+    case "NumberTableColumn":
+      return NumberTableField;
+    default:
+      return SingleLineTextTableField;
+  }
+}
+function Field({
+  tableColumn,
+  tableFormField: {
+    id,
+    label = "",
+    placeholder: placeholder2,
+    required = false,
+    hidden = false,
+    type = "radio",
+    hideLabel = false
+  }
+}) {
+  const TableColumnField = getTableColumnField(tableColumn);
+  const input = useRef(null);
+  if (!tableColumn)
+    return /* @__PURE__ */ jsx(PlaceholderTableField, {});
+  function validate() {
+    let errorMessage;
+    if (input.current) {
+      const {
+        validity = {}
+      } = input.current;
+      if (validity.valueMissing)
+        errorMessage = `${label} is required.`;
+      if (validity.typeMismatch)
+        errorMessage = getTypeMismatchErrorMessage(tableColumn, label);
+    }
+    return errorMessage;
+  }
+  return /* @__PURE__ */ jsx(Field$1, {
+    name: tableColumn.name,
+    validate,
+    children: ({
+      field,
+      form
+    }) => hidden ? /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, field), {
+      ref: input,
+      type: "hidden"
+    })) : /* @__PURE__ */ jsx(TableColumnField, __spreadProps(__spreadValues({}, field), {
+      type,
+      form,
+      tableColumn,
+      ref: input,
+      id,
+      error: getIn(form.touched, field.name) && getIn(form.errors, field.name),
+      label,
+      placeholder: placeholder2,
+      required,
+      hideLabel
+    }))
+  });
+}
+var _g;
+function _extends$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.createElement("svg", _extends$t({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20
+  }, props), _g || (_g = /* @__PURE__ */ React.createElement("g", {
+    fill: "none",
+    strokeWidth: 2,
+    transform: "translate(1 1)"
+  }, /* @__PURE__ */ React.createElement("circle", {
+    stroke: "currentColor",
+    cx: 9,
+    cy: 9,
+    r: 9,
+    strokeOpacity: 0.4
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M9 18A9 9 0 0 0 9 0"
+  }))));
+};
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Icon = styled(SvgSpinner20)`
+  display: inline-flex;
+  animation: ${spin} 1s linear infinite;
+  stroke: currentColor;
+`;
+function Spinner() {
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+function useTableFormFieldRefs(propController, { fieldsCount }) {
+  const [container, setContainer] = useState(null);
+  const [items, setItems] = useState(Array(fieldsCount + 1).fill(null));
+  const isInBuilder = useIsInBuilder();
+  useEffect(() => {
+    if (!isInBuilder)
+      return;
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+    };
+    function handleAnimationFrameRequest() {
+      if (propController == null)
+        return;
+      if (container != null)
+        propController.tableFormLayoutChange({ layout: getBox(container) });
+      items.map((item, index) => {
+        if (item == null)
+          return;
+        propController.tableFormFieldLayoutChange({ index, layout: getBox(item) });
+      });
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  }, [propController, container, items, isInBuilder]);
+  const itemRefs = useMemo(() => Array.from({ length: fieldsCount + 1 }).map((_, index) => (item) => {
+    setItems((is) => [...is.slice(0, index), item, ...is.slice(index + 1)]);
+  }), [fieldsCount, setItems]);
+  return { container: setContainer, items: itemRefs };
+}
+const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
+function getSizeFontSize(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 12;
+    case Sizes.MEDIUM:
+      return 14;
+    case Sizes.LARGE:
+      return 18;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const Alignments = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+const GridForm = styled.form`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  ${(props) => cssMediaRules([props.size], ([size = Sizes.MEDIUM]) => css`
+        font-size: ${getSizeFontSize(size)}px;
+      `)}
+  ${cssMargin()}
+`;
+const GridItem$1 = styled.div`
+  align-self: flex-end;
+  flex-direction: column;
+  ${cssGridItem()}
+`;
+function getAlignmentMargin(alignment) {
+  switch (alignment) {
+    case Alignments.LEFT:
+      return "0 auto 0 0";
+    case Alignments.RIGHT:
+      return "0 0 0 auto";
+    default:
+      return "0 auto";
+  }
+}
+const StyledButton = styled((props) => /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, props), {
+  as: "button"
+})))`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${(props) => cssMediaRules([props.size, props.alignment], ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+        margin: ${getAlignmentMargin(alignment)};
+        padding-top: 0;
+        padding-bottom: 0;
+      `)}
+`;
+const ErrorContainer = styled.div`
+  padding: 8px 16px;
+  background-color: #f19eb9;
+  border-radius: 4px;
+  margin-top: 16px;
+`;
+const IconContainer = styled.div`
+  fill: currentColor;
+`;
+const ErrorMessage = styled.p`
+  font-size: 12px;
+  margin: 8px 0;
+  color: rgba(127, 0, 0, 0.95);
+`;
+function getTableColumnDefaultValue(tableColumn) {
+  switch (tableColumn.__typename) {
+    case "CheckboxTableColumn":
+      return false;
+    case "MultipleSelectTableColumn":
+      return [];
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "SingleSelectTableColumn":
+    case "PhoneNumberTableColumn":
+    case "EmailTableColumn":
+    case "URLTableColumn":
+    case "NumberTableColumn":
+    default:
+      return "";
+  }
+}
+const CREATE_TABLE_RECORD = gql`
+  mutation CreateTableRecord($input: CreateTableRecordInput!) {
+    createTableRecord(input: $input) {
+      tableRecord {
+        id
+      }
+    }
+  }
+`;
+const Form = forwardRef(function Form2({
+  id,
+  tableId,
+  fields: fieldsProp,
+  submitLabel = "Submit",
+  submitLink,
+  shape,
+  size,
+  contrast,
+  brandColor,
+  gap,
+  width,
+  margin,
+  submitTextStyle,
+  submitVariant,
+  submitTextColor,
+  submitWidth,
+  submitAlignment,
+  labelTextStyle,
+  labelTextColor
+}, ref) {
+  const fields = useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.fields) != null ? _a : [];
+  }, [fieldsProp]);
+  const grid = useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.grid) != null ? _a : [];
+  }, [fieldsProp]);
+  const {
+    data: {
+      table
+    } = {}
+  } = useTable(tableId);
+  const [createTableRecord] = useMutation(CREATE_TABLE_RECORD);
+  const [refEl, setRefEl] = useState(null);
+  const [propControllers, setPropControllers] = useState(null);
+  const [initialValues, setInitialValues] = useState(() => fields.reduce((acc, formField) => {
+    const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+    const defaultValue = formField ? formField.defaultValue : null;
+    if (tableColumn) {
+      acc[tableColumn.name] = defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue;
+    }
+    return acc;
+  }, {}));
+  const controller = propControllers == null ? void 0 : propControllers.fields;
+  const {
+    container,
+    items
+  } = useTableFormFieldRefs(controller, {
+    fieldsCount: fields.length
+  });
+  const [isDone, setIsDone] = useState(false);
+  const linkRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    getBoxModel() {
+      return refEl instanceof Element ? getBox(refEl) : null;
+    },
+    setPropControllers
+  }), [refEl, setPropControllers]);
+  useEffect(() => {
+    container(refEl);
+  }, [container, refEl]);
+  useEffect(() => {
+    if (!isDone)
+      return;
+    let timeoutId = setTimeout(() => setIsDone(false), 2500);
+    return () => clearTimeout(timeoutId);
+  }, [isDone]);
+  function getTableColumn({
+    tableColumnId
+  }) {
+    return table && table.columns.find((field) => tableColumnId === field.id);
+  }
+  async function handleSubmit(values, {
+    setSubmitting,
+    resetForm,
+    setStatus
+  }) {
+    if (table) {
+      const columns = [];
+      fields.forEach((field) => {
+        const tableColumn = getTableColumn(field);
+        if (tableColumn) {
+          const data = values[tableColumn.name];
+          if (data) {
+            columns.push({
+              columnId: field.tableColumnId,
+              data
+            });
+            if (field.autofill) {
+              localStorage.setItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`, JSON.stringify(data));
+            }
+          }
+        }
+      });
+      try {
+        await createTableRecord({
+          variables: {
+            input: {
+              data: {
+                tableId: table.id,
+                columns
+              }
+            }
+          }
+        });
+        setIsDone(true);
+        setInitialValues((prev) => fields.reduce((acc, field) => {
+          const tableColumn = getTableColumn(field);
+          if (tableColumn) {
+            const data = values[tableColumn.name];
+            if (data && field.autofill)
+              return __spreadProps(__spreadValues({}, acc), {
+                [tableColumn.name]: data
+              });
+          }
+          return acc;
+        }, __spreadValues({}, prev)));
+        resetForm();
+        if (linkRef.current != null)
+          linkRef.current.click();
+      } catch (error) {
+        setStatus({
+          error: "An unexpected error has occurred, please try again later"
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    }
+  }
+  useEffect(() => {
+    setInitialValues((prev) => fields.reduce((acc, formField) => {
+      const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+      if (tableColumn && formField.autofill) {
+        const storedValue = localStorage.getItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`);
+        if (storedValue) {
+          try {
+            acc[tableColumn.name] = JSON.parse(storedValue);
+          } catch (e) {
+          }
+        }
+      }
+      return acc;
+    }, __spreadValues({}, prev)));
+  }, [fields, table]);
+  return /* @__PURE__ */ jsx(Provider, {
+    value: {
+      shape,
+      size,
+      contrast,
+      brandColor,
+      labelTextStyle,
+      labelTextColor
+    },
+    children: tableId == null ? /* @__PURE__ */ jsx(Placeholder$1, {
+      ref: setRefEl,
+      className: cx(width),
+      margin
+    }) : /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx(Formik, {
+        onSubmit: handleSubmit,
+        initialValues,
+        initialStatus: {
+          error: null
+        },
+        enableReinitialize: true,
+        children: (formik) => {
+          const error = formik.status && formik.status.error;
+          const errors = fields.map((field) => {
+            const tableColumn = getTableColumn(field);
+            return tableColumn && getIn(formik.touched, tableColumn.name) && getIn(formik.errors, tableColumn.name);
+          }).filter((message) => typeof message === "string");
+          return /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsxs(GridForm, {
+              ref: setRefEl,
+              id,
+              className: cx(width),
+              margin,
+              size,
+              onSubmit: formik.handleSubmit,
+              onReset: formik.handleReset,
+              noValidate: true,
+              children: [fields.map((field, index) => {
+                const tableColumn = getTableColumn(field);
+                return /* @__PURE__ */ jsx(GridItem$1, {
+                  ref: items[index],
+                  grid,
+                  index,
+                  rowGap: gap,
+                  columnGap: gap,
+                  children: /* @__PURE__ */ jsx(Field, {
+                    tableColumn,
+                    tableFormField: field
+                  })
+                }, field.id);
+              }), /* @__PURE__ */ jsxs(GridItem$1, {
+                ref: items[fields.length],
+                grid,
+                index: fields.length,
+                rowGap: gap,
+                columnGap: gap,
+                children: [/* @__PURE__ */ jsx(StyledButton, {
+                  type: "submit",
+                  disabled: formik.isSubmitting || isDone,
+                  shape,
+                  size,
+                  color: brandColor,
+                  variant: submitVariant,
+                  textColor: submitTextColor,
+                  width: submitWidth,
+                  alignment: submitAlignment,
+                  textStyle: submitTextStyle,
+                  children: formik.isSubmitting ? /* @__PURE__ */ jsx(Spinner, {}) : isDone ? /* @__PURE__ */ jsx(IconContainer, {
+                    children: /* @__PURE__ */ jsx(SvgCheck12, {})
+                  }) : submitLabel
+                }), (errors.length > 0 || error) && /* @__PURE__ */ jsxs(ErrorContainer, {
+                  children: [errors.map((message) => /* @__PURE__ */ jsx(ErrorMessage, {
+                    children: message
+                  }, message)), error != null && /* @__PURE__ */ jsx(ErrorMessage, {
+                    children: error
+                  })]
+                })]
+              })]
+            }), submitLink != null && /* @__PURE__ */ jsx(Link, {
+              ref: linkRef,
+              hidden: true,
+              link: submitLink
+            })]
+          });
+        }
+      })
+    })
+  });
+});
+function registerComponent$5(runtime) {
+  return runtime.registerComponent(Form, {
+    type: "./components/Form/index.js",
+    label: "Form",
+    icon: "Form40",
+    props: {
+      id: ElementID(),
+      tableId: Table(),
+      fields: TableFormFields(),
+      submitLink: Link$1((props) => ({
+        label: "Redirect to",
+        options: [{
+          value: "OPEN_PAGE",
+          label: "Open page"
+        }, {
+          value: "OPEN_URL",
+          label: "Open URL"
+        }],
+        hidden: props.tableId == null
+      })),
+      gap: GapY((props) => ({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 10,
+            unit: "px"
+          }
+        }],
+        label: "Gap",
+        defaultValue: {
+          value: 0,
+          unit: "px"
+        },
+        hidden: props.tableId == null
+      })),
+      shape: ResponsiveIconRadioGroup((props) => ({
+        label: "Shape",
+        options: [{
+          label: "Pill",
+          value: Shapes.PILL,
+          icon: "ButtonPill16"
+        }, {
+          label: "Rounded",
+          value: Shapes.ROUNDED,
+          icon: "ButtonRounded16"
+        }, {
+          label: "Square",
+          value: Shapes.SQUARE,
+          icon: "ButtonSquare16"
+        }],
+        defaultValue: Shapes.ROUNDED,
+        hidden: props.tableId == null
+      })),
+      size: ResponsiveIconRadioGroup((props) => ({
+        label: "Size",
+        options: [{
+          label: "Small",
+          value: Sizes.SMALL,
+          icon: "SizeSmall16"
+        }, {
+          label: "Medium",
+          value: Sizes.MEDIUM,
+          icon: "SizeMedium16"
+        }, {
+          label: "Large",
+          value: Sizes.LARGE,
+          icon: "SizeLarge16"
+        }],
+        defaultValue: Sizes.MEDIUM,
+        hidden: (props == null ? void 0 : props.tableId) == null
+      })),
+      contrast: ResponsiveIconRadioGroup((props) => ({
+        label: "Color",
+        options: [{
+          label: "Light mode",
+          value: Contrasts.LIGHT,
+          icon: "Sun16"
+        }, {
+          label: "Dark mode",
+          value: Contrasts.DARK,
+          icon: "Moon16"
+        }],
+        defaultValue: Contrasts.LIGHT,
+        hidden: props.tableId == null
+      })),
+      labelTextStyle: TextStyle({
+        label: "Label text style"
+      }),
+      labelTextColor: ResponsiveColor((props, device) => {
+        const hidden = props.tableId == null;
+        const responsiveContrast = props.contrast;
+        const contrast = findDeviceOverride(responsiveContrast, device);
+        return {
+          hidden,
+          label: "Label text color",
+          placeholder: (contrast == null ? void 0 : contrast.value) === Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
+        };
+      }),
+      submitTextStyle: TextStyle({
+        label: "Button text style"
+      }),
+      brandColor: ResponsiveColor((props) => ({
+        label: "Button color",
+        placeholder: "black",
+        hidden: props.tableId == null
+      })),
+      submitTextColor: ResponsiveColor((props) => ({
+        label: "Button text color",
+        placeholder: "white",
+        hidden: props.tableId == null
+      })),
+      submitLabel: TextInput((props) => ({
+        label: "Button label",
+        placeholder: "Submit",
+        hidden: props.tableId == null
+      })),
+      submitVariant: ResponsiveSelect((props) => ({
+        label: "Button style",
+        options: [{
+          value: "flat",
+          label: "Flat"
+        }, {
+          value: "outline",
+          label: "Outline"
+        }, {
+          value: "shadow",
+          label: "Floating"
+        }, {
+          value: "clear",
+          label: "Clear"
+        }, {
+          value: "blocky",
+          label: "Blocky"
+        }, {
+          value: "bubbly",
+          label: "Bubbly"
+        }, {
+          value: "skewed",
+          label: "Skewed"
+        }],
+        defaultValue: "flat",
+        hidden: props.tableId == null
+      })),
+      submitWidth: ResponsiveLength((props) => ({
+        label: "Button width",
+        hidden: props.tableId == null
+      })),
+      submitAlignment: ResponsiveIconRadioGroup((props) => ({
+        label: "Button alignment",
+        options: [{
+          label: "Left",
+          value: Alignments.LEFT,
+          icon: "AlignLeft16"
+        }, {
+          label: "Center",
+          value: Alignments.CENTER,
+          icon: "AlignCenter16"
+        }, {
+          label: "Right",
+          value: Alignments.RIGHT,
+          icon: "AlignRight16"
+        }],
+        defaultValue: Alignments.CENTER,
+        hidden: props.tableId == null
+      })),
+      width: Width({
+        format: Width.Formats.ClassName,
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 550,
+            unit: "px"
+          }
+        }],
+        defaultValue: {
+          value: 100,
+          unit: "%"
+        }
+      }),
+      margin: 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.createElement("svg", _extends$s({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 28
+  }, props), _path$s || (_path$s = /* @__PURE__ */ React.createElement("path", {
+    d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
+  })));
+};
+const GutterContainer = styled.div`
+  ${(p) => cssMediaRules([p.gutter], ([gutter = {
+  value: 0,
+  unit: "px"
+}]) => css`
+        padding-left: ${p.first ? "0px" : `${gutter.value / 2}${gutter.unit}`};
+        padding-right: ${p.last ? "0px" : `${gutter.value / 2}${gutter.unit}`};
+      `)}
+`;
+const PlaceholderLink$1 = styled.div`
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.button === true ? 32 : 8}px;
+  background-color: #a1a8c2;
+  border-radius: ${(props) => props.button === true ? 6 : 2}px;
+  opacity: 0.4;
+`;
+const links$1 = [{
+  width: 50
+}, {
+  width: 70
+}, {
+  width: 60
 }, {
   width: 80,
   button: true
@@ -3633,9 +5447,9 @@ function LinksPlaceholder({
     }, i))
   });
 }
-var _path$q;
-function _extends$q() {
-  _extends$q = Object.assign || function(target) {
+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) {
@@ -3646,20 +5460,20 @@ function _extends$q() {
     }
     return target;
   };
-  return _extends$q.apply(this, arguments);
+  return _extends$r.apply(this, arguments);
 }
 var SvgCaretDown8 = function SvgCaretDown82(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends$q({
+  return /* @__PURE__ */ React.createElement("svg", _extends$r({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$r || (_path$r = /* @__PURE__ */ React.createElement("path", {
     d: "M1 2a1 1 0 0 0-.707 1.707l3 3a1 1 0 0 0 1.414 0l3-3A1 1 0 0 0 7 2H1z"
   })));
 };
-var _path$p;
-function _extends$p() {
-  _extends$p = Object.assign || function(target) {
+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) {
@@ -3670,20 +5484,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.createElement("svg", _extends$p({
+  return /* @__PURE__ */ React.createElement("svg", _extends$q({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$q || (_path$q = /* @__PURE__ */ React.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) {
@@ -3694,20 +5508,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.createElement("svg", _extends$o({
+  return /* @__PURE__ */ React.createElement("svg", _extends$p({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$p || (_path$p = /* @__PURE__ */ React.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) {
@@ -3718,14 +5532,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.createElement("svg", _extends$n({
+  return /* @__PURE__ */ React.createElement("svg", _extends$o({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$o || (_path$o = /* @__PURE__ */ React.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"
@@ -3800,22 +5614,22 @@ const StyledDropDownItem = styled(Link)`
     background-color: rgba(0, 0, 0, 0.04);
   }
 `;
-function DropDownItem$1(_o) {
-  var _p = _o, {
+function DropDownItem$1(_S) {
+  var _T = _S, {
     color
-  } = _p, restOfProps = __objRest(_p, [
+  } = _T, restOfProps = __objRest(_T, [
     "color"
   ]);
   return /* @__PURE__ */ jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
     color: useColor(color)
   }));
 }
-function DropDownButton(_q) {
-  var _r = _q, {
+function DropDownButton(_U) {
+  var _V = _U, {
     label,
     caret = "caret",
     links: links2 = []
-  } = _r, restOfProps = __objRest(_r, [
+  } = _V, restOfProps = __objRest(_V, [
     "label",
     "caret",
     "links"
@@ -3831,7 +5645,7 @@ function DropDownButton(_q) {
   }, [setPosition]);
   return /* @__PURE__ */ jsxs(DropDownContainer, {
     ref: container,
-    children: [/* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, restOfProps), {
+    children: [/* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
       children: /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
@@ -3861,9 +5675,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) {
@@ -3874,14 +5688,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.createElement("svg", _extends$m({
+  return /* @__PURE__ */ React.createElement("svg", _extends$n({
     width: 16,
     height: 16,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$m || (_path$m = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$n || (_path$n = /* @__PURE__ */ React.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"
@@ -3892,7 +5706,7 @@ const DropDownMenu = styled.div`
   flex-direction: column;
   padding: 8px;
 `;
-const ButtonLink$1 = styled(Button)`
+const ButtonLink$1 = styled(Button$1)`
   margin: 8px 0;
 `;
 const StyledLink$2 = styled(Link)`
@@ -3905,24 +5719,24 @@ const StyledLink$2 = styled(Link)`
         color: ${color == null ? "black" : colorToString(color)};
       `)}
 `;
-function DropDownItem(_s) {
-  var _t = _s, {
+function DropDownItem(_W) {
+  var _X = _W, {
     color
-  } = _t, restOfProps = __objRest(_t, [
+  } = _X, restOfProps = __objRest(_X, [
     "color"
   ]);
   return /* @__PURE__ */ jsx(StyledLink$2, __spreadProps(__spreadValues({}, restOfProps), {
     color: useColor(color)
   }));
 }
-function MobileDropDownButton(_u) {
-  var _v = _u, {
+function MobileDropDownButton(_Y) {
+  var _Z = _Y, {
     label,
     caret,
     links: links2 = [],
     onClose = () => {
     }
-  } = _v, restOfProps = __objRest(_v, [
+  } = _Z, restOfProps = __objRest(_Z, [
     "label",
     "caret",
     "links",
@@ -3964,10 +5778,10 @@ function MobileDropDownButton(_u) {
     })]
   });
 }
-const ButtonLink = styled(Button)`
+const ButtonLink = styled(Button$1)`
   margin: 8px 0;
 `;
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   position: fixed;
   flex-direction: column;
   width: 100%;
@@ -4021,12 +5835,12 @@ function MobileMenu({
   onClose = () => {
   }
 }) {
-  return /* @__PURE__ */ jsxs(Container$2, {
+  return /* @__PURE__ */ jsxs(Container$3, {
     animation,
-    backgroundColor: useColor(backgroundColor),
+    backgroundColor,
     open,
     children: [/* @__PURE__ */ jsx(CloseIconContainer, {
-      color: useColor(closeIconColor),
+      color: closeIconColor,
       onClick: onClose,
       children: /* @__PURE__ */ jsx(SvgTimes16, {})
     }), /* @__PURE__ */ jsx("div", {
@@ -4047,10 +5861,9 @@ function MobileMenu({
     })]
   });
 }
-const Container$1 = styled.nav`
+const Container$2 = styled.nav`
   display: flex;
   align-items: center;
-  ${cssWidth()}
   ${cssMargin()}
   ${cssTextStyle()}
 `;
@@ -4104,11 +5917,11 @@ const Navigation = forwardRef(function Navigation2({
   margin
 }, ref) {
   const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Container$1, {
+  return /* @__PURE__ */ jsxs(Container$2, {
     ref,
     id,
+    className: cx(width),
     margin,
-    width,
     textStyle: linkTextStyle,
     children: [showLogo === true && /* @__PURE__ */ jsx(ImageComponent, {
       altText: logoAltText,
@@ -4129,7 +5942,7 @@ const Navigation = forwardRef(function Navigation2({
           gutter,
           first: i === 0,
           last: i === links2.length - 1,
-          children: [link.type === "button" && /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, link.payload), {
+          children: [link.type === "button" && /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, link.payload), {
             children: link.payload.label
           })), link.type === "dropdown" && /* @__PURE__ */ jsx(DropDownButton, __spreadValues({}, link.payload))]
         }, link.id)) : /* @__PURE__ */ jsx(LinksPlaceholder, {
@@ -4137,7 +5950,7 @@ const Navigation = forwardRef(function Navigation2({
         })
       }), /* @__PURE__ */ jsx(OpenIconContainer, {
         alignment,
-        color: useColor(mobileMenuOpenIconColor),
+        color: mobileMenuOpenIconColor,
         mobileMenuAnimation,
         onClick: () => setIsOpen(true),
         children: /* @__PURE__ */ jsx(SvgMobileMenu28, {})
@@ -4152,7 +5965,7 @@ const Navigation = forwardRef(function Navigation2({
     })]
   });
 });
-function registerComponent$3(runtime) {
+function registerComponent$4(runtime) {
   return runtime.registerComponent(Navigation, {
     type: "./components/Navigation/index.js",
     label: "Navigation",
@@ -4160,30 +5973,47 @@ function registerComponent$3(runtime) {
     props: {
       id: ElementID(),
       links: NavigationLinks(),
-      linkTextStyle: TextStyle({
-        label: "Link text style"
+      linkTextStyle: TextStyle((props) => {
+        const links2 = props.links;
+        return {
+          label: "Link text style",
+          hidden: links2 == null || links2.length === 0
+        };
       }),
-      showLogo: Checkbox({
+      showLogo: Checkbox$1({
         preset: true,
         label: "Show logo"
       }),
-      logoFile: Image$1({
-        label: "Logo"
-      }),
-      logoWidth: ResponsiveLength({
+      logoFile: Image$1((props) => ({
+        label: "Logo",
+        hidden: props.showLogo === false
+      })),
+      logoWidth: ResponsiveLength((props) => ({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 100,
+            unit: "px"
+          }
+        }],
         label: "Logo width",
+        min: 0,
+        max: 1e3,
         options: [{
           value: "px",
           label: "Pixels",
           icon: "Px16"
-        }]
-      }),
-      logoAltText: TextInput({
-        label: "Logo alt text"
-      }),
-      logoLink: Link$1({
-        label: "Logo on click"
-      }),
+        }],
+        hidden: props.showLogo === false
+      })),
+      logoAltText: TextInput((props) => ({
+        label: "Logo alt text",
+        hidden: props.showLogo === false
+      })),
+      logoLink: Link$1((props) => ({
+        label: "Logo on click",
+        hidden: props.showLogo === false
+      })),
       alignment: ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [{
@@ -4228,19 +6058,35 @@ function registerComponent$3(runtime) {
           label: "Cover from left"
         }]
       }),
-      mobileMenuOpenIconColor: ResponsiveColor({
-        label: "Open icon color",
-        placeholder: "rgba(161, 168, 194, 0.5)"
+      mobileMenuOpenIconColor: ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Open icon color",
+          placeholder: "rgba(161, 168, 194, 0.5)",
+          hidden
+        };
       }),
-      mobileMenuCloseIconColor: ResponsiveColor({
-        label: "Close icon color",
-        placeholder: "rgba(161, 168, 194, 0.5)"
+      mobileMenuCloseIconColor: ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Close icon color",
+          placeholder: "rgba(161, 168, 194, 0.5)",
+          hidden
+        };
       }),
-      mobileMenuBackgroundColor: ResponsiveColor({
-        label: "Menu BG color",
-        placeholder: "black"
+      mobileMenuBackgroundColor: ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Menu BG color",
+          placeholder: "black",
+          hidden
+        };
       }),
       width: Width({
+        format: Width.Formats.ClassName,
         defaultValue: {
           value: 100,
           unit: "%"
@@ -4256,7 +6102,7 @@ const PlaceholderBase = styled.div`
   height: 80px;
   padding: 8px;
 `;
-var Placeholder2 = forwardRef(function Placeholder3(props, ref) {
+var Placeholder3 = forwardRef(function Placeholder4(props, ref) {
   return /* @__PURE__ */ jsx(PlaceholderBase, __spreadProps(__spreadValues({}, props), {
     ref,
     children: /* @__PURE__ */ jsx("svg", {
@@ -4324,12 +6170,12 @@ const Root = forwardRef(function Page2({
           children: /* @__PURE__ */ jsx(Element$1, {
             element: child
           })
-        }, child.key)) : /* @__PURE__ */ jsx(Placeholder2, {})
+        }, child.key)) : /* @__PURE__ */ jsx(Placeholder3, {})
       })
     })]
   });
 });
-function registerComponent$2(runtime) {
+function registerComponent$3(runtime) {
   return runtime.registerComponent(Root, {
     type: "./components/Root/index.js",
     label: "Page",
@@ -4342,6 +6188,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.createElement("svg", _extends$m({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20
+  }, props), _path$m || (_path$m = /* @__PURE__ */ React.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) {
@@ -4357,13 +6227,13 @@ function _extends$l() {
   };
   return _extends$l.apply(this, arguments);
 }
-var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$l || (_path$l = /* @__PURE__ */ React.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;
@@ -4381,13 +6251,13 @@ function _extends$k() {
   };
   return _extends$k.apply(this, arguments);
 }
-var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
+var SvgLogoDribbble20 = function SvgLogoDribbble202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$k || (_path$k = /* @__PURE__ */ React.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;
@@ -4405,13 +6275,13 @@ function _extends$j() {
   };
   return _extends$j.apply(this, arguments);
 }
-var SvgLogoDribbble20 = function SvgLogoDribbble202(props) {
+var SvgLogoFacebook20 = function SvgLogoFacebook202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$j || (_path$j = /* @__PURE__ */ React.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;
@@ -4429,13 +6299,13 @@ function _extends$i() {
   };
   return _extends$i.apply(this, arguments);
 }
-var SvgLogoFacebook20 = function SvgLogoFacebook202(props) {
+var SvgLogoGithub20 = function SvgLogoGithub202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$i || (_path$i = /* @__PURE__ */ React.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;
@@ -4453,13 +6323,13 @@ function _extends$h() {
   };
   return _extends$h.apply(this, arguments);
 }
-var SvgLogoGithub20 = function SvgLogoGithub202(props) {
+var SvgLogoInstagram20 = function SvgLogoInstagram202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$h || (_path$h = /* @__PURE__ */ React.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;
@@ -4477,13 +6347,13 @@ function _extends$g() {
   };
   return _extends$g.apply(this, arguments);
 }
-var SvgLogoInstagram20 = function SvgLogoInstagram202(props) {
+var SvgLogoLinkedin20 = function SvgLogoLinkedin202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$g || (_path$g = /* @__PURE__ */ React.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;
@@ -4501,13 +6371,13 @@ function _extends$f() {
   };
   return _extends$f.apply(this, arguments);
 }
-var SvgLogoLinkedin20 = function SvgLogoLinkedin202(props) {
+var SvgLogoMedium20 = function SvgLogoMedium202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$f || (_path$f = /* @__PURE__ */ React.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;
@@ -4525,13 +6395,13 @@ function _extends$e() {
   };
   return _extends$e.apply(this, arguments);
 }
-var SvgLogoMedium20 = function SvgLogoMedium202(props) {
+var SvgLogoPinterest20 = function SvgLogoPinterest202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$e || (_path$e = /* @__PURE__ */ React.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;
@@ -4549,13 +6419,13 @@ function _extends$d() {
   };
   return _extends$d.apply(this, arguments);
 }
-var SvgLogoPinterest20 = function SvgLogoPinterest202(props) {
+var SvgLogoReddit20 = function SvgLogoReddit202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$d || (_path$d = /* @__PURE__ */ React.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;
@@ -4573,13 +6443,13 @@ function _extends$c() {
   };
   return _extends$c.apply(this, arguments);
 }
-var SvgLogoReddit20 = function SvgLogoReddit202(props) {
+var SvgLogoRss20 = function SvgLogoRss202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$c || (_path$c = /* @__PURE__ */ React.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;
@@ -4597,13 +6467,13 @@ function _extends$b() {
   };
   return _extends$b.apply(this, arguments);
 }
-var SvgLogoRss20 = function SvgLogoRss202(props) {
+var SvgLogoSnapchat20 = function SvgLogoSnapchat202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$b || (_path$b = /* @__PURE__ */ React.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;
@@ -4621,13 +6491,13 @@ function _extends$a() {
   };
   return _extends$a.apply(this, arguments);
 }
-var SvgLogoSnapchat20 = function SvgLogoSnapchat202(props) {
+var SvgLogoSoundcloud20 = function SvgLogoSoundcloud202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$a || (_path$a = /* @__PURE__ */ React.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;
@@ -4645,13 +6515,13 @@ function _extends$9() {
   };
   return _extends$9.apply(this, arguments);
 }
-var SvgLogoSoundcloud20 = function SvgLogoSoundcloud202(props) {
+var SvgLogoSpotify20 = function SvgLogoSpotify202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$9 || (_path$9 = /* @__PURE__ */ React.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;
@@ -4669,13 +6539,13 @@ function _extends$8() {
   };
   return _extends$8.apply(this, arguments);
 }
-var SvgLogoSpotify20 = function SvgLogoSpotify202(props) {
+var SvgLogoTelegram20 = function SvgLogoTelegram202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$8 || (_path$8 = /* @__PURE__ */ React.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;
@@ -4693,13 +6563,13 @@ function _extends$7() {
   };
   return _extends$7.apply(this, arguments);
 }
-var SvgLogoTelegram20 = function SvgLogoTelegram202(props) {
+var SvgLogoTumblr20 = function SvgLogoTumblr202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$7 || (_path$7 = /* @__PURE__ */ React.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;
@@ -4717,13 +6587,13 @@ function _extends$6() {
   };
   return _extends$6.apply(this, arguments);
 }
-var SvgLogoTumblr20 = function SvgLogoTumblr202(props) {
+var SvgLogoTwitch20 = function SvgLogoTwitch202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$6 || (_path$6 = /* @__PURE__ */ React.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;
@@ -4741,13 +6611,13 @@ function _extends$5() {
   };
   return _extends$5.apply(this, arguments);
 }
-var SvgLogoTwitch20 = function SvgLogoTwitch202(props) {
+var SvgLogoTwitter20 = function SvgLogoTwitter202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$5 || (_path$5 = /* @__PURE__ */ React.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;
@@ -4765,42 +6635,18 @@ function _extends$4() {
   };
   return _extends$4.apply(this, arguments);
 }
-var SvgLogoTwitter20 = function SvgLogoTwitter202(props) {
+var SvgLogoWhatsapp20 = function SvgLogoWhatsapp202(props) {
   return /* @__PURE__ */ React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
   }, props), _path$4 || (_path$4 = /* @__PURE__ */ React.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"
-  })));
-};
-var _path$3;
-function _extends$3() {
-  _extends$3 = 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$3.apply(this, arguments);
-}
-var SvgLogoWhatsapp20 = function SvgLogoWhatsapp202(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 20,
-    height: 20
-  }, props), _path$3 || (_path$3 = /* @__PURE__ */ React.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"
   })));
 };
-var _path$2;
-function _extends$2() {
-  _extends$2 = Object.assign || function(target) {
+var _path$3;
+function _extends$3() {
+  _extends$3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4811,20 +6657,20 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 var SvgLogoVimeo20 = function SvgLogoVimeo202(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends$2({
+  return /* @__PURE__ */ React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
-  }, props), _path$2 || (_path$2 = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /* @__PURE__ */ React.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"
   })));
 };
-var _path$1;
-function _extends$1() {
-  _extends$1 = Object.assign || function(target) {
+var _path$2;
+function _extends$2() {
+  _extends$2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4835,20 +6681,20 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 var SvgLogoYelp20 = function SvgLogoYelp202(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends$1({
+  return /* @__PURE__ */ React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
-  }, props), _path$1 || (_path$1 = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /* @__PURE__ */ React.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) {
+var _path$1;
+function _extends$1() {
+  _extends$1 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4859,14 +6705,14 @@ function _extends() {
     }
     return target;
   };
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 var SvgLogoYoutube20 = function SvgLogoYoutube202(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends({
+  return /* @__PURE__ */ React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
-  }, props), _path || (_path = /* @__PURE__ */ React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /* @__PURE__ */ React.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"
   })));
 };
@@ -5006,11 +6852,10 @@ function SocialLinksPlaceholder({
     }, link.id))
   });
 }
-const Container = styled.div`
+const Container$1 = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  ${cssWidth()}
   ${cssMargin()}
   ${(p) => cssMediaRules([p.alignment], ([alignment = "center"]) => css`
         justify-content: ${alignment};
@@ -5088,13 +6933,11 @@ const SocialLinks = forwardRef(function SocialLinks2({
   width,
   margin
 }, ref) {
-  const fillData = useColor(fill);
-  const backgroundColorData = useColor(backgroundColor);
-  return /* @__PURE__ */ jsx(Container, {
+  return /* @__PURE__ */ jsx(Container$1, {
     ref,
     id,
+    className: cx(width),
     alignment,
-    width,
     margin,
     children: links2.length > 0 ? links2.map((link, i) => {
       const option = SocialLinksOptions.find((o) => o.type === link.payload.type);
@@ -5105,9 +6948,9 @@ const SocialLinks = forwardRef(function SocialLinks2({
         first: i === 0,
         last: i === links2.length - 1,
         children: /* @__PURE__ */ jsx(StyledLink$1, {
-          backgroundColor: backgroundColorData,
+          backgroundColor,
           brandColor: option.brandColor,
-          fill: fillData,
+          fill,
           hoverStyle,
           link: {
             type: "OPEN_URL",
@@ -5126,7 +6969,7 @@ const SocialLinks = forwardRef(function SocialLinks2({
     })
   });
 });
-function registerComponent$1(runtime) {
+function registerComponent$2(runtime) {
   return runtime.registerComponent(SocialLinks, {
     type: "./components/SocialLinks/index.js",
     label: "Social Links",
@@ -5157,67 +7000,90 @@ function registerComponent$1(runtime) {
           openInNewTab: false
         }
       }),
-      shape: ResponsiveIconRadioGroup({
-        label: "Shape",
-        options: [{
-          label: "Naked",
-          value: "naked",
-          icon: "Star16"
-        }, {
-          label: "Circle",
-          value: "circle",
-          icon: "StarCircle16"
-        }, {
-          label: "Rounded",
-          value: "rounded",
-          icon: "StarRoundedSquare16"
-        }, {
-          label: "Square",
-          value: "square",
-          icon: "StarSquare16"
-        }],
-        defaultValue: "naked"
+      shape: ResponsiveIconRadioGroup((props) => {
+        const links2 = props.links;
+        return {
+          label: "Shape",
+          options: [{
+            label: "Naked",
+            value: "naked",
+            icon: "Star16"
+          }, {
+            label: "Circle",
+            value: "circle",
+            icon: "StarCircle16"
+          }, {
+            label: "Rounded",
+            value: "rounded",
+            icon: "StarRoundedSquare16"
+          }, {
+            label: "Square",
+            value: "square",
+            icon: "StarSquare16"
+          }],
+          defaultValue: "naked",
+          hidden: links2 == null || links2.links.length === 0
+        };
       }),
-      size: ResponsiveIconRadioGroup({
-        label: "Size",
-        options: [{
-          label: "Small",
-          value: "small",
-          icon: "SizeSmall16"
-        }, {
-          label: "Medium",
-          value: "medium",
-          icon: "SizeMedium16"
-        }, {
-          label: "Large",
-          value: "large",
-          icon: "SizeLarge16"
-        }],
-        defaultValue: "medium"
+      size: ResponsiveIconRadioGroup((props) => {
+        const links2 = props.links;
+        return {
+          label: "Size",
+          options: [{
+            label: "Small",
+            value: "small",
+            icon: "SizeSmall16"
+          }, {
+            label: "Medium",
+            value: "medium",
+            icon: "SizeMedium16"
+          }, {
+            label: "Large",
+            value: "large",
+            icon: "SizeLarge16"
+          }],
+          defaultValue: "medium",
+          hidden: links2 == null || links2.links.length === 0
+        };
       }),
-      hoverStyle: ResponsiveSelect({
-        label: "On hover",
-        options: [{
-          value: "none",
-          label: "None"
-        }, {
-          value: "grow",
-          label: "Grow"
-        }, {
-          value: "shrink",
-          label: "Shrink"
-        }, {
-          value: "fade",
-          label: "Fade"
-        }],
-        defaultValue: "none",
-        labelOrientation: "horizontal"
+      hoverStyle: ResponsiveSelect((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "On hover",
+          options: [{
+            value: "none",
+            label: "None"
+          }, {
+            value: "grow",
+            label: "Grow"
+          }, {
+            value: "shrink",
+            label: "Shrink"
+          }, {
+            value: "fade",
+            label: "Fade"
+          }],
+          defaultValue: "none",
+          labelOrientation: "horizontal",
+          hidden
+        };
       }),
-      fill: ResponsiveColor({
-        label: "Icon color"
+      fill: ResponsiveColor((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "Icon color",
+          hidden
+        };
       }),
-      backgroundColor: ResponsiveColor({
-        label: "Shape color"
+      backgroundColor: ResponsiveColor((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "Shape color",
+          hidden
+        };
       }),
       alignment: ResponsiveIconRadioGroup({
         label: "Alignment",
@@ -5254,6 +7120,7 @@ function registerComponent$1(runtime) {
         }
       }),
       width: Width({
+        format: Width.Formats.ClassName,
         defaultValue: {
           value: 100,
           unit: "%"
@@ -5374,10 +7241,10 @@ const Span = styled.span`
             `}
       `, shallowMergeFallbacks)}
 `;
-function Mark(_w) {
-  var _x = _w, {
+function Mark(__) {
+  var _$ = __, {
     value
-  } = _x, restOfProps = __objRest(_x, [
+  } = _$, restOfProps = __objRest(_$, [
     "value"
   ]);
   const typographyStyle = useTypographyMark(value);
@@ -5415,10 +7282,10 @@ const StyledBlock = styled.div`
           border-left: 5px solid rgba(0, 0, 0, 0.1);
         ` : ""}
 `;
-var Block = forwardRef(function Block2(_y, ref) {
-  var _z = _y, {
+var Block = forwardRef(function Block2(_aa, ref) {
+  var _ba = _aa, {
     textAlign
-  } = _z, restOfProps = __objRest(_z, [
+  } = _ba, restOfProps = __objRest(_ba, [
     "textAlign"
   ]);
   return /* @__PURE__ */ jsx(StyledBlock, __spreadProps(__spreadValues({}, restOfProps), {
@@ -5543,10 +7410,10 @@ function Inlines() {
     }
   };
 }
-const RichTextEditor = styled(forwardRef(function RichTextEditor2(_A, ref) {
-  var _B = _A, {
+const RichTextEditor = styled(forwardRef(function RichTextEditor2(_ca, ref) {
+  var _da = _ca, {
     placeholder: placeholder2 = "Write some text..."
-  } = _B, restOfProps = __objRest(_B, [
+  } = _da, restOfProps = __objRest(_da, [
     "placeholder"
   ]);
   const plugins = useMemo(() => [Lists(), LinkPlugin(), Inlines(), DeviceOverridesBlockPlugin(), DeviceOverridesMarksPlugin()], []);
@@ -5563,7 +7430,6 @@ const RichTextEditor = styled(forwardRef(function RichTextEditor2(_A, ref) {
   }
 `;
 const StyledRichTextEditor = styled(RichTextEditor)`
-  ${cssWidth()}
   ${cssMargin()}
 `;
 const defaultText = {
@@ -5626,7 +7492,7 @@ const Text = forwardRef(function Text2({
   }, [shouldCommit]);
   function handleChange(change) {
     setValue(change.value);
-    if (change.value.document !== value.document) {
+    if (change.value !== value) {
       setShouldCommit(false);
       controller == null ? void 0 : controller.onChange(change);
     }
@@ -5654,8 +7520,8 @@ const Text = forwardRef(function Text2({
   return /* @__PURE__ */ jsx(StyledRichTextEditor, {
     id,
     ref: setEditor,
+    className: cx(width),
     readOnly: !isInBuilder,
-    width,
     margin,
     value,
     onChange: handleChange,
@@ -5663,13 +7529,13 @@ const Text = forwardRef(function Text2({
     onKeyDown: handleKeyDown
   });
 });
-function registerComponent(runtime) {
+function registerComponent$1(runtime) {
   return runtime.registerComponent(Text, {
     type: "./components/Text/index.js",
     label: "Text",
     props: {
       id: ElementID(),
-      text: RichText({
+      text: RichText(() => ({
         preset: {
           document: {
             nodes: [{
@@ -5710,8 +7576,9 @@ function registerComponent(runtime) {
             }]
           }
         }
-      }),
+      })),
       width: Width({
+        format: Width.Formats.ClassName,
         preset: [{
           deviceId: "desktop",
           value: {
@@ -5741,18 +7608,103 @@ function registerComponent(runtime) {
     }
   });
 }
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  ${cssMargin()}
+  ${cssBorderRadius()}
+`;
+const ASPECT_RATIO = 16 / 9;
+const Video = forwardRef(function Video2({
+  id,
+  video,
+  width,
+  margin,
+  borderRadius
+}, ref) {
+  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url);
+  return /* @__PURE__ */ jsx(Container, {
+    ref,
+    id,
+    className: cx(width),
+    margin,
+    borderRadius,
+    children: /* @__PURE__ */ jsx("div", {
+      style: {
+        position: "relative",
+        paddingTop: `${100 / ASPECT_RATIO}%`
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: canPlayUrl === true ? /* @__PURE__ */ jsx(ReactPlayer, __spreadProps(__spreadValues({}, video), {
+          width: "100%",
+          height: "100%",
+          config: {
+            vimeo: {
+              playerOptions: {
+                background: video != null && !video.controls
+              }
+            },
+            wistia: {
+              options: {
+                endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
+              }
+            }
+          }
+        })) : /* @__PURE__ */ jsx("img", {
+          width: "100%",
+          src: placeholders.video.src,
+          alt: "Video Placeholder"
+        })
+      })
+    })
+  });
+});
+function registerComponent(runtime) {
+  return runtime.registerComponent(Video, {
+    type: "./components/Video/index.js",
+    label: "Video",
+    icon: "Video40",
+    props: {
+      id: ElementID(),
+      video: Video$1({
+        preset: {
+          controls: true
+        }
+      }),
+      width: Width({
+        format: Width.Formats.ClassName,
+        defaultValue: {
+          value: 560,
+          unit: "px"
+        }
+      }),
+      margin: Margin(),
+      borderRadius: BorderRadius()
+    }
+  });
+}
 function registerBuiltinComponents(runtime) {
-  const unregisterBoxComponent = registerComponent$a(runtime);
-  const unregisterButtonComponent = registerComponent$9(runtime);
-  const unregisterCarouselComponent = registerComponent$7(runtime);
-  const unregisterCountdownComponent = registerComponent$6(runtime);
-  const unregisterDividerComponent = registerComponent$5(runtime);
-  const unregisterEmbedComponent = registerComponent$4(runtime);
-  const unregisterImageComponent = registerComponent$8(runtime);
-  const unregisterNavigationComponent = registerComponent$3(runtime);
-  const unregisterRootComponent = registerComponent$2(runtime);
-  const unregisterSocialLinksComponent = registerComponent$1(runtime);
-  const unregisterTextComponent = registerComponent(runtime);
+  const unregisterBoxComponent = registerComponent$c(runtime);
+  const unregisterButtonComponent = registerComponent$b(runtime);
+  const unregisterCarouselComponent = registerComponent$9(runtime);
+  const unregisterCountdownComponent = registerComponent$8(runtime);
+  const unregisterDividerComponent = registerComponent$7(runtime);
+  const unregisterEmbedComponent = registerComponent$6(runtime);
+  const unregisterFormComponent = registerComponent$5(runtime);
+  const unregisterImageComponent = registerComponent$a(runtime);
+  const unregisterNavigationComponent = registerComponent$4(runtime);
+  const unregisterRootComponent = registerComponent$3(runtime);
+  const unregisterSocialLinksComponent = registerComponent$2(runtime);
+  const unregisterTextComponent = registerComponent$1(runtime);
+  const unregisterVideoComponent = registerComponent(runtime);
   return () => {
     unregisterBoxComponent();
     unregisterButtonComponent();
@@ -5760,12 +7712,164 @@ 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);
+}
+var SvgWarning20 = function SvgWarning202(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends({
+    width: 20,
+    height: 20,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React.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("div")`
+  width: 100%;
+  height: 54px;
+  background-color: #fcedf2;
+  border-radius: 6px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #c73e6d;
+  fill: currentColor;
+  font-family: Heebo, sans-serif;
+  font-size: 16px;
+`;
+const FallbackComponent = forwardRef(function FallbackComponent2({
+  text
+}, ref) {
+  return /* @__PURE__ */ jsxs(ErrorDiv, {
+    ref,
+    children: [/* @__PURE__ */ jsx(SvgWarning20, {}), /* @__PURE__ */ jsx("span", {
+      children: text
+    })]
+  });
+});
+function useStyleControlDataClass(style, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return css$1(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
+    maxWidth: "100%"
+  }), responsiveStyle([
+    style == null ? void 0 : style.width,
+    style == null ? void 0 : style.margin,
+    style == null ? void 0 : style.padding,
+    useBorder(style == null ? void 0 : style.border),
+    style == null ? void 0 : style.borderRadius
+  ], ([width, margin, padding, border, borderRadius]) => {
+    var _a, _b, _c, _d, _e, _f, _g2, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
+      width: (_a = widthToString(width)) != null ? _a : "100%"
+    }), properties.includes(StyleControlProperty.Margin) && {
+      marginTop: (_b = marginToString(margin == null ? void 0 : margin.marginTop)) != null ? _b : 0,
+      marginRight: (_c = marginToString(margin == null ? void 0 : margin.marginRight)) != null ? _c : "auto",
+      marginBottom: (_d = marginToString(margin == null ? void 0 : margin.marginBottom)) != null ? _d : 0,
+      marginLeft: (_e = marginToString(margin == null ? void 0 : margin.marginLeft)) != null ? _e : "auto"
+    }), properties.includes(StyleControlProperty.Padding) && {
+      paddingTop: (_f = paddingToString(padding == null ? void 0 : padding.paddingTop)) != null ? _f : 0,
+      paddingRight: (_g2 = paddingToString(padding == null ? void 0 : padding.paddingRight)) != null ? _g2 : 0,
+      paddingBottom: (_h = paddingToString(padding == null ? void 0 : padding.paddingBottom)) != null ? _h : 0,
+      paddingLeft: (_i = paddingToString(padding == null ? void 0 : padding.paddingLeft)) != null ? _i : 0
+    }), properties.includes(StyleControlProperty.Border) && {
+      borderTop: (_j = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _j : "0 solid black",
+      borderRight: (_k = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _k : "0 solid black",
+      borderBottom: (_l = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _l : "0 solid black",
+      borderLeft: (_m = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _m : "0 solid black"
+    }), properties.includes(StyleControlProperty.BorderRadius) && {
+      borderTopLeftRadius: (_n = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _n : 0,
+      borderTopRightRadius: (_o = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _o : 0,
+      borderBottomRightRadius: (_p = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _p : 0,
+      borderBottomLeftRadius: (_q = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _q : 0
+    });
+  })));
+  function widthToString(widthProperty) {
+    if (widthProperty == null)
+      return null;
+    return `${widthProperty.value}${widthProperty.unit}`;
+  }
+  function marginToString(marginProperty) {
+    if (marginProperty == null)
+      return null;
+    if (marginProperty === "auto")
+      return marginProperty;
+    return `${marginProperty.value}${marginProperty.unit}`;
+  }
+  function paddingToString(paddingProperty) {
+    if (paddingProperty == null)
+      return null;
+    return `${paddingProperty.value}${paddingProperty.unit}`;
+  }
+  function borderSideToString(borderSide) {
+    if (borderSide == null)
+      return null;
+    const { width, color, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
+  }
+  function borderRadiusToString(borderRadius) {
+    if (borderRadius == null)
+      return null;
+    return `${borderRadius.value}${borderRadius.unit}`;
+  }
+}
+function useFormattedStyle(styleControlData, controlDefinition) {
+  return useStyleControlDataClass(styleControlData, controlDefinition);
+}
+function useDeviceMode() {
+  return "desktop";
+}
+function useWidth(value, descriptor, props) {
+  const deviceMode = useDeviceMode();
+  const options = useMemo(() => typeof descriptor.options === "function" ? descriptor.options(props, deviceMode) : descriptor.options, [props, deviceMode]);
+  return useMemo(() => options.format === WidthControlValueFormats.ClassName ? css$1(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
+}
+function useResponsiveColor(value) {
+  return useColor(value);
+}
+function useProps(element) {
+  var _a;
+  const store = useStore();
+  const propControllerDescriptorsRef = useRef((_a = getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
+  const props = element.props;
+  return Object.fromEntries(Object.entries(propControllerDescriptorsRef.current).map(([propName, descriptor]) => {
+    switch (descriptor.type) {
+      case Types.ResponsiveColor: {
+        const color = useResponsiveColor(props[propName]);
+        return [propName, color];
+      }
+      case Types.Width:
+        return [propName, useWidth(props[propName], descriptor, props)];
+      case StyleControlType:
+        return [propName, useFormattedStyle(props[propName], descriptor)];
+      default:
+        return [propName, props[propName]];
+    }
+  }));
 }
 const contextDefaultValue = configureStore();
 function createReactRuntime(store) {
@@ -5793,39 +7897,31 @@ function createReactRuntime(store) {
 const ReactRuntime = createReactRuntime(contextDefaultValue);
 const Context = createContext(contextDefaultValue);
 function RuntimeProvider({
+  client,
   children,
-  defaultRootElements,
-  registerComponents,
-  makeswiftApiEndpoint
+  rootElements
 }) {
   const [store, setStore] = useState(() => {
     const store2 = configureStore({
       preloadedState: contextDefaultValue.getState(),
-      rootElements: defaultRootElements
+      rootElements
     });
     const runtime = createReactRuntime(store2);
     registerBuiltinComponents(runtime);
-    registerComponents == null ? void 0 : registerComponents(runtime);
     return store2;
   });
-  const [client, setClient] = useState(new ApolloClient({
-    uri: makeswiftApiEndpoint,
-    cache: new InMemoryCache()
-  }));
-  useEffect(() => {
-    setClient(({
-      cache
-    }) => new ApolloClient({
-      uri: makeswiftApiEndpoint,
-      cache
-    }));
-  }, [makeswiftApiEndpoint]);
   useEffect(() => {
     return registerBuiltinComponents(createReactRuntime(store));
   }, [store]);
   useEffect(() => {
-    return registerComponents == null ? void 0 : registerComponents(createReactRuntime(store));
-  }, [store, registerComponents]);
+    var _a;
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(registerDocumentEffect(createDocument(documentKey, rootElement))));
+    return () => {
+      unregisterDocuments.forEach((unregisterDocument) => {
+        unregisterDocument();
+      });
+    };
+  }, [store, rootElements]);
   useEffect(() => {
     const isInBuilder = window.parent !== window;
     if (isInBuilder)
@@ -5834,7 +7930,7 @@ function RuntimeProvider({
       const ReactBuilderPreview = await import("./react-builder-preview.es.js");
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client
+        client: client.apolloClient
       }));
     }
   }, [client]);
@@ -5861,18 +7957,40 @@ function RuntimeProvider({
   }, []);
   return /* @__PURE__ */ jsx(Context.Provider, {
     value: store,
-    children: /* @__PURE__ */ jsx(ApolloProvider, {
+    children: /* @__PURE__ */ jsx(MakeswiftProvider, {
       client,
       children
     })
   });
 }
+const PageContext = createContext(null);
+function usePageIdOrNull() {
+  return useContext(PageContext);
+}
+function usePageId() {
+  const pageIdOrNull = usePageIdOrNull();
+  if (pageIdOrNull == null)
+    throw new Error("`usePageId` must be used with `<PageProvider>`");
+  return pageIdOrNull;
+}
+function PageProvider({
+  id,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PageContext.Provider, {
+    value: id,
+    children
+  });
+}
 const DocumentContext = createContext(null);
 function useDocumentKey() {
   return useContext(DocumentContext);
 }
+function useStore() {
+  return useContext(Context);
+}
 function useSelector(selector) {
-  const store = useContext(Context);
+  const store = useStore();
   return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
 }
 function useComponent(type) {
@@ -5882,8 +8000,8 @@ function useElementId(elementKey) {
   const documentKey = useDocumentKey();
   return useSelector((state) => documentKey == null || elementKey == null ? null : getElementId(state, documentKey, elementKey));
 }
-function useDocumentRootElement(documentKey) {
-  return useSelector((state) => getDocumentRootElement(state, documentKey));
+function useDocument(documentKey) {
+  return useSelector((state) => getDocument(state, documentKey));
 }
 function useIsInBuilder() {
   return useSelector((state) => getIsInBuilder(state));
@@ -5896,19 +8014,14 @@ const ElementData = memo(forwardRef(function ElementData2({
   elementData
 }, ref) {
   const Component = useComponent(elementData.type);
+  const props = useProps(elementData);
   if (Component == null) {
-    return /* @__PURE__ */ jsxs("div", {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
       ref,
-      children: [/* @__PURE__ */ jsx("p", {
-        children: "Component Not Found"
-      }), /* @__PURE__ */ jsx("pre", {
-        children: /* @__PURE__ */ jsx("code", {
-          children: JSON.stringify(elementData, null, 2)
-        })
-      })]
+      text: "Component not found"
     });
   }
-  return /* @__PURE__ */ createElement(Component, __spreadProps(__spreadValues({}, elementData.props), {
+  return /* @__PURE__ */ createElement(Component, __spreadProps(__spreadValues({}, props), {
     key: elementData.key,
     ref
   }));
@@ -5916,24 +8029,52 @@ const ElementData = memo(forwardRef(function ElementData2({
 const ElementReference = memo(forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  return /* @__PURE__ */ jsxs("div", {
-    ref,
-    children: [/* @__PURE__ */ jsx("p", {
-      children: "Not Implemented"
-    }), /* @__PURE__ */ jsx("pre", {
-      children: /* @__PURE__ */ jsx("code", {
-        children: JSON.stringify(elementReference, null, 2)
-      })
-    })]
+  var _a;
+  const {
+    error,
+    data
+  } = useQuery(gql`
+        query ElementReferenceGlobalElement($id: ID!) {
+          globalElement(id: $id) {
+            id
+            data
+          }
+        }
+      `, {
+    variables: {
+      id: elementReference.value
+    }
+  });
+  const globalElementData = (_a = data == null ? void 0 : data.globalElement) == null ? void 0 : _a.data;
+  const elementReferenceDocument = useDocument(elementReference.key);
+  if (error != null) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref,
+      text: "Something went wrong!"
+    });
+  }
+  if (globalElementData == null) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref,
+      text: "This global component doesn't exist"
+    });
+  }
+  return elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, {
+    document: elementReferenceDocument,
+    ref
+  }) : /* @__PURE__ */ jsx(ElementData, {
+    elementData: globalElementData,
+    ref
   });
 }));
-const Element$1 = memo(function Element2({
+const Element$1 = memo(forwardRef(function Element2({
   element
-}) {
+}, ref) {
   const elementKey = element.key;
   const dispatch = useDispatch();
   const documentKey = useDocumentKey();
   const [handle, setHandle] = useState(null);
+  useImperativeHandle(ref, () => handle, [handle]);
   useEffect(() => {
     if (documentKey == null)
       return;
@@ -5951,30 +8092,32 @@ const Element$1 = memo(function Element2({
     ref: setHandle,
     elementData: element
   }, elementKey);
-});
-const Document = memo(function Document2({
-  documentKey
-}) {
-  const documentRootElement = useDocumentRootElement(documentKey);
-  if (documentRootElement == null) {
-    return /* @__PURE__ */ jsxs("div", {
-      children: [/* @__PURE__ */ jsx("p", {
-        children: "Document Not Found"
-      }), /* @__PURE__ */ jsx("pre", {
-        children: /* @__PURE__ */ jsx("code", {
-          children: JSON.stringify({
-            documentKey
-          }, null, 2)
-        })
-      })]
-    });
-  }
+}));
+const Document = memo(forwardRef(function Document2({
+  document
+}, ref) {
   return /* @__PURE__ */ jsx(DocumentContext.Provider, {
-    value: documentKey,
+    value: document.key,
     children: /* @__PURE__ */ jsx(Element$1, {
-      element: documentRootElement
+      ref,
+      element: document.rootElement
     })
   });
-});
-export { getDocumentRootElement$1 as A, Box as B, Carousel as C, Document as D, Element$1 as E, createDocument as F, reducer$3 as G, reducer$2 as H, ImageComponent as I, reducer$1 as J, getComponentsMeta as K, getComponentPropControllerDescriptors$1 as L, getElementPropControllerDescriptors as M, Navigation as N, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, Button as b, Countdown as c, Divider as d, Embed as e, Root as f, registerComponent$a as g, DEFAULT_BOX_ANIMATE_TYPE as h, DEFAULT_BOX_ANIMATE_DELAY as i, DEFAULT_BOX_ANIMATE_DURATION as j, DEFAULT_ITEM_ANIMATE_TYPE as k, DEFAULT_ITEM_ANIMATE_DELAY as l, DEFAULT_ITEM_ANIMATE_DURATION as m, DEFAULT_ITEM_STAGGER_DURATION as n, cssMediaRules as o, cssWidth as p, cssMargin as q, registerBuiltinComponents as r, cssPadding as s, cssBorder as t, useIsInBuilder as u, cssBorderRadius as v, cssBoxShadow as w, cssGridItem as x, cssTextStyle as y, getInitialState$3 as z };
-//# sourceMappingURL=react.es2.js.map
+}));
+const DocumentReference = memo(forwardRef(function DocumentReference2({
+  documentReference
+}, ref) {
+  const document = useDocument(documentReference.key);
+  if (document == null) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref,
+      text: "Document not found"
+    });
+  }
+  return /* @__PURE__ */ jsx(Document, {
+    ref,
+    document
+  });
+}));
+export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
+//# sourceMappingURL=index.es.js.map