@makeswift/runtime 0.1.12 → 0.2.0

package/dist/Embed.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Embed.es.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\nimport styled from 'styled-components'\n\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ElementIDValue,\n  MarginValue,\n  TextAreaValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  min-height: 15px;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <Container\n      ref={setContainer}\n      id={id}\n      width={width}\n      margin={margin}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADU,CAAtB;AAAA;AAAA,IAIdE,SAAW;AAAA,IACXC,UAAY;AAAA;AAGhB,MAAMC,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,SAAS,KAAD;AAEhDG,4BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,sBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,YAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDT,MAAIK,iBAAiB;AAAc,WAAA;AAEnC,6BACG,WAAD;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,MAAE6C,QAAQhD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}
+{"version":3,"file":"Embed.es.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\nimport styled from 'styled-components'\n\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ElementIDValue,\n  MarginValue,\n  TextAreaValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  min-height: 15px;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <Container\n      ref={setContainer}\n      id={id}\n      width={width}\n      margin={margin}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADU,CAAtB;AAAA;AAAA,IAIdE,SAAW;AAAA,IACXC,UAAY;AAAA;AAGhB,MAAMC,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,SAAS,KAAD;AAEhDG,4BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,sBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,YAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDT,MAAIK,iBAAiB;AAAc,WAAA;AAEnC,6BACG,WAAD;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,MAAE6C,QAAQhD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}

package/dist/Form.cjs.js

@@ -35,11 +35,11 @@ var React = require("react");
 var styled = require("styled-components");
 var formik = require("formik");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
-var next = require("./index.cjs.js");
+var index = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var ColorHelper = require("color");
 var Button$1 = require("./Button.cjs.js");
-var index = require("./index.cjs3.js");
+var index$1 = require("./index.cjs3.js");
 var boxModels = require("./box-models.cjs.js");
 var client = require("@apollo/client");
 require("use-sync-external-store/shim/with-selector");
@@ -51,18 +51,22 @@ require("./image.cjs.js");
 require("./color.cjs.js");
 require("./slot.cjs.js");
 require("next/dynamic");
-require("next/document");
-require("slate");
-require("@emotion/server/create-instance");
-require("@emotion/css");
 require("@apollo/client/link/batch-http");
+require("slate");
 require("./graphql.cjs.js");
-require("./text-input.cjs.js");
 require("./shape.cjs.js");
+require("./text-input.cjs.js");
+require("@emotion/css");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
 require("css-box-model");
@@ -122,11 +126,11 @@ var SvgCheck12 = function SvgCheck122(props) {
 };
 function getSizeHeight$2(size) {
   switch (size) {
-    case next.Sizes.SMALL:
+    case index.Sizes.SMALL:
       return 30;
-    case next.Sizes.MEDIUM:
+    case index.Sizes.MEDIUM:
       return 38;
-    case next.Sizes.LARGE:
+    case index.Sizes.LARGE:
       return 48;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -134,11 +138,11 @@ function getSizeHeight$2(size) {
 }
 function getSizeHorizontalPadding(size) {
   switch (size) {
-    case next.Sizes.SMALL:
+    case index.Sizes.SMALL:
       return 8;
-    case next.Sizes.MEDIUM:
+    case index.Sizes.MEDIUM:
       return 12;
-    case next.Sizes.LARGE:
+    case index.Sizes.LARGE:
       return 16;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -146,11 +150,11 @@ function getSizeHorizontalPadding(size) {
 }
 function getSizeVerticalPadding(size) {
   switch (size) {
-    case next.Sizes.SMALL:
+    case index.Sizes.SMALL:
       return 3;
-    case next.Sizes.MEDIUM:
+    case index.Sizes.MEDIUM:
       return 7;
-    case next.Sizes.LARGE:
+    case index.Sizes.LARGE:
       return 11;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -158,11 +162,11 @@ function getSizeVerticalPadding(size) {
 }
 function getShapeBorderRadius(shape) {
   switch (shape) {
-    case next.Shapes.SQUARE:
+    case index.Shapes.SQUARE:
       return 0;
-    case next.Shapes.ROUNDED:
+    case index.Shapes.ROUNDED:
       return 4;
-    case next.Shapes.PILL:
+    case index.Shapes.PILL:
       return 500;
     default:
       throw new Error(`Invalid form shape "${shape}"`);
@@ -170,9 +174,9 @@ function getShapeBorderRadius(shape) {
 }
 function getContrastBorderColor(contrast, error) {
   switch (contrast) {
-    case next.Contrasts.LIGHT:
+    case index.Contrasts.LIGHT:
       return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
-    case next.Contrasts.DARK:
+    case index.Contrasts.DARK:
       return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -180,9 +184,9 @@ function getContrastBorderColor(contrast, error) {
 }
 function getContrastBackgroundColor(contrast) {
   switch (contrast) {
-    case next.Contrasts.LIGHT:
+    case index.Contrasts.LIGHT:
       return "white";
-    case next.Contrasts.DARK:
+    case index.Contrasts.DARK:
       return "rgba(0, 0, 0, 0.7)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -190,9 +194,9 @@ function getContrastBackgroundColor(contrast) {
 }
 function getContrastColor$1(contrast) {
   switch (contrast) {
-    case next.Contrasts.LIGHT:
+    case index.Contrasts.LIGHT:
       return "rgba(0, 0, 0, 0.95)";
-    case next.Contrasts.DARK:
+    case index.Contrasts.DARK:
       return "white";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -200,9 +204,9 @@ function getContrastColor$1(contrast) {
 }
 function getContrastPlaceholderColor(contrast) {
   switch (contrast) {
-    case next.Contrasts.LIGHT:
+    case index.Contrasts.LIGHT:
       return "rgba(0, 0, 0, 0.3)";
-    case next.Contrasts.DARK:
+    case index.Contrasts.DARK:
       return "rgba(255,255,255,0.3)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -217,9 +221,9 @@ function cssField() {
     border-style: solid;
     transition: border-color 200ms;
     ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size, props.contrast, props.brandColor], ([
-    shape = next.Shapes.ROUNDED,
-    size = next.Sizes.MEDIUM,
-    contrast = next.Contrasts.LIGHT,
+    shape = index.Shapes.ROUNDED,
+    size = index.Sizes.MEDIUM,
+    contrast = index.Contrasts.LIGHT,
     brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
   ]) => styled.css`
           padding: ${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px;
@@ -230,7 +234,7 @@ function cssField() {
 
           :focus,
           :focus-within {
-            border-color: ${next.colorToString(brandColor)};
+            border-color: ${index.colorToString(brandColor)};
           }
 
           ::placeholder {
@@ -241,11 +245,11 @@ function cssField() {
 }
 function getSizeHeight$1(size) {
   switch (size) {
-    case next.Sizes.SMALL:
+    case index.Sizes.SMALL:
       return 36;
-    case next.Sizes.MEDIUM:
+    case index.Sizes.MEDIUM:
       return 42;
-    case next.Sizes.LARGE:
+    case index.Sizes.LARGE:
       return 48;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -255,7 +259,7 @@ const Base$2 = styled__default["default"].input.withConfig({
   shouldForwardProp: (prop, defaultValidator) => !["shape", "size", "contrast", "brandColor", "error"].includes(prop.toString()) && defaultValidator(prop)
 })`
   ${cssField()}
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
         max-height: ${getSizeHeight$1(size)}px;
       `)}
@@ -273,7 +277,7 @@ var Input$2 = React.forwardRef(function Input2(_a, ref) {
     size,
     contrast,
     brandColor
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     error,
@@ -352,11 +356,11 @@ var Placeholder = React.forwardRef(function Placeholder2({
 });
 function getSizeHeight(size) {
   switch (size) {
-    case next.Sizes.SMALL:
+    case index.Sizes.SMALL:
       return 14;
-    case next.Sizes.MEDIUM:
+    case index.Sizes.MEDIUM:
       return 18;
-    case next.Sizes.LARGE:
+    case index.Sizes.LARGE:
       return 22;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -364,9 +368,9 @@ function getSizeHeight(size) {
 }
 function getContrastColor(contrast) {
   switch (contrast) {
-    case next.Contrasts.LIGHT:
+    case index.Contrasts.LIGHT:
       return "rgba(0, 0, 0, 0.8)";
-    case next.Contrasts.DARK:
+    case index.Contrasts.DARK:
       return "rgba(255, 255, 255, 0.95)";
     default:
       throw new Error(`Invalid form contrast "${contrast}"`);
@@ -378,9 +382,9 @@ const Base$1 = styled__default["default"].label.withConfig({
   display: block;
   margin: 0 0 0.25em 0;
   ${cssMediaRules.cssTextStyle()}
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast, props.textColor], ([size = next.Sizes.MEDIUM, contrast = next.Contrasts.LIGHT, textColor]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast, props.textColor], ([size = index.Sizes.MEDIUM, contrast = index.Contrasts.LIGHT, textColor]) => styled.css`
         min-height: ${getSizeHeight(size)}px;
-        color: ${textColor == null ? getContrastColor(contrast) : next.colorToString(textColor)};
+        color: ${textColor == null ? getContrastColor(contrast) : index.colorToString(textColor)};
       `)}
 `;
 function Label$1(props) {
@@ -389,7 +393,7 @@ function Label$1(props) {
     size,
     labelTextStyle,
     labelTextColor
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Base$1, __spreadProps(__spreadValues({}, props), {
     contrast,
     size,
@@ -444,7 +448,7 @@ var TextArea = React.forwardRef(function TextArea2(_e, ref) {
     size,
     contrast,
     brandColor
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     rows: 4,
@@ -497,7 +501,7 @@ const Container$2 = styled__default["default"].div.withConfig({
   shouldForwardProp: (prop) => !["size"].includes(prop)
 })`
   position: relative;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
@@ -512,7 +516,7 @@ const FakeCheckbox = styled__default["default"].div.withConfig({
   border-radius: 4px;
   pointer-events: none;
   border-width: 1px;
-  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
         border-color: ${getContrastBorderColor(contrast, props.error)};
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
@@ -543,7 +547,7 @@ const HiddenCheckbox = styled__default["default"].input.withConfig({
   },
   alpha = 1
 } = {}]) => styled.css`
-          background-color: ${next.colorToString({
+          background-color: ${index.colorToString({
   swatch,
   alpha
 })};
@@ -556,7 +560,7 @@ const HiddenCheckbox = styled__default["default"].input.withConfig({
       box-sizing: content-box;
       width: 25%;
       height: 50%;
-      ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+      ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
             border-width: ${getSizeHeight(size) * 0.1}px;
             border-left: 0;
             border-top: 0;
@@ -589,14 +593,14 @@ const HiddenCheckbox = styled__default["default"].input.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-            border-color: ${next.colorToString(brandColor)};
+            border-color: ${index.colorToString(brandColor)};
           `)}
     }
   }
 
   &:not(:disabled):checked {
     &:focus ~ ${FakeCheckbox} {
-      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
             border-color: ${getContrastBorderColor(contrast, props.error)};
           `)}
     }
@@ -618,7 +622,7 @@ var Checkbox = React.forwardRef(function Checkbox2(_i, ref) {
     size,
     contrast,
     brandColor
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
     size,
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
@@ -640,7 +644,7 @@ const StyledLabel$2 = styled__default["default"](Label$1)`
   display: flex;
   align-items: center;
   margin: 0;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
         max-height: ${getSizeHeight$1(size)}px;
       `)}
@@ -666,7 +670,7 @@ var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_k, ref)
   ]);
   const {
     size
-  } = next.useFormContext();
+  } = index.useFormContext();
   function handleChange(event) {
     form.setFieldValue(name, event.currentTarget.checked);
   }
@@ -766,7 +770,7 @@ const Container$1 = styled__default["default"].div.withConfig({
   shouldForwardProp: (prop) => !["size"].includes(prop.toString())
 })`
   position: relative;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
         height: ${getSizeHeight(size)}px;
         width: ${getSizeHeight(size)}px;
       `)}
@@ -781,7 +785,7 @@ const FakeRadioButton = styled__default["default"].div.withConfig({
   border-radius: 50%;
   pointer-events: none;
   border-width: 1px;
-  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
         border-color: ${getContrastBorderColor(contrast, props.error)};
         background-color: ${getContrastBackgroundColor(contrast)};
       `)}
@@ -814,7 +818,7 @@ const HiddenRadioButton = styled__default["default"].input.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-          background-color: ${next.colorToString(brandColor)};
+          background-color: ${index.colorToString(brandColor)};
         `)}
     border-color: transparent;
 
@@ -851,14 +855,14 @@ const HiddenRadioButton = styled__default["default"].input.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-            border-color: ${next.colorToString(brandColor)};
+            border-color: ${index.colorToString(brandColor)};
           `)}
     }
   }
 
   &:not(:disabled):checked {
     &:focus ~ ${FakeRadioButton} {
-      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = index.Contrasts.LIGHT]) => styled.css`
             border-color: ${getContrastBorderColor(contrast, props.error)};
           `)}
     }
@@ -880,7 +884,7 @@ var RadioButton = React.forwardRef(function RadioButton2(_o, ref) {
     size,
     contrast,
     brandColor
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(Container$1, {
     size,
     children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
@@ -968,7 +972,7 @@ const Container = styled__default["default"].div.withConfig({
     border-color: #e54e7f;
   }
 
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast], ([size = next.Sizes.MEDIUM, contrast = next.Contrasts.LIGHT]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast], ([size = index.Sizes.MEDIUM, contrast = index.Contrasts.LIGHT]) => styled.css`
         min-height: ${getSizeHeight$2(size)}px;
         max-height: ${getSizeHeight$2(size)}px;
 
@@ -1015,7 +1019,7 @@ var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2
     size,
     contrast,
     brandColor
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
       htmlFor: id,
@@ -1177,7 +1181,7 @@ const Label = styled__default["default"].div.withConfig({
   border-radius: 2px;
   background-color: #5f49f4;
   opacity: 0.4;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
         margin: calc(0.25 * ${getSizeHeight(size)}px + 2px) 0;
         min-height: ${0.5 * getSizeHeight(size)}px;
         max-height: ${0.5 * getSizeHeight(size)}px;
@@ -1192,7 +1196,7 @@ const Input = styled__default["default"].div.withConfig({
   border-style: solid;
   border-color: #5f49f4;
   opacity: 0.4;
-  ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size], ([shape = next.Shapes.ROUNDED, size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size], ([shape = index.Shapes.ROUNDED, size = index.Sizes.MEDIUM]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
         max-height: ${getSizeHeight$1(size)}px;
         border-radius: ${getShapeBorderRadius(shape)}px;
@@ -1202,7 +1206,7 @@ function PlaceholderTableField() {
   const {
     size,
     shape
-  } = next.useFormContext();
+  } = index.useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
       size
@@ -1359,7 +1363,7 @@ function Spinner() {
 function useTableFormFieldRefs(propController, { fieldsCount }) {
   const [container, setContainer] = React.useState(null);
   const [items, setItems] = React.useState(Array(fieldsCount + 1).fill(null));
-  const isInBuilder = next.useIsInBuilder();
+  const isInBuilder = index.useIsInBuilder();
   React.useEffect(() => {
     if (!isInBuilder)
       return;
@@ -1388,11 +1392,11 @@ function useTableFormFieldRefs(propController, { fieldsCount }) {
 const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
 function getSizeFontSize(size) {
   switch (size) {
-    case next.Sizes.SMALL:
+    case index.Sizes.SMALL:
       return 12;
-    case next.Sizes.MEDIUM:
+    case index.Sizes.MEDIUM:
       return 14;
-    case next.Sizes.LARGE:
+    case index.Sizes.LARGE:
       return 18;
     default:
       throw new Error(`Invalid form size "${size}"`);
@@ -1404,7 +1408,7 @@ const GridForm = styled__default["default"].form.withConfig({
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = index.Sizes.MEDIUM]) => styled.css`
         font-size: ${getSizeFontSize(size)}px;
       `)}
   ${cssMediaRules.cssWidth()}
@@ -1419,9 +1423,9 @@ const GridItem = styled__default["default"].div.withConfig({
 `;
 function getAlignmentMargin(alignment) {
   switch (alignment) {
-    case next.Alignments.LEFT:
+    case index.Alignments.LEFT:
       return "0 auto 0 0";
-    case next.Alignments.RIGHT:
+    case index.Alignments.RIGHT:
       return "0 0 0 auto";
     default:
       return "0 auto";
@@ -1435,7 +1439,7 @@ const StyledButton = styled__default["default"]((props) => /* @__PURE__ */ jsxRu
   display: flex;
   align-items: center;
   justify-content: center;
-  ${(props) => cssMediaRules.cssMediaRules([props.size, props.alignment], ([size = next.Sizes.MEDIUM, alignment = next.Alignments.CENTER]) => styled.css`
+  ${(props) => cssMediaRules.cssMediaRules([props.size, props.alignment], ([size = index.Sizes.MEDIUM, alignment = index.Alignments.CENTER]) => styled.css`
         min-height: ${getSizeHeight$1(size)}px;
         max-height: ${getSizeHeight$1(size)}px;
         margin: ${getAlignmentMargin(alignment)};
@@ -1516,13 +1520,13 @@ const Form = React.forwardRef(function Form2({
     data: {
       table
     } = {}
-  } = next.useQuery(next.TABLE_BY_ID, {
+  } = index.useQuery(index.TABLE_BY_ID, {
     skip: tableId == null,
     variables: {
       id: tableId
     }
   });
-  const [createTableRecord] = next.useMutation(CREATE_TABLE_RECORD);
+  const [createTableRecord] = index.useMutation(CREATE_TABLE_RECORD);
   const [refEl, setRefEl] = React.useState(null);
   const [propControllers, setPropControllers] = React.useState(null);
   const [initialValues, setInitialValues] = React.useState(() => fields.reduce((acc, formField) => {
@@ -1634,7 +1638,7 @@ const Form = React.forwardRef(function Form2({
       return acc;
     }, __spreadValues({}, prev)));
   }, [fields, table]);
-  return /* @__PURE__ */ jsxRuntime.jsx(next.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Provider, {
     value: {
       shape,
       size,
@@ -1712,7 +1716,7 @@ const Form = React.forwardRef(function Form2({
                   })]
                 })]
               })]
-            }), submitLink != null && /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
+            }), submitLink != null && /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, {
               ref: linkRef,
               hidden: true,
               link: submitLink