@makeswift/runtime 0.13.1 → 0.14.0

package/dist/Form.es.js

@@ -1,1867 +0,0 @@
-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;
-};
-import * as React from "react";
-import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useMemo } from "react";
-import { Field as Field$1, getIn, Formik } from "formik";
-import { cx, keyframes } from "@emotion/css";
-import { _ as useStyle } from "./react-page.es.js";
-import { n as useResponsiveStyle, S as Shapes, s as Sizes, C as Contrasts, q as colorToString, t as useFormContext, p as useResponsiveTextStyle, u as useIsInBuilder, v as useResponsiveGridItem, w as useTable, x as useMakeswiftClient, y as Provider, A as Alignments } from "./index.es.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import ColorHelper from "color";
-import Button$1 from "./Button.es.js";
-import { L as Link } from "./index.es3.js";
-import { g as getBox } from "./box-models.es.js";
-import "redux";
-import "redux-thunk";
-import "./actions.es.js";
-import "zod";
-import "./breakpoints.es.js";
-import "ts-pattern";
-import "corporate-ipsum";
-import "slate";
-import "uuid";
-import "escape-html";
-import "slate-hyperscript";
-import "parse5";
-import "is-hotkey";
-import "@emotion/serialize";
-import "@emotion/utils";
-import "use-sync-external-store/shim/with-selector";
-import "next/dynamic";
-import "./number.es.js";
-import "./combobox.es.js";
-import "use-sync-external-store/shim";
-import "./types.es.js";
-import "scroll-into-view-if-needed";
-import "react-dom";
-import "html-react-parser";
-import "next/head";
-import "@emotion/server/create-instance";
-import "next/document";
-import "cors";
-import "path-to-regexp";
-import "cookie";
-import "http-proxy";
-import "set-cookie-parser";
-import "./constants.es.js";
-import "css-box-model";
-import "next/link";
-var _path;
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : 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.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.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 Sizes.SMALL:
-      return 30;
-    case Sizes.MEDIUM:
-      return 38;
-    case Sizes.LARGE:
-      return 48;
-    default:
-      throw new Error(`Invalid form size "${size}"`);
-  }
-}
-function getSizeHorizontalPadding(size) {
-  switch (size) {
-    case Sizes.SMALL:
-      return 8;
-    case Sizes.MEDIUM:
-      return 12;
-    case Sizes.LARGE:
-      return 16;
-    default:
-      throw new Error(`Invalid form size "${size}"`);
-  }
-}
-function getSizeVerticalPadding(size) {
-  switch (size) {
-    case Sizes.SMALL:
-      return 3;
-    case Sizes.MEDIUM:
-      return 7;
-    case Sizes.LARGE:
-      return 11;
-    default:
-      throw new Error(`Invalid form size "${size}"`);
-  }
-}
-function getShapeBorderRadius(shape) {
-  switch (shape) {
-    case Shapes.SQUARE:
-      return 0;
-    case Shapes.ROUNDED:
-      return 4;
-    case Shapes.PILL:
-      return 500;
-    default:
-      throw new Error(`Invalid form shape "${shape}"`);
-  }
-}
-function getContrastBorderColor(contrast, error) {
-  switch (contrast) {
-    case Contrasts.LIGHT:
-      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(0, 0, 0, 0.25)";
-    case Contrasts.DARK:
-      return error ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.6)";
-    default:
-      throw new Error(`Invalid form contrast "${contrast}"`);
-  }
-}
-function getContrastBackgroundColor(contrast) {
-  switch (contrast) {
-    case Contrasts.LIGHT:
-      return "white";
-    case Contrasts.DARK:
-      return "rgba(0, 0, 0, 0.7)";
-    default:
-      throw new Error(`Invalid form contrast "${contrast}"`);
-  }
-}
-function getContrastColor$1(contrast) {
-  switch (contrast) {
-    case Contrasts.LIGHT:
-      return "rgba(0, 0, 0, 0.95)";
-    case Contrasts.DARK:
-      return "white";
-    default:
-      throw new Error(`Invalid form contrast "${contrast}"`);
-  }
-}
-function getContrastPlaceholderColor(contrast) {
-  switch (contrast) {
-    case Contrasts.LIGHT:
-      return "rgba(0, 0, 0, 0.3)";
-    case Contrasts.DARK:
-      return "rgba(255,255,255,0.3)";
-    default:
-      throw new Error(`Invalid form contrast "${contrast}"`);
-  }
-}
-function responsiveField(props) {
-  return __spreadValues({
-    display: "block",
-    width: "100%",
-    outline: "none",
-    borderWidth: 1,
-    borderStyle: "solid",
-    transition: "border-color 200ms"
-  }, useResponsiveStyle([props.shape, props.size, props.contrast, props.brandColor], ([
-    shape = Shapes.ROUNDED,
-    size = Sizes.MEDIUM,
-    contrast = Contrasts.LIGHT,
-    brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
-  ]) => ({
-    padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,
-    borderRadius: getShapeBorderRadius(shape),
-    borderColor: getContrastBorderColor(contrast, props.error),
-    color: getContrastColor$1(contrast),
-    backgroundColor: getContrastBackgroundColor(contrast),
-    ":focus, :focus-within": {
-      borderColor: colorToString(brandColor)
-    },
-    "::placeholder": {
-      color: getContrastPlaceholderColor(contrast)
-    }
-  })));
-}
-function getSizeHeight$1(size) {
-  switch (size) {
-    case Sizes.SMALL:
-      return 36;
-    case Sizes.MEDIUM:
-      return 42;
-    case Sizes.LARGE:
-      return 48;
-    default:
-      throw new Error(`Invalid form size "${size}"`);
-  }
-}
-var Input$2 = forwardRef(function Input(_a, ref) {
-  var _b = _a, {
-    error = false,
-    form,
-    className
-  } = _b, restOfProps = __objRest(_b, [
-    "error",
-    "form",
-    "className"
-  ]);
-  const {
-    shape,
-    size,
-    contrast,
-    brandColor
-  } = useFormContext();
-  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: cx(useStyle(responsiveField({
-      shape,
-      size,
-      contrast,
-      brandColor,
-      error
-    })), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-      minHeight: getSizeHeight$1(size2),
-      maxHeight: getSizeHeight$1(size2)
-    }))), className)
-  }));
-});
-function Label$2() {
-  return /* @__PURE__ */ jsx("div", {
-    className: useStyle({
-      maxWidth: 120,
-      minWidth: 60,
-      height: 8,
-      borderRadius: 2,
-      backgroundColor: "#a1a8c2",
-      opacity: 0.4,
-      marginBottom: 8
-    })
-  });
-}
-function Input$1() {
-  return /* @__PURE__ */ jsx("div", {
-    className: useStyle({
-      minWidth: 80,
-      height: 32,
-      borderRadius: 4,
-      borderWidth: 2,
-      borderStyle: "solid",
-      borderColor: "#a1a8c2",
-      opacity: 0.4
-    })
-  });
-}
-function Button() {
-  return /* @__PURE__ */ jsx("div", {
-    className: useStyle({
-      minWidth: 140,
-      height: 32,
-      borderRadius: 4,
-      backgroundColor: "#a1a8c2",
-      opacity: 0.4
-    })
-  });
-}
-var Placeholder = forwardRef(function Placeholder2({
-  className,
-  width,
-  margin
-}, ref) {
-  return /* @__PURE__ */ jsxs("div", {
-    ref,
-    className: cx(useStyle({
-      display: "flex",
-      flexDirection: "column"
-    }), width, margin, className),
-    children: [/* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        marginBottom: 16
-      },
-      children: [/* @__PURE__ */ jsx(Label$2, {}), /* @__PURE__ */ jsx(Input$1, {})]
-    }), /* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        marginBottom: 16
-      },
-      children: [/* @__PURE__ */ jsx(Label$2, {}), /* @__PURE__ */ jsx(Input$1, {})]
-    }), /* @__PURE__ */ jsx("div", {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-end"
-      },
-      children: /* @__PURE__ */ jsx(Button, {})
-    })]
-  });
-});
-function getSizeHeight(size) {
-  switch (size) {
-    case Sizes.SMALL:
-      return 14;
-    case Sizes.MEDIUM:
-      return 18;
-    case Sizes.LARGE:
-      return 22;
-    default:
-      throw new Error(`Invalid form size "${size}"`);
-  }
-}
-function getContrastColor(contrast) {
-  switch (contrast) {
-    case Contrasts.LIGHT:
-      return "rgba(0, 0, 0, 0.8)";
-    case Contrasts.DARK:
-      return "rgba(255, 255, 255, 0.95)";
-    default:
-      throw new Error(`Invalid form contrast "${contrast}"`);
-  }
-}
-function Label$1(_c) {
-  var _d = _c, {
-    as,
-    className
-  } = _d, restOfProps = __objRest(_d, [
-    "as",
-    "className"
-  ]);
-  const Component = as != null ? as : "label";
-  const {
-    contrast,
-    size,
-    labelTextStyle,
-    labelTextColor
-  } = useFormContext();
-  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      display: "block",
-      margin: "0 0 0.25em 0"
-    }), useStyle(useResponsiveTextStyle(labelTextStyle)), useStyle(useResponsiveStyle([size, contrast, labelTextColor], ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT, textColor]) => ({
-      minHeight: getSizeHeight(size2),
-      color: textColor == null ? getContrastColor(contrast2) : colorToString(textColor)
-    }))), className)
-  }));
-}
-var SingleLineTextTableField = forwardRef(function SingleLineTextTableField2(_e, ref) {
-  var _f = _e, {
-    id,
-    label = "",
-    name,
-    error,
-    hideLabel = false,
-    tableColumn
-  } = _f, restOfProps = __objRest(_f, [
-    "id",
-    "label",
-    "name",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
-      "aria-label": label,
-      ref,
-      id,
-      name,
-      type: "text",
-      error: error != null
-    }))]
-  });
-});
-var TextArea = forwardRef(function TextArea2(_g2, ref) {
-  var _h = _g2, {
-    error = false,
-    form
-  } = _h, restOfProps = __objRest(_h, [
-    "error",
-    "form"
-  ]);
-  const {
-    shape,
-    size,
-    contrast,
-    brandColor
-  } = useFormContext();
-  return /* @__PURE__ */ jsx("textarea", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: cx(useStyle({
-      resize: "vertical"
-    }), useStyle(responsiveField({
-      error,
-      shape,
-      size,
-      contrast,
-      brandColor
-    }))),
-    rows: 4
-  }));
-});
-var LongTextTableField = forwardRef(function LongTextTableField2(_i, ref) {
-  var _j = _i, {
-    id,
-    label = "",
-    error,
-    hideLabel = false,
-    tableColumn
-  } = _j, restOfProps = __objRest(_j, [
-    "id",
-    "label",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({}, restOfProps), {
-      "aria-label": label,
-      ref,
-      id,
-      error: error != null
-    }))]
-  });
-});
-function getCheckmarkColor$1({
-  swatch: {
-    hue: h,
-    saturation: s,
-    lightness: l
-  },
-  alpha: a
-}) {
-  return ColorHelper({
-    h,
-    s,
-    l
-  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
-}
-const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
-function FakeCheckbox({
-  className,
-  style,
-  contrast,
-  error
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    style,
-    className: cx(FAKE_CHECKBOX_CLASS_NAME, useStyle({
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      borderStyle: "solid",
-      borderRadius: 4,
-      pointerEvents: "none",
-      borderWidth: 1
-    }), useStyle(useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
-      borderColor: getContrastBorderColor(contrast2, error),
-      backgroundColor: getContrastBackgroundColor(contrast2)
-    }))), className)
-  });
-}
-const HiddenCheckbox = forwardRef(function HiddenCheckbox2(_k, ref) {
-  var _l = _k, {
-    size,
-    brandColor,
-    contrast,
-    error,
-    className
-  } = _l, restOfProps = __objRest(_l, [
-    "size",
-    "brandColor",
-    "contrast",
-    "error",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: cx(useStyle({
-      position: "absolute",
-      opacity: 0,
-      width: "100%",
-      height: "100%",
-      cursor: "pointer",
-      "&:disabled": {
-        cursor: "no-drop",
-        [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
-          opacity: 0.5
-        }
-      },
-      [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: __spreadProps(__spreadValues({}, useResponsiveStyle([brandColor], ([{
-        swatch = {
-          hue: 0,
-          saturation: 0,
-          lightness: 0
-        },
-        alpha = 1
-      } = {}]) => ({
-        backgroundColor: colorToString({
-          swatch,
-          alpha
-        })
-      }))), {
-        borderColor: "transparent",
-        "&::after": __spreadProps(__spreadValues({
-          content: '""',
-          position: "absolute",
-          boxSizing: "content-box",
-          width: "25%",
-          height: "50%",
-          borderStyle: "solid"
-        }, useResponsiveStyle([size, brandColor], ([size2 = Sizes.MEDIUM, {
-          swatch = {
-            hue: 0,
-            saturation: 0,
-            lightness: 0
-          },
-          alpha = 1
-        } = {}]) => ({
-          borderWidth: getSizeHeight(size2) * 0.1,
-          borderLeft: 0,
-          borderTop: 0,
-          borderColor: getCheckmarkColor$1({
-            swatch,
-            alpha
-          })
-        }))), {
-          transform: "rotate(45deg) translate3d(91%, -23%, 0)"
-        })
-      }),
-      "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle([brandColor], ([brandColor2 = {
-          swatch: {
-            hue: 0,
-            saturation: 0,
-            lightness: 0
-          },
-          alpha: 1
-        }]) => ({
-          borderColor: colorToString(brandColor2)
-        }))
-      },
-      "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
-          borderColor: getContrastBorderColor(contrast2, error)
-        }))
-      }
-    }), className)
-  }));
-});
-var Checkbox = forwardRef(function Checkbox2(_m, ref) {
-  var _n = _m, {
-    error,
-    className,
-    style,
-    form
-  } = _n, restOfProps = __objRest(_n, [
-    "error",
-    "className",
-    "style",
-    "form"
-  ]);
-  const {
-    size,
-    contrast,
-    brandColor
-  } = useFormContext();
-  return /* @__PURE__ */ jsxs("div", {
-    className: cx(useStyle({
-      position: "relative"
-    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-      height: getSizeHeight(size2),
-      width: getSizeHeight(size2)
-    })))),
-    children: [/* @__PURE__ */ jsx(HiddenCheckbox, __spreadProps(__spreadValues({}, restOfProps), {
-      type: "checkbox",
-      ref,
-      error,
-      size,
-      contrast,
-      brandColor
-    })), /* @__PURE__ */ jsx(FakeCheckbox, {
-      className,
-      error,
-      contrast,
-      style
-    })]
-  });
-});
-var CheckboxTableField = forwardRef(function CheckboxTableField2(_o, ref) {
-  var _p = _o, {
-    form,
-    id,
-    name,
-    label = "",
-    value = false,
-    error,
-    hideLabel,
-    tableColumn
-  } = _p, restOfProps = __objRest(_p, [
-    "form",
-    "id",
-    "name",
-    "label",
-    "value",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  const {
-    size
-  } = useFormContext();
-  function handleChange(event) {
-    form.setFieldValue(name, event.currentTarget.checked);
-  }
-  return /* @__PURE__ */ jsxs(Label$1, {
-    className: cx(useStyle({
-      display: "flex",
-      alignItems: "center",
-      margin: 0
-    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-      minHeight: getSizeHeight$1(size2),
-      maxHeight: getSizeHeight$1(size2)
-    })))),
-    htmlFor: id,
-    children: [/* @__PURE__ */ jsx("span", {
-      className: useStyle({
-        marginRight: 8
-      }),
-      children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
-        "aria-label": label,
-        checked: value,
-        onChange: handleChange,
-        ref,
-        id,
-        error: error != null
-      }))
-    }), label]
-  });
-});
-function MainLabel(_q) {
-  var _r = _q, {
-    className
-  } = _r, restOfProps = __objRest(_r, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      margin: "0 0 4px 0"
-    }), className)
-  }));
-}
-function StyledLabel$1(_s) {
-  var _t = _s, {
-    className
-  } = _t, restOfProps = __objRest(_t, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      display: "flex",
-      alignItems: "center",
-      margin: "8px 0",
-      "&:last-of-type": {
-        marginBottom: 0
-      }
-    }), className)
-  }));
-}
-function CheckboxContainer(_u) {
-  var _v = _u, {
-    className
-  } = _v, restOfProps = __objRest(_v, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      marginRight: 8
-    }), className)
-  }));
-}
-var MultipleSelectTableField = forwardRef(function MultipleSelectTableField2(_w, ref) {
-  var _x = _w, {
-    tableColumn,
-    label = "",
-    required,
-    value = [],
-    onChange,
-    hideLabel = false
-  } = _x, restOfProps = __objRest(_x, [
-    "tableColumn",
-    "label",
-    "required",
-    "value",
-    "onChange",
-    "hideLabel"
-  ]);
-  const handle = useRef({
-    validity: {
-      valueMissing: required === true && value.length === 0,
-      typeMismatch: false
-    }
-  });
-  useImperativeHandle(ref, () => handle.current, []);
-  function handleChange(event) {
-    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked && value.filter((v) => v !== event.currentTarget.value).length === 0;
-    onChange(event);
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    children: [!hideLabel && /* @__PURE__ */ jsx(MainLabel, {
-      children: label
-    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel$1, {
-      htmlFor: option.id,
-      children: [/* @__PURE__ */ jsx(CheckboxContainer, {
-        children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, restOfProps), {
-          "aria-label": label,
-          onChange: handleChange,
-          checked: value.includes(option.name),
-          id: option.id,
-          value: option.name
-        }))
-      }), option.name]
-    }, option.id))]
-  });
-});
-function getCheckmarkColor({
-  swatch: {
-    hue: h,
-    saturation: s,
-    lightness: l
-  } = {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: a = 1
-}) {
-  return ColorHelper({
-    h,
-    s,
-    l
-  }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
-}
-function Container$1(_y) {
-  var _z = _y, {
-    size,
-    className
-  } = _z, restOfProps = __objRest(_z, [
-    "size",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      position: "relative"
-    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-      height: getSizeHeight(size2),
-      width: getSizeHeight(size2)
-    }))), className)
-  }));
-}
-const FAKE_RADIO_BUTTON_CLASS_NAME = "fake-radio-button";
-function FakeRadioButton(_A) {
-  var _B = _A, {
-    className,
-    contrast,
-    error
-  } = _B, restOfProps = __objRest(_B, [
-    "className",
-    "contrast",
-    "error"
-  ]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(FAKE_RADIO_BUTTON_CLASS_NAME, useStyle({
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      borderStyle: "solid",
-      borderRadius: "50%",
-      pointerEvents: "none",
-      borderWidth: 1
-    }), useStyle(useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
-      borderColor: getContrastBorderColor(contrast2, error),
-      backgroundColor: getContrastBackgroundColor(contrast2)
-    }))), className)
-  }));
-}
-const HiddenRadioButton = forwardRef(function HiddenRadioButton2(_C, ref) {
-  var _D = _C, {
-    className,
-    brandColor,
-    contrast,
-    error
-  } = _D, restOfProps = __objRest(_D, [
-    "className",
-    "brandColor",
-    "contrast",
-    "error"
-  ]);
-  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, restOfProps), {
-    type: "radio",
-    className: cx(useStyle({
-      position: "absolute",
-      opacity: 0,
-      width: "100%",
-      height: "100%",
-      cursor: "pointer",
-      "&:disabled": {
-        cursor: "no-drop",
-        [`& ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
-          opacity: 0.5
-        }
-      },
-      [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: __spreadProps(__spreadValues({}, useResponsiveStyle([brandColor], ([brandColor2 = {
-        swatch: {
-          hue: 0,
-          saturation: 0,
-          lightness: 0
-        },
-        alpha: 1
-      }]) => ({
-        backgroundColor: colorToString(brandColor2)
-      }))), {
-        borderColor: "transparent",
-        "&::after": __spreadValues({
-          content: '""',
-          position: "absolute",
-          boxSizing: "content-box",
-          top: "50%",
-          left: "50%",
-          width: "50%",
-          height: "50%",
-          borderRadius: "50%",
-          transform: "translate(-50%, -50%)"
-        }, useResponsiveStyle([brandColor], ([brandColor2 = {
-          swatch: {
-            hue: 0,
-            saturation: 0,
-            lightness: 0
-          },
-          alpha: 1
-        }]) => ({
-          backgroundColor: getCheckmarkColor(brandColor2)
-        })))
-      }),
-      "&:not(:disabled)": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle([brandColor], ([brandColor2 = {
-          swatch: {
-            hue: 0,
-            saturation: 0,
-            lightness: 0
-          },
-          alpha: 1
-        }]) => ({
-          borderColor: colorToString(brandColor2)
-        }))
-      },
-      "&:not(:disabled):checked": {
-        [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
-          borderColor: getContrastBorderColor(contrast2, error)
-        }))
-      }
-    }), className),
-    ref
-  }));
-});
-var RadioButton = forwardRef(function RadioButton2(_E, ref) {
-  var _F = _E, {
-    error,
-    className,
-    style,
-    form
-  } = _F, restOfProps = __objRest(_F, [
-    "error",
-    "className",
-    "style",
-    "form"
-  ]);
-  const {
-    size,
-    contrast,
-    brandColor
-  } = useFormContext();
-  return /* @__PURE__ */ jsxs(Container$1, {
-    size,
-    children: [/* @__PURE__ */ jsx(HiddenRadioButton, __spreadProps(__spreadValues({}, restOfProps), {
-      ref,
-      error,
-      contrast,
-      brandColor
-    })), /* @__PURE__ */ jsx(FakeRadioButton, {
-      className,
-      error,
-      contrast,
-      style
-    })]
-  });
-});
-function StyledLabel(_G) {
-  var _H = _G, {
-    className
-  } = _H, restOfProps = __objRest(_H, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(Label$1, __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      display: "flex",
-      alignItems: "center",
-      margin: "8px 0",
-      "&:last-of-type": {
-        marginBottom: 0
-      }
-    }), className)
-  }));
-}
-function RadioButtonContainer(_I) {
-  var _J = _I, {
-    className
-  } = _J, restOfProps = __objRest(_J, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      marginRight: 8
-    }), className)
-  }));
-}
-var TableColumnRadioButtonGroup = forwardRef(function TableColumnRadioButtonGroup2(_K, ref) {
-  var _L = _K, {
-    tableColumn,
-    label = "",
-    value = "",
-    required = false,
-    hideLabel = false,
-    onChange
-  } = _L, restOfProps = __objRest(_L, [
-    "tableColumn",
-    "label",
-    "value",
-    "required",
-    "hideLabel",
-    "onChange"
-  ]);
-  const handle = useRef({
-    validity: {
-      valueMissing: required === true && value === "",
-      typeMismatch: false
-    }
-  });
-  useImperativeHandle(ref, () => handle.current, []);
-  function handleChange(event) {
-    handle.current.validity.valueMissing = required === true && !event.currentTarget.checked;
-    onChange(event);
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      as: "p",
-      children: label
-    }), tableColumn.options.map((option) => /* @__PURE__ */ jsxs(StyledLabel, {
-      htmlFor: option.id,
-      "aria-label": label,
-      children: [/* @__PURE__ */ jsx(RadioButtonContainer, {
-        children: /* @__PURE__ */ jsx(RadioButton, __spreadProps(__spreadValues({}, restOfProps), {
-          onChange: handleChange,
-          checked: value === option.name,
-          id: option.id,
-          value: option.name
-        }))
-      }), option.name]
-    }, option.id))]
-  });
-});
-function Container(_M) {
-  var _N = _M, {
-    shape,
-    size,
-    contrast,
-    brandColor,
-    error,
-    className
-  } = _N, restOfProps = __objRest(_N, [
-    "shape",
-    "size",
-    "contrast",
-    "brandColor",
-    "error",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle(responsiveField({
-      shape,
-      size,
-      contrast,
-      brandColor,
-      error
-    })), useStyle(__spreadValues({
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      userSelect: "none",
-      borderColor: "#f19eb9",
-      "&:focus, &:focus-within": {
-        borderColor: "#e54e7f"
-      }
-    }, useResponsiveStyle([size, contrast], ([size2 = Sizes.MEDIUM, contrast2 = Contrasts.LIGHT]) => ({
-      minHeight: getSizeHeight$2(size2),
-      maxHeight: getSizeHeight$2(size2),
-      "&::after": {
-        content: '""',
-        position: "absolute",
-        right: getSizeHorizontalPadding(size2),
-        top: "50%",
-        transform: "translate3d(0, -25%, 0)",
-        border: "solid 0.35em transparent",
-        borderTopColor: getContrastColor$1(contrast2)
-      }
-    })))), className)
-  }));
-}
-const Select = forwardRef(function Select2(_O, ref) {
-  var _P = _O, {
-    className
-  } = _P, restOfProps = __objRest(_P, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: cx(useStyle({
-      appearance: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      opacity: 0,
-      width: "100%",
-      height: "100%"
-    }), className)
-  }));
-});
-var TableColumnSingleSelect = forwardRef(function TableColumnSingleSelect2(_Q, ref) {
-  var _R = _Q, {
-    id,
-    tableColumn,
-    value = "",
-    label = "",
-    error = false,
-    hideLabel = false,
-    form
-  } = _R, restOfProps = __objRest(_R, [
-    "id",
-    "tableColumn",
-    "value",
-    "label",
-    "error",
-    "hideLabel",
-    "form"
-  ]);
-  const {
-    shape,
-    size,
-    contrast,
-    brandColor
-  } = useFormContext();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsxs(Container, {
-      error,
-      shape,
-      size,
-      contrast,
-      brandColor,
-      children: [/* @__PURE__ */ jsx("span", {
-        children: value === "" ? "-" : value
-      }), /* @__PURE__ */ jsxs(Select, __spreadProps(__spreadValues({}, restOfProps), {
-        "aria-label": label,
-        ref,
-        id,
-        value,
-        children: [/* @__PURE__ */ jsx("option", {
-          value: "",
-          children: "-"
-        }), tableColumn.options.map((option) => /* @__PURE__ */ jsx("option", {
-          value: option.name,
-          children: option.name
-        }, option.id))]
-      }))]
-    })]
-  });
-});
-var SingleSelectTableField = forwardRef(function SingleSelectTableField2(_S, ref) {
-  var _T = _S, {
-    type
-  } = _T, restOfProps = __objRest(_T, [
-    "type"
-  ]);
-  return type === "select" ? /* @__PURE__ */ jsx(TableColumnSingleSelect, __spreadProps(__spreadValues({}, restOfProps), {
-    ref
-  })) : /* @__PURE__ */ jsx(TableColumnRadioButtonGroup, __spreadProps(__spreadValues({}, restOfProps), {
-    ref
-  }));
-});
-var PhoneNumberTableField = forwardRef(function PhoneNumberTableField2(_U, ref) {
-  var _V = _U, {
-    id,
-    label = "",
-    name,
-    error,
-    hideLabel = false,
-    tableColumn
-  } = _V, restOfProps = __objRest(_V, [
-    "id",
-    "label",
-    "name",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
-      "aria-label": label,
-      ref,
-      id,
-      name,
-      type: "tel",
-      error: error != null
-    }))]
-  });
-});
-var EmailTableField = forwardRef(function EmailTableField2(_W, ref) {
-  var _X = _W, {
-    id,
-    label = "",
-    name,
-    error,
-    hideLabel = false,
-    tableColumn
-  } = _X, restOfProps = __objRest(_X, [
-    "id",
-    "label",
-    "name",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
-      "aria-label": label,
-      ref,
-      id,
-      name,
-      type: "email",
-      error: error != null
-    }))]
-  });
-});
-var URLTableField = forwardRef(function URLTableField2(_Y, ref) {
-  var _Z = _Y, {
-    id,
-    label = "",
-    name,
-    error,
-    hideLabel = false,
-    tableColumn
-  } = _Z, restOfProps = __objRest(_Z, [
-    "id",
-    "label",
-    "name",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
-      "aria-label": label,
-      ref,
-      id,
-      name,
-      type: "url",
-      error: error != null
-    }))]
-  });
-});
-var NumberTableField = forwardRef(function NumberTableField2(__, ref) {
-  var _$ = __, {
-    id,
-    label = "",
-    name,
-    error,
-    hideLabel = false,
-    tableColumn
-  } = _$, restOfProps = __objRest(_$, [
-    "id",
-    "label",
-    "name",
-    "error",
-    "hideLabel",
-    "tableColumn"
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [!hideLabel && /* @__PURE__ */ jsx(Label$1, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */ jsx(Input$2, __spreadProps(__spreadValues({}, restOfProps), {
-      "aria-label": label,
-      ref,
-      id,
-      name,
-      type: "number",
-      error: error != null
-    }))]
-  });
-});
-function Label({
-  size
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    className: cx(useStyle({
-      display: "block",
-      maxWidth: 120,
-      minWidth: 60,
-      borderRadius: 2,
-      backgroundColor: "#5f49f4",
-      opacity: 0.4
-    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-      margin: `calc(0.25 * ${getSizeHeight(size2)}px + 2px) 0`,
-      minHeight: 0.5 * getSizeHeight(size2),
-      maxHeight: 0.5 * getSizeHeight(size2)
-    }))))
-  });
-}
-function Input2({
-  shape,
-  size
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    className: cx(useStyle({
-      display: "block",
-      width: "100%",
-      borderWidth: 2,
-      borderStyle: "solid",
-      borderColor: "#5f49f4",
-      opacity: 0.4
-    }), useStyle(useResponsiveStyle([shape, size], ([shape2 = Shapes.ROUNDED, size2 = Sizes.MEDIUM]) => ({
-      minHeight: getSizeHeight$1(size2),
-      maxHeight: getSizeHeight$1(size2),
-      borderRadius: getShapeBorderRadius(shape2)
-    }))))
-  });
-}
-function PlaceholderTableField() {
-  const {
-    size,
-    shape
-  } = useFormContext();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Label, {
-      size
-    }), /* @__PURE__ */ jsx(Input2, {
-      shape,
-      size
-    })]
-  });
-}
-function getTypeMismatchErrorMessage(tableColumn, label) {
-  switch ((tableColumn || {}).__typename) {
-    case "PhoneNumberTableColumn":
-      return `${label} field must be a valid phone number.`;
-    case "EmailTableColumn":
-      return `${label} field must be a valid email.`;
-    case "URLTableColumn":
-      return `${label} field must be a valid URL.`;
-    case "NumberTableColumn":
-      return `${label} field must be a valid number.`;
-    case "SingleLineTextTableColumn":
-    case "LongTextTableColumn":
-    case "CheckboxTableColumn":
-    default:
-      return `${label} field is invalid.`;
-  }
-}
-function getTableColumnField(tableColumn) {
-  switch ((tableColumn || {}).__typename) {
-    case "SingleLineTextTableColumn":
-      return SingleLineTextTableField;
-    case "LongTextTableColumn":
-      return LongTextTableField;
-    case "CheckboxTableColumn":
-      return CheckboxTableField;
-    case "MultipleSelectTableColumn":
-      return MultipleSelectTableField;
-    case "SingleSelectTableColumn":
-      return SingleSelectTableField;
-    case "PhoneNumberTableColumn":
-      return PhoneNumberTableField;
-    case "EmailTableColumn":
-      return EmailTableField;
-    case "URLTableColumn":
-      return URLTableField;
-    case "NumberTableColumn":
-      return NumberTableField;
-    default:
-      return SingleLineTextTableField;
-  }
-}
-function escapeCharacters(string) {
-  return string.replace(/[[\]']/g, "\\$&");
-}
-function Field({
-  tableColumn,
-  tableFormField: {
-    id,
-    label = "",
-    placeholder,
-    required = false,
-    hidden = false,
-    type = "radio",
-    hideLabel = false
-  }
-}) {
-  const TableColumnField = getTableColumnField(tableColumn);
-  const input = useRef(null);
-  if (!tableColumn)
-    return /* @__PURE__ */ jsx(PlaceholderTableField, {});
-  function validate() {
-    let errorMessage;
-    if (input.current) {
-      const {
-        validity = {}
-      } = input.current;
-      if (validity.valueMissing)
-        errorMessage = `${label} is required.`;
-      if (validity.typeMismatch)
-        errorMessage = getTypeMismatchErrorMessage(tableColumn, label);
-    }
-    return errorMessage;
-  }
-  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`;
-  return /* @__PURE__ */ jsx(Field$1, {
-    name: formikFieldName,
-    validate,
-    children: ({
-      field,
-      form
-    }) => hidden ? /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, field), {
-      ref: input,
-      type: "hidden"
-    })) : /* @__PURE__ */ jsx(TableColumnField, __spreadProps(__spreadValues({}, field), {
-      type,
-      form,
-      tableColumn,
-      ref: input,
-      id,
-      error: getIn(form.touched, field.name) && getIn(form.errors, field.name),
-      label,
-      placeholder,
-      required,
-      hideLabel
-    }))
-  });
-}
-var _g;
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 20,
-    height: 20
-  }, props), _g || (_g = /* @__PURE__ */ React.createElement("g", {
-    fill: "none",
-    strokeWidth: 2,
-    transform: "translate(1 1)"
-  }, /* @__PURE__ */ React.createElement("circle", {
-    stroke: "currentColor",
-    cx: 9,
-    cy: 9,
-    r: 9,
-    strokeOpacity: 0.4
-  }), /* @__PURE__ */ React.createElement("path", {
-    strokeLinecap: "round",
-    d: "M9 18A9 9 0 0 0 9 0"
-  }))));
-};
-const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-function Spinner() {
-  return /* @__PURE__ */ jsx(SvgSpinner20, {
-    className: useStyle({
-      display: "inline-flex",
-      animation: `${spin} 1s linear infinite`,
-      stroke: "currentColor"
-    })
-  });
-}
-function useTableFormFieldRefs(propController, { fieldsCount }) {
-  const [container, setContainer] = useState(null);
-  const [items, setItems] = useState(Array(fieldsCount + 1).fill(null));
-  const isInBuilder = useIsInBuilder();
-  useEffect(() => {
-    if (!isInBuilder)
-      return;
-    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-    return () => {
-      cancelAnimationFrame(animationFrameHandle);
-    };
-    function handleAnimationFrameRequest() {
-      if (propController == null)
-        return;
-      if (container != null)
-        propController.tableFormLayoutChange({ layout: getBox(container) });
-      items.map((item, index) => {
-        if (item == null)
-          return;
-        propController.tableFormFieldLayoutChange({ index, layout: getBox(item) });
-      });
-      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-    }
-  }, [propController, container, items, isInBuilder]);
-  const itemRefs = useMemo(() => Array.from({ length: fieldsCount + 1 }).map((_, index) => (item) => {
-    setItems((is) => [...is.slice(0, index), item, ...is.slice(index + 1)]);
-  }), [fieldsCount, setItems]);
-  return { container: setContainer, items: itemRefs };
-}
-const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
-function getSizeFontSize(size) {
-  switch (size) {
-    case Sizes.SMALL:
-      return 12;
-    case Sizes.MEDIUM:
-      return 14;
-    case Sizes.LARGE:
-      return 18;
-    default:
-      throw new Error(`Invalid form size "${size}"`);
-  }
-}
-const GridForm = forwardRef(function GridFrom(_aa, ref) {
-  var _ba = _aa, {
-    className,
-    size
-  } = _ba, restOfProps = __objRest(_ba, [
-    "className",
-    "size"
-  ]);
-  return /* @__PURE__ */ jsx("form", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: cx(useStyle({
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100%"
-    }), useStyle(useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
-      fontSize: getSizeFontSize(size2)
-    }))), className)
-  }));
-});
-const GridItem = forwardRef(function GridItem2(_ca, ref) {
-  var _da = _ca, {
-    className,
-    grid,
-    index,
-    rowGap,
-    columnGap
-  } = _da, restOfProps = __objRest(_da, [
-    "className",
-    "grid",
-    "index",
-    "rowGap",
-    "columnGap"
-  ]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: cx(useStyle({
-      alignSelf: "flex-end",
-      flexDirection: "column"
-    }), useStyle(useResponsiveGridItem({
-      grid,
-      index,
-      rowGap,
-      columnGap
-    })), className)
-  }));
-});
-function getAlignmentMargin(alignment) {
-  switch (alignment) {
-    case Alignments.LEFT:
-      return "0 auto 0 0";
-    case Alignments.RIGHT:
-      return "0 0 0 auto";
-    default:
-      return "0 auto";
-  }
-}
-function StyledButton(_ea) {
-  var _fa = _ea, {
-    className,
-    size,
-    alignment
-  } = _fa, restOfProps = __objRest(_fa, [
-    "className",
-    "size",
-    "alignment"
-  ]);
-  return /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
-    as: "button",
-    className: cx(useStyle({
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }), useStyle(useResponsiveStyle([size, alignment], ([size2 = Sizes.MEDIUM, alignment2 = Alignments.CENTER]) => ({
-      minHeight: getSizeHeight$1(size2),
-      maxHeight: getSizeHeight$1(size2),
-      margin: getAlignmentMargin(alignment2),
-      paddingTop: 0,
-      paddingBottom: 0
-    }))), className)
-  }));
-}
-function ErrorContainer(_ga) {
-  var _ha = _ga, {
-    className
-  } = _ha, restOfProps = __objRest(_ha, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      padding: "8px 16px",
-      backgroundColor: "#f19eb9",
-      borderRadius: 4,
-      marginTop: 16
-    }), className)
-  }));
-}
-function IconContainer(_ia) {
-  var _ja = _ia, {
-    className
-  } = _ja, restOfProps = __objRest(_ja, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      fill: "currentColor"
-    }), className)
-  }));
-}
-function ErrorMessage(_ka) {
-  var _la = _ka, {
-    className
-  } = _la, restOfProps = __objRest(_la, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx("p", __spreadProps(__spreadValues({}, restOfProps), {
-    className: cx(useStyle({
-      fontSize: 12,
-      margin: "8px 0",
-      color: "rgba(127, 0, 0, 0.95)"
-    }), className)
-  }));
-}
-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 Form = forwardRef(function Form2({
-  id,
-  tableId,
-  fields: fieldsProp,
-  submitLabel = "Submit",
-  submitLink,
-  shape,
-  size,
-  contrast,
-  brandColor,
-  gap,
-  width,
-  margin,
-  submitTextStyle,
-  submitVariant,
-  submitTextColor,
-  submitWidth,
-  submitAlignment,
-  labelTextStyle,
-  labelTextColor
-}, ref) {
-  const fields = useMemo(() => {
-    var _a;
-    return (_a = fieldsProp == null ? void 0 : fieldsProp.fields) != null ? _a : [];
-  }, [fieldsProp]);
-  const grid = useMemo(() => {
-    var _a;
-    return (_a = fieldsProp == null ? void 0 : fieldsProp.grid) != null ? _a : [];
-  }, [fieldsProp]);
-  const table = useTable(tableId != null ? tableId : null);
-  const client = useMakeswiftClient();
-  const [refEl, setRefEl] = useState(null);
-  const [propControllers, setPropControllers] = useState(null);
-  const [initialValues, setInitialValues] = useState(() => fields.reduce((acc, formField) => {
-    const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
-    const defaultValue = formField ? formField.defaultValue : null;
-    if (tableColumn) {
-      acc[tableColumn.name] = defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue;
-    }
-    return acc;
-  }, {}));
-  const controller = propControllers == null ? void 0 : propControllers.fields;
-  const {
-    container,
-    items
-  } = useTableFormFieldRefs(controller, {
-    fieldsCount: fields.length
-  });
-  const [isDone, setIsDone] = useState(false);
-  const linkRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    getDomNode() {
-      return refEl instanceof Element ? refEl : null;
-    },
-    getBoxModel() {
-      return refEl instanceof Element ? getBox(refEl) : null;
-    },
-    setPropControllers
-  }), [refEl, setPropControllers]);
-  useEffect(() => {
-    container(refEl);
-  }, [container, refEl]);
-  useEffect(() => {
-    if (!isDone)
-      return;
-    let timeoutId = setTimeout(() => setIsDone(false), 2500);
-    return () => clearTimeout(timeoutId);
-  }, [isDone]);
-  function getTableColumn({
-    tableColumnId
-  }) {
-    return table && table.columns.find((field) => tableColumnId === field.id);
-  }
-  async function handleSubmit(values, {
-    setSubmitting,
-    resetForm,
-    setStatus
-  }) {
-    if (table) {
-      const columns = [];
-      fields.forEach((field) => {
-        const tableColumn = getTableColumn(field);
-        if (tableColumn) {
-          const data = values[tableColumn.name];
-          if (data) {
-            columns.push({
-              columnId: field.tableColumnId,
-              data
-            });
-            if (field.autofill) {
-              localStorage.setItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`, JSON.stringify(data));
-            }
-          }
-        }
-      });
-      try {
-        await client.createTableRecord(table.id, columns);
-        setIsDone(true);
-        setInitialValues((prev) => fields.reduce((acc, field) => {
-          const tableColumn = getTableColumn(field);
-          if (tableColumn) {
-            const data = values[tableColumn.name];
-            if (data && field.autofill)
-              return __spreadProps(__spreadValues({}, acc), {
-                [tableColumn.name]: data
-              });
-          }
-          return acc;
-        }, __spreadValues({}, prev)));
-        resetForm();
-        if (linkRef.current != null)
-          linkRef.current.click();
-      } catch (error) {
-        setStatus({
-          error: "An unexpected error has occurred, please try again later"
-        });
-      } finally {
-        setSubmitting(false);
-      }
-    }
-  }
-  useEffect(() => {
-    setInitialValues((prev) => fields.reduce((acc, formField) => {
-      const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
-      if (tableColumn && formField.autofill) {
-        const storedValue = localStorage.getItem(`${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`);
-        if (storedValue) {
-          try {
-            acc[tableColumn.name] = JSON.parse(storedValue);
-          } catch (e) {
-          }
-        }
-      }
-      return acc;
-    }, __spreadValues({}, prev)));
-  }, [fields, table]);
-  return /* @__PURE__ */ jsx(Provider, {
-    value: {
-      shape,
-      size,
-      contrast,
-      brandColor,
-      labelTextStyle,
-      labelTextColor
-    },
-    children: tableId == null ? /* @__PURE__ */ jsx(Placeholder, {
-      ref: setRefEl,
-      width,
-      margin
-    }) : /* @__PURE__ */ jsx(Fragment, {
-      children: /* @__PURE__ */ jsx(Formik, {
-        onSubmit: handleSubmit,
-        initialValues,
-        initialStatus: {
-          error: null
-        },
-        enableReinitialize: true,
-        children: (formik) => {
-          const error = formik.status && formik.status.error;
-          const errors = fields.map((field) => {
-            const tableColumn = getTableColumn(field);
-            return tableColumn && getIn(formik.touched, tableColumn.name) && getIn(formik.errors, tableColumn.name);
-          }).filter((message) => typeof message === "string");
-          return /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsxs(GridForm, {
-              ref: setRefEl,
-              id,
-              className: cx(width, margin),
-              size,
-              onSubmit: formik.handleSubmit,
-              onReset: formik.handleReset,
-              noValidate: true,
-              children: [fields.map((field, index) => {
-                const tableColumn = getTableColumn(field);
-                return /* @__PURE__ */ jsx(GridItem, {
-                  ref: items[index],
-                  grid,
-                  index,
-                  rowGap: gap,
-                  columnGap: gap,
-                  children: /* @__PURE__ */ jsx(Field, {
-                    tableColumn,
-                    tableFormField: field
-                  })
-                }, field.id);
-              }), /* @__PURE__ */ jsxs(GridItem, {
-                ref: items[fields.length],
-                grid,
-                index: fields.length,
-                rowGap: gap,
-                columnGap: gap,
-                children: [/* @__PURE__ */ jsx(StyledButton, {
-                  type: "submit",
-                  disabled: formik.isSubmitting || isDone,
-                  shape,
-                  size,
-                  color: brandColor,
-                  variant: submitVariant,
-                  textColor: submitTextColor,
-                  width: submitWidth,
-                  alignment: submitAlignment,
-                  textStyle: submitTextStyle,
-                  children: formik.isSubmitting ? /* @__PURE__ */ jsx(Spinner, {}) : isDone ? /* @__PURE__ */ jsx(IconContainer, {
-                    children: /* @__PURE__ */ jsx(SvgCheck12, {})
-                  }) : submitLabel
-                }), (errors.length > 0 || error) && /* @__PURE__ */ jsxs(ErrorContainer, {
-                  children: [errors.map((message) => /* @__PURE__ */ jsx(ErrorMessage, {
-                    children: message
-                  }, message)), error != null && /* @__PURE__ */ jsx(ErrorMessage, {
-                    children: error
-                  })]
-                })]
-              })]
-            }), submitLink != null && /* @__PURE__ */ jsx(Link, {
-              ref: linkRef,
-              hidden: true,
-              link: submitLink
-            })]
-          });
-        }
-      })
-    })
-  });
-});
-export { Form as default };
-//# sourceMappingURL=Form.es.js.map