@makeswift/runtime 0.0.22 → 0.1.0-next.0

package/dist/Form.cjs.js

@@ -0,0 +1,1705 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var React = require("react");
+var styled = require("styled-components");
+var formik = require("formik");
+var css = require("@emotion/css");
+var cssMediaRules = require("./cssMediaRules.cjs.js");
+var next = 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 boxModels = require("./box-models.cjs.js");
+var client = require("@apollo/client");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  var n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    Object.keys(e).forEach(function(k) {
+      if (k !== "default") {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function() {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+var React__namespace = /* @__PURE__ */ _interopNamespace(React);
+var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
+function useTable(tableId) {
+  return next.useQuery(next.TABLE_BY_ID, {
+    skip: tableId == null,
+    variables: { id: tableId }
+  });
+}
+var _path;
+function _extends$1() {
+  _extends$1 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+var SvgCheck12 = function SvgCheck122(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$1({
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.7071 1.79289C12.0976 2.18342 12.0976 2.81658 11.7071 3.20711L4.70711 10.2071C4.31658 10.5976 3.68342 10.5976 3.29289 10.2071L0.292893 7.20711C-0.0976311 6.81658 -0.0976311 6.18342 0.292893 5.79289C0.683417 5.40237 1.31658 5.40237 1.70711 5.79289L4 8.08579L10.2929 1.79289C10.6834 1.40237 11.3166 1.40237 11.7071 1.79289Z"
+  })));
+};
+function getSizeHeight$2(size) {
+  switch (size) {
+    case next.Sizes.SMALL:
+      return 30;
+    case next.Sizes.MEDIUM:
+      return 38;
+    case next.Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeHorizontalPadding(size) {
+  switch (size) {
+    case next.Sizes.SMALL:
+      return 8;
+    case next.Sizes.MEDIUM:
+      return 12;
+    case next.Sizes.LARGE:
+      return 16;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getSizeVerticalPadding(size) {
+  switch (size) {
+    case next.Sizes.SMALL:
+      return 3;
+    case next.Sizes.MEDIUM:
+      return 7;
+    case next.Sizes.LARGE:
+      return 11;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getShapeBorderRadius(shape) {
+  switch (shape) {
+    case next.Shapes.SQUARE:
+      return 0;
+    case next.Shapes.ROUNDED:
+      return 4;
+    case next.Shapes.PILL:
+      return 500;
+    default:
+      throw new Error(`Invalid form shape "${shape}"`);
+  }
+}
+function getContrastBorderColor(contrast, error) {
+  switch (contrast) {
+    case next.Contrasts.LIGHT:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
+    case next.Contrasts.DARK:
+      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastBackgroundColor(contrast) {
+  switch (contrast) {
+    case next.Contrasts.LIGHT:
+      return "white";
+    case next.Contrasts.DARK:
+      return "rgba(0, 0, 0, 0.7)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastColor$1(contrast) {
+  switch (contrast) {
+    case next.Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.95)";
+    case next.Contrasts.DARK:
+      return "white";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function getContrastPlaceholderColor(contrast) {
+  switch (contrast) {
+    case next.Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.3)";
+    case next.Contrasts.DARK:
+      return "rgba(255,255,255,0.3)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+function cssField() {
+  return styled.css`
+    display: block;
+    width: 100%;
+    outline: none;
+    border-width: 1px;
+    border-style: solid;
+    transition: border-color 200ms;
+    ${(props) => cssMediaRules.cssMediaRules([props.shape, props.size, props.contrast, props.brandColor], ([
+    shape = next.Shapes.ROUNDED,
+    size = next.Sizes.MEDIUM,
+    contrast = next.Contrasts.LIGHT,
+    brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+  ]) => styled.css`
+          padding: ${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px;
+          border-radius: ${getShapeBorderRadius(shape)}px;
+          border-color: ${getContrastBorderColor(contrast, props.error)};
+          color: ${getContrastColor$1(contrast)};
+          background-color: ${getContrastBackgroundColor(contrast)};
+
+          :focus,
+          :focus-within {
+            border-color: ${next.colorToString(brandColor)};
+          }
+
+          ::placeholder {
+            color: ${getContrastPlaceholderColor(contrast)};
+          }
+        `)}
+  `;
+}
+function getSizeHeight$1(size) {
+  switch (size) {
+    case next.Sizes.SMALL:
+      return 36;
+    case next.Sizes.MEDIUM:
+      return 42;
+    case next.Sizes.LARGE:
+      return 48;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+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`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+      `)}
+`;
+var Input$2 = React.forwardRef(function Input2(_a, ref) {
+  var _b = _a, {
+    error = false,
+    form
+  } = _b, restOfProps = __objRest(_b, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(Base$2, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+const Container$3 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop.toString())
+})`
+  display: flex;
+  flex-direction: column;
+  ${cssMediaRules.cssMargin()};
+`;
+const Label$2 = styled__default["default"].div`
+  max-width: 120px;
+  min-width: 60px;
+  height: 8px;
+  border-radius: 2px;
+  background-color: #a1a8c2;
+  opacity: 0.4;
+  margin-bottom: 8px;
+`;
+const Input$1 = styled__default["default"].div`
+  min-width: 80px;
+  height: 32px;
+  border-radius: 4px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a1a8c2;
+  opacity: 0.4;
+`;
+const Button = styled__default["default"].div`
+  min-width: 140px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #a1a8c2;
+  opacity: 0.4;
+`;
+var Placeholder = React.forwardRef(function Placeholder2({
+  className,
+  margin
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
+    ref,
+    className,
+    margin,
+    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Label$2, {}), /* @__PURE__ */ jsxRuntime.jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: 16
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Label$2, {}), /* @__PURE__ */ jsxRuntime.jsx(Input$1, {})]
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button, {})
+    })]
+  });
+});
+function getSizeHeight(size) {
+  switch (size) {
+    case next.Sizes.SMALL:
+      return 14;
+    case next.Sizes.MEDIUM:
+      return 18;
+    case next.Sizes.LARGE:
+      return 22;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+function getContrastColor(contrast) {
+  switch (contrast) {
+    case next.Contrasts.LIGHT:
+      return "rgba(0, 0, 0, 0.8)";
+    case next.Contrasts.DARK:
+      return "rgba(255, 255, 255, 0.95)";
+    default:
+      throw new Error(`Invalid form contrast "${contrast}"`);
+  }
+}
+const Base$1 = styled__default["default"].label.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["contrast", "size", "textStyle", "textColor"].includes(prop.toString()) && defaultValidator(prop)
+})`
+  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`
+        min-height: ${getSizeHeight(size)}px;
+        color: ${textColor == null ? getContrastColor(contrast) : next.colorToString(textColor)};
+      `)}
+`;
+function Label$1(props) {
+  const {
+    contrast,
+    size,
+    labelTextStyle,
+    labelTextColor
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(Base$1, __spreadProps(__spreadValues({}, props), {
+    contrast,
+    size,
+    textStyle: labelTextStyle,
+    textColor: labelTextColor
+  }));
+}
+var SingleLineTextTableField = React.forwardRef(function SingleLineTextTableField2(_c, ref) {
+  var _d = _c, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _d, restOfProps = __objRest(_d, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "text",
+      error: error != null
+    }))]
+  });
+});
+const Base = styled__default["default"].textarea.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString()) && defaultValidator(prop)
+})`
+  resize: vertical;
+  ${cssField()}
+`;
+var TextArea = React.forwardRef(function TextArea2(_e, ref) {
+  var _f = _e, {
+    error = false,
+    form
+  } = _f, restOfProps = __objRest(_f, [
+    "error",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(Base, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    rows: 4,
+    error,
+    shape,
+    size,
+    contrast,
+    brandColor
+  }));
+});
+var LongTextTableField = React.forwardRef(function LongTextTableField2(_g2, ref) {
+  var _h = _g2, {
+    id,
+    label = "",
+    error,
+    hideLabel = false
+  } = _h, restOfProps = __objRest(_h, [
+    "id",
+    "label",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(TextArea, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      error: error != null
+    }))]
+  });
+});
+function getCheckmarkColor$1({
+  swatch: {
+    hue: h,
+    saturation: s,
+    lightness: l
+  },
+  alpha: a
+}) {
+  return ColorHelper__default["default"]({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$2 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  position: relative;
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeCheckbox = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop)
+})`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-radius: 4px;
+  pointer-events: none;
+  border-width: 1px;
+  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenCheckbox = styled__default["default"].input.withConfig({
+  shouldForwardProp: (prop, defaultValidator) => !["size", "brandColor", "contrast", "error"].includes(prop) && defaultValidator(prop)
+})`
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+
+    & ~ ${FakeCheckbox} {
+      opacity: 0.5;
+    }
+  }
+
+  &:checked ~ ${FakeCheckbox} {
+    ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([{
+  swatch = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha = 1
+} = {}]) => styled.css`
+          background-color: ${next.colorToString({
+  swatch,
+  alpha
+})};
+        `)}
+    border-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: content-box;
+      width: 25%;
+      height: 50%;
+      ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+            border-width: ${getSizeHeight(size) * 0.1}px;
+            border-left: 0;
+            border-top: 0;
+          `)}
+      border-style: solid;
+      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([{
+  swatch = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha = 1
+} = {}]) => styled.css`
+            border-color: ${getCheckmarkColor$1({
+  swatch,
+  alpha
+})};
+          `)}
+      transform: rotate(45deg) translate3d(91%, -23%, 0);
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => styled.css`
+            border-color: ${next.colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeCheckbox} {
+      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var Checkbox = React.forwardRef(function Checkbox2(_i, ref) {
+  var _j = _i, {
+    error,
+    className,
+    style,
+    form
+  } = _j, restOfProps = __objRest(_j, [
+    "error",
+    "className",
+    "style",
+    "form"
+  ]);
+  const {
+    size,
+    contrast,
+    brandColor
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, {
+    size,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
+      type: "checkbox",
+      ref,
+      error,
+      size,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsxRuntime.jsx(FakeCheckbox, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel$2 = styled__default["default"](Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+      `)}
+`;
+const CheckboxContainer$1 = styled__default["default"].span`
+  margin-right: 8px;
+`;
+var CheckboxTableField = React.forwardRef(function CheckboxTableField2(_k, ref) {
+  var _l = _k, {
+    form,
+    id,
+    name,
+    label = "",
+    value = false,
+    error
+  } = _l, restOfProps = __objRest(_l, [
+    "form",
+    "id",
+    "name",
+    "label",
+    "value",
+    "error"
+  ]);
+  const {
+    size
+  } = next.useFormContext();
+  function handleChange(event) {
+    form.setFieldValue(name, event.currentTarget.checked);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$2, {
+    htmlFor: id,
+    size,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(CheckboxContainer$1, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        checked: value,
+        onChange: handleChange,
+        ref,
+        id,
+        error: error != null
+      }))
+    }), label]
+  });
+});
+const MainLabel = styled__default["default"](Label$1)`
+  margin: 0 0 4px 0;
+`;
+const StyledLabel$1 = styled__default["default"](Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const CheckboxContainer = styled__default["default"].span`
+  margin-right: 8px;
+`;
+var MultipleSelectTableField = React.forwardRef(function MultipleSelectTableField2(_m, ref) {
+  var _n = _m, {
+    tableColumn,
+    label = "",
+    required,
+    value = [],
+    onChange,
+    hideLabel = false
+  } = _n, restOfProps = __objRest(_n, [
+    "tableColumn",
+    "label",
+    "required",
+    "value",
+    "onChange",
+    "hideLabel"
+  ]);
+  const handle = React.useRef({
+    validity: {
+      valueMissing: required === true && value.length === 0,
+      typeMismatch: false
+    }
+  });
+  React.useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked && value.filter((v) => v !== event.currentTarget.value).length === 0;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(MainLabel, {
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$1, {
+      htmlFor: option.id,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(CheckboxContainer, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
+          "aria-label": label,
+          onChange: handleChange,
+          checked: value.includes(option.name),
+          id: option.id,
+          value: option.name
+        }))
+      }), option.name]
+    }, option.id))]
+  });
+});
+function getCheckmarkColor({
+  swatch: {
+    hue: h,
+    saturation: s,
+    lightness: l
+  } = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: a
+}) {
+  return ColorHelper__default["default"]({
+    h,
+    s,
+    l
+  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const Container$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`
+        height: ${getSizeHeight(size)}px;
+        width: ${getSizeHeight(size)}px;
+      `)}
+`;
+const FakeRadioButton = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["contrast", "error"].includes(prop.toString())
+})`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-radius: 50%;
+  pointer-events: none;
+  border-width: 1px;
+  ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+        border-color: ${getContrastBorderColor(contrast, props.error)};
+        background-color: ${getContrastBackgroundColor(contrast)};
+      `)}
+`;
+const HiddenRadioButton = styled__default["default"].input.withConfig({
+  shouldForwardProp: (prop) => !["brandColor", "contrast", "error"].includes(prop.toString())
+}).attrs({
+  type: "radio"
+})`
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+
+    & ~ ${FakeRadioButton} {
+      opacity: 0.5;
+    }
+  }
+
+  &:checked ~ ${FakeRadioButton} {
+    ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => styled.css`
+          background-color: ${next.colorToString(brandColor)};
+        `)}
+    border-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: content-box;
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => styled.css`
+            background-color: ${getCheckmarkColor(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled) {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules.cssMediaRules([props.brandColor], ([brandColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}]) => styled.css`
+            border-color: ${next.colorToString(brandColor)};
+          `)}
+    }
+  }
+
+  &:not(:disabled):checked {
+    &:focus ~ ${FakeRadioButton} {
+      ${(props) => cssMediaRules.cssMediaRules([props.contrast], ([contrast = next.Contrasts.LIGHT]) => styled.css`
+            border-color: ${getContrastBorderColor(contrast, props.error)};
+          `)}
+    }
+  }
+`;
+var RadioButton = React.forwardRef(function RadioButton2(_o, ref) {
+  var _p = _o, {
+    error,
+    className,
+    style,
+    form
+  } = _p, restOfProps = __objRest(_p, [
+    "error",
+    "className",
+    "style",
+    "form"
+  ]);
+  const {
+    size,
+    contrast,
+    brandColor
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$1, {
+    size,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+      ref,
+      error,
+      contrast,
+      brandColor
+    })), /* @__PURE__ */ jsxRuntime.jsx(FakeRadioButton, {
+      className,
+      error,
+      contrast,
+      style
+    })]
+  });
+});
+const StyledLabel = styled__default["default"](Label$1)`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+const RadioButtonContainer = styled__default["default"].span`
+  margin-right: 8px;
+`;
+var TableColumnRadioButtonGroup = React.forwardRef(function TableColumnRadioButtonGroup2(_q, ref) {
+  var _r = _q, {
+    tableColumn,
+    label = "",
+    value = "",
+    required = false,
+    hideLabel = false,
+    onChange
+  } = _r, restOfProps = __objRest(_r, [
+    "tableColumn",
+    "label",
+    "value",
+    "required",
+    "hideLabel",
+    "onChange"
+  ]);
+  const handle = React.useRef({
+    validity: {
+      valueMissing: required === true && value === "",
+      typeMismatch: false
+    }
+  });
+  React.useImperativeHandle(ref, () => handle.current, []);
+  function handleChange(event) {
+    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked;
+    onChange(event);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      as: "p",
+      children: label
+    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, {
+      htmlFor: option.id,
+      "aria-label": label,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(RadioButtonContainer, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(RadioButton, __spreadProps(__spreadValues({}, restOfProps), {
+          onChange: handleChange,
+          checked: value === option.name,
+          id: option.id,
+          value: option.name
+        }))
+      }), option.name]
+    }, option.id))]
+  });
+});
+const Container = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["error", "shape", "size", "contrast", "brandColor"].includes(prop.toString())
+})`
+  ${cssField()}
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  border-color: #f19eb9;
+
+  &:focus,
+  &:focus-within {
+    border-color: #e54e7f;
+  }
+
+  ${(props) => cssMediaRules.cssMediaRules([props.size, props.contrast], ([size = next.Sizes.MEDIUM, contrast = next.Contrasts.LIGHT]) => styled.css`
+        min-height: ${getSizeHeight$2(size)}px;
+        max-height: ${getSizeHeight$2(size)}px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          right: ${getSizeHorizontalPadding(size)}px;
+          top: 50%;
+          transform: translate3d(0, -25%, 0);
+          border: solid 0.35em transparent;
+          border-top-color: ${getContrastColor$1(contrast)};
+        }
+      `)}
+`;
+const Select = styled__default["default"].select`
+  appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+`;
+var TableColumnSingleSelect = React.forwardRef(function TableColumnSingleSelect2(_s, ref) {
+  var _t = _s, {
+    id,
+    tableColumn,
+    value = "",
+    label = "",
+    error = false,
+    hideLabel = false,
+    form
+  } = _t, restOfProps = __objRest(_t, [
+    "id",
+    "tableColumn",
+    "value",
+    "label",
+    "error",
+    "hideLabel",
+    "form"
+  ]);
+  const {
+    shape,
+    size,
+    contrast,
+    brandColor
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Container, {
+      error,
+      shape,
+      size,
+      contrast,
+      brandColor,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+        children: value === "" ? "-" : value
+      }), /* @__PURE__ */ jsxRuntime.jsxs(Select, __spreadProps(__spreadValues({}, restOfProps), {
+        "aria-label": label,
+        ref,
+        id,
+        value,
+        children: [/* @__PURE__ */ jsxRuntime.jsx("option", {
+          value: "",
+          children: "-"
+        }), tableColumn.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", {
+          value: option.name,
+          children: option.name
+        }, option.id))]
+      }))]
+    })]
+  });
+});
+var SingleSelectTableField = React.forwardRef(function SingleSelectTableField2(_u, ref) {
+  var _v = _u, {
+    type
+  } = _v, restOfProps = __objRest(_v, [
+    "type"
+  ]);
+  return type === "select" ? /* @__PURE__ */ jsxRuntime.jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  })) : /* @__PURE__ */ jsxRuntime.jsx(TableColumnRadioButtonGroup, __spreadProps(__spreadValues({}, restOfProps), {
+    ref
+  }));
+});
+var PhoneNumberTableField = React.forwardRef(function PhoneNumberTableField2(_w, ref) {
+  var _x = _w, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _x, restOfProps = __objRest(_x, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "tel",
+      error: error != null
+    }))]
+  });
+});
+var EmailTableField = React.forwardRef(function EmailTableField2(_y, ref) {
+  var _z = _y, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _z, restOfProps = __objRest(_z, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "email",
+      error: error != null
+    }))]
+  });
+});
+var URLTableField = React.forwardRef(function URLTableField2(_A, ref) {
+  var _B = _A, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _B, restOfProps = __objRest(_B, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "url",
+      error: error != null
+    }))]
+  });
+});
+var NumberTableField = React.forwardRef(function NumberTableField2(_C, ref) {
+  var _D = _C, {
+    id,
+    label = "",
+    name,
+    error,
+    hideLabel = false
+  } = _D, restOfProps = __objRest(_D, [
+    "id",
+    "label",
+    "name",
+    "error",
+    "hideLabel"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Label$1, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
+      "aria-label": label,
+      ref,
+      id,
+      name,
+      type: "number",
+      error: error != null
+    }))]
+  });
+});
+const Label = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop.toString())
+})`
+  display: block;
+  max-width: 120px;
+  min-width: 60px;
+  border-radius: 2px;
+  background-color: #5f49f4;
+  opacity: 0.4;
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+        margin: calc(0.25 * ${getSizeHeight(size)}px + 2px) 0;
+        min-height: ${0.5 * getSizeHeight(size)}px;
+        max-height: ${0.5 * getSizeHeight(size)}px;
+      `)}
+`;
+const Input = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["shape", "size"].includes(prop.toString())
+})`
+  display: block;
+  width: 100%;
+  border-width: 2px;
+  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`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+        border-radius: ${getShapeBorderRadius(shape)}px;
+      `)}
+`;
+function PlaceholderTableField() {
+  const {
+    size,
+    shape
+  } = next.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
+      size
+    }), /* @__PURE__ */ jsxRuntime.jsx(Input, {
+      shape,
+      size
+    })]
+  });
+}
+function getTypeMismatchErrorMessage(tableColumn, label) {
+  switch ((tableColumn || {}).__typename) {
+    case "PhoneNumberTableColumn":
+      return `${label} field must be a valid phone number.`;
+    case "EmailTableColumn":
+      return `${label} field must be a valid email.`;
+    case "URLTableColumn":
+      return `${label} field must be a valid URL.`;
+    case "NumberTableColumn":
+      return `${label} field must be a valid number.`;
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "CheckboxTableColumn":
+    default:
+      return `${label} field is invalid.`;
+  }
+}
+function getTableColumnField(tableColumn) {
+  switch ((tableColumn || {}).__typename) {
+    case "SingleLineTextTableColumn":
+      return SingleLineTextTableField;
+    case "LongTextTableColumn":
+      return LongTextTableField;
+    case "CheckboxTableColumn":
+      return CheckboxTableField;
+    case "MultipleSelectTableColumn":
+      return MultipleSelectTableField;
+    case "SingleSelectTableColumn":
+      return SingleSelectTableField;
+    case "PhoneNumberTableColumn":
+      return PhoneNumberTableField;
+    case "EmailTableColumn":
+      return EmailTableField;
+    case "URLTableColumn":
+      return URLTableField;
+    case "NumberTableColumn":
+      return NumberTableField;
+    default:
+      return SingleLineTextTableField;
+  }
+}
+function Field({
+  tableColumn,
+  tableFormField: {
+    id,
+    label = "",
+    placeholder,
+    required = false,
+    hidden = false,
+    type = "radio",
+    hideLabel = false
+  }
+}) {
+  const TableColumnField = getTableColumnField(tableColumn);
+  const input = React.useRef(null);
+  if (!tableColumn)
+    return /* @__PURE__ */ jsxRuntime.jsx(PlaceholderTableField, {});
+  function validate() {
+    let errorMessage;
+    if (input.current) {
+      const {
+        validity = {}
+      } = input.current;
+      if (validity.valueMissing)
+        errorMessage = `${label} is required.`;
+      if (validity.typeMismatch)
+        errorMessage = getTypeMismatchErrorMessage(tableColumn, label);
+    }
+    return errorMessage;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(formik.Field, {
+    name: tableColumn.name,
+    validate,
+    children: ({
+      field,
+      form
+    }) => hidden ? /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, field), {
+      ref: input,
+      type: "hidden"
+    })) : /* @__PURE__ */ jsxRuntime.jsx(TableColumnField, __spreadProps(__spreadValues({}, field), {
+      type,
+      form,
+      tableColumn,
+      ref: input,
+      id,
+      error: formik.getIn(form.touched, field.name) && formik.getIn(form.errors, field.name),
+      label,
+      placeholder,
+      required,
+      hideLabel
+    }))
+  });
+}
+var _g;
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var SvgSpinner20 = function SvgSpinner202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20
+  }, props), _g || (_g = /* @__PURE__ */ React__namespace.createElement("g", {
+    fill: "none",
+    strokeWidth: 2,
+    transform: "translate(1 1)"
+  }, /* @__PURE__ */ React__namespace.createElement("circle", {
+    stroke: "currentColor",
+    cx: 9,
+    cy: 9,
+    r: 9,
+    strokeOpacity: 0.4
+  }), /* @__PURE__ */ React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    d: "M9 18A9 9 0 0 0 9 0"
+  }))));
+};
+const spin = styled.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Icon = styled__default["default"](SvgSpinner20)`
+  display: inline-flex;
+  animation: ${spin} 1s linear infinite;
+  stroke: currentColor;
+`;
+function Spinner() {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, {});
+}
+function useTableFormFieldRefs(propController, { fieldsCount }) {
+  const [container, setContainer] = React.useState(null);
+  const [items, setItems] = React.useState(Array(fieldsCount + 1).fill(null));
+  const isInBuilder = next.useIsInBuilder();
+  React.useEffect(() => {
+    if (!isInBuilder)
+      return;
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+    };
+    function handleAnimationFrameRequest() {
+      if (propController == null)
+        return;
+      if (container != null)
+        propController.tableFormLayoutChange({ layout: boxModels.getBox(container) });
+      items.map((item, index2) => {
+        if (item == null)
+          return;
+        propController.tableFormFieldLayoutChange({ index: index2, layout: boxModels.getBox(item) });
+      });
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  }, [propController, container, items, isInBuilder]);
+  const itemRefs = React.useMemo(() => Array.from({ length: fieldsCount + 1 }).map((_, index2) => (item) => {
+    setItems((is) => [...is.slice(0, index2), item, ...is.slice(index2 + 1)]);
+  }), [fieldsCount, setItems]);
+  return { container: setContainer, items: itemRefs };
+}
+const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
+function getSizeFontSize(size) {
+  switch (size) {
+    case next.Sizes.SMALL:
+      return 12;
+    case next.Sizes.MEDIUM:
+      return 14;
+    case next.Sizes.LARGE:
+      return 18;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const GridForm = styled__default["default"].form.withConfig({
+  shouldForwardProp: (prop) => !["size", "width", "margin"].includes(prop)
+})`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
+        font-size: ${getSizeFontSize(size)}px;
+      `)}
+  ${cssMediaRules.cssMargin()}
+`;
+const GridItem = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["grid", "index", "rowGap", "columnGap"].includes(prop)
+})`
+  align-self: flex-end;
+  flex-direction: column;
+  ${cssMediaRules.cssGridItem()}
+`;
+function getAlignmentMargin(alignment) {
+  switch (alignment) {
+    case next.Alignments.LEFT:
+      return "0 auto 0 0";
+    case next.Alignments.RIGHT:
+      return "0 0 0 auto";
+    default:
+      return "0 auto";
+  }
+}
+const StyledButton = styled__default["default"]((props) => /* @__PURE__ */ jsxRuntime.jsx(Button$1["default"], __spreadProps(__spreadValues({}, props), {
+  as: "button"
+}))).withConfig({
+  shouldForwardProp: (prop) => !["alignment"].includes(prop.toString())
+})`
+  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`
+        min-height: ${getSizeHeight$1(size)}px;
+        max-height: ${getSizeHeight$1(size)}px;
+        margin: ${getAlignmentMargin(alignment)};
+        padding-top: 0;
+        padding-bottom: 0;
+      `)}
+`;
+const ErrorContainer = styled__default["default"].div`
+  padding: 8px 16px;
+  background-color: #f19eb9;
+  border-radius: 4px;
+  margin-top: 16px;
+`;
+const IconContainer = styled__default["default"].div`
+  fill: currentColor;
+`;
+const ErrorMessage = styled__default["default"].p`
+  font-size: 12px;
+  margin: 8px 0;
+  color: rgba(127, 0, 0, 0.95);
+`;
+function getTableColumnDefaultValue(tableColumn) {
+  switch (tableColumn.__typename) {
+    case "CheckboxTableColumn":
+      return false;
+    case "MultipleSelectTableColumn":
+      return [];
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "SingleSelectTableColumn":
+    case "PhoneNumberTableColumn":
+    case "EmailTableColumn":
+    case "URLTableColumn":
+    case "NumberTableColumn":
+    default:
+      return "";
+  }
+}
+const CREATE_TABLE_RECORD = client.gql`
+  mutation CreateTableRecord($input: CreateTableRecordInput!) {
+    createTableRecord(input: $input) {
+      tableRecord {
+        id
+      }
+    }
+  }
+`;
+const Form = React.forwardRef(function Form2({
+  id,
+  tableId,
+  fields: fieldsProp,
+  submitLabel = "Submit",
+  submitLink,
+  shape,
+  size,
+  contrast,
+  brandColor,
+  gap,
+  width,
+  margin,
+  submitTextStyle,
+  submitVariant,
+  submitTextColor,
+  submitWidth,
+  submitAlignment,
+  labelTextStyle,
+  labelTextColor
+}, ref) {
+  const fields = React.useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.fields) != null ? _a : [];
+  }, [fieldsProp]);
+  const grid = React.useMemo(() => {
+    var _a;
+    return (_a = fieldsProp == null ? void 0 : fieldsProp.grid) != null ? _a : [];
+  }, [fieldsProp]);
+  const {
+    data: {
+      table
+    } = {}
+  } = useTable(tableId);
+  const [createTableRecord] = next.useMutation(CREATE_TABLE_RECORD);
+  const [refEl, setRefEl] = React.useState(null);
+  const [propControllers, setPropControllers] = React.useState(null);
+  const [initialValues, setInitialValues] = React.useState(() => fields.reduce((acc, formField) => {
+    const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+    const defaultValue = formField ? formField.defaultValue : null;
+    if (tableColumn) {
+      acc[tableColumn.name] = defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue;
+    }
+    return acc;
+  }, {}));
+  const controller = propControllers == null ? void 0 : propControllers.fields;
+  const {
+    container,
+    items
+  } = useTableFormFieldRefs(controller, {
+    fieldsCount: fields.length
+  });
+  const [isDone, setIsDone] = React.useState(false);
+  const linkRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
+    getBoxModel() {
+      return refEl instanceof Element ? boxModels.getBox(refEl) : null;
+    },
+    setPropControllers
+  }), [refEl, setPropControllers]);
+  React.useEffect(() => {
+    container(refEl);
+  }, [container, refEl]);
+  React.useEffect(() => {
+    if (!isDone)
+      return;
+    let timeoutId = setTimeout(() => setIsDone(false), 2500);
+    return () => clearTimeout(timeoutId);
+  }, [isDone]);
+  function getTableColumn({
+    tableColumnId
+  }) {
+    return table && table.columns.find((field) => tableColumnId === field.id);
+  }
+  async function handleSubmit(values, {
+    setSubmitting,
+    resetForm,
+    setStatus
+  }) {
+    if (table) {
+      const columns = [];
+      fields.forEach((field) => {
+        const tableColumn = getTableColumn(field);
+        if (tableColumn) {
+          const data = values[tableColumn.name];
+          if (data) {
+            columns.push({
+              columnId: field.tableColumnId,
+              data
+            });
+            if (field.autofill) {
+              localStorage.setItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`, JSON.stringify(data));
+            }
+          }
+        }
+      });
+      try {
+        await createTableRecord({
+          variables: {
+            input: {
+              data: {
+                tableId: table.id,
+                columns
+              }
+            }
+          }
+        });
+        setIsDone(true);
+        setInitialValues((prev) => fields.reduce((acc, field) => {
+          const tableColumn = getTableColumn(field);
+          if (tableColumn) {
+            const data = values[tableColumn.name];
+            if (data && field.autofill)
+              return __spreadProps(__spreadValues({}, acc), {
+                [tableColumn.name]: data
+              });
+          }
+          return acc;
+        }, __spreadValues({}, prev)));
+        resetForm();
+        if (linkRef.current != null)
+          linkRef.current.click();
+      } catch (error) {
+        setStatus({
+          error: "An unexpected error has occurred, please try again later"
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    }
+  }
+  React.useEffect(() => {
+    setInitialValues((prev) => fields.reduce((acc, formField) => {
+      const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+      if (tableColumn && formField.autofill) {
+        const storedValue = localStorage.getItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`);
+        if (storedValue) {
+          try {
+            acc[tableColumn.name] = JSON.parse(storedValue);
+          } catch (e) {
+          }
+        }
+      }
+      return acc;
+    }, __spreadValues({}, prev)));
+  }, [fields, table]);
+  return /* @__PURE__ */ jsxRuntime.jsx(next.Provider, {
+    value: {
+      shape,
+      size,
+      contrast,
+      brandColor,
+      labelTextStyle,
+      labelTextColor
+    },
+    children: tableId == null ? /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {
+      ref: setRefEl,
+      className: css.cx(width),
+      margin
+    }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(formik.Formik, {
+        onSubmit: handleSubmit,
+        initialValues,
+        initialStatus: {
+          error: null
+        },
+        enableReinitialize: true,
+        children: (formik$1) => {
+          const error = formik$1.status && formik$1.status.error;
+          const errors = fields.map((field) => {
+            const tableColumn = getTableColumn(field);
+            return tableColumn && formik.getIn(formik$1.touched, tableColumn.name) && formik.getIn(formik$1.errors, tableColumn.name);
+          }).filter((message) => typeof message === "string");
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */ jsxRuntime.jsxs(GridForm, {
+              ref: setRefEl,
+              id,
+              className: css.cx(width),
+              margin,
+              size,
+              onSubmit: formik$1.handleSubmit,
+              onReset: formik$1.handleReset,
+              noValidate: true,
+              children: [fields.map((field, index2) => {
+                const tableColumn = getTableColumn(field);
+                return /* @__PURE__ */ jsxRuntime.jsx(GridItem, {
+                  ref: items[index2],
+                  grid,
+                  index: index2,
+                  rowGap: gap,
+                  columnGap: gap,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Field, {
+                    tableColumn,
+                    tableFormField: field
+                  })
+                }, field.id);
+              }), /* @__PURE__ */ jsxRuntime.jsxs(GridItem, {
+                ref: items[fields.length],
+                grid,
+                index: fields.length,
+                rowGap: gap,
+                columnGap: gap,
+                children: [/* @__PURE__ */ jsxRuntime.jsx(StyledButton, {
+                  type: "submit",
+                  disabled: formik$1.isSubmitting || isDone,
+                  shape,
+                  size,
+                  color: brandColor,
+                  variant: submitVariant,
+                  textColor: submitTextColor,
+                  width: submitWidth,
+                  alignment: submitAlignment,
+                  textStyle: submitTextStyle,
+                  children: formik$1.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : isDone ? /* @__PURE__ */ jsxRuntime.jsx(IconContainer, {
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgCheck12, {})
+                  }) : submitLabel
+                }), (errors.length > 0 || error) && /* @__PURE__ */ jsxRuntime.jsxs(ErrorContainer, {
+                  children: [errors.map((message) => /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, {
+                    children: message
+                  }, message)), error != null && /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, {
+                    children: error
+                  })]
+                })]
+              })]
+            }), submitLink != null && /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
+              ref: linkRef,
+              hidden: true,
+              link: submitLink
+            })]
+          });
+        }
+      })
+    })
+  });
+});
+var Form$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  "default": Form
+}, Symbol.toStringTag, { value: "Module" }));
+exports.Form = Form;
+exports.Form$1 = Form$1;
+exports.useTable = useTable;
+//# sourceMappingURL=Form.cjs.js.map