@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.20

package/dist/esm/components/builtin/Embed/Embed.js

@@ -1,9 +1,8 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, forwardRef, useImperativeHandle } from "react";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
-import { useStyle } from "../../../runtimes/react/use-style";
-import { cx } from "@emotion/css";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
 <svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
@@ -70,19 +69,22 @@ const Embed = forwardRef(function Embed2({ id, width, margin, html = defaultHtml
       console.error(error);
     });
   }, [container, html]);
-  const className = useStyle({ minHeight: 15 });
+  const styles = composeStyles(useStyle({ minHeight: 15 }), width, margin);
   const dangerouslySetInnerHTML = useMemo(() => ({ __html: html }), [html]);
   if (shouldRender === false)
     return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: setContainer,
-      id,
-      className: cx(className, width, margin),
-      dangerouslySetInnerHTML
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setContainer,
+        id,
+        className: styles.className,
+        dangerouslySetInnerHTML
+      }
+    )
+  ] });
 });
 var Embed_default = Embed;
 export {

package/dist/esm/components/builtin/Embed/Embed.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, useMemo, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\n  width?: string\n  margin?: string\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<HTMLDivElement | null, HTMLDivElement | null>(ref, () => container, [\n    container,\n  ])\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  const className = useStyle({ minHeight: 15 })\n\n  // React 19+ resets `innerHTML` whenever the `dangerouslySetInnerHTML`\n  // object's identity changes, even if `__html` is the same string. Memoize\n  // the object so unrelated re-renders don't wipe out DOM produced by the\n  // executed scripts above. See https://github.com/facebook/react/issues/31660\n  // and https://github.com/react/react/issues/31600\n  const dangerouslySetInnerHTML = useMemo(() => ({ __html: html }), [html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={dangerouslySetInnerHTML}\n    />\n  )\n})\n\nexport default Embed\n"],"mappings":";AAuHI;AAnHJ,SAAS,UAAU,WAAW,SAAS,YAAiB,2BAA2B;AAEnF,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,UAAU;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAkE,KAAK,MAAM,WAAW;AAAA,IACtF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,YAAY,SAAS,EAAE,WAAW,GAAG,CAAC;AAO5C,QAAM,0BAA0B,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAExE,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,WAAW,OAAO,MAAM;AAAA,MACtC;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, useMemo, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  id?: string\n  html?: string\n  width?: string\n  margin?: string\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<HTMLDivElement | null, HTMLDivElement | null>(ref, () => container, [\n    container,\n  ])\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  const styles = composeStyles(useStyle({ minHeight: 15 }), width, margin)\n\n  // React 19+ resets `innerHTML` whenever the `dangerouslySetInnerHTML`\n  // object's identity changes, even if `__html` is the same string. Memoize\n  // the object so unrelated re-renders don't wipe out DOM produced by the\n  // executed scripts above. See https://github.com/facebook/react/issues/31660\n  // and https://github.com/react/react/issues/31600\n  const dangerouslySetInnerHTML = useMemo(() => ({ __html: html }), [html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <>\n      {styles.styleElements}\n      <div\n        ref={setContainer}\n        id={id}\n        className={styles.className}\n        dangerouslySetInnerHTML={dangerouslySetInnerHTML}\n      />\n    </>\n  )\n})\n\nexport default Embed\n"],"mappings":";AAsHI,mBAEE,KAFF;AAlHJ,SAAS,UAAU,WAAW,SAAS,YAAiB,2BAA2B;AAEnF,SAAS,iCAAiC;AAC1C,SAAS,eAAe,gBAAgB;AASxC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAkE,KAAK,MAAM,WAAW;AAAA,IACtF;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,SAAS,cAAc,SAAS,EAAE,WAAW,GAAG,CAAC,GAAG,OAAO,MAAM;AAOvE,QAAM,0BAA0B,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAExE,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE,iCACG;AAAA,WAAO;AAAA,IACR;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW,OAAO;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}

package/dist/esm/components/builtin/Form/Form.js

@@ -23,11 +23,11 @@ import Button from "../Button";
 import { Link } from "../../shared/Link";
 import { getBox } from "../../../state/modules/read-write/box-models";
 import { useTableFormFieldRefs } from "../../hooks/useTableFormFieldRefs";
-import { cx } from "@emotion/css";
 import { useResponsiveGridItem, useResponsiveStyle } from "../../utils/responsive-style";
 import { useTableRecordClient } from "../../../runtimes/react/hooks/use-table-record-client";
-import { useStyle } from "../../../runtimes/react/use-style";
 import { useTable } from "../../../runtimes/react/hooks/makeswift-api";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
 function getSizeFontSize(size) {
   switch (size) {
@@ -42,36 +42,30 @@ function getSizeFontSize(size) {
   }
 }
 const GridForm = forwardRef(function GridFrom({ className, size, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "form",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({ display: "flex", flexWrap: "wrap", width: "100%" }),
-        useStyle(
-          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-            fontSize: getSizeFontSize(size2)
-          }))
-        ),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({ display: "flex", flexWrap: "wrap", width: "100%" }),
+    useStyle(
+      useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+        fontSize: getSizeFontSize(size2)
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("form", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 const GridItem = forwardRef(function GridItem2({ className, grid, index, rowGap, columnGap, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({ alignSelf: "flex-end", flexDirection: "column" }),
-        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({ alignSelf: "flex-end", flexDirection: "column" }),
+    useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 function getAlignmentMargin(alignment) {
   switch (alignment) {
@@ -84,61 +78,58 @@ function getAlignmentMargin(alignment) {
   }
 }
 function StyledButton({ className, size, alignment, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...restOfProps,
-      as: "button",
-      className: cx(
-        useStyle({ display: "flex", alignItems: "center", justifyContent: "center" }),
-        useStyle(
-          useResponsiveStyle(
-            [size, alignment],
-            ([size2 = Sizes.MEDIUM, alignment2 = Alignments.CENTER]) => ({
-              minHeight: getInputSizeHeight(size2),
-              maxHeight: getInputSizeHeight(size2),
-              margin: getAlignmentMargin(alignment2),
-              paddingTop: 0,
-              paddingBottom: 0
-            })
-          )
-        ),
-        className
+  const styles = composeStyles(
+    useStyle({ display: "flex", alignItems: "center", justifyContent: "center" }),
+    useStyle(
+      useResponsiveStyle(
+        [size, alignment],
+        ([size2 = Sizes.MEDIUM, alignment2 = Alignments.CENTER]) => ({
+          minHeight: getInputSizeHeight(size2),
+          maxHeight: getInputSizeHeight(size2),
+          margin: getAlignmentMargin(alignment2),
+          paddingTop: 0,
+          paddingBottom: 0
+        })
       )
-    }
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx(Button, { ...restOfProps, as: "button", className: styles.className })
+  ] });
 }
 function ErrorContainer({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          padding: "8px 16px",
-          backgroundColor: "#f19eb9",
-          borderRadius: 4,
-          marginTop: 16
-        }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      padding: "8px 16px",
+      backgroundColor: "#f19eb9",
+      borderRadius: 4,
+      marginTop: 16
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 function IconContainer({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx("div", { ...restOfProps, className: cx(useStyle({ fill: "currentColor" }), className) });
+  const styles = composeStyles(useStyle({ fill: "currentColor" }), className);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 function ErrorMessage({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({ fontSize: 12, margin: "8px 0", color: "rgba(127, 0, 0, 0.95)" }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({ fontSize: 12, margin: "8px 0", color: "rgba(127, 0, 0, 0.95)" }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("p", { ...restOfProps, className: styles.className })
+  ] });
 }
 function getTableColumnDefaultValue(tableColumn) {
   switch (tableColumn.__typename) {
@@ -313,7 +304,7 @@ const Form = forwardRef(function Form2({
                 {
                   ref: setRefEl,
                   id,
-                  className: cx(width, margin),
+                  className: clsx(width, margin),
                   size,
                   onSubmit: formik.handleSubmit,
                   onReset: formik.handleReset,

package/dist/esm/components/builtin/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport { Link } from '../../shared/Link'\nimport { getBox, type BoxModelHandle } from '../../../state/modules/read-write/box-models'\nimport { PropControllersHandle } from '../../../state/modules/read-write/prop-controllers'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\n\nimport { useTableRecordClient } from '../../../runtimes/react/hooks/use-table-record-client'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n  type LinkData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveValue,\n  type TableFormFieldsData,\n  type TableFormFieldsDescriptor,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: string\n  tableId?: string\n  fields?: TableFormFieldsData\n  submitLink?: LinkData\n  gap?: ResponsiveGapData\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: ResponsiveTextStyleData\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: ResponsiveTextStyleData\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: string\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthData\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useTableRecordClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":";AA6GI,SA2UY,UA3UZ,KAoYoB,YApYpB;AA3GJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,OAEK;AACP,SAAS,QAAQ,aAAa;AAE9B,SAAS,eAAe;AAExB,SAAS,iBAAiB,0BAA0B;AAEpD;AAAA,EAEE;AAAA,EACA,YAAY;AAAA,EAIZ;AAAA,OACK;AACP,OAAO,iBAAiB;AACxB,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,YAAY;AAEnB,SAAS,YAAY;AACrB,SAAS,cAAmC;AAG5C,SAAS,6BAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,uBAAuB,0BAA0B;AAG1D,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAazB,MAAM,0BAA0B;AAEhC,SAAS,gBAAgB,MAAoB;AAC3C,UAAQ,MAAM;AAAA,IACZ,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AA+BA,MAAM,WAAW,WAAW,SAAS,SACnC,EAAE,WAAW,MAAM,GAAG,YAAY,GAClC,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC;AAAA,QAC7D;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,YAC9D,UAAU,gBAAgBA,KAAI;AAAA,UAChC,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAYD,MAAM,WAAW,WAAW,SAASC,UACnC,EAAE,WAAW,MAAM,OAAO,QAAQ,WAAW,GAAG,YAAY,GAC5D,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,WAAW,YAAY,eAAe,SAAS,CAAC;AAAA,QAC3D,SAAS,sBAAsB,EAAE,MAAM,OAAO,QAAQ,UAAU,CAAC,CAAC;AAAA,QAClE;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,mBAAmB,WAA8B;AACxD,UAAQ,WAAW;AAAA,IACjB,KAAK,WAAW;AACd,aAAO;AAAA,IACT,KAAK,WAAW;AACd,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAOA,SAAS,aAAa,EAAE,WAAW,MAAM,WAAW,GAAG,YAAY,GAAsB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAG;AAAA,MACH,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,SAAS,CAAC;AAAA,QAC5E;AAAA,UACE;AAAA,YACE,CAAC,MAAM,SAAS;AAAA,YAChB,CAAC,CAACD,QAAO,MAAM,QAAQE,aAAY,WAAW,MAAM,OAAO;AAAA,cACzD,WAAW,mBAAmBF,KAAI;AAAA,cAClC,WAAW,mBAAmBA,KAAI;AAAA,cAClC,QAAQ,mBAAmBE,UAAS;AAAA,cACpC,YAAY;AAAA,cACZ,eAAe;AAAA,YACjB;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,YAAY,GAAoC;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,WAAW;AAAA,QACb,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,YAAY,GAAoC;AACrF,SAAO,oBAAC,SAAK,GAAG,aAAa,WAAW,GAAG,SAAS,EAAE,MAAM,eAAe,CAAC,GAAG,SAAS,GAAG;AAC7F;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,YAAY,GAAkC;AAClF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS,EAAE,UAAU,IAAI,QAAQ,SAAS,OAAO,wBAAwB,CAAC;AAAA,QAC1E;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,2BAA2B,aAA0B;AAC5D,UAAQ,YAAY,YAAY;AAAA,IAC9B,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO,CAAC;AAAA,IAEV,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAOA,MAAM,OAAO,WAAW,SAASC,MAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,SAAS,QAAQ,MAAM,YAAY,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC;AACnE,QAAM,OAAO,QAAQ,MAAM,YAAY,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;AAC/D,QAAM,QAAQ,SAAS,WAAW,IAAI;AACtC,QAAM,SAAS,qBAAqB;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,IAAI;AAC3D,QAAM,CAAC,iBAAiB,kBAAkB,IACxC,SAAyD,IAAI;AAC/D,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IAAiB,MACzD,OAAO,OAAO,CAAC,KAAK,cAAc;AAChC,YAAM,cAAc,SAAS,MAAM,QAAQ,KAAK,WAAS,MAAM,OAAO,UAAU,aAAa;AAC7F,YAAM,eAAe,YAAY,UAAU,eAAe;AAE1D,UAAI,aAAa;AACf,YAAI,YAAY,IAAI,IAClB,gBAAgB,OAAO,2BAA2B,WAAW,IAAI;AAAA,MACrE;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,CAAW;AAAA,EACjB;AACA,QAAM,aAAa,iBAAiB;AACpC,QAAM,EAAE,WAAW,MAAM,IAAI,sBAAsB,YAAY,EAAE,aAAa,OAAO,OAAO,CAAC;AAC7F,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,UAAU,OAA0B,IAAI;AAE9C;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AACX,eAAO,iBAAiB,UAAU,QAAQ;AAAA,MAC5C;AAAA,MACA,cAAc;AACZ,eAAO,iBAAiB,UAAU,OAAO,KAAK,IAAI;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,YAAU,MAAM;AACd,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,CAAC;AAAQ;AAEb,QAAI,YAAY,WAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAEvD,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,MAAM,CAAC;AAEX,WAAS,eAAe,EAAE,cAAc,GAAQ;AAC9C,WAAO,SAAS,MAAM,QAAQ,KAAK,WAAS,kBAAkB,MAAM,EAAE;AAAA,EACxE;AAEA,iBAAe,aAAa,QAAa,EAAE,eAAe,WAAW,UAAU,GAAQ;AACrF,QAAI,OAAO;AACT,YAAM,UAAoB,CAAC;AAE3B,aAAO,QAAQ,WAAS;AACtB,cAAM,cAAc,eAAe,KAAK;AAExC,YAAI,aAAa;AACf,gBAAM,OAAO,OAAO,YAAY,IAAI;AAEpC,cAAI,MAAM;AACR,oBAAQ,KAAK,EAAE,UAAU,MAAM,eAAe,KAAK,CAAC;AAEpD,gBAAI,MAAM,UAAU;AAClB,2BAAa;AAAA,gBACX,GAAG,uBAAuB,IAAI,YAAY,IAAI;AAAA,gBAC9C,KAAK,UAAU,IAAI;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAED,UAAI;AACF,cAAM,OAAO,kBAAkB,MAAM,IAAI,OAAO;AAChD,kBAAU,IAAI;AACd;AAAA,UAAiB,UACf,OAAO;AAAA,YACL,CAAC,KAAK,UAAU;AACd,oBAAM,cAAc,eAAe,KAAK;AAExC,kBAAI,aAAa;AACf,sBAAM,OAAO,OAAO,YAAY,IAAI;AAEpC,oBAAI,QAAQ,MAAM;AAAU,yBAAO,EAAE,GAAG,KAAK,CAAC,YAAY,IAAI,GAAG,KAAK;AAAA,cACxE;AAEA,qBAAO;AAAA,YACT;AAAA,YACA,EAAE,GAAG,KAAK;AAAA,UACZ;AAAA,QACF;AACA,kBAAU;AAEV,YAAI,QAAQ,WAAW;AAAM,kBAAQ,QAAQ,MAAM;AAAA,MACrD,SAAS,OAAO;AACd,kBAAU,EAAE,OAAO,2DAA2D,CAAC;AAAA,MACjF,UAAE;AACA,sBAAc,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd;AAAA,MAAiB,UACf,OAAO;AAAA,QACL,CAAC,KAAK,cAAc;AAClB,gBAAM,cACJ,SAAS,MAAM,QAAQ,KAAK,WAAS,MAAM,OAAO,UAAU,aAAa;AAE3E,cAAI,eAAe,UAAU,UAAU;AACrC,kBAAM,cAAc,aAAa;AAAA,cAC/B,GAAG,uBAAuB,IAAI,YAAY,IAAI;AAAA,YAChD;AAEA,gBAAI,aAAa;AACf,kBAAI;AACF,oBAAI,YAAY,IAAI,IAAI,KAAK,MAAM,WAAW;AAAA,cAChD,SAAS,GAAG;AAAA,cAEZ;AAAA,YACF;AAAA,UACF;AAEA,iBAAO;AAAA,QACT;AAAA,QACA,EAAE,GAAG,KAAK;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,MAAM,UAAU,YAAY,gBAAgB,eAAe;AAAA,MAE1E,qBAAW,OACV,oBAAC,eAAY,KAAK,UAAU,OAAc,QAAgB,IAE1D,gCACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,eAAe,EAAE,OAAO,KAAK;AAAA,UAC7B,oBAAkB;AAAA,UAEjB,sBAAU;AACT,kBAAM,QAAQ,OAAO,UAAU,OAAO,OAAO;AAC7C,kBAAM,SAAS,OACZ,IAAI,WAAS;AACZ,oBAAM,cAAc,eAAe,KAAK;AAExC,qBACE,eACA,MAAM,OAAO,SAAS,YAAY,IAAI,KACtC,MAAM,OAAO,QAAQ,YAAY,IAAI;AAAA,YAEzC,CAAC,EACA,OAAO,aAAW,OAAO,YAAY,QAAQ;AAEhD,mBACE,iCACE;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL;AAAA,kBACA,WAAW,GAAG,OAAO,MAAM;AAAA,kBAC3B;AAAA,kBACA,UAAU,OAAO;AAAA,kBACjB,SAAS,OAAO;AAAA,kBAChB,YAAU;AAAA,kBAET;AAAA,2BAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,4BAAM,cAAc,eAAe,KAAK;AAExC,6BACE;AAAA,wBAAC;AAAA;AAAA,0BAEC,KAAK,MAAM,KAAK;AAAA,0BAChB;AAAA,0BACA;AAAA,0BACA,QAAQ;AAAA,0BACR,WAAW;AAAA,0BAEX,8BAAC,SAAM,aAA0B,gBAAgB,OAAO;AAAA;AAAA,wBAPnD,MAAM;AAAA,sBAQb;AAAA,oBAEJ,CAAC;AAAA,oBACD;AAAA,sBAAC;AAAA;AAAA,wBACC,KAAK,MAAM,OAAO,MAAM;AAAA,wBACxB;AAAA,wBACA,OAAO,OAAO;AAAA,wBACd,QAAQ;AAAA,wBACR,WAAW;AAAA,wBAEX;AAAA;AAAA,4BAAC;AAAA;AAAA,8BACC,MAAK;AAAA,8BAEL,UAAU,OAAO,gBAAgB;AAAA,8BACjC;AAAA,8BACA;AAAA,8BACA,OAAO;AAAA,8BACP,SAAS;AAAA,8BACT,WAAW;AAAA,8BACX,OAAO;AAAA,8BACP,WAAW;AAAA,8BACX,WAAW;AAAA,8BAEV,iBAAO,eACN,oBAAC,WAAQ,IACP,SACF,oBAAC,iBACC,8BAAC,WAAQ,GACX,IAEA;AAAA;AAAA,0BAEJ;AAAA,2BACE,OAAO,SAAS,KAAK,UACrB,qBAAC,kBACE;AAAA,mCAAO,IAAI,aACV,oBAAC,gBAA4B,qBAAV,OAAkB,CACtC;AAAA,4BACA,SAAS,QAAQ,oBAAC,gBAAc,iBAAM;AAAA,6BACzC;AAAA;AAAA;AAAA,oBAEJ;AAAA;AAAA;AAAA,cACF;AAAA,cACC,cAAc,QAAQ,oBAAC,QAAK,KAAK,SAAS,QAAM,MAAC,MAAM,YAAY;AAAA,eACtE;AAAA,UAEJ;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["size","GridItem","alignment","Form"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport { Link } from '../../shared/Link'\nimport { getBox, type BoxModelHandle } from '../../../state/modules/read-write/box-models'\nimport { PropControllersHandle } from '../../../state/modules/read-write/prop-controllers'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\n\nimport { useTableRecordClient } from '../../../runtimes/react/hooks/use-table-record-client'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n  type LinkData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveValue,\n  type TableFormFieldsData,\n  type TableFormFieldsDescriptor,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: string\n  tableId?: string\n  fields?: TableFormFieldsData\n  submitLink?: LinkData\n  gap?: ResponsiveGapData\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: ResponsiveTextStyleData\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: ResponsiveTextStyleData\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: string\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthData\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  const styles = composeStyles(\n    useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n    useStyle(\n      useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n        fontSize: getSizeFontSize(size),\n      })),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <form {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const styles = composeStyles(\n    useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n    useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  const styles = composeStyles(\n    useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n    useStyle(\n      useResponsiveStyle(\n        [size, alignment] as const,\n        ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n          minHeight: getInputSizeHeight(size),\n          maxHeight: getInputSizeHeight(size),\n          margin: getAlignmentMargin(alignment),\n          paddingTop: 0,\n          paddingBottom: 0,\n        }),\n      ),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <Button {...restOfProps} as=\"button\" className={styles.className} />\n    </>\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  const styles = composeStyles(\n    useStyle({\n      padding: '8px 16px',\n      backgroundColor: '#f19eb9',\n      borderRadius: 4,\n      marginTop: 16,\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  const styles = composeStyles(useStyle({ fill: 'currentColor' }), className)\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  const styles = composeStyles(\n    useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <p {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useTableRecordClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={clsx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":";AAsHI,mBAEE,KAFF;AApHJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,OAEK;AACP,SAAS,QAAQ,aAAa;AAE9B,SAAS,eAAe;AAExB,SAAS,iBAAiB,0BAA0B;AAEpD;AAAA,EAEE;AAAA,EACA,YAAY;AAAA,EAIZ;AAAA,OACK;AACP,OAAO,iBAAiB;AACxB,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,YAAY;AAEnB,SAAS,YAAY;AACrB,SAAS,cAAmC;AAG5C,SAAS,6BAA6B;AACtC,SAAS,uBAAuB,0BAA0B;AAG1D,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AAYzB,SAAS,eAAe,gBAAgB;AACxC,OAAO,UAAU;AAEjB,MAAM,0BAA0B;AAEhC,SAAS,gBAAgB,MAAoB;AAC3C,UAAQ,MAAM;AAAA,IACZ,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AA+BA,MAAM,WAAW,WAAW,SAAS,SACnC,EAAE,WAAW,MAAM,GAAG,YAAY,GAClC,KACA;AACA,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC;AAAA,IAC7D;AAAA,MACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,QAC9D,UAAU,gBAAgBA,KAAI;AAAA,MAChC,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,UAAM,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW;AAAA,KAChE;AAEJ,CAAC;AAYD,MAAM,WAAW,WAAW,SAASC,UACnC,EAAE,WAAW,MAAM,OAAO,QAAQ,WAAW,GAAG,YAAY,GAC5D,KACA;AACA,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,WAAW,YAAY,eAAe,SAAS,CAAC;AAAA,IAC3D,SAAS,sBAAsB,EAAE,MAAM,OAAO,QAAQ,UAAU,CAAC,CAAC;AAAA,IAClE;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW;AAAA,KAC/D;AAEJ,CAAC;AAED,SAAS,mBAAmB,WAA8B;AACxD,UAAQ,WAAW;AAAA,IACjB,KAAK,WAAW;AACd,aAAO;AAAA,IACT,KAAK,WAAW;AACd,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAOA,SAAS,aAAa,EAAE,WAAW,MAAM,WAAW,GAAG,YAAY,GAAsB;AACvF,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,SAAS,CAAC;AAAA,IAC5E;AAAA,MACE;AAAA,QACE,CAAC,MAAM,SAAS;AAAA,QAChB,CAAC,CAACD,QAAO,MAAM,QAAQE,aAAY,WAAW,MAAM,OAAO;AAAA,UACzD,WAAW,mBAAmBF,KAAI;AAAA,UAClC,WAAW,mBAAmBA,KAAI;AAAA,UAClC,QAAQ,mBAAmBE,UAAS;AAAA,UACpC,YAAY;AAAA,UACZ,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,UAAQ,GAAG,aAAa,IAAG,UAAS,WAAW,OAAO,WAAW;AAAA,KACpE;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,YAAY,GAAoC;AACtF,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,WAAW;AAAA,IACb,CAAC;AAAA,IACD;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACrD;AAEJ;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,YAAY,GAAoC;AACrF,QAAM,SAAS,cAAc,SAAS,EAAE,MAAM,eAAe,CAAC,GAAG,SAAS;AAC1E,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACrD;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,YAAY,GAAkC;AAClF,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,UAAU,IAAI,QAAQ,SAAS,OAAO,wBAAwB,CAAC;AAAA,IAC1E;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,OAAG,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACnD;AAEJ;AAEA,SAAS,2BAA2B,aAA0B;AAC5D,UAAQ,YAAY,YAAY;AAAA,IAC9B,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO,CAAC;AAAA,IAEV,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAOA,MAAM,OAAO,WAAW,SAASC,MAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,SAAS,QAAQ,MAAM,YAAY,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC;AACnE,QAAM,OAAO,QAAQ,MAAM,YAAY,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;AAC/D,QAAM,QAAQ,SAAS,WAAW,IAAI;AACtC,QAAM,SAAS,qBAAqB;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,IAAI;AAC3D,QAAM,CAAC,iBAAiB,kBAAkB,IACxC,SAAyD,IAAI;AAC/D,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IAAiB,MACzD,OAAO,OAAO,CAAC,KAAK,cAAc;AAChC,YAAM,cAAc,SAAS,MAAM,QAAQ,KAAK,WAAS,MAAM,OAAO,UAAU,aAAa;AAC7F,YAAM,eAAe,YAAY,UAAU,eAAe;AAE1D,UAAI,aAAa;AACf,YAAI,YAAY,IAAI,IAClB,gBAAgB,OAAO,2BAA2B,WAAW,IAAI;AAAA,MACrE;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,CAAW;AAAA,EACjB;AACA,QAAM,aAAa,iBAAiB;AACpC,QAAM,EAAE,WAAW,MAAM,IAAI,sBAAsB,YAAY,EAAE,aAAa,OAAO,OAAO,CAAC;AAC7F,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,UAAU,OAA0B,IAAI;AAE9C;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AACX,eAAO,iBAAiB,UAAU,QAAQ;AAAA,MAC5C;AAAA,MACA,cAAc;AACZ,eAAO,iBAAiB,UAAU,OAAO,KAAK,IAAI;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,YAAU,MAAM;AACd,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,CAAC;AAAQ;AAEb,QAAI,YAAY,WAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAEvD,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,MAAM,CAAC;AAEX,WAAS,eAAe,EAAE,cAAc,GAAQ;AAC9C,WAAO,SAAS,MAAM,QAAQ,KAAK,WAAS,kBAAkB,MAAM,EAAE;AAAA,EACxE;AAEA,iBAAe,aAAa,QAAa,EAAE,eAAe,WAAW,UAAU,GAAQ;AACrF,QAAI,OAAO;AACT,YAAM,UAAoB,CAAC;AAE3B,aAAO,QAAQ,WAAS;AACtB,cAAM,cAAc,eAAe,KAAK;AAExC,YAAI,aAAa;AACf,gBAAM,OAAO,OAAO,YAAY,IAAI;AAEpC,cAAI,MAAM;AACR,oBAAQ,KAAK,EAAE,UAAU,MAAM,eAAe,KAAK,CAAC;AAEpD,gBAAI,MAAM,UAAU;AAClB,2BAAa;AAAA,gBACX,GAAG,uBAAuB,IAAI,YAAY,IAAI;AAAA,gBAC9C,KAAK,UAAU,IAAI;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAED,UAAI;AACF,cAAM,OAAO,kBAAkB,MAAM,IAAI,OAAO;AAChD,kBAAU,IAAI;AACd;AAAA,UAAiB,UACf,OAAO;AAAA,YACL,CAAC,KAAK,UAAU;AACd,oBAAM,cAAc,eAAe,KAAK;AAExC,kBAAI,aAAa;AACf,sBAAM,OAAO,OAAO,YAAY,IAAI;AAEpC,oBAAI,QAAQ,MAAM;AAAU,yBAAO,EAAE,GAAG,KAAK,CAAC,YAAY,IAAI,GAAG,KAAK;AAAA,cACxE;AAEA,qBAAO;AAAA,YACT;AAAA,YACA,EAAE,GAAG,KAAK;AAAA,UACZ;AAAA,QACF;AACA,kBAAU;AAEV,YAAI,QAAQ,WAAW;AAAM,kBAAQ,QAAQ,MAAM;AAAA,MACrD,SAAS,OAAO;AACd,kBAAU,EAAE,OAAO,2DAA2D,CAAC;AAAA,MACjF,UAAE;AACA,sBAAc,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd;AAAA,MAAiB,UACf,OAAO;AAAA,QACL,CAAC,KAAK,cAAc;AAClB,gBAAM,cACJ,SAAS,MAAM,QAAQ,KAAK,WAAS,MAAM,OAAO,UAAU,aAAa;AAE3E,cAAI,eAAe,UAAU,UAAU;AACrC,kBAAM,cAAc,aAAa;AAAA,cAC/B,GAAG,uBAAuB,IAAI,YAAY,IAAI;AAAA,YAChD;AAEA,gBAAI,aAAa;AACf,kBAAI;AACF,oBAAI,YAAY,IAAI,IAAI,KAAK,MAAM,WAAW;AAAA,cAChD,SAAS,GAAG;AAAA,cAEZ;AAAA,YACF;AAAA,UACF;AAEA,iBAAO;AAAA,QACT;AAAA,QACA,EAAE,GAAG,KAAK;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,MAAM,UAAU,YAAY,gBAAgB,eAAe;AAAA,MAE1E,qBAAW,OACV,oBAAC,eAAY,KAAK,UAAU,OAAc,QAAgB,IAE1D,gCACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,eAAe,EAAE,OAAO,KAAK;AAAA,UAC7B,oBAAkB;AAAA,UAEjB,sBAAU;AACT,kBAAM,QAAQ,OAAO,UAAU,OAAO,OAAO;AAC7C,kBAAM,SAAS,OACZ,IAAI,WAAS;AACZ,oBAAM,cAAc,eAAe,KAAK;AAExC,qBACE,eACA,MAAM,OAAO,SAAS,YAAY,IAAI,KACtC,MAAM,OAAO,QAAQ,YAAY,IAAI;AAAA,YAEzC,CAAC,EACA,OAAO,aAAW,OAAO,YAAY,QAAQ;AAEhD,mBACE,iCACE;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL;AAAA,kBACA,WAAW,KAAK,OAAO,MAAM;AAAA,kBAC7B;AAAA,kBACA,UAAU,OAAO;AAAA,kBACjB,SAAS,OAAO;AAAA,kBAChB,YAAU;AAAA,kBAET;AAAA,2BAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,4BAAM,cAAc,eAAe,KAAK;AAExC,6BACE;AAAA,wBAAC;AAAA;AAAA,0BAEC,KAAK,MAAM,KAAK;AAAA,0BAChB;AAAA,0BACA;AAAA,0BACA,QAAQ;AAAA,0BACR,WAAW;AAAA,0BAEX,8BAAC,SAAM,aAA0B,gBAAgB,OAAO;AAAA;AAAA,wBAPnD,MAAM;AAAA,sBAQb;AAAA,oBAEJ,CAAC;AAAA,oBACD;AAAA,sBAAC;AAAA;AAAA,wBACC,KAAK,MAAM,OAAO,MAAM;AAAA,wBACxB;AAAA,wBACA,OAAO,OAAO;AAAA,wBACd,QAAQ;AAAA,wBACR,WAAW;AAAA,wBAEX;AAAA;AAAA,4BAAC;AAAA;AAAA,8BACC,MAAK;AAAA,8BAEL,UAAU,OAAO,gBAAgB;AAAA,8BACjC;AAAA,8BACA;AAAA,8BACA,OAAO;AAAA,8BACP,SAAS;AAAA,8BACT,WAAW;AAAA,8BACX,OAAO;AAAA,8BACP,WAAW;AAAA,8BACX,WAAW;AAAA,8BAEV,iBAAO,eACN,oBAAC,WAAQ,IACP,SACF,oBAAC,iBACC,8BAAC,WAAQ,GACX,IAEA;AAAA;AAAA,0BAEJ;AAAA,2BACE,OAAO,SAAS,KAAK,UACrB,qBAAC,kBACE;AAAA,mCAAO,IAAI,aACV,oBAAC,gBAA4B,qBAAV,OAAkB,CACtC;AAAA,4BACA,SAAS,QAAQ,oBAAC,gBAAc,iBAAM;AAAA,6BACzC;AAAA;AAAA;AAAA,oBAEJ;AAAA;AAAA;AAAA,cACF;AAAA,cACC,cAAc,QAAQ,oBAAC,QAAK,KAAK,SAAS,QAAM,MAAC,MAAM,YAAY;AAAA,eACtE;AAAA,UAEJ;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["size","GridItem","alignment","Form"]}