@vulcanjs/react-ui 0.6.6-y.8 → 0.6.6

package/dist/index.js

@@ -40,6 +40,10 @@ var __esm = (fn, res) => function __init() {
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -588,7 +592,9 @@ var FormContext = /* @__PURE__ */ React.createContext(void 0);
 var useFormContext = /* @__PURE__ */ __name(() => {
   const formContext = useContext(FormContext);
   if (!formContext)
-    throw new Error("A component is trying to access form context but it is undefined. Please wrap your component with a <Form>.");
+    throw new Error(`A component is trying to access form context but it is undefined. Please wrap your component with a <Form>.
+      You may be importing "FormContext" from different packages or have accidentaly made a copy of it?
+      FormContext is exposed by "@vulcanjs/react-ui".`);
   return formContext;
 }, "useFormContext");
 
@@ -597,12 +603,12 @@ init_esm_shims();
 
 // components/form/core/Form/Form.tsx
 init_esm_shims();
-import React12, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import React5, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import { runCallbacks, getErrors } from "@vulcanjs/core";
 import { useIntlContext as useIntlContext2 } from "@vulcanjs/react-i18n";
 import { removeProperty } from "@vulcanjs/utils";
 import cloneDeep from "lodash/cloneDeep.js";
-import compact3 from "lodash/compact.js";
+import compact2 from "lodash/compact.js";
 import get2 from "lodash/get.js";
 import isObject from "lodash/isObject.js";
 import mapValues from "lodash/mapValues.js";
@@ -618,10 +624,33 @@ import without from "lodash/without.js";
 import isEmpty from "lodash/isEmpty.js";
 
 // components/form/utils/schema_utils.ts
+var schema_utils_exports = {};
+__export(schema_utils_exports, {
+  convertSchema: () => convertSchema,
+  formProperties: () => formProperties,
+  getEditableFields: () => getEditableFields,
+  getFieldSchema: () => getFieldSchema,
+  getInsertableFields: () => getInsertableFields,
+  getNestedFieldSchemaOrType: () => getNestedFieldSchemaOrType,
+  getSchemaType: () => getSchemaType,
+  getValidFields: () => getValidFields,
+  schemaProperties: () => schemaProperties
+});
 init_esm_shims();
 import { canCreateField, canUpdateField } from "@vulcanjs/permissions";
 
 // components/form/utils/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  deepValue: () => deepValue,
+  flatten: () => flatten,
+  getDeletedValues: () => getDeletedValues,
+  getFieldType: () => getFieldType,
+  getNestedDeletedValues: () => getNestedDeletedValues,
+  getNullValue: () => getNullValue,
+  isEmptyValue: () => isEmptyValue,
+  mergeValue: () => mergeValue
+});
 init_esm_shims();
 import merge from "lodash/merge.js";
 import find from "lodash/find.js";
@@ -630,6 +659,14 @@ import set from "lodash/set.js";
 import size from "lodash/size.js";
 
 // components/form/utils/path_utils.ts
+var path_utils_exports = {};
+__export(path_utils_exports, {
+  filterPathsByPrefix: () => filterPathsByPrefix,
+  getParentPath: () => getParentPath,
+  joinPath: () => joinPath,
+  removePrefix: () => removePrefix,
+  splitPath: () => splitPath
+});
 init_esm_shims();
 import toPath from "lodash/toPath.js";
 import initial from "lodash/initial.js";
@@ -638,12 +675,93 @@ import takeRight from "lodash/takeRight.js";
 var splitPath = /* @__PURE__ */ __name((string) => toPath(string), "splitPath");
 var joinPath = /* @__PURE__ */ __name((array) => array.reduce((string, item) => string + (Number.isNaN(Number(item)) ? `${string === "" ? "" : "."}${item}` : `[${item}]`), ""), "joinPath");
 var getParentPath = flow(splitPath, initial, joinPath);
+var removePrefix = /* @__PURE__ */ __name((prefix, paths) => {
+  const explodedPrefix = splitPath(prefix);
+  return paths.map((path) => {
+    if (path === prefix) {
+      return path;
+    }
+    const explodedPath = splitPath(path);
+    const explodedSuffix = takeRight(explodedPath, explodedPath.length - explodedPrefix.length);
+    return joinPath(explodedSuffix);
+  });
+}, "removePrefix");
+var filterPathsByPrefix = /* @__PURE__ */ __name((prefix, paths) => paths.filter((path) => path === prefix || path.startsWith(`${prefix}.`) || path.startsWith(`${prefix}[`)), "filterPathsByPrefix");
 
 // components/form/utils/utils.ts
+var deepValue = /* @__PURE__ */ __name(function(obj, path) {
+  const pathArray = path.split(".");
+  for (var i = 0; i < pathArray.length; i++) {
+    obj = obj[pathArray[i]];
+  }
+  return obj;
+}, "deepValue");
+var flatten = /* @__PURE__ */ __name(function(data) {
+  var result = {};
+  function recurse(cur, prop) {
+    if (Object.prototype.toString.call(cur) !== "[object Object]") {
+      result[prop] = cur;
+    } else if (Array.isArray(cur)) {
+      for (var i = 0, l = cur.length; i < l; i++)
+        recurse(cur[i], prop + "[" + i + "]");
+      if (l == 0)
+        result[prop] = [];
+    } else {
+      var isEmpty2 = true;
+      for (var p in cur) {
+        isEmpty2 = false;
+        recurse(cur[p], prop ? prop + "." + p : p);
+      }
+      if (isEmpty2 && prop)
+        result[prop] = {};
+    }
+  }
+  __name(recurse, "recurse");
+  recurse(data, "");
+  return result;
+}, "flatten");
 var isEmptyValue = /* @__PURE__ */ __name((value) => typeof value === "undefined" || value === null || value === "" || Array.isArray(value) && value.length === 0, "isEmptyValue");
+var mergeValue = /* @__PURE__ */ __name(({ currentValue, documentValue, deletedValues: deletedFields, path, locale, datatype }) => {
+  if (locale) {
+    return currentValue || documentValue || "";
+  }
+  const deletedValues = getNestedDeletedValues(path, deletedFields);
+  const hasDeletedValues = !!size(deletedValues);
+  if ((Array.isArray(currentValue) || hasDeletedValues) && find(datatype, [
+    "type",
+    Array
+  ])) {
+    return merge([], documentValue, currentValue, deletedValues);
+  } else if ((isPlainObject(currentValue) || hasDeletedValues) && find(datatype, [
+    "type",
+    Object
+  ])) {
+    return merge({}, documentValue, currentValue, deletedValues);
+  }
+  return void 0;
+}, "mergeValue");
+var getDeletedValues = /* @__PURE__ */ __name((deletedFields, accumulator = {}) => deletedFields.reduce((deletedValues, path) => set(deletedValues, path, null), accumulator), "getDeletedValues");
+var getNestedDeletedValues = /* @__PURE__ */ __name((prefix, deletedFields, accumulator = {}) => getDeletedValues(removePrefix(prefix, filterPathsByPrefix(prefix, deletedFields)), accumulator), "getNestedDeletedValues");
 var getFieldType = /* @__PURE__ */ __name((fieldSchema) => fieldSchema.type, "getFieldType");
+var getNullValue = /* @__PURE__ */ __name((datatype) => {
+  const fieldType = getFieldType(datatype);
+  if (fieldType === Array) {
+    return [];
+  } else if (fieldType === Boolean) {
+    return false;
+  } else if (fieldType === String) {
+    return "";
+  } else if (fieldType === Number) {
+    return "";
+  } else {
+    return null;
+  }
+}, "getNullValue");
 
 // components/form/utils/schema_utils.ts
+var getValidFields = /* @__PURE__ */ __name((schema) => {
+  return Object.keys(schema).filter((fieldName) => !fieldName.includes("$") && !fieldName.includes("."));
+}, "getValidFields");
 var getInsertableFields = /* @__PURE__ */ __name(function(schema, user) {
   const fields = Object.keys(schema).filter(function(fieldName) {
     var field = schema[fieldName];
@@ -662,7 +780,7 @@ var isNestedSchema = /* @__PURE__ */ __name((schema) => {
   return typeof schema === "object";
 }, "isNestedSchema");
 var convertSchema = /* @__PURE__ */ __name((schema, options = {}) => {
-  const { flatten = false, removeArrays = true } = options;
+  const { flatten: flatten2 = false, removeArrays = true } = options;
   let jsonSchema = {};
   Object.keys(schema).forEach((fieldName) => {
     if (removeArrays && fieldName.includes("$")) {
@@ -674,7 +792,7 @@ var convertSchema = /* @__PURE__ */ __name((schema, options = {}) => {
       jsonSchema[fieldName].arrayFieldSchema = getFieldSchema(`${fieldName}.$`, schema);
       if (isNestedSchema(subSchemaOrType)) {
         const convertedSubSchema = convertSchema(subSchemaOrType, options);
-        if (flatten) {
+        if (flatten2) {
           jsonSchema = __spreadValues(__spreadValues({}, jsonSchema), convertedSubSchema);
         } else {
           jsonSchema[fieldName].schema = convertedSubSchema;
@@ -1152,12 +1270,10 @@ var useWarnOnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges }
   });
 }, "useWarnOnUnsaved");
 
-// components/VulcanComponents/index.ts
-init_esm_shims();
-
-// components/VulcanComponents/Provider.tsx
+// components/VulcanComponents/Consumer.tsx
 init_esm_shims();
-import React5 from "react";
+import { deprecate } from "@vulcanjs/utils";
+import React4, { useContext as useContext2 } from "react";
 
 // components/VulcanComponents/Context.ts
 init_esm_shims();
@@ -1184,9 +1300,6 @@ var VulcanComponentsContext = React3.createContext(new Proxy({
 VulcanComponentsContext.displayName = "VulcanComponentsContext";
 
 // components/VulcanComponents/Consumer.tsx
-init_esm_shims();
-import { deprecate } from "@vulcanjs/utils";
-import React4, { useContext as useContext2 } from "react";
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1215,8 +1328,7 @@ var withVulcanComponents = /* @__PURE__ */ __name((C) => (props) => {
   }, props));
 }, "withVulcanComponents");
 
-// components/VulcanComponents/Provider.tsx
-import { debugVulcan } from "@vulcanjs/utils";
+// components/form/core/Form/Form.tsx
 function _extends2() {
   _extends2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1232,161 +1344,530 @@ function _extends2() {
   return _extends2.apply(this, arguments);
 }
 __name(_extends2, "_extends");
-var debugComponents = debugVulcan("components");
-var VulcanComponentsProvider = /* @__PURE__ */ __name((_a) => {
-  var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
-  const currentComponents = useVulcanComponents();
-  debugComponents("Current components __not_initialized?", currentComponents.__not_initialized);
-  const mergedComponents = __spreadValues(__spreadValues({}, (currentComponents == null ? void 0 : currentComponents.__not_initialized) ? {} : currentComponents || {}), value || {});
-  debugComponents("Merged components", mergedComponents);
-  Object.keys(mergedComponents).forEach((componentName) => {
-    if (mergedComponents[componentName]) {
-      mergedComponents[componentName].displayName = "Vulcan." + componentName;
-    } else {
-      console.warn(`Encountered an undefined component: ${componentName}.
-      The component may not be registered, or import failed.
-      For instance due to an infinite import loop when importing
-      "useVulcanComponents" from index instead of Consumer.`);
+var compactParent = /* @__PURE__ */ __name((object, path) => {
+  const parentPath = getParentPath(path);
+  const compactIfArray = /* @__PURE__ */ __name((x) => Array.isArray(x) ? compact2(x) : x, "compactIfArray");
+  update(object, parentPath, compactIfArray);
+}, "compactParent");
+var getDefaultValues = /* @__PURE__ */ __name((convertedSchema) => {
+  return pickBy(mapValues(convertedSchema, (field) => field.defaultValue), (value) => value);
+}, "getDefaultValues");
+var compactObject = /* @__PURE__ */ __name((o) => omitBy(o, (f) => f === null || f === void 0), "compactObject");
+var getInitialStateFromProps = /* @__PURE__ */ __name((nextProps) => {
+  const schema = nextProps.schema || nextProps.model.schema;
+  const convertedSchema = convertSchema(schema);
+  const formType = nextProps.document ? "edit" : "new";
+  const defaultValues = formType === "new" ? getDefaultValues(convertedSchema) : {};
+  const initialDocument = merge2({}, defaultValues, nextProps.prefilledProps, compactObject(nextProps.document));
+  Object.keys(convertedSchema).forEach((key) => {
+    let minCount = convertedSchema[key].minCount;
+    if (minCount) {
+      initialDocument[key] = initialDocument[key] || [];
+      while (initialDocument[key].length < minCount)
+        initialDocument[key].push({});
     }
   });
-  return /* @__PURE__ */ React5.createElement(VulcanComponentsContext.Provider, _extends2({
-    value: mergedComponents
-  }, props));
-}, "VulcanComponentsProvider");
-
-// components/VulcanComponents/typings.ts
-init_esm_shims();
-import React6 from "react";
-
-// components/VulcanComponents/defaultVulcanComponents/index.ts
-init_esm_shims();
-
-// components/core/LoadingButton.tsx
-init_esm_shims();
-import React7 from "react";
-function _extends3() {
-  _extends3 = 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;
+  removeProperty(initialDocument, "__typename");
+  return {
+    disabled: nextProps.disabled,
+    errors: [],
+    deletedValues: [],
+    currentValues: {},
+    originalSchema: convertSchema(schema, {
+      removeArrays: false
+    }),
+    schema: convertedSchema,
+    flatSchema: convertSchema(schema, {
+      flatten: true
+    }),
+    initialDocument,
+    currentDocument: initialDocument
   };
-  return _extends3.apply(this, arguments);
-}
-__name(_extends3, "_extends");
-var LoadingButton = /* @__PURE__ */ __name((_a) => {
-  var _b = _a, { loading, label, onClick, children, className = "" } = _b, rest = __objRest(_b, ["loading", "label", "onClick", "children", "className"]);
-  const Components2 = useVulcanComponents();
-  const wrapperStyle = {
-    position: "relative"
+}, "getInitialStateFromProps");
+var getChildrenProps = /* @__PURE__ */ __name((props, state, options, callbacks) => {
+  const { currentUser, repeatErrors, submitLabel, cancelLabel, revertLabel, cancelCallback, revertCallback, id, model, prefilledProps, itemProperties, contextName, showRemove, showDelete } = props;
+  const { disabled, currentDocument } = state;
+  const { formType } = options;
+  const { deleteDocument } = callbacks;
+  const commonProps = {
+    document: currentDocument,
+    formType,
+    currentUser,
+    disabled,
+    prefilledProps,
+    itemProperties,
+    contextName
   };
-  const labelStyle = loading ? {
-    opacity: 0.5
-  } : {};
-  const loadingStyle = loading ? {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  } : {
-    display: "none"
+  const docClassName = `document-${formType}`;
+  const modelName = model.name.toLowerCase();
+  const formProps = {
+    className: `${docClassName} ${docClassName}-${modelName}`,
+    id
+  };
+  const formGroupProps = /* @__PURE__ */ __name((group) => __spreadValues(__spreadProps(__spreadValues({
+    key: group.name
+  }, group), {
+    group: omit(group, [
+      "fields"
+    ])
+  }), commonProps), "formGroupProps");
+  const formSubmitProps = {
+    model,
+    currentUser,
+    submitLabel,
+    cancelLabel,
+    revertLabel,
+    cancelCallback,
+    revertCallback,
+    document: currentDocument,
+    deleteDocument: formType === "edit" && showRemove && showDelete && deleteDocument || null
+  };
+  const formLayoutProps = {
+    formProps,
+    repeatErrors,
+    submitProps: formSubmitProps,
+    commonProps
   };
-  return /* @__PURE__ */ React7.createElement(Components2.Button, _extends3({
-    className: `loading-button ${loading ? "loading-button-loading" : "loading-button-notloading"} ${className}`,
-    onClick
-  }, rest), /* @__PURE__ */ React7.createElement("span", {
-    style: wrapperStyle
-  }, /* @__PURE__ */ React7.createElement("span", {
-    style: labelStyle
-  }, label || children), /* @__PURE__ */ React7.createElement("span", {
-    style: loadingStyle
-  }, /* @__PURE__ */ React7.createElement(Components2.Loading, null))));
-}, "LoadingButton");
-
-// components/core/MutationButton.tsx
-init_esm_shims();
-import React8, { useState } from "react";
-import { useMutation } from "@apollo/client";
-
-// ../../node_modules/graphql-tag/lib/index.js
-init_esm_shims();
-
-// ../../node_modules/tslib/modules/index.js
-init_esm_shims();
-var import_tslib = __toESM(require_tslib(), 1);
-var { __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __createBinding, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn } = import_tslib.default;
-
-// ../../node_modules/graphql/index.mjs
-init_esm_shims();
-
-// ../../node_modules/graphql/language/parser.mjs
-init_esm_shims();
-
-// ../../node_modules/graphql/error/syntaxError.mjs
-init_esm_shims();
-
-// ../../node_modules/graphql/error/GraphQLError.mjs
-init_esm_shims();
-
-// ../../node_modules/graphql/jsutils/isObjectLike.mjs
-init_esm_shims();
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = /* @__PURE__ */ __name(function _typeof5(obj2) {
-      return typeof obj2;
-    }, "_typeof");
-  } else {
-    _typeof = /* @__PURE__ */ __name(function _typeof5(obj2) {
-      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
-    }, "_typeof");
-  }
-  return _typeof(obj);
-}
-__name(_typeof, "_typeof");
-function isObjectLike(value) {
-  return _typeof(value) == "object" && value !== null;
-}
-__name(isObjectLike, "isObjectLike");
-
-// ../../node_modules/graphql/polyfills/symbols.mjs
-init_esm_shims();
-var SYMBOL_ITERATOR = typeof Symbol === "function" && Symbol.iterator != null ? Symbol.iterator : "@@iterator";
-var SYMBOL_ASYNC_ITERATOR = typeof Symbol === "function" && Symbol.asyncIterator != null ? Symbol.asyncIterator : "@@asyncIterator";
-var SYMBOL_TO_STRING_TAG = typeof Symbol === "function" && Symbol.toStringTag != null ? Symbol.toStringTag : "@@toStringTag";
-
-// ../../node_modules/graphql/language/location.mjs
-init_esm_shims();
-function getLocation(source, position) {
-  var lineRegexp = /\r\n|[\n\r]/g;
-  var line = 1;
-  var column = position + 1;
-  var match;
-  while ((match = lineRegexp.exec(source.body)) && match.index < position) {
-    line += 1;
-    column = position + 1 - (match.index + match[0].length);
-  }
   return {
-    line,
-    column
+    commonProps,
+    formSubmitProps,
+    formGroupProps,
+    formLayoutProps
   };
-}
-__name(getLocation, "getLocation");
-
-// ../../node_modules/graphql/language/printLocation.mjs
-init_esm_shims();
-function printLocation(location) {
-  return printSourceLocation(location.source, getLocation(location.source, location.start));
-}
+}, "getChildrenProps");
+var FormWarnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges, children }) => {
+  useWarnOnUnsaved({
+    isChanged,
+    warnUnsavedChanges
+  });
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, children);
+}, "FormWarnUnsaved");
+var getData = /* @__PURE__ */ __name((customArgs, props, state, { submitFormCallbacks, form }) => {
+  const { currentDocument } = state;
+  const { model, prefilledProps } = props;
+  let data = prefilledProps || {};
+  data = omitBy(data, (value, key) => key.endsWith(".$"));
+  const args = __spreadValues({
+    schema: model.schema,
+    excludeRemovedFields: false,
+    excludeHiddenFields: false,
+    replaceIntlFields: true,
+    addExtraFields: false
+  }, customArgs);
+  const fields = getFieldNames(props, currentDocument, args);
+  data = __spreadValues(__spreadValues({}, data), pick2(currentDocument, ...fields));
+  state.deletedValues.forEach((path) => {
+    if (path.includes(".")) {
+      compactParent(data, path);
+    }
+  });
+  data = runCallbacks({
+    callbacks: submitFormCallbacks,
+    iterator: data,
+    args: [
+      {}
+    ]
+  });
+  return data;
+}, "getData");
+var Form = /* @__PURE__ */ __name((props) => {
+  const { initCallback, createDocument, updateDocument, deleteDocument } = props;
+  const initialState = getInitialStateFromProps(props);
+  const { schema, originalSchema, flatSchema, initialDocument } = initialState;
+  const isFirstRender = useRef2(true);
+  useEffect2(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (initCallback)
+      initCallback(initialState.currentDocument);
+  }, [
+    initCallback
+  ]);
+  const defaultProps = {
+    layout: "horizontal",
+    prefilledProps: {},
+    repeatErrors: false,
+    showRemove: true,
+    showDelete: true
+  };
+  const allProps = __spreadValues(__spreadValues({}, defaultProps), props);
+  const defaultValues = {};
+  const submitFormCallbacks = [];
+  const successFormCallbacks = [];
+  const failureFormCallbacks = [];
+  const intl = useIntlContext2();
+  const [errors, setErrors] = useState([]);
+  const throwError = /* @__PURE__ */ __name((error) => {
+    let formErrors = getErrors(error);
+    console.log(formErrors);
+    setErrors((prevErrors) => [
+      ...prevErrors,
+      ...formErrors
+    ]);
+  }, "throwError");
+  const clearFieldErrors = /* @__PURE__ */ __name((path) => {
+    setErrors((prevErrors) => prevErrors.filter((error) => error.path !== path));
+  }, "clearFieldErrors");
+  const [deletedValues, setDeletedValues] = useState([]);
+  const addToDeletedValues = /* @__PURE__ */ __name((name) => {
+    setDeletedValues((prevDeletedValues) => [
+      ...prevDeletedValues,
+      name
+    ]);
+  }, "addToDeletedValues");
+  const [callbacks, setCallbacks] = useState({
+    submitFormCallbacks: [],
+    successFormCallbacks: [],
+    failureFormCallbacks: []
+  });
+  const addToSubmitForm = /* @__PURE__ */ __name((callback) => {
+    setCallbacks((cbs) => __spreadValues({}, cbs));
+  }, "addToSubmitForm");
+  const addToSuccessForm = /* @__PURE__ */ __name((callback) => {
+    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
+      successFormCallbacks: [
+        ...cbs.successFormCallbacks,
+        callback
+      ]
+    }));
+  }, "addToSuccessForm");
+  const addToFailureForm = /* @__PURE__ */ __name((callback) => {
+    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
+      failureFormCallbacks: [
+        ...cbs.failureFormCallbacks,
+        callback
+      ]
+    }));
+  }, "addToFailureForm");
+  const clearFormCallbacks = /* @__PURE__ */ __name(() => {
+    setCallbacks({
+      submitFormCallbacks: [],
+      successFormCallbacks: [],
+      failureFormCallbacks: []
+    });
+  }, "clearFormCallbacks");
+  const [currentValues, setCurrentValues] = useState({});
+  const submitFormContext = /* @__PURE__ */ __name((formType) => (event) => {
+    submitForm(formType)(event);
+  }, "submitFormContext");
+  const [currentDocument, setCurrentDocument] = useState(initialDocument);
+  const updateCurrentValues = /* @__PURE__ */ __name((newValues, options = {}) => {
+    const { mode = "overwrite" } = options;
+    const { changeCallback } = props;
+    const newState = {
+      currentValues: cloneDeep(currentValues),
+      currentDocument: cloneDeep(currentDocument),
+      deletedValues: cloneDeep(deletedValues)
+    };
+    Object.keys(newValues).forEach((key) => {
+      const path = key;
+      let value = newValues[key];
+      if (isEmptyValue(value)) {
+        unset(newState.currentValues, path);
+        set2(newState.currentDocument, path, null);
+        newState.deletedValues = [
+          ...newState.deletedValues,
+          path
+        ];
+      } else {
+        set2(newState.currentValues, path, value);
+        if (mode === "merge" && (Array.isArray(value) || isObject(value))) {
+          const oldValue = get2(newState.currentDocument, path);
+          set2(newState.currentDocument, path, merge2(oldValue, value));
+        } else {
+          set2(newState.currentDocument, path, value);
+        }
+        newState.deletedValues = without(newState.deletedValues, path);
+      }
+    });
+    if (changeCallback)
+      changeCallback(newState.currentDocument);
+    setCurrentValues(newState.currentValues);
+    setCurrentDocument(newState.currentDocument);
+    setDeletedValues(newState.deletedValues);
+  }, "updateCurrentValues");
+  const refetchForm = /* @__PURE__ */ __name(() => {
+    if (props.refetch) {
+      props.refetch();
+    }
+  }, "refetchForm");
+  const [disabled, setDisabled] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const clearForm = /* @__PURE__ */ __name((options = {}) => {
+    const { document: optionsDocument } = options;
+    const document = optionsDocument ? merge2({}, props.prefilledProps, optionsDocument) : null;
+    setErrors([]);
+    setCurrentValues({});
+    setDeletedValues([]);
+    setCurrentDocument(document || initialDocument);
+    setDisabled(false);
+  }, "clearForm");
+  const newMutationSuccessCallback = /* @__PURE__ */ __name(function(result) {
+    mutationSuccessCallback(result, "new");
+  }, "newMutationSuccessCallback");
+  const editMutationSuccessCallback = /* @__PURE__ */ __name(function(result) {
+    mutationSuccessCallback(result, "edit");
+  }, "editMutationSuccessCallback");
+  const formRef = useRef2(null);
+  const mutationSuccessCallback = /* @__PURE__ */ __name(function(result, mutationType) {
+    setDisabled(false);
+    setSuccess(true);
+    if (mutationType === "new")
+      refetchForm();
+    let { document } = result;
+    if (formRef.current) {
+      clearForm({
+        document: mutationType === "edit" ? document : void 0
+      });
+    }
+    document = runCallbacks({
+      callbacks: successFormCallbacks,
+      iterator: document,
+      args: [
+        {
+          form: formRef.current
+        }
+      ]
+    });
+    if (props.successCallback)
+      props.successCallback(document, {
+        form: this
+      });
+  }, "mutationSuccessCallback");
+  const mutationErrorCallback = /* @__PURE__ */ __name((document, error) => {
+    setDisabled(false);
+    console.error("// graphQL Error");
+    console.error(error);
+    runCallbacks({
+      callbacks: failureFormCallbacks,
+      iterator: error,
+      args: [
+        {
+          error,
+          form: formRef.current
+        }
+      ]
+    });
+    if (!isEmpty(error)) {
+      throwError(error);
+    }
+    if (props.errorCallback)
+      props.errorCallback(document, error, {
+        form: void 0
+      });
+  }, "mutationErrorCallback");
+  const submitForm = /* @__PURE__ */ __name((formType) => async (event) => {
+    var _a, _b;
+    event && event.preventDefault();
+    event && event.stopPropagation();
+    const { contextName } = props;
+    if (disabled) {
+      return;
+    }
+    setErrors([]);
+    setDisabled(true);
+    let data = getData({
+      replaceIntlFields: true,
+      addExtraFields: false,
+      mutableFields
+    }, props, {
+      currentDocument,
+      deletedValues
+    }, {
+      form: formRef.current,
+      submitFormCallbacks
+    });
+    if (props.submitCallback) {
+      data = props.submitCallback(data) || data;
+    }
+    if (formType === "new") {
+      try {
+        const result = await createDocument({
+          input: {
+            data,
+            contextName
+          }
+        });
+        if ((_a = result.errors) == null ? void 0 : _a.length) {
+          mutationErrorCallback(document1, result.errors[0]);
+        } else {
+          newMutationSuccessCallback(result);
+        }
+      } catch (error) {
+        mutationErrorCallback(document1, error);
+      }
+    } else {
+      try {
+        const documentId = currentDocument._id;
+        const result = await updateDocument({
+          input: {
+            id: documentId,
+            data,
+            contextName
+          }
+        });
+        if ((_b = result.errors) == null ? void 0 : _b.length) {
+          mutationErrorCallback(document1, result.errors[0]);
+        } else {
+          editMutationSuccessCallback(result);
+        }
+      } catch (error) {
+        mutationErrorCallback(document1, error);
+      }
+    }
+  }, "submitForm");
+  const deleteDocumentWithConfirm = /* @__PURE__ */ __name(() => {
+    const document = currentDocument;
+    const documentId = props.document._id;
+    const documentTitle = document.title || document.name || "";
+    const deleteDocumentConfirm = intl.formatMessage({
+      id: "forms.delete_confirm"
+    }, {
+      title: documentTitle
+    });
+    if (window.confirm(deleteDocumentConfirm)) {
+      deleteDocument({
+        input: {
+          id: documentId
+        }
+      }).then((mutationResult) => {
+        if (props.removeSuccessCallback)
+          props.removeSuccessCallback({
+            documentId,
+            documentTitle
+          });
+        refetchForm();
+      }).catch((error) => {
+        console.log(error);
+      });
+    }
+  }, "deleteDocumentWithConfirm");
+  const { successComponent, document: document1, currentUser, model, warnUnsavedChanges } = props;
+  const FormComponents = useVulcanComponents();
+  const formType1 = document1 ? "edit" : "new";
+  const mutableFields = formType1 === "edit" ? getEditableFields(schema, currentUser, initialDocument) : getInsertableFields(schema, currentUser);
+  const { formLayoutProps, formGroupProps } = getChildrenProps(props, {
+    disabled,
+    currentDocument
+  }, {
+    formType: formType1
+  }, {
+    deleteDocument: deleteDocumentWithConfirm
+  });
+  const isChanged = isNotSameDocument(initialDocument, currentDocument);
+  return success && successComponent ? successComponent : /* @__PURE__ */ React5.createElement(FormWarnUnsaved, {
+    isChanged,
+    warnUnsavedChanges
+  }, /* @__PURE__ */ React5.createElement(FormContext.Provider, {
+    value: {
+      throwError,
+      clearForm,
+      refetchForm,
+      isChanged,
+      submitForm: submitFormContext(formType1),
+      addToDeletedValues,
+      updateCurrentValues,
+      getDocument: () => currentDocument,
+      getLabel: (fieldName, fieldLocale) => getLabel(model, flatSchema, intl, fieldName, fieldLocale),
+      initialDocument,
+      addToSubmitForm,
+      addToSuccessForm,
+      addToFailureForm,
+      clearFormCallbacks,
+      errors,
+      currentValues,
+      deletedValues,
+      clearFieldErrors
+    }
+  }, /* @__PURE__ */ React5.createElement(FormComponents.FormLayout, _extends2({}, formLayoutProps), getFieldGroups(props, {
+    currentDocument,
+    schema,
+    flatSchema,
+    originalSchema
+  }, intl, mutableFields, intl.formatMessage).map((group, i) => /* @__PURE__ */ React5.createElement(FormComponents.FormGroup, _extends2({
+    key: i
+  }, formGroupProps(group)))))));
+}, "Form");
+
+// components/form/core/Form/typings.ts
+init_esm_shims();
+
+// components/form/core/FormContainer.tsx
+init_esm_shims();
+import React8 from "react";
+
+// ../../node_modules/graphql-tag/lib/index.js
+init_esm_shims();
+
+// ../../node_modules/tslib/modules/index.js
+init_esm_shims();
+var import_tslib = __toESM(require_tslib(), 1);
+var { __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __createBinding, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn } = import_tslib.default;
+
+// ../../node_modules/graphql/index.mjs
+init_esm_shims();
+
+// ../../node_modules/graphql/language/parser.mjs
+init_esm_shims();
+
+// ../../node_modules/graphql/error/syntaxError.mjs
+init_esm_shims();
+
+// ../../node_modules/graphql/error/GraphQLError.mjs
+init_esm_shims();
+
+// ../../node_modules/graphql/jsutils/isObjectLike.mjs
+init_esm_shims();
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = /* @__PURE__ */ __name(function _typeof5(obj2) {
+      return typeof obj2;
+    }, "_typeof");
+  } else {
+    _typeof = /* @__PURE__ */ __name(function _typeof5(obj2) {
+      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+    }, "_typeof");
+  }
+  return _typeof(obj);
+}
+__name(_typeof, "_typeof");
+function isObjectLike(value) {
+  return _typeof(value) == "object" && value !== null;
+}
+__name(isObjectLike, "isObjectLike");
+
+// ../../node_modules/graphql/polyfills/symbols.mjs
+init_esm_shims();
+var SYMBOL_ITERATOR = typeof Symbol === "function" && Symbol.iterator != null ? Symbol.iterator : "@@iterator";
+var SYMBOL_ASYNC_ITERATOR = typeof Symbol === "function" && Symbol.asyncIterator != null ? Symbol.asyncIterator : "@@asyncIterator";
+var SYMBOL_TO_STRING_TAG = typeof Symbol === "function" && Symbol.toStringTag != null ? Symbol.toStringTag : "@@toStringTag";
+
+// ../../node_modules/graphql/language/location.mjs
+init_esm_shims();
+function getLocation(source, position) {
+  var lineRegexp = /\r\n|[\n\r]/g;
+  var line = 1;
+  var column = position + 1;
+  var match;
+  while ((match = lineRegexp.exec(source.body)) && match.index < position) {
+    line += 1;
+    column = position + 1 - (match.index + match[0].length);
+  }
+  return {
+    line,
+    column
+  };
+}
+__name(getLocation, "getLocation");
+
+// ../../node_modules/graphql/language/printLocation.mjs
+init_esm_shims();
+function printLocation(location) {
+  return printSourceLocation(location.source, getLocation(location.source, location.start));
+}
 __name(printLocation, "printLocation");
 function printSourceLocation(source, sourceLocation) {
   var firstLineColumnOffset = source.locationOffset.column - 1;
@@ -3561,145 +4042,67 @@ __name(parseDocument, "parseDocument");
 function gql(literals) {
   var args = [];
   for (var _i = 1; _i < arguments.length; _i++) {
-    args[_i - 1] = arguments[_i];
-  }
-  if (typeof literals === "string") {
-    literals = [
-      literals
-    ];
-  }
-  var result = literals[0];
-  args.forEach(function(arg, i) {
-    if (arg && arg.kind === "Document") {
-      result += arg.loc.source.body;
-    } else {
-      result += arg;
-    }
-    result += literals[i + 1];
-  });
-  return parseDocument(result);
-}
-__name(gql, "gql");
-function resetCaches() {
-  docCache.clear();
-  fragmentSourceMap.clear();
-}
-__name(resetCaches, "resetCaches");
-function disableFragmentWarnings() {
-  printFragmentWarnings = false;
-}
-__name(disableFragmentWarnings, "disableFragmentWarnings");
-function enableExperimentalFragmentVariables() {
-  experimentalFragmentVariables = true;
-}
-__name(enableExperimentalFragmentVariables, "enableExperimentalFragmentVariables");
-function disableExperimentalFragmentVariables() {
-  experimentalFragmentVariables = false;
-}
-__name(disableExperimentalFragmentVariables, "disableExperimentalFragmentVariables");
-var extras = {
-  gql,
-  resetCaches,
-  disableFragmentWarnings,
-  enableExperimentalFragmentVariables,
-  disableExperimentalFragmentVariables
-};
-(function(gql_1) {
-  gql_1.gql = extras.gql, gql_1.resetCaches = extras.resetCaches, gql_1.disableFragmentWarnings = extras.disableFragmentWarnings, gql_1.enableExperimentalFragmentVariables = extras.enableExperimentalFragmentVariables, gql_1.disableExperimentalFragmentVariables = extras.disableExperimentalFragmentVariables;
-})(gql || (gql = {}));
-gql["default"] = gql;
-var lib_default = gql;
-
-// components/core/MutationButton.tsx
-function _extends4() {
-  _extends4 = 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 _extends4.apply(this, arguments);
-}
-__name(_extends4, "_extends");
-var MutationButton = /* @__PURE__ */ __name((props) => {
-  const Components2 = useVulcanComponents();
-  const [loading, setLoading] = useState(false);
-  const [error1, setError] = useState();
-  const {
-    mutation,
-    loadingButtonProps = {},
-    label
-  } = props;
-  let { mutationArguments } = props;
-  const mutationAsNode = typeof mutation === "string" ? lib_default`
-          ${mutation}
-        ` : mutation;
-  const [mutationFunc] = useMutation(mutationAsNode);
-  const handleClick = /* @__PURE__ */ __name(async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(void 0);
-    const {
-      submitCallback,
-      successCallback,
-      errorCallback
-    } = props;
-    try {
-      if (submitCallback) {
-        const callbackReturn = await submitCallback(mutationArguments);
-        if (callbackReturn && callbackReturn.mutationArguments) {
-          mutationArguments = callbackReturn.mutationArguments;
-        }
-      }
-      const result = await mutationFunc({
-        variables: mutationArguments
-      });
-      if (successCallback) {
-        await successCallback(result);
-      }
-    } catch (error) {
-      setError(error);
-      if (errorCallback) {
-        await errorCallback(error);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }, "handleClick");
-  const loadingButton = /* @__PURE__ */ React8.createElement(Components2.LoadingButton, _extends4({
-    loading,
-    onClick: handleClick,
-    label
-  }, loadingButtonProps));
-  if (error1) {
-    return /* @__PURE__ */ React8.createElement(Components2.TooltipTrigger, {
-      trigger: loadingButton,
-      defaultShow: true
-    }, error1.message.replace("GraphQL error: ", ""));
+    args[_i - 1] = arguments[_i];
   }
-  return loadingButton;
-}, "MutationButton");
-
-// components/form/core/index.ts
-init_esm_shims();
-
-// components/form/core/FormContainer.tsx
-init_esm_shims();
-import React11 from "react";
+  if (typeof literals === "string") {
+    literals = [
+      literals
+    ];
+  }
+  var result = literals[0];
+  args.forEach(function(arg, i) {
+    if (arg && arg.kind === "Document") {
+      result += arg.loc.source.body;
+    } else {
+      result += arg;
+    }
+    result += literals[i + 1];
+  });
+  return parseDocument(result);
+}
+__name(gql, "gql");
+function resetCaches() {
+  docCache.clear();
+  fragmentSourceMap.clear();
+}
+__name(resetCaches, "resetCaches");
+function disableFragmentWarnings() {
+  printFragmentWarnings = false;
+}
+__name(disableFragmentWarnings, "disableFragmentWarnings");
+function enableExperimentalFragmentVariables() {
+  experimentalFragmentVariables = true;
+}
+__name(enableExperimentalFragmentVariables, "enableExperimentalFragmentVariables");
+function disableExperimentalFragmentVariables() {
+  experimentalFragmentVariables = false;
+}
+__name(disableExperimentalFragmentVariables, "disableExperimentalFragmentVariables");
+var extras = {
+  gql,
+  resetCaches,
+  disableFragmentWarnings,
+  enableExperimentalFragmentVariables,
+  disableExperimentalFragmentVariables
+};
+(function(gql_1) {
+  gql_1.gql = extras.gql, gql_1.resetCaches = extras.resetCaches, gql_1.disableFragmentWarnings = extras.disableFragmentWarnings, gql_1.enableExperimentalFragmentVariables = extras.enableExperimentalFragmentVariables, gql_1.disableExperimentalFragmentVariables = extras.disableExperimentalFragmentVariables;
+})(gql || (gql = {}));
+gql["default"] = gql;
+var lib_default = gql;
 
 // components/form/utils/formFragments.ts
+var formFragments_exports = {};
+__export(formFragments_exports, {
+  default: () => formFragments_default
+});
 init_esm_shims();
 import _uniq from "lodash/uniq.js";
 import _intersection from "lodash/intersection.js";
 import { getCreateableFields, getUpdateableFields, getFragmentFieldNames } from "@vulcanjs/schema";
 import { getFieldFragment } from "@vulcanjs/graphql";
 import { capitalize as capitalize2 } from "@vulcanjs/utils";
-import compact2 from "lodash/compact.js";
+import compact3 from "lodash/compact.js";
 var intlSuffix = "_intl";
 var getFragmentName = /* @__PURE__ */ __name((formType, multiTypeName, fragmentType) => [
   multiTypeName,
@@ -3815,7 +4218,7 @@ var getFormFragments = /* @__PURE__ */ __name(({ formType = "new", model, fields
     throw new Error(`Model ${model.name} with fields ${mutationFieldNames} yield an empty mutation fragment.`);
   }
   const generatedMutationFragment = lib_default(mutationFragmentText);
-  const extraQueries = compact2(getQueryFieldNames({
+  const extraQueries = compact3(getQueryFieldNames({
     schema,
     options: {
       formType
@@ -3838,7 +4241,7 @@ var formFragments_default = getFormFragments;
 import { getFragmentName as getFragmentName2 } from "@vulcanjs/graphql";
 import { capitalize as capitalize3 } from "@vulcanjs/utils";
 import { useSingle, useCreate, useUpdate, useDelete } from "@vulcanjs/react-hooks";
-import { debugVulcan as debugVulcan2 } from "@vulcanjs/utils";
+import { debugVulcan } from "@vulcanjs/utils";
 
 // components/VulcanCurrentUser/index.ts
 init_esm_shims();
@@ -3848,210 +4251,22 @@ init_esm_shims();
 import { useContext as useContext3 } from "react";
 
 // components/VulcanCurrentUser/Context.ts
-init_esm_shims();
-import React9 from "react";
-var VulcanCurrentUserContext = React9.createContext({
-  currentUser: null,
-  loading: false
-});
-
-// components/VulcanCurrentUser/Consumer.tsx
-var VulcanCurrentUserConsumer = VulcanCurrentUserContext.Consumer;
-var useVulcanCurrentUser = /* @__PURE__ */ __name(() => useContext3(VulcanCurrentUserContext), "useVulcanCurrentUser");
-
-// components/VulcanCurrentUser/Provider.tsx
-init_esm_shims();
-import React10 from "react";
-function _extends5() {
-  _extends5 = 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 _extends5.apply(this, arguments);
-}
-__name(_extends5, "_extends");
-var VulcanCurrentUserProvider = /* @__PURE__ */ __name((_a) => {
-  var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
-  return /* @__PURE__ */ React10.createElement(VulcanCurrentUserContext.Provider, _extends5({
-    value
-  }, props));
-}, "VulcanCurrentUserProvider");
-
-// components/form/core/FormContainer.tsx
-function _extends6() {
-  _extends6 = 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 _extends6.apply(this, arguments);
-}
-__name(_extends6, "_extends");
-var debugForm = debugVulcan2("form");
-var useFragments = /* @__PURE__ */ __name((props, formType) => {
-  let queryFragment;
-  let queryFragmentName;
-  let mutationFragment;
-  let mutationFragmentName;
-  if (props.queryFragment) {
-    if (typeof props.queryFragment === "string") {
-      queryFragment = lib_default`
-        ${props.queryFragment}
-      `;
-      if (!props.queryFragmentName)
-        throw new Error("When using a string queryFragment, queryFragmentName is mandatory");
-      queryFragmentName = props.queryFragmentName;
-    } else {
-      queryFragment = props.queryFragment;
-      queryFragmentName = props.queryFragmentName || getFragmentName2(props.queryFragment);
-    }
-  }
-  if (props.mutationFragment) {
-    if (typeof props.mutationFragment === "string") {
-      mutationFragment = lib_default`
-        ${props.mutationFragment}
-      `;
-      if (!props.mutationFragmentName)
-        throw new Error("When using a string mutationFragment, mutationFragmentName is mandatory");
-      queryFragmentName = props.mutationFragmentName;
-    } else {
-      mutationFragment = props.mutationFragment;
-      mutationFragmentName = props.mutationFragmentName || getFragmentName2(props.mutationFragment);
-    }
-  }
-  let autoFormFragments;
-  if (!props.queryFragment || !props.mutationFragment) {
-    const { model, fields, addFields } = props;
-    autoFormFragments = formFragments_default({
-      formType,
-      model,
-      fields,
-      addFields
-    });
-  }
-  if (!props.queryFragment) {
-    queryFragment = autoFormFragments.queryFragment;
-    queryFragmentName = autoFormFragments.queryFragmentName;
-  }
-  if (!props.mutationFragment) {
-    mutationFragment = autoFormFragments.mutationFragment;
-    mutationFragmentName = autoFormFragments.mutationFragmentName;
-  }
-  return {
-    mutationFragment,
-    mutationFragmentName,
-    queryFragment,
-    queryFragmentName
-  };
-}, "useFragments");
-var FormContainer = /* @__PURE__ */ __name((props) => {
-  const { model, documentId, slug, fields, addFields, currentUser: currentUserFromProps, loadingCurrentUser: loadingCurrentUserFromProps } = props;
-  const { schema } = model;
-  const isEdit = documentId || slug;
-  const selector = {
-    documentId,
-    slug
-  };
-  const formType = isEdit ? "edit" : "new";
-  const VulcanComponents = useVulcanComponents();
-  const prefix = `${model.name}${capitalize3(formType)}`;
-  const childProps = {
-    formType,
-    schema
-  };
-  const { mutationFragment, mutationFragmentName, queryFragment, queryFragmentName } = useFragments(props, formType);
-  const mutationOptions = {
-    model,
-    fragment: mutationFragment,
-    fragmentName: mutationFragmentName
-  };
-  const queryOptions = {
-    model,
-    fragment: queryFragment,
-    fragmentName: queryFragmentName,
-    input: {
-      id: documentId,
-      enableCache: false
-    },
-    queryOptions: {
-      fetchPolicy: "network-only",
-      pollInterval: 0,
-      skip: formType === "new"
-    }
-  };
-  const { data, document: document1, loading, refetch } = useSingle(queryOptions);
-  if (formType !== "new") {
-    debugForm("useSingle result", "data", data, "document", document1, "loading", loading);
-  }
-  const [createDocument] = useCreate(mutationOptions);
-  const [updateDocument] = useUpdate(mutationOptions);
-  const [deleteDocument] = useDelete(mutationOptions);
-  const { currentUser: currentUserFromContext, loading: loadingCurrentUserFromContext } = useVulcanCurrentUser();
-  const shouldGetCurrentUserFromProps = typeof currentUserFromProps !== "undefined";
-  const currentUser = shouldGetCurrentUserFromProps ? currentUserFromProps : currentUserFromContext;
-  const loadingCurrentUser = shouldGetCurrentUserFromProps ? loadingCurrentUserFromProps : loadingCurrentUserFromContext;
-  const createAndReturnDocument = /* @__PURE__ */ __name(async (variables) => {
-    const result = await createDocument(variables);
-    const { errors, document } = result;
-    return {
-      document,
-      errors
-    };
-  }, "createAndReturnDocument");
-  const updateAndReturnDocument = /* @__PURE__ */ __name(async (variables) => {
-    const result = await updateDocument(variables);
-    const { errors, document } = result;
-    return {
-      document,
-      errors
-    };
-  }, "updateAndReturnDocument");
-  const deleteDocumentAndRefetch = /* @__PURE__ */ __name(async (variables) => {
-    await deleteDocument(variables);
-  }, "deleteDocumentAndRefetch");
-  if (isEdit && loading) {
-    return /* @__PURE__ */ React11.createElement(VulcanComponents.Loading, null);
-  }
-  return /* @__PURE__ */ React11.createElement(VulcanComponents.Form, _extends6({
-    document: document1,
-    loading: loading || loadingCurrentUser,
-    createDocument: createAndReturnDocument,
-    updateDocument: updateAndReturnDocument,
-    deleteDocument: deleteDocumentAndRefetch,
-    refetch,
-    currentUser
-  }, childProps, props));
-}, "FormContainer");
-var SmartForm = FormContainer;
-
-// components/VulcanComponents/defaultVulcanComponents/index.ts
-var defaultFormComponents = {
-  Form,
-  SmartForm: FormContainer
-};
-var defaultDatatableComponents = {};
-var defaultCellComponents = {};
-var defaultCoreComponents = {
-  MutationButton,
-  LoadingButton
-};
+init_esm_shims();
+import React6 from "react";
+var VulcanCurrentUserContext = React6.createContext({
+  currentUser: null,
+  loading: false
+});
 
-// components/form/core/Form/Form.tsx
-function _extends7() {
-  _extends7 = Object.assign || function(target) {
+// components/VulcanCurrentUser/Consumer.tsx
+var VulcanCurrentUserConsumer = VulcanCurrentUserContext.Consumer;
+var useVulcanCurrentUser = /* @__PURE__ */ __name(() => useContext3(VulcanCurrentUserContext), "useVulcanCurrentUser");
+
+// components/VulcanCurrentUser/Provider.tsx
+init_esm_shims();
+import React7 from "react";
+function _extends3() {
+  _extends3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4062,459 +4277,412 @@ function _extends7() {
     }
     return target;
   };
-  return _extends7.apply(this, arguments);
+  return _extends3.apply(this, arguments);
 }
-__name(_extends7, "_extends");
-var compactParent = /* @__PURE__ */ __name((object, path) => {
-  const parentPath = getParentPath(path);
-  const compactIfArray = /* @__PURE__ */ __name((x) => Array.isArray(x) ? compact3(x) : x, "compactIfArray");
-  update(object, parentPath, compactIfArray);
-}, "compactParent");
-var getDefaultValues = /* @__PURE__ */ __name((convertedSchema) => {
-  return pickBy(mapValues(convertedSchema, (field) => field.defaultValue), (value) => value);
-}, "getDefaultValues");
-var compactObject = /* @__PURE__ */ __name((o) => omitBy(o, (f) => f === null || f === void 0), "compactObject");
-var getInitialStateFromProps = /* @__PURE__ */ __name((nextProps) => {
-  const schema = nextProps.schema || nextProps.model.schema;
-  const convertedSchema = convertSchema(schema);
-  const formType = nextProps.document ? "edit" : "new";
-  const defaultValues = formType === "new" ? getDefaultValues(convertedSchema) : {};
-  const initialDocument = merge2({}, defaultValues, nextProps.prefilledProps, compactObject(nextProps.document));
-  Object.keys(convertedSchema).forEach((key) => {
-    let minCount = convertedSchema[key].minCount;
-    if (minCount) {
-      initialDocument[key] = initialDocument[key] || [];
-      while (initialDocument[key].length < minCount)
-        initialDocument[key].push({});
-    }
-  });
-  removeProperty(initialDocument, "__typename");
-  return {
-    disabled: nextProps.disabled,
-    errors: [],
-    deletedValues: [],
-    currentValues: {},
-    originalSchema: convertSchema(schema, {
-      removeArrays: false
-    }),
-    schema: convertedSchema,
-    flatSchema: convertSchema(schema, {
-      flatten: true
-    }),
-    initialDocument,
-    currentDocument: initialDocument
-  };
-}, "getInitialStateFromProps");
-var getChildrenProps = /* @__PURE__ */ __name((props, state, options, callbacks) => {
-  const { currentUser, repeatErrors, submitLabel, cancelLabel, revertLabel, cancelCallback, revertCallback, id, model, prefilledProps, itemProperties, contextName, showRemove, showDelete } = props;
-  const { disabled, currentDocument } = state;
-  const { formType } = options;
-  const { deleteDocument } = callbacks;
-  const commonProps = {
-    document: currentDocument,
-    formType,
-    currentUser,
-    disabled,
-    prefilledProps,
-    itemProperties,
-    contextName
-  };
-  const docClassName = `document-${formType}`;
-  const modelName = model.name.toLowerCase();
-  const formProps = {
-    className: `${docClassName} ${docClassName}-${modelName}`,
-    id
-  };
-  const formGroupProps = /* @__PURE__ */ __name((group) => __spreadValues(__spreadProps(__spreadValues({
-    key: group.name
-  }, group), {
-    group: omit(group, [
-      "fields"
-    ])
-  }), commonProps), "formGroupProps");
-  const formSubmitProps = {
-    model,
-    currentUser,
-    submitLabel,
-    cancelLabel,
-    revertLabel,
-    cancelCallback,
-    revertCallback,
-    document: currentDocument,
-    deleteDocument: formType === "edit" && showRemove && showDelete && deleteDocument || null
-  };
-  const formLayoutProps = {
-    formProps,
-    repeatErrors,
-    submitProps: formSubmitProps,
-    commonProps
-  };
-  return {
-    commonProps,
-    formSubmitProps,
-    formGroupProps,
-    formLayoutProps
-  };
-}, "getChildrenProps");
-var FormWarnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges, children }) => {
-  useWarnOnUnsaved({
-    isChanged,
-    warnUnsavedChanges
-  });
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, children);
-}, "FormWarnUnsaved");
-var getData = /* @__PURE__ */ __name((customArgs, props, state, { submitFormCallbacks, form }) => {
-  const { currentDocument } = state;
-  const { model, prefilledProps } = props;
-  let data = prefilledProps || {};
-  data = omitBy(data, (value, key) => key.endsWith(".$"));
-  const args = __spreadValues({
-    schema: model.schema,
-    excludeRemovedFields: false,
-    excludeHiddenFields: false,
-    replaceIntlFields: true,
-    addExtraFields: false
-  }, customArgs);
-  const fields = getFieldNames(props, currentDocument, args);
-  data = __spreadValues(__spreadValues({}, data), pick2(currentDocument, ...fields));
-  state.deletedValues.forEach((path) => {
-    if (path.includes(".")) {
-      compactParent(data, path);
-    }
-  });
-  data = runCallbacks({
-    callbacks: submitFormCallbacks,
-    iterator: data,
-    args: [
-      {}
-    ]
-  });
-  return data;
-}, "getData");
-var Form = /* @__PURE__ */ __name((props) => {
-  const { initCallback, createDocument, updateDocument, deleteDocument } = props;
-  const initialState = getInitialStateFromProps(props);
-  const { schema, originalSchema, flatSchema, initialDocument } = initialState;
-  const isFirstRender = useRef2(true);
-  useEffect2(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    if (initCallback)
-      initCallback(initialState.currentDocument);
-  }, [
-    initCallback
-  ]);
-  const defaultProps = {
-    layout: "horizontal",
-    prefilledProps: {},
-    repeatErrors: false,
-    showRemove: true,
-    showDelete: true
-  };
-  const allProps = __spreadValues(__spreadValues({}, defaultProps), props);
-  const defaultValues = {};
-  const submitFormCallbacks = [];
-  const successFormCallbacks = [];
-  const failureFormCallbacks = [];
-  const intl = useIntlContext2();
-  const [errors, setErrors] = useState2([]);
-  const throwError = /* @__PURE__ */ __name((error) => {
-    let formErrors = getErrors(error);
-    console.log(formErrors);
-    setErrors((prevErrors) => [
-      ...prevErrors,
-      ...formErrors
-    ]);
-  }, "throwError");
-  const clearFieldErrors = /* @__PURE__ */ __name((path) => {
-    setErrors((prevErrors) => prevErrors.filter((error) => error.path !== path));
-  }, "clearFieldErrors");
-  const [deletedValues, setDeletedValues] = useState2([]);
-  const addToDeletedValues = /* @__PURE__ */ __name((name) => {
-    setDeletedValues((prevDeletedValues) => [
-      ...prevDeletedValues,
-      name
-    ]);
-  }, "addToDeletedValues");
-  const [callbacks, setCallbacks] = useState2({
-    submitFormCallbacks: [],
-    successFormCallbacks: [],
-    failureFormCallbacks: []
-  });
-  const addToSubmitForm = /* @__PURE__ */ __name((callback) => {
-    setCallbacks((cbs) => __spreadValues({}, cbs));
-  }, "addToSubmitForm");
-  const addToSuccessForm = /* @__PURE__ */ __name((callback) => {
-    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
-      successFormCallbacks: [
-        ...cbs.successFormCallbacks,
-        callback
-      ]
-    }));
-  }, "addToSuccessForm");
-  const addToFailureForm = /* @__PURE__ */ __name((callback) => {
-    setCallbacks((cbs) => __spreadProps(__spreadValues({}, cbs), {
-      failureFormCallbacks: [
-        ...cbs.failureFormCallbacks,
-        callback
-      ]
-    }));
-  }, "addToFailureForm");
-  const clearFormCallbacks = /* @__PURE__ */ __name(() => {
-    setCallbacks({
-      submitFormCallbacks: [],
-      successFormCallbacks: [],
-      failureFormCallbacks: []
-    });
-  }, "clearFormCallbacks");
-  const [currentValues, setCurrentValues] = useState2({});
-  const submitFormContext = /* @__PURE__ */ __name((formType) => (event) => {
-    submitForm(formType)(event);
-  }, "submitFormContext");
-  const [currentDocument, setCurrentDocument] = useState2(initialDocument);
-  const updateCurrentValues = /* @__PURE__ */ __name((newValues, options = {}) => {
-    const { mode = "overwrite" } = options;
-    const { changeCallback } = props;
-    const newState = {
-      currentValues: cloneDeep(currentValues),
-      currentDocument: cloneDeep(currentDocument),
-      deletedValues: cloneDeep(deletedValues)
-    };
-    Object.keys(newValues).forEach((key) => {
-      const path = key;
-      let value = newValues[key];
-      if (isEmptyValue(value)) {
-        unset(newState.currentValues, path);
-        set2(newState.currentDocument, path, null);
-        newState.deletedValues = [
-          ...newState.deletedValues,
-          path
-        ];
-      } else {
-        set2(newState.currentValues, path, value);
-        if (mode === "merge" && (Array.isArray(value) || isObject(value))) {
-          const oldValue = get2(newState.currentDocument, path);
-          set2(newState.currentDocument, path, merge2(oldValue, value));
-        } else {
-          set2(newState.currentDocument, path, value);
+__name(_extends3, "_extends");
+var VulcanCurrentUserProvider = /* @__PURE__ */ __name((_a) => {
+  var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
+  return /* @__PURE__ */ React7.createElement(VulcanCurrentUserContext.Provider, _extends3({
+    value
+  }, props));
+}, "VulcanCurrentUserProvider");
+
+// components/form/core/FormContainer.tsx
+function _extends4() {
+  _extends4 = 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];
         }
-        newState.deletedValues = without(newState.deletedValues, path);
       }
-    });
-    if (changeCallback)
-      changeCallback(newState.currentDocument);
-    setCurrentValues(newState.currentValues);
-    setCurrentDocument(newState.currentDocument);
-    setDeletedValues(newState.deletedValues);
-  }, "updateCurrentValues");
-  const refetchForm = /* @__PURE__ */ __name(() => {
-    if (props.refetch) {
-      props.refetch();
-    }
-  }, "refetchForm");
-  const [disabled, setDisabled] = useState2(false);
-  const [success, setSuccess] = useState2(false);
-  const clearForm = /* @__PURE__ */ __name((options = {}) => {
-    const { document: optionsDocument } = options;
-    const document = optionsDocument ? merge2({}, props.prefilledProps, optionsDocument) : null;
-    setErrors([]);
-    setCurrentValues({});
-    setDeletedValues([]);
-    setCurrentDocument(document || initialDocument);
-    setDisabled(false);
-  }, "clearForm");
-  const newMutationSuccessCallback = /* @__PURE__ */ __name(function(result) {
-    mutationSuccessCallback(result, "new");
-  }, "newMutationSuccessCallback");
-  const editMutationSuccessCallback = /* @__PURE__ */ __name(function(result) {
-    mutationSuccessCallback(result, "edit");
-  }, "editMutationSuccessCallback");
-  const formRef = useRef2(null);
-  const mutationSuccessCallback = /* @__PURE__ */ __name(function(result, mutationType) {
-    setDisabled(false);
-    setSuccess(true);
-    if (mutationType === "new")
-      refetchForm();
-    let { document } = result;
-    if (formRef.current) {
-      clearForm({
-        document: mutationType === "edit" ? document : void 0
-      });
     }
-    document = runCallbacks({
-      callbacks: successFormCallbacks,
-      iterator: document,
-      args: [
-        {
-          form: formRef.current
-        }
-      ]
-    });
-    if (props.successCallback)
-      props.successCallback(document, {
-        form: this
-      });
-  }, "mutationSuccessCallback");
-  const mutationErrorCallback = /* @__PURE__ */ __name((document, error) => {
-    setDisabled(false);
-    console.error("// graphQL Error");
-    console.error(error);
-    runCallbacks({
-      callbacks: failureFormCallbacks,
-      iterator: error,
-      args: [
-        {
-          error,
-          form: formRef.current
-        }
-      ]
-    });
-    if (!isEmpty(error)) {
-      throwError(error);
+    return target;
+  };
+  return _extends4.apply(this, arguments);
+}
+__name(_extends4, "_extends");
+var debugForm = debugVulcan("form");
+var useFragments = /* @__PURE__ */ __name((props, formType) => {
+  let queryFragment;
+  let queryFragmentName;
+  let mutationFragment;
+  let mutationFragmentName;
+  if (props.queryFragment) {
+    if (typeof props.queryFragment === "string") {
+      queryFragment = lib_default`
+        ${props.queryFragment}
+      `;
+      if (!props.queryFragmentName)
+        throw new Error("When using a string queryFragment, queryFragmentName is mandatory");
+      queryFragmentName = props.queryFragmentName;
+    } else {
+      queryFragment = props.queryFragment;
+      queryFragmentName = props.queryFragmentName || getFragmentName2(props.queryFragment);
     }
-    if (props.errorCallback)
-      props.errorCallback(document, error, {
-        form: void 0
-      });
-  }, "mutationErrorCallback");
-  const submitForm = /* @__PURE__ */ __name((formType) => async (event) => {
-    var _a, _b;
-    event && event.preventDefault();
-    event && event.stopPropagation();
-    const { contextName } = props;
-    if (disabled) {
-      return;
+  }
+  if (props.mutationFragment) {
+    if (typeof props.mutationFragment === "string") {
+      mutationFragment = lib_default`
+        ${props.mutationFragment}
+      `;
+      if (!props.mutationFragmentName)
+        throw new Error("When using a string mutationFragment, mutationFragmentName is mandatory");
+      queryFragmentName = props.mutationFragmentName;
+    } else {
+      mutationFragment = props.mutationFragment;
+      mutationFragmentName = props.mutationFragmentName || getFragmentName2(props.mutationFragment);
     }
-    setErrors([]);
-    setDisabled(true);
-    let data = getData({
-      replaceIntlFields: true,
-      addExtraFields: false,
-      mutableFields
-    }, props, {
-      currentDocument,
-      deletedValues
-    }, {
-      form: formRef.current,
-      submitFormCallbacks
+  }
+  let autoFormFragments;
+  if (!props.queryFragment || !props.mutationFragment) {
+    const { model, fields, addFields } = props;
+    autoFormFragments = formFragments_default({
+      formType,
+      model,
+      fields,
+      addFields
     });
-    if (props.submitCallback) {
-      data = props.submitCallback(data) || data;
+  }
+  if (!props.queryFragment) {
+    queryFragment = autoFormFragments.queryFragment;
+    queryFragmentName = autoFormFragments.queryFragmentName;
+  }
+  if (!props.mutationFragment) {
+    mutationFragment = autoFormFragments.mutationFragment;
+    mutationFragmentName = autoFormFragments.mutationFragmentName;
+  }
+  return {
+    mutationFragment,
+    mutationFragmentName,
+    queryFragment,
+    queryFragmentName
+  };
+}, "useFragments");
+var FormContainer = /* @__PURE__ */ __name((props) => {
+  const { model, documentId, slug, fields, addFields, currentUser: currentUserFromProps, loadingCurrentUser: loadingCurrentUserFromProps } = props;
+  const { schema } = model;
+  const isEdit = documentId || slug;
+  const selector = {
+    documentId,
+    slug
+  };
+  const formType = isEdit ? "edit" : "new";
+  const VulcanComponents = useVulcanComponents();
+  const prefix = `${model.name}${capitalize3(formType)}`;
+  const childProps = {
+    formType,
+    schema
+  };
+  const { mutationFragment, mutationFragmentName, queryFragment, queryFragmentName } = useFragments(props, formType);
+  const mutationOptions = {
+    model,
+    fragment: mutationFragment,
+    fragmentName: mutationFragmentName
+  };
+  const queryOptions = {
+    model,
+    fragment: queryFragment,
+    fragmentName: queryFragmentName,
+    input: {
+      id: documentId,
+      enableCache: false
+    },
+    queryOptions: {
+      fetchPolicy: "network-only",
+      pollInterval: 0,
+      skip: formType === "new"
     }
-    if (formType === "new") {
-      try {
-        const result = await createDocument({
-          input: {
-            data,
-            contextName
-          }
-        });
-        if ((_a = result.errors) == null ? void 0 : _a.length) {
-          mutationErrorCallback(document1, result.errors[0]);
-        } else {
-          newMutationSuccessCallback(result);
+  };
+  const { data, document: document1, loading, refetch } = useSingle(queryOptions);
+  if (formType !== "new") {
+    debugForm("useSingle result", "data", data, "document", document1, "loading", loading);
+  }
+  const [createDocument] = useCreate(mutationOptions);
+  const [updateDocument] = useUpdate(mutationOptions);
+  const [deleteDocument] = useDelete(mutationOptions);
+  const { currentUser: currentUserFromContext, loading: loadingCurrentUserFromContext } = useVulcanCurrentUser();
+  const shouldGetCurrentUserFromProps = typeof currentUserFromProps !== "undefined";
+  const currentUser = shouldGetCurrentUserFromProps ? currentUserFromProps : currentUserFromContext;
+  const loadingCurrentUser = shouldGetCurrentUserFromProps ? loadingCurrentUserFromProps : loadingCurrentUserFromContext;
+  const createAndReturnDocument = /* @__PURE__ */ __name(async (variables) => {
+    const result = await createDocument(variables);
+    const { errors, document } = result;
+    return {
+      document,
+      errors
+    };
+  }, "createAndReturnDocument");
+  const updateAndReturnDocument = /* @__PURE__ */ __name(async (variables) => {
+    const result = await updateDocument(variables);
+    const { errors, document } = result;
+    return {
+      document,
+      errors
+    };
+  }, "updateAndReturnDocument");
+  const deleteDocumentAndRefetch = /* @__PURE__ */ __name(async (variables) => {
+    await deleteDocument(variables);
+  }, "deleteDocumentAndRefetch");
+  if (isEdit && loading) {
+    return /* @__PURE__ */ React8.createElement(VulcanComponents.Loading, null);
+  }
+  return /* @__PURE__ */ React8.createElement(VulcanComponents.Form, _extends4({
+    document: document1,
+    loading: loading || loadingCurrentUser,
+    createDocument: createAndReturnDocument,
+    updateDocument: updateAndReturnDocument,
+    deleteDocument: deleteDocumentAndRefetch,
+    refetch,
+    currentUser
+  }, childProps, props));
+}, "FormContainer");
+var SmartForm = FormContainer;
+
+// components/form/utils/index.ts
+init_esm_shims();
+
+// components/form/utils/ui_utils.ts
+var ui_utils_exports = {};
+__export(ui_utils_exports, {
+  getHtmlInputProps: () => getHtmlInputProps,
+  whitelistInputProps: () => whitelistInputProps
+});
+init_esm_shims();
+import pick3 from "lodash/pick.js";
+var getHtmlInputProps = /* @__PURE__ */ __name((props) => {
+  const { name, path, options, label, onChange, onBlur, value, disabled } = props;
+  const inputProperties = __spreadProps(__spreadValues({}, props.inputProperties), {
+    name,
+    path,
+    options,
+    label,
+    onChange,
+    onBlur,
+    value,
+    disabled
+  });
+  return __spreadProps(__spreadValues({}, props), {
+    inputProperties
+  });
+}, "getHtmlInputProps");
+var whitelistInputProps = /* @__PURE__ */ __name((props) => {
+  const whitelist = [
+    "name",
+    "path",
+    "options",
+    "label",
+    "onChange",
+    "onBlur",
+    "value",
+    "disabled",
+    "placeholder"
+  ];
+  const value = props.value;
+  let safeValue = value;
+  if (value === null)
+    safeValue = void 0;
+  return __spreadProps(__spreadValues({}, pick3(props, whitelist)), {
+    value: safeValue
+  });
+}, "whitelistInputProps");
+
+// components/VulcanComponents/index.ts
+init_esm_shims();
+
+// components/VulcanComponents/Provider.tsx
+init_esm_shims();
+import React9 from "react";
+import { debugVulcan as debugVulcan2 } from "@vulcanjs/utils";
+function _extends5() {
+  _extends5 = 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];
         }
-      } catch (error) {
-        mutationErrorCallback(document1, error);
       }
+    }
+    return target;
+  };
+  return _extends5.apply(this, arguments);
+}
+__name(_extends5, "_extends");
+var debugComponents = debugVulcan2("components");
+var VulcanComponentsProvider = /* @__PURE__ */ __name((_a) => {
+  var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
+  const currentComponents = useVulcanComponents();
+  debugComponents("Current components __not_initialized?", currentComponents.__not_initialized);
+  const mergedComponents = __spreadValues(__spreadValues({}, (currentComponents == null ? void 0 : currentComponents.__not_initialized) ? {} : currentComponents || {}), value || {});
+  debugComponents("Merged components", mergedComponents);
+  Object.keys(mergedComponents).forEach((componentName) => {
+    if (mergedComponents[componentName]) {
+      mergedComponents[componentName].displayName = "Vulcan." + componentName;
     } else {
-      try {
-        const documentId = currentDocument._id;
-        const result = await updateDocument({
-          input: {
-            id: documentId,
-            data,
-            contextName
-          }
-        });
-        if ((_b = result.errors) == null ? void 0 : _b.length) {
-          mutationErrorCallback(document1, result.errors[0]);
-        } else {
-          editMutationSuccessCallback(result);
+      console.warn(`Encountered an undefined component: ${componentName}.
+      The component may not be registered, or import failed.
+      For instance due to an infinite import loop when importing
+      "useVulcanComponents" from index instead of Consumer.`);
+    }
+  });
+  return /* @__PURE__ */ React9.createElement(VulcanComponentsContext.Provider, _extends5({
+    value: mergedComponents
+  }, props));
+}, "VulcanComponentsProvider");
+
+// components/VulcanComponents/typings.ts
+init_esm_shims();
+import React10 from "react";
+
+// components/VulcanComponents/defaultVulcanComponents/index.ts
+init_esm_shims();
+
+// components/core/LoadingButton.tsx
+init_esm_shims();
+import React11 from "react";
+function _extends6() {
+  _extends6 = 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];
         }
-      } catch (error) {
-        mutationErrorCallback(document1, error);
       }
     }
-  }, "submitForm");
-  const deleteDocumentWithConfirm = /* @__PURE__ */ __name(() => {
-    const document = currentDocument;
-    const documentId = props.document._id;
-    const documentTitle = document.title || document.name || "";
-    const deleteDocumentConfirm = intl.formatMessage({
-      id: "forms.delete_confirm"
-    }, {
-      title: documentTitle
-    });
-    if (window.confirm(deleteDocumentConfirm)) {
-      deleteDocument({
-        input: {
-          id: documentId
+    return target;
+  };
+  return _extends6.apply(this, arguments);
+}
+__name(_extends6, "_extends");
+var LoadingButton = /* @__PURE__ */ __name((_a) => {
+  var _b = _a, { loading, label, onClick, children, className = "" } = _b, rest = __objRest(_b, ["loading", "label", "onClick", "children", "className"]);
+  const Components2 = useVulcanComponents();
+  const wrapperStyle = {
+    position: "relative"
+  };
+  const labelStyle = loading ? {
+    opacity: 0.5
+  } : {};
+  const loadingStyle = loading ? {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  } : {
+    display: "none"
+  };
+  return /* @__PURE__ */ React11.createElement(Components2.Button, _extends6({
+    className: `loading-button ${loading ? "loading-button-loading" : "loading-button-notloading"} ${className}`,
+    onClick
+  }, rest), /* @__PURE__ */ React11.createElement("span", {
+    style: wrapperStyle
+  }, /* @__PURE__ */ React11.createElement("span", {
+    style: labelStyle
+  }, label || children), /* @__PURE__ */ React11.createElement("span", {
+    style: loadingStyle
+  }, /* @__PURE__ */ React11.createElement(Components2.Loading, null))));
+}, "LoadingButton");
+
+// components/core/MutationButton.tsx
+init_esm_shims();
+import React12, { useState as useState2 } from "react";
+import { useMutation } from "@apollo/client";
+function _extends7() {
+  _extends7 = 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];
         }
-      }).then((mutationResult) => {
-        if (props.removeSuccessCallback)
-          props.removeSuccessCallback({
-            documentId,
-            documentTitle
-          });
-        refetchForm();
-      }).catch((error) => {
-        console.log(error);
-      });
+      }
     }
-  }, "deleteDocumentWithConfirm");
-  const { successComponent, document: document1, currentUser, model, warnUnsavedChanges } = props;
-  const FormComponents = useVulcanComponents();
-  const formType1 = document1 ? "edit" : "new";
-  const mutableFields = formType1 === "edit" ? getEditableFields(schema, currentUser, initialDocument) : getInsertableFields(schema, currentUser);
-  const { formLayoutProps, formGroupProps } = getChildrenProps(props, {
-    disabled,
-    currentDocument
-  }, {
-    formType: formType1
-  }, {
-    deleteDocument: deleteDocumentWithConfirm
-  });
-  const isChanged = isNotSameDocument(initialDocument, currentDocument);
-  return success && successComponent ? successComponent : /* @__PURE__ */ React12.createElement(FormWarnUnsaved, {
-    isChanged,
-    warnUnsavedChanges
-  }, /* @__PURE__ */ React12.createElement(FormContext.Provider, {
-    value: {
-      throwError,
-      clearForm,
-      refetchForm,
-      isChanged,
-      submitForm: submitFormContext(formType1),
-      addToDeletedValues,
-      updateCurrentValues,
-      getDocument: () => currentDocument,
-      getLabel: (fieldName, fieldLocale) => getLabel(model, flatSchema, intl, fieldName, fieldLocale),
-      initialDocument,
-      addToSubmitForm,
-      addToSuccessForm,
-      addToFailureForm,
-      clearFormCallbacks,
-      errors,
-      currentValues,
-      deletedValues,
-      clearFieldErrors
+    return target;
+  };
+  return _extends7.apply(this, arguments);
+}
+__name(_extends7, "_extends");
+var MutationButton = /* @__PURE__ */ __name((props) => {
+  const Components2 = useVulcanComponents();
+  const [loading, setLoading] = useState2(false);
+  const [error1, setError] = useState2();
+  const {
+    mutation,
+    loadingButtonProps = {},
+    label
+  } = props;
+  let { mutationArguments } = props;
+  const mutationAsNode = typeof mutation === "string" ? lib_default`
+          ${mutation}
+        ` : mutation;
+  const [mutationFunc] = useMutation(mutationAsNode);
+  const handleClick = /* @__PURE__ */ __name(async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(void 0);
+    const {
+      submitCallback,
+      successCallback,
+      errorCallback
+    } = props;
+    try {
+      if (submitCallback) {
+        const callbackReturn = await submitCallback(mutationArguments);
+        if (callbackReturn && callbackReturn.mutationArguments) {
+          mutationArguments = callbackReturn.mutationArguments;
+        }
+      }
+      const result = await mutationFunc({
+        variables: mutationArguments
+      });
+      if (successCallback) {
+        await successCallback(result);
+      }
+    } catch (error) {
+      setError(error);
+      if (errorCallback) {
+        await errorCallback(error);
+      }
+    } finally {
+      setLoading(false);
     }
-  }, /* @__PURE__ */ React12.createElement(FormComponents.FormLayout, _extends7({}, formLayoutProps), getFieldGroups(props, {
-    currentDocument,
-    schema,
-    flatSchema,
-    originalSchema
-  }, intl, mutableFields, intl.formatMessage).map((group, i) => /* @__PURE__ */ React12.createElement(FormComponents.FormGroup, _extends7({
-    key: i
-  }, formGroupProps(group)))))));
-}, "Form");
+  }, "handleClick");
+  const loadingButton = /* @__PURE__ */ React12.createElement(Components2.LoadingButton, _extends7({
+    loading,
+    onClick: handleClick,
+    label
+  }, loadingButtonProps));
+  if (error1) {
+    return /* @__PURE__ */ React12.createElement(Components2.TooltipTrigger, {
+      trigger: loadingButton,
+      defaultShow: true
+    }, error1.message.replace("GraphQL error: ", ""));
+  }
+  return loadingButton;
+}, "MutationButton");
 
-// components/form/core/Form/typings.ts
+// components/form/core/index.ts
 init_esm_shims();
 
+// components/VulcanComponents/defaultVulcanComponents/index.ts
+var defaultFormComponents = {
+  Form,
+  SmartForm: FormContainer
+};
+var defaultDatatableComponents = {};
+var defaultCellComponents = {};
+var defaultCoreComponents = {
+  MutationButton,
+  LoadingButton
+};
+
 // componentsHelpers.tsx
 init_esm_shims();
 import React13 from "react";
@@ -4611,12 +4779,17 @@ export {
   defaultDatatableComponents,
   defaultFormComponents,
   delayedComponent,
+  formFragments_exports as formFragmentsUtils,
   getRawComponent,
   instantiateComponent,
   mergeWithComponents,
+  path_utils_exports as pathUtils,
+  schema_utils_exports as schemaUtils,
+  ui_utils_exports as uiUtils,
   useFormContext,
   useVulcanComponents,
   useVulcanCurrentUser,
+  utils_exports as utils,
   withVulcanComponents
 };
 //# sourceMappingURL=index.js.map