@vulcanjs/react-ui 0.6.6-alpha.5 → 0.6.6-alpha.6

package/dist/index.js

@@ -5872,7 +5872,7 @@ init_esm_shims();
 // components/form/index.ts
 init_esm_shims();
 
-// components/form/FormContainer.tsx
+// components/form/core/FormContainer.tsx
 init_esm_shims();
 import React5 from "react";
 
@@ -8169,7 +8169,7 @@ var extras = {
 gql["default"] = gql;
 var lib_default = gql;
 
-// components/form/modules/formFragments.ts
+// components/form/utils/formFragments.ts
 init_esm_shims();
 import _uniq from "lodash/uniq.js";
 import _intersection from "lodash/intersection.js";
@@ -8311,7 +8311,7 @@ var getFormFragments = /* @__PURE__ */ __name(({ formType = "new", model, fields
 }, "getFormFragments");
 var formFragments_default = getFormFragments;
 
-// components/form/FormContainer.tsx
+// components/form/core/FormContainer.tsx
 import { getFragmentName as getFragmentName2 } from "@vulcanjs/graphql";
 import { capitalize as capitalize2 } from "@vulcanjs/utils";
 import { useSingle, useCreate, useUpdate, useDelete } from "@vulcanjs/react-hooks";
@@ -8374,7 +8374,7 @@ var withVulcanComponents = /* @__PURE__ */ __name((C) => (props) => {
   }, props));
 }, "withVulcanComponents");
 
-// components/form/FormContainer.tsx
+// components/form/core/FormContainer.tsx
 import { debugVulcan } from "@vulcanjs/utils";
 
 // components/VulcanCurrentUser/Consumer.tsx
@@ -8393,7 +8393,7 @@ var VulcanCurrentUserContext = React4.createContext({
 var VulcanCurrentUserConsumer = VulcanCurrentUserContext.Consumer;
 var useVulcanCurrentUser = /* @__PURE__ */ __name(() => useContext2(VulcanCurrentUserContext), "useVulcanCurrentUser");
 
-// components/form/FormContainer.tsx
+// components/form/core/FormContainer.tsx
 function _extends2() {
   _extends2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -8546,10 +8546,10 @@ var FormContainer = /* @__PURE__ */ __name((props) => {
 }, "FormContainer");
 var SmartForm = FormContainer;
 
-// components/form/Form/index.ts
+// components/form/core/Form/index.ts
 init_esm_shims();
 
-// components/form/Form/Form.tsx
+// components/form/core/Form/Form.tsx
 init_esm_shims();
 import React7, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import { runCallbacks, getErrors } from "@vulcanjs/core";
@@ -8571,11 +8571,11 @@ import update from "lodash/update.js";
 import without from "lodash/without.js";
 import isEmpty from "lodash/isEmpty.js";
 
-// components/form/modules/schema_utils.ts
+// components/form/utils/schema_utils.ts
 init_esm_shims();
 import { canCreateField, canUpdateField } from "@vulcanjs/permissions";
 
-// components/form/modules/utils.ts
+// components/form/utils/utils.ts
 init_esm_shims();
 import merge from "lodash/merge.js";
 import find from "lodash/find.js";
@@ -8583,7 +8583,7 @@ import isPlainObject from "lodash/isPlainObject.js";
 import set from "lodash/set.js";
 import size from "lodash/size.js";
 
-// components/form/modules/path_utils.ts
+// components/form/utils/path_utils.ts
 init_esm_shims();
 import toPath from "lodash/toPath.js";
 import initial from "lodash/initial.js";
@@ -8593,7 +8593,7 @@ 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);
 
-// components/form/modules/utils.ts
+// components/form/utils/utils.ts
 var isEmptyValue = /* @__PURE__ */ __name((value) => typeof value === "undefined" || value === null || value === "" || Array.isArray(value) && value.length === 0, "isEmptyValue");
 var getFieldType = /* @__PURE__ */ __name((fieldSchema) => fieldSchema.type, "getFieldType");
 var getNullValue = /* @__PURE__ */ __name((datatype) => {
@@ -8611,7 +8611,7 @@ var getNullValue = /* @__PURE__ */ __name((datatype) => {
   }
 }, "getNullValue");
 
-// components/form/modules/schema_utils.ts
+// components/form/utils/schema_utils.ts
 var getInsertableFields = /* @__PURE__ */ __name(function(schema, user) {
   const fields = Object.keys(schema).filter(function(fieldName) {
     var field = schema[fieldName];
@@ -8781,7 +8781,7 @@ var formProperties = [
   "fieldProperties"
 ];
 
-// components/form/FormContext.tsx
+// components/form/core/FormContext.tsx
 init_esm_shims();
 import React6, { useContext as useContext3 } from "react";
 var FormContext = /* @__PURE__ */ React6.createContext(void 0);
@@ -8792,7 +8792,7 @@ var useFormContext = /* @__PURE__ */ __name(() => {
   return formContext;
 }, "useFormContext");
 
-// components/form/Form/fields.ts
+// components/form/core/Form/fields.ts
 init_esm_shims();
 import uniq from "lodash/uniq.js";
 import compact2 from "lodash/compact.js";
@@ -9015,7 +9015,7 @@ var getFieldGroups = /* @__PURE__ */ __name((props, state, context, mutableField
   return groupsWithFields;
 }, "getFieldGroups");
 
-// components/form/Form/utils.ts
+// components/form/core/Form/utils.ts
 init_esm_shims();
 import find2 from "lodash/find.js";
 import isEqualWith from "lodash/isEqualWith.js";
@@ -9029,17 +9029,17 @@ var isNotSameDocument = /* @__PURE__ */ __name((initialDocument, changedDocument
   return typeof changedValue !== "undefined";
 }, "isNotSameDocument");
 
-// components/form/useWarnOnUnsaved/index.ts
+// components/form/hooks/useWarnOnUnsaved/index.ts
 init_esm_shims();
 
-// components/form/useWarnOnUnsaved/useWarnOnUnsaved.ts
+// components/form/hooks/useWarnOnUnsaved/useWarnOnUnsaved.ts
 init_esm_shims();
 
-// components/form/useBlockTransition/useBlockTransition.ts
+// components/form/hooks/useBlockTransition/useBlockTransition.ts
 init_esm_shims();
 import { useEffect, useRef } from "react";
 
-// components/form/useBlockTransition/block.ts
+// components/form/hooks/useBlockTransition/block.ts
 init_esm_shims();
 import debug from "debug";
 var debugTransitions = debug("vn:route-transition");
@@ -9072,7 +9072,7 @@ var block = /* @__PURE__ */ __name((setConfirmationMessage, onUnblock) => {
   return unblock;
 }, "block");
 
-// components/form/useBlockTransition/useBlockTransition.ts
+// components/form/hooks/useBlockTransition/useBlockTransition.ts
 import debug2 from "debug";
 var debugTransitions2 = debug2("vn:router-transitions");
 var useBlockTransition = /* @__PURE__ */ __name(({ shouldBlock, getBlockedMessage }) => {
@@ -9111,7 +9111,7 @@ var useBlockTransition = /* @__PURE__ */ __name(({ shouldBlock, getBlockedMessag
   ]);
 }, "useBlockTransition");
 
-// components/form/useWarnOnUnsaved/useWarnOnUnsaved.ts
+// components/form/hooks/useWarnOnUnsaved/useWarnOnUnsaved.ts
 import debug3 from "debug";
 import { useIntlContext } from "@vulcanjs/react-i18n";
 var debugTransitions3 = debug3("vn:route-transitions");
@@ -9131,7 +9131,7 @@ var useWarnOnUnsaved = /* @__PURE__ */ __name(({ isChanged, warnUnsavedChanges }
   });
 }, "useWarnOnUnsaved");
 
-// components/form/Form/Form.tsx
+// components/form/core/Form/Form.tsx
 function _extends3() {
   _extends3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -9594,7 +9594,7 @@ var Form = /* @__PURE__ */ __name((props) => {
   }, formGroupProps(group)))))));
 }, "Form");
 
-// components/form/Form/typings.ts
+// components/form/core/Form/typings.ts
 init_esm_shims();
 
 // components/VulcanComponents/index.ts
@@ -9610,9 +9610,27 @@ init_esm_shims();
 // components/VulcanComponents/defaultVulcanComponents/formComponents.ts
 init_esm_shims();
 
-// components/form/FormError.tsx
+// components/form/elements/index.ts
+init_esm_shims();
+
+// components/form/elements/FieldErrors.tsx
 init_esm_shims();
 import React8 from "react";
+var FieldErrors = /* @__PURE__ */ __name(({ errors }) => {
+  const VulcanComponents = useVulcanComponents();
+  return /* @__PURE__ */ React8.createElement("ul", {
+    className: "form-input-errors"
+  }, errors.map((error, index) => /* @__PURE__ */ React8.createElement("li", {
+    key: index
+  }, /* @__PURE__ */ React8.createElement(VulcanComponents.FormError, {
+    error,
+    errorContext: "field"
+  }))));
+}, "FieldErrors");
+
+// components/form/elements/FormError.tsx
+init_esm_shims();
+import React9 from "react";
 import get3 from "lodash/get.js";
 function _extends4() {
   _extends4 = Object.assign || function(target) {
@@ -9658,7 +9676,7 @@ var FormError = /* @__PURE__ */ __name(({ error, errorContext }) => {
       values: exception.data
     });
   }
-  return /* @__PURE__ */ React8.createElement(VulcanComponents.FormattedMessage, _extends4({
+  return /* @__PURE__ */ React9.createElement(VulcanComponents.FormattedMessage, _extends4({
     html: true
   }, messageProps));
 }, "FormError");
@@ -9666,15 +9684,158 @@ FormError.defaultProps = {
   errorContext: ""
 };
 
-// components/form/FormComponent.tsx
+// components/form/elements/FormErrors.tsx
+init_esm_shims();
+import React10 from "react";
+var FormErrors = /* @__PURE__ */ __name(() => {
+  const VulcanComponents = useVulcanComponents();
+  const { errors } = useFormContext();
+  return /* @__PURE__ */ React10.createElement("div", {
+    className: "form-errors"
+  }, !!errors.length && /* @__PURE__ */ React10.createElement(VulcanComponents.Alert, {
+    className: "flash-message",
+    variant: "danger"
+  }, /* @__PURE__ */ React10.createElement("ul", null, errors.map((error, index) => /* @__PURE__ */ React10.createElement("li", {
+    key: index
+  }, /* @__PURE__ */ React10.createElement(VulcanComponents.FormError, {
+    error,
+    errorContext: "form"
+  }))))));
+}, "FormErrors");
+
+// components/form/elements/FormSubmit.tsx
+init_esm_shims();
+var import_prop_types = __toESM(require_prop_types(), 1);
+import React11 from "react";
+import { canDeleteDocument } from "@vulcanjs/permissions";
+var FormSubmit = /* @__PURE__ */ __name(({
+  submitLabel,
+  cancelLabel,
+  cancelCallback,
+  revertLabel,
+  revertCallback,
+  document,
+  deleteDocument,
+  model,
+  currentUser
+}) => {
+  const VulcanComponents = useVulcanComponents();
+  const { clearForm } = useFormContext();
+  return /* @__PURE__ */ React11.createElement("div", {
+    className: "form-submit"
+  }, /* @__PURE__ */ React11.createElement(VulcanComponents.Button, {
+    type: "submit",
+    variant: "primary"
+  }, submitLabel ? submitLabel : /* @__PURE__ */ React11.createElement(VulcanComponents.FormattedMessage, {
+    id: "forms.submit",
+    defaultMessage: "Submit"
+  })), cancelCallback ? /* @__PURE__ */ React11.createElement("a", {
+    className: "form-cancel",
+    onClick: (e) => {
+      e.preventDefault();
+      cancelCallback(document);
+    }
+  }, cancelLabel ? cancelLabel : /* @__PURE__ */ React11.createElement(VulcanComponents.FormattedMessage, {
+    id: "forms.cancel",
+    defaultMessage: "Cancel"
+  })) : null, revertCallback ? /* @__PURE__ */ React11.createElement("a", {
+    className: "form-cancel",
+    onClick: (e) => {
+      e.preventDefault();
+      clearForm();
+      revertCallback(document);
+    }
+  }, revertLabel ? revertLabel : /* @__PURE__ */ React11.createElement(VulcanComponents.FormattedMessage, {
+    id: "forms.revert",
+    defaultMessage: "Revert"
+  })) : null, deleteDocument && canDeleteDocument({
+    user: currentUser,
+    document,
+    model
+  }) ? /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("hr", null), /* @__PURE__ */ React11.createElement(VulcanComponents.Button, {
+    variant: "link",
+    onClick: deleteDocument,
+    className: `delete-link ${model.name}-delete-link`
+  }, /* @__PURE__ */ React11.createElement(VulcanComponents.Icon, {
+    name: "close"
+  }), " ", /* @__PURE__ */ React11.createElement(VulcanComponents.FormattedMessage, {
+    id: "forms.delete",
+    defaultMessage: "Delete"
+  }))) : null);
+}, "FormSubmit");
+FormSubmit.propTypes = {
+  submitLabel: import_prop_types.default.node,
+  cancelLabel: import_prop_types.default.node,
+  cancelCallback: import_prop_types.default.func,
+  revertLabel: import_prop_types.default.node,
+  revertCallback: import_prop_types.default.func,
+  document: import_prop_types.default.object,
+  deleteDocument: import_prop_types.default.func,
+  collectionName: import_prop_types.default.string,
+  classes: import_prop_types.default.object
+};
+
+// components/form/elements/FormLayout.tsx
 init_esm_shims();
-import React9, { useEffect as useEffect3, useState as useState2 } from "react";
+import React12 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 FormLayout = /* @__PURE__ */ __name(({ commonProps, formProps, repeatErrors, submitProps, children }) => {
+  const VulcanComponents = useVulcanComponents();
+  return /* @__PURE__ */ React12.createElement(VulcanComponents.FormElement, _extends5({}, formProps), /* @__PURE__ */ React12.createElement(VulcanComponents.FormErrors, _extends5({}, commonProps)), children, repeatErrors && /* @__PURE__ */ React12.createElement(VulcanComponents.FormErrors, _extends5({}, commonProps)), /* @__PURE__ */ React12.createElement(VulcanComponents.FormSubmit, _extends5({}, commonProps, submitProps)));
+}, "FormLayout");
+
+// components/form/elements/FormElement.tsx
+init_esm_shims();
+import React13 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];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends6.apply(this, arguments);
+}
+__name(_extends6, "_extends");
+var FormElement = /* @__PURE__ */ React13.forwardRef((_a, ref) => {
+  var _b = _a, { children } = _b, otherProps = __objRest(_b, ["children"]);
+  const { submitForm } = useFormContext();
+  return /* @__PURE__ */ React13.createElement("form", _extends6({}, otherProps, {
+    onSubmit: submitForm,
+    ref
+  }), children);
+});
+
+// components/form/core/index.ts
+init_esm_shims();
+
+// components/form/core/FormComponent.tsx
+init_esm_shims();
+import React14, { useEffect as useEffect3, useState as useState2 } from "react";
 import get4 from "lodash/get.js";
-import SimpleSchema2 from "simpl-schema";
+import SimpleSchema from "simpl-schema";
 
 // components/form/inputs/consts.ts
 init_esm_shims();
-import SimpleSchema from "simpl-schema";
 var standardInputs = [
   "number",
   "url",
@@ -9712,13 +9873,13 @@ var allVulcanInputs = [
   ...derivedInputs
 ];
 var getAutoInputFromType = /* @__PURE__ */ __name((fieldType) => {
-  const autoType = fieldType === Number || fieldType === SimpleSchema.Integer ? "number" : fieldType === Boolean ? "checkbox" : fieldType === Date ? "date" : "text";
+  const autoType = fieldType === Number ? "number" : fieldType === Boolean ? "checkbox" : fieldType === Date ? "date" : "text";
   return autoType;
 }, "getAutoInputFromType");
 
-// components/form/FormComponent.tsx
-function _extends5() {
-  _extends5 = Object.assign || function(target) {
+// components/form/core/FormComponent.tsx
+function _extends7() {
+  _extends7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9729,9 +9890,9 @@ function _extends5() {
     }
     return target;
   };
-  return _extends5.apply(this, arguments);
+  return _extends7.apply(this, arguments);
 }
-__name(_extends5, "_extends");
+__name(_extends7, "_extends");
 var getCharacterCounts = /* @__PURE__ */ __name((value, max) => {
   const characterCount = value && value.length ? value.length : 0;
   return {
@@ -9758,7 +9919,7 @@ var isArrayField = /* @__PURE__ */ __name((type) => {
   return type === Array;
 }, "isArrayField");
 var isObjectField = /* @__PURE__ */ __name((type) => {
-  return type instanceof SimpleSchema2;
+  return type instanceof SimpleSchema;
 }, "isObjectField");
 var getInputName = /* @__PURE__ */ __name((fieldType, input) => {
   if (input)
@@ -9859,7 +10020,7 @@ var FormComponent = /* @__PURE__ */ __name((props) => {
     }
     if (type === Number && value != null) {
       value = Number(value);
-    } else if (type === SimpleSchema2.Integer && value != null) {
+    } else if (type === SimpleSchema.Integer && value != null) {
       value = parseInt(value);
     }
     if (value !== getValue()) {
@@ -9906,16 +10067,16 @@ var FormComponent = /* @__PURE__ */ __name((props) => {
   }, "clearField");
   const FormComponents = useVulcanComponents();
   if (intlInput) {
-    return /* @__PURE__ */ React9.createElement(FormComponents.FormIntl, _extends5({}, props));
+    return /* @__PURE__ */ React14.createElement(FormComponents.FormIntl, _extends7({}, props));
   } else if (!input && nestedInput) {
     if (isArrayField(type)) {
-      return /* @__PURE__ */ React9.createElement(FormComponents.FormNestedArray, _extends5({}, props, {
+      return /* @__PURE__ */ React14.createElement(FormComponents.FormNestedArray, _extends7({}, props, {
         formComponents: FormComponents,
         errors: getErrors2(),
         value: getValue()
       }));
     } else if (isObjectField(type)) {
-      return /* @__PURE__ */ React9.createElement(FormComponents.FormNestedObject, _extends5({}, props, {
+      return /* @__PURE__ */ React14.createElement(FormComponents.FormNestedObject, _extends7({}, props, {
         formComponents: FormComponents,
         errors: getErrors2(),
         value: getValue()
@@ -9938,17 +10099,17 @@ var FormComponent = /* @__PURE__ */ __name((props) => {
   if (!query && typeof options === "function") {
     fciProps.options = options(fciProps);
   }
-  const fci = /* @__PURE__ */ React9.createElement(FormComponents.FormComponentInner, _extends5({}, fciProps));
-  return query ? /* @__PURE__ */ React9.createElement(FormComponents.FormComponentLoader, _extends5({}, fciProps), fci) : fci;
+  const fci = /* @__PURE__ */ React14.createElement(FormComponents.FormComponentInner, _extends7({}, fciProps));
+  return query ? /* @__PURE__ */ React14.createElement(FormComponents.FormComponentLoader, _extends7({}, fciProps), fci) : fci;
 }, "FormComponent");
 var FormComponent_default = FormComponent;
 
-// components/form/FormComponentInner.tsx
+// components/form/core/FormComponentInner.tsx
 init_esm_shims();
-import React10 from "react";
+import React15 from "react";
 import { useIntlContext as useIntlContext3 } from "@vulcanjs/react-i18n";
 
-// components/form/ui_utils.ts
+// components/form/utils/ui_utils.ts
 init_esm_shims();
 import pick3 from "lodash/pick.js";
 var whitelistInputProps = /* @__PURE__ */ __name((props) => {
@@ -9963,13 +10124,19 @@ var whitelistInputProps = /* @__PURE__ */ __name((props) => {
     "disabled",
     "placeholder"
   ];
-  return pick3(props, whitelist);
+  const value = props.value;
+  let safeValue;
+  if (value === null)
+    safeValue = void 0;
+  return __spreadProps(__spreadValues({}, pick3(props, whitelist)), {
+    value: safeValue
+  });
 }, "whitelistInputProps");
 
-// components/form/FormComponentInner.tsx
+// components/form/core/FormComponentInner.tsx
 import classNames from "classnames";
-function _extends6() {
-  _extends6 = Object.assign || function(target) {
+function _extends8() {
+  _extends8 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9980,21 +10147,21 @@ function _extends6() {
     }
     return target;
   };
-  return _extends6.apply(this, arguments);
+  return _extends8.apply(this, arguments);
 }
-__name(_extends6, "_extends");
+__name(_extends8, "_extends");
 var FormComponentInner = /* @__PURE__ */ __name((props) => {
   const intl = useIntlContext3();
   const { inputType: inputType1, disabled, clearField } = props;
   const renderClear = /* @__PURE__ */ __name(() => {
     if (clearableInputs.includes(inputType1) && !disabled) {
-      return /* @__PURE__ */ React10.createElement("button", {
+      return /* @__PURE__ */ React15.createElement("button", {
         className: "form-component-clear",
         title: intl.formatMessage({
           id: "forms.clear_field"
         }),
         onClick: clearField
-      }, /* @__PURE__ */ React10.createElement("span", null, "\u2715"));
+      }, /* @__PURE__ */ React15.createElement("span", null, "\u2715"));
     }
   }, "renderClear");
   const getProperties = /* @__PURE__ */ __name(() => {
@@ -10037,20 +10204,20 @@ var FormComponentInner = /* @__PURE__ */ __name((props) => {
   });
   const properties1 = getProperties();
   const FormInput = formInput;
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React15.createElement("div", {
     className: inputClass
-  }, /* @__PURE__ */ React10.createElement(FormInput, _extends6({}, properties1)), hasErrors ? /* @__PURE__ */ React10.createElement(FormComponents.FieldErrors, {
+  }, /* @__PURE__ */ React15.createElement(FormInput, _extends8({}, properties1)), hasErrors ? /* @__PURE__ */ React15.createElement(FormComponents.FieldErrors, {
     errors
-  }) : null, renderClear(), showCharsRemaining && /* @__PURE__ */ React10.createElement("div", {
+  }) : null, renderClear(), showCharsRemaining && /* @__PURE__ */ React15.createElement("div", {
     className: classNames("form-control-limit", {
       danger: charsRemaining < 10
     })
   }, charsRemaining));
 }, "FormComponentInner");
 
-// components/form/FormComponentLoader.tsx
+// components/form/core/FormComponentLoader.tsx
 init_esm_shims();
-import React11, { useEffect as useEffect4 } from "react";
+import React16, { useEffect as useEffect4 } from "react";
 import { useLazyQuery } from "@apollo/client";
 import isEmpty2 from "lodash/isEmpty.js";
 var FormComponentLoader = /* @__PURE__ */ __name((props) => {
@@ -10079,9 +10246,9 @@ var FormComponentLoader = /* @__PURE__ */ __name((props) => {
     throw new Error(error.toString());
   }
   if (loading) {
-    return /* @__PURE__ */ React11.createElement("div", {
+    return /* @__PURE__ */ React16.createElement("div", {
       className: "form-component-loader"
-    }, /* @__PURE__ */ React11.createElement(VulcanComponents.Loading, null));
+    }, /* @__PURE__ */ React16.createElement(VulcanComponents.Loading, null));
   }
   const extraProps = {
     data,
@@ -10095,50 +10262,23 @@ var FormComponentLoader = /* @__PURE__ */ __name((props) => {
       data
     }));
   }
-  if (!/* @__PURE__ */ React11.isValidElement(children)) {
+  if (!/* @__PURE__ */ React16.isValidElement(children)) {
     throw new Error("Children of FormComponentLoader must be a React element, got " + children);
   }
-  const fci = /* @__PURE__ */ React11.cloneElement(children, extraProps);
-  return /* @__PURE__ */ React11.createElement("div", {
+  const fci = /* @__PURE__ */ React16.cloneElement(children, extraProps);
+  return /* @__PURE__ */ React16.createElement("div", {
     className: "form-component-loader"
   }, fci);
 }, "FormComponentLoader");
 FormComponentLoader.propTypes = {};
 
-// components/form/FormElement.tsx
+// components/form/core/FormGroup.tsx
 init_esm_shims();
-import React12 from "react";
-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];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends7.apply(this, arguments);
-}
-__name(_extends7, "_extends");
-var FormElement = /* @__PURE__ */ React12.forwardRef((_a, ref) => {
-  var _b = _a, { children } = _b, otherProps = __objRest(_b, ["children"]);
-  const { submitForm } = useFormContext();
-  return /* @__PURE__ */ React12.createElement("form", _extends7({}, otherProps, {
-    onSubmit: submitForm,
-    ref
-  }), children);
-});
-
-// components/form/FormGroup.tsx
-init_esm_shims();
-import React13, { useState as useState3 } from "react";
+import React17, { useState as useState3 } from "react";
 import _some from "lodash/some.js";
 import { isAdmin } from "@vulcanjs/permissions";
-function _extends8() {
-  _extends8 = Object.assign || function(target) {
+function _extends9() {
+  _extends9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -10149,14 +10289,14 @@ function _extends8() {
     }
     return target;
   };
-  return _extends8.apply(this, arguments);
+  return _extends9.apply(this, arguments);
 }
-__name(_extends8, "_extends");
+__name(_extends9, "_extends");
 var FormGroupLayout = /* @__PURE__ */ __name((_a) => {
   var _b = _a, { anchorName, collapsed, hasErrors, group, document, toggle } = _b, props = __objRest(_b, ["anchorName", "collapsed", "hasErrors", "group", "document", "toggle"]);
-  return /* @__PURE__ */ React13.createElement("fieldset", _extends8({}, props));
+  return /* @__PURE__ */ React17.createElement("fieldset", _extends9({}, props));
 }, "FormGroupLayout");
-var FormGroupHeader = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React13.createElement("h2", _extends8({}, props)), "FormGroupHeader");
+var FormGroupHeader = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React17.createElement("h2", _extends9({}, props)), "FormGroupHeader");
 var FormGroup = /* @__PURE__ */ __name((props) => {
   const { name: name2, label, group, fields, hidden, document, currentUser, disabled, itemProperties, prefilledProps, formType } = props;
   const { errors, clearFieldErrors } = useFormContext();
@@ -10169,7 +10309,7 @@ var FormGroup = /* @__PURE__ */ __name((props) => {
   const isHidden = typeof hidden === "function" ? hidden(__spreadProps(__spreadValues({}, props), {
     document
   })) : hidden || false;
-  const heading = /* @__PURE__ */ React13.createElement(VulcanComponents.FormGroupHeader, {
+  const heading = /* @__PURE__ */ React17.createElement(VulcanComponents.FormGroupHeader, {
     toggle,
     label,
     collapsed: collapsed1,
@@ -10180,7 +10320,7 @@ var FormGroup = /* @__PURE__ */ __name((props) => {
     return null;
   }
   const anchorName = name2.split(".").length > 1 ? name2.split(".")[1] : name2;
-  return /* @__PURE__ */ React13.createElement(VulcanComponents.FormGroupLayout, {
+  return /* @__PURE__ */ React17.createElement(VulcanComponents.FormGroupLayout, {
     label,
     anchorName,
     toggle,
@@ -10190,7 +10330,7 @@ var FormGroup = /* @__PURE__ */ __name((props) => {
     heading: name2 === "default" ? null : heading,
     hasErrors,
     document
-  }, fields.map((field) => /* @__PURE__ */ React13.createElement(VulcanComponents.FormComponent, _extends8({
+  }, fields.map((field) => /* @__PURE__ */ React17.createElement(VulcanComponents.FormComponent, _extends9({
     key: field.name,
     disabled
   }, field, {
@@ -10203,12 +10343,12 @@ var FormGroup = /* @__PURE__ */ __name((props) => {
   }))));
 }, "FormGroup");
 
-// components/form/FormIntl.tsx
+// components/form/intl/FormIntl.tsx
 init_esm_shims();
-import React14 from "react";
+import React18 from "react";
 import omit2 from "lodash/omit.js";
-function _extends9() {
-  _extends9 = Object.assign || function(target) {
+function _extends10() {
+  _extends10 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -10219,13 +10359,13 @@ function _extends9() {
     }
     return target;
   };
-  return _extends9.apply(this, arguments);
+  return _extends10.apply(this, arguments);
 }
-__name(_extends9, "_extends");
-var FormIntlLayout = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React14.createElement("div", {
+__name(_extends10, "_extends");
+var FormIntlLayout = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React18.createElement("div", {
   className: "form-intl"
 }, children), "FormIntlLayout");
-var FormIntlItemLayout = /* @__PURE__ */ __name(({ locale, children }) => /* @__PURE__ */ React14.createElement("div", {
+var FormIntlItemLayout = /* @__PURE__ */ __name(({ locale, children }) => /* @__PURE__ */ React18.createElement("div", {
   className: `form-intl-${locale.id}`
 }, children), "FormIntlItemLayout");
 var FormIntl = /* @__PURE__ */ __name((props) => {
@@ -10237,133 +10377,22 @@ var FormIntl = /* @__PURE__ */ __name((props) => {
   }, "getLocalePath");
   const { name: name2 } = props;
   const properties = omit2(props, "value", "inputProperties", "intlInput", "nestedInput");
-  return /* @__PURE__ */ React14.createElement(FormComponents.FormIntlLayout, null, Locales.map((locale, i) => /* @__PURE__ */ React14.createElement(FormComponents.FormIntlItemLayout, {
+  return /* @__PURE__ */ React18.createElement(FormComponents.FormIntlLayout, null, Locales.map((locale, i) => /* @__PURE__ */ React18.createElement(FormComponents.FormIntlItemLayout, {
     key: locale.id,
     locale
-  }, /* @__PURE__ */ React14.createElement(FormComponents.FormComponent, _extends9({}, properties, {
+  }, /* @__PURE__ */ React18.createElement(FormComponents.FormComponent, _extends10({}, properties, {
     label: getLabel2(name2, locale.id),
     path: getLocalePath(i),
     locale: locale.id
   })))));
 }, "FormIntl");
 
-// components/form/FormErrors.tsx
+// components/form/nested/index.ts
 init_esm_shims();
-import React15 from "react";
-var FormErrors = /* @__PURE__ */ __name(() => {
-  const VulcanComponents = useVulcanComponents();
-  const { errors } = useFormContext();
-  return /* @__PURE__ */ React15.createElement("div", {
-    className: "form-errors"
-  }, !!errors.length && /* @__PURE__ */ React15.createElement(VulcanComponents.Alert, {
-    className: "flash-message",
-    variant: "danger"
-  }, /* @__PURE__ */ React15.createElement("ul", null, errors.map((error, index) => /* @__PURE__ */ React15.createElement("li", {
-    key: index
-  }, /* @__PURE__ */ React15.createElement(VulcanComponents.FormError, {
-    error,
-    errorContext: "form"
-  }))))));
-}, "FormErrors");
 
-// components/form/FormSubmit.tsx
+// components/form/nested/FormNestedArray.tsx
 init_esm_shims();
-var import_prop_types = __toESM(require_prop_types(), 1);
-import React16 from "react";
-import { canDeleteDocument } from "@vulcanjs/permissions";
-var FormSubmit = /* @__PURE__ */ __name(({
-  submitLabel,
-  cancelLabel,
-  cancelCallback,
-  revertLabel,
-  revertCallback,
-  document,
-  deleteDocument,
-  model,
-  currentUser
-}) => {
-  const VulcanComponents = useVulcanComponents();
-  const { clearForm } = useFormContext();
-  return /* @__PURE__ */ React16.createElement("div", {
-    className: "form-submit"
-  }, /* @__PURE__ */ React16.createElement(VulcanComponents.Button, {
-    type: "submit",
-    variant: "primary"
-  }, submitLabel ? submitLabel : /* @__PURE__ */ React16.createElement(VulcanComponents.FormattedMessage, {
-    id: "forms.submit",
-    defaultMessage: "Submit"
-  })), cancelCallback ? /* @__PURE__ */ React16.createElement("a", {
-    className: "form-cancel",
-    onClick: (e) => {
-      e.preventDefault();
-      cancelCallback(document);
-    }
-  }, cancelLabel ? cancelLabel : /* @__PURE__ */ React16.createElement(VulcanComponents.FormattedMessage, {
-    id: "forms.cancel",
-    defaultMessage: "Cancel"
-  })) : null, revertCallback ? /* @__PURE__ */ React16.createElement("a", {
-    className: "form-cancel",
-    onClick: (e) => {
-      e.preventDefault();
-      clearForm();
-      revertCallback(document);
-    }
-  }, revertLabel ? revertLabel : /* @__PURE__ */ React16.createElement(VulcanComponents.FormattedMessage, {
-    id: "forms.revert",
-    defaultMessage: "Revert"
-  })) : null, deleteDocument && canDeleteDocument({
-    user: currentUser,
-    document,
-    model
-  }) ? /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement("hr", null), /* @__PURE__ */ React16.createElement(VulcanComponents.Button, {
-    variant: "link",
-    onClick: deleteDocument,
-    className: `delete-link ${model.name}-delete-link`
-  }, /* @__PURE__ */ React16.createElement(VulcanComponents.Icon, {
-    name: "close"
-  }), " ", /* @__PURE__ */ React16.createElement(VulcanComponents.FormattedMessage, {
-    id: "forms.delete",
-    defaultMessage: "Delete"
-  }))) : null);
-}, "FormSubmit");
-FormSubmit.propTypes = {
-  submitLabel: import_prop_types.default.node,
-  cancelLabel: import_prop_types.default.node,
-  cancelCallback: import_prop_types.default.func,
-  revertLabel: import_prop_types.default.node,
-  revertCallback: import_prop_types.default.func,
-  document: import_prop_types.default.object,
-  deleteDocument: import_prop_types.default.func,
-  collectionName: import_prop_types.default.string,
-  classes: import_prop_types.default.object
-};
-
-// components/form/FormLayout.tsx
-init_esm_shims();
-import React17 from "react";
-function _extends10() {
-  _extends10 = 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 _extends10.apply(this, arguments);
-}
-__name(_extends10, "_extends");
-var FormLayout = /* @__PURE__ */ __name(({ commonProps, formProps, repeatErrors, submitProps, children }) => {
-  const VulcanComponents = useVulcanComponents();
-  return /* @__PURE__ */ React17.createElement(VulcanComponents.FormElement, _extends10({}, formProps), /* @__PURE__ */ React17.createElement(VulcanComponents.FormErrors, _extends10({}, commonProps)), children, repeatErrors && /* @__PURE__ */ React17.createElement(VulcanComponents.FormErrors, _extends10({}, commonProps)), /* @__PURE__ */ React17.createElement(VulcanComponents.FormSubmit, _extends10({}, commonProps, submitProps)));
-}, "FormLayout");
-
-// components/form/FormNestedArray.tsx
-init_esm_shims();
-import React18, { useEffect as useEffect5 } from "react";
+import React19, { useEffect as useEffect5 } from "react";
 import _omit from "lodash/omit.js";
 import _get from "lodash/get.js";
 function _extends11() {
@@ -10384,12 +10413,12 @@ __name(_extends11, "_extends");
 var FormNestedArrayInnerLayout = /* @__PURE__ */ __name((props) => {
   const { label, children, addItem, BeforeComponent, AfterComponent } = props;
   const FormComponents = useVulcanComponents();
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     className: "form-nested-array-inner-layout"
-  }, /* @__PURE__ */ React18.createElement(BeforeComponent, _extends11({}, props)), children, /* @__PURE__ */ React18.createElement(FormComponents.FormNestedDivider, {
+  }, /* @__PURE__ */ React19.createElement(BeforeComponent, _extends11({}, props)), children, /* @__PURE__ */ React19.createElement(FormComponents.FormNestedDivider, {
     label,
     addItem
-  }), /* @__PURE__ */ React18.createElement(AfterComponent, _extends11({}, props)));
+  }), /* @__PURE__ */ React19.createElement(AfterComponent, _extends11({}, props)));
 }, "FormNestedArrayInnerLayout");
 var FormNestedArray = /* @__PURE__ */ __name((props) => {
   const { updateCurrentValues, deletedValues, errors } = useFormContext();
@@ -10436,18 +10465,18 @@ var FormNestedArray = /* @__PURE__ */ __name((props) => {
   properties.addItem = !maxCount || arrayLength < maxCount ? addItem : null;
   properties.nestedArrayErrors = errors.filter((error) => error.path && error.path === path1);
   properties.hasErrors = !!(properties.nestedArrayErrors && properties.nestedArrayErrors.length);
-  return /* @__PURE__ */ React18.createElement(FormComponents.FormNestedArrayLayout, _extends11({}, properties), value.map((subDocument, i) => {
+  return /* @__PURE__ */ React19.createElement(FormComponents.FormNestedArrayLayout, _extends11({}, properties), value.map((subDocument, i) => {
     if (isDeleted(i))
       return null;
     const path = `${props.path}.${i}`;
     const visibleItemIndex = visibleItemIndexes[i];
-    return /* @__PURE__ */ React18.createElement(FormComponents.FormNestedArrayInnerLayout, _extends11({}, arrayField, {
+    return /* @__PURE__ */ React19.createElement(FormComponents.FormNestedArrayInnerLayout, _extends11({}, arrayField, {
       key: path,
       addItem,
       itemIndex: i,
       visibleItemIndex,
       path
-    }), /* @__PURE__ */ React18.createElement(FormComponents.FormNestedItem, _extends11({}, properties, {
+    }), /* @__PURE__ */ React19.createElement(FormComponents.FormNestedItem, _extends11({}, properties, {
       itemIndex: i,
       visibleItemIndex,
       path,
@@ -10458,29 +10487,29 @@ var FormNestedArray = /* @__PURE__ */ __name((props) => {
     })));
   }));
 }, "FormNestedArray");
-var IconAdd = /* @__PURE__ */ __name(({ width = 24, height = 24 }) => /* @__PURE__ */ React18.createElement("svg", {
+var IconAdd = /* @__PURE__ */ __name(({ width = 24, height = 24 }) => /* @__PURE__ */ React19.createElement("svg", {
   width,
   height,
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
-}, /* @__PURE__ */ React18.createElement("path", {
+}, /* @__PURE__ */ React19.createElement("path", {
   fill: "currentColor",
   d: "M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"
 })), "IconAdd");
-var IconRemove = /* @__PURE__ */ __name(({ width = 24, height = 24 }) => /* @__PURE__ */ React18.createElement("svg", {
+var IconRemove = /* @__PURE__ */ __name(({ width = 24, height = 24 }) => /* @__PURE__ */ React19.createElement("svg", {
   width,
   height,
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
-}, /* @__PURE__ */ React18.createElement("path", {
+}, /* @__PURE__ */ React19.createElement("path", {
   fill: "currentColor",
   d: "M424 318.2c13.3 0 24-10.7 24-24v-76.4c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h400z"
 })), "IconRemove");
 
-// components/form/FormNestedArrayLayout.tsx
+// components/form/nested/FormNestedArrayLayout.tsx
 init_esm_shims();
 var import_prop_types2 = __toESM(require_prop_types(), 1);
-import React19 from "react";
+import React20 from "react";
 function _extends12() {
   _extends12 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -10499,24 +10528,24 @@ __name(_extends12, "_extends");
 var FormNestedArrayLayout = /* @__PURE__ */ __name((props) => {
   const { hasErrors, nestedArrayErrors, label, addItem, BeforeComponent, AfterComponent, children } = props;
   const VulcanComponents = useVulcanComponents();
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React20.createElement("div", {
     className: `form-group row form-nested ${hasErrors ? "input-error" : ""}`
-  }, BeforeComponent && /* @__PURE__ */ React19.createElement(BeforeComponent, _extends12({}, props)), /* @__PURE__ */ React19.createElement("label", {
+  }, BeforeComponent && /* @__PURE__ */ React20.createElement(BeforeComponent, _extends12({}, props)), /* @__PURE__ */ React20.createElement("label", {
     className: "control-label col-sm-3"
-  }, label), /* @__PURE__ */ React19.createElement("div", {
+  }, label), /* @__PURE__ */ React20.createElement("div", {
     className: "col-sm-9"
-  }, children, addItem && /* @__PURE__ */ React19.createElement(VulcanComponents.Button, {
+  }, children, addItem && /* @__PURE__ */ React20.createElement(VulcanComponents.Button, {
     className: "form-nested-button form-nested-add",
     size: "sm",
     variant: "success",
     onClick: addItem
-  }, /* @__PURE__ */ React19.createElement(VulcanComponents.IconAdd, {
+  }, /* @__PURE__ */ React20.createElement(VulcanComponents.IconAdd, {
     height: 12,
     width: 12
-  })), props.hasErrors ? /* @__PURE__ */ React19.createElement(VulcanComponents.FieldErrors, {
+  })), props.hasErrors ? /* @__PURE__ */ React20.createElement(VulcanComponents.FieldErrors, {
     key: "form-nested-errors",
     errors: nestedArrayErrors
-  }) : null), AfterComponent && /* @__PURE__ */ React19.createElement(AfterComponent, _extends12({}, props)));
+  }) : null), AfterComponent && /* @__PURE__ */ React20.createElement(AfterComponent, _extends12({}, props)));
 }, "FormNestedArrayLayout");
 FormNestedArrayLayout.propTypes = {
   hasErrors: import_prop_types2.default.bool.isRequired,
@@ -10530,10 +10559,10 @@ FormNestedArrayLayout.propTypes = {
   children: import_prop_types2.default.node
 };
 
-// components/form/FormNestedItem.tsx
+// components/form/nested/FormNestedItem.tsx
 init_esm_shims();
 var import_prop_types3 = __toESM(require_prop_types(), 1);
-import React20 from "react";
+import React21 from "react";
 import { intlShape } from "@vulcanjs/react-i18n";
 import { useIntlContext as useIntlContext4 } from "@vulcanjs/react-i18n";
 function _extends13() {
@@ -10551,16 +10580,16 @@ function _extends13() {
   return _extends13.apply(this, arguments);
 }
 __name(_extends13, "_extends");
-var FormNestedItemLayout = /* @__PURE__ */ __name(({ content, removeButton }) => /* @__PURE__ */ React20.createElement("div", {
+var FormNestedItemLayout = /* @__PURE__ */ __name(({ content, removeButton }) => /* @__PURE__ */ React21.createElement("div", {
   className: "form-nested-item"
-}, /* @__PURE__ */ React20.createElement("div", {
+}, /* @__PURE__ */ React21.createElement("div", {
   className: "form-nested-item-inner"
 }, content), removeButton && [
-  /* @__PURE__ */ React20.createElement("div", {
+  /* @__PURE__ */ React21.createElement("div", {
     key: "remove-button",
     className: "form-nested-item-remove"
   }, removeButton),
-  /* @__PURE__ */ React20.createElement("div", {
+  /* @__PURE__ */ React21.createElement("div", {
     key: "remove-button-overlay",
     className: "form-nested-item-deleted-overlay"
   })
@@ -10574,9 +10603,9 @@ var FormNestedItem = /* @__PURE__ */ __name((_a) => {
   const VulcanComponents = useVulcanComponents();
   const intl = useIntlContext4();
   const isArray = typeof itemIndex !== "undefined";
-  return /* @__PURE__ */ React20.createElement(VulcanComponents.FormNestedItemLayout, {
+  return /* @__PURE__ */ React21.createElement(VulcanComponents.FormNestedItemLayout, {
     content: nestedFields.map((field, i) => {
-      return /* @__PURE__ */ React20.createElement(VulcanComponents.FormComponent, _extends13({
+      return /* @__PURE__ */ React21.createElement(VulcanComponents.FormComponent, _extends13({
         key: i
       }, props, field, {
         path: `${path}.${field.name}`,
@@ -10584,10 +10613,10 @@ var FormNestedItem = /* @__PURE__ */ __name((_a) => {
       }));
     }),
     removeButton: isArray && !hideRemove && [
-      /* @__PURE__ */ React20.createElement("div", {
+      /* @__PURE__ */ React21.createElement("div", {
         key: "remove-button",
         className: "form-nested-item-remove"
-      }, /* @__PURE__ */ React20.createElement(VulcanComponents.Button, {
+      }, /* @__PURE__ */ React21.createElement(VulcanComponents.Button, {
         className: "form-nested-button",
         variant: "danger",
         size: "sm",
@@ -10601,11 +10630,11 @@ var FormNestedItem = /* @__PURE__ */ __name((_a) => {
         }, {
           label
         })
-      }, /* @__PURE__ */ React20.createElement(VulcanComponents.IconRemove, {
+      }, /* @__PURE__ */ React21.createElement(VulcanComponents.IconRemove, {
         height: 12,
         width: 12
       }))),
-      /* @__PURE__ */ React20.createElement("div", {
+      /* @__PURE__ */ React21.createElement("div", {
         key: "remove-button-overlay",
         className: "form-nested-item-deleted-overlay"
       })
@@ -10623,32 +10652,17 @@ FormNestedItem.contextTypes = {
   intl: intlShape
 };
 
-// components/form/FormNestedDivider.tsx
+// components/form/nested/FormNestedDivider.tsx
 init_esm_shims();
 var import_prop_types4 = __toESM(require_prop_types(), 1);
-import React21 from "react";
-var FormNestedDivider = /* @__PURE__ */ __name(({ label, addItem }) => /* @__PURE__ */ React21.createElement("div", null), "FormNestedDivider");
+import React22 from "react";
+var FormNestedDivider = /* @__PURE__ */ __name(({ label, addItem }) => /* @__PURE__ */ React22.createElement("div", null), "FormNestedDivider");
 FormNestedDivider.propTypes = {
   label: import_prop_types4.default.string,
   addItem: import_prop_types4.default.func
 };
 
-// components/form/FieldErrors.tsx
-init_esm_shims();
-import React22 from "react";
-var FieldErrors = /* @__PURE__ */ __name(({ errors }) => {
-  const VulcanComponents = useVulcanComponents();
-  return /* @__PURE__ */ React22.createElement("ul", {
-    className: "form-input-errors"
-  }, errors.map((error, index) => /* @__PURE__ */ React22.createElement("li", {
-    key: index
-  }, /* @__PURE__ */ React22.createElement(VulcanComponents.FormError, {
-    error,
-    errorContext: "field"
-  }))));
-}, "FieldErrors");
-
-// components/form/FormNestedObject.tsx
+// components/form/nested/FormNestedObject.tsx
 init_esm_shims();
 var import_prop_types5 = __toESM(require_prop_types(), 1);
 import React23 from "react";
@@ -10713,34 +10727,12 @@ FormNestedObject.propTypes = {
   formComponents: import_prop_types5.default.object
 };
 
-// components/form/FormOptionLabel.tsx
-init_esm_shims();
-import React24 from "react";
-var FormOptionLabel = /* @__PURE__ */ __name(({ option }) => {
-  const { label } = option;
-  return /* @__PURE__ */ React24.createElement("span", {
-    className: "form-option-label"
-  }, label);
-}, "FormOptionLabel");
-
 // components/form/inputs/index.ts
 init_esm_shims();
 
-// components/form/inputs/FormItem.tsx
-init_esm_shims();
-import React25 from "react";
-var FormItem = /* @__PURE__ */ __name((props) => {
-  const { inputProperties, label, name: name2 } = props;
-  return /* @__PURE__ */ React25.createElement("div", {
-    className: `form-item ${name2}`
-  }, /* @__PURE__ */ React25.createElement("label", {
-    htmlFor: name2
-  }, label), props.children);
-}, "FormItem");
-
 // components/form/inputs/BasicInputs.tsx
 init_esm_shims();
-import React26 from "react";
+import React24 from "react";
 function _extends15() {
   _extends15 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -10760,49 +10752,49 @@ var HTMLInputAdapter = /* @__PURE__ */ __name((props) => {
   const Components2 = useVulcanComponents();
   const { inputProperties = {}, itemProperties = {}, path } = props;
   const _a = inputProperties, { label, name: name2 } = _a, otherInputProperties = __objRest(_a, ["label", "name"]);
-  return /* @__PURE__ */ React26.createElement(Components2.FormItem, _extends15({
+  return /* @__PURE__ */ React24.createElement(Components2.FormItem, _extends15({
     name: name2,
     path,
     label,
     inputProperties
-  }, itemProperties), /* @__PURE__ */ React26.createElement("input", _extends15({}, otherInputProperties, {
+  }, itemProperties), /* @__PURE__ */ React24.createElement("input", _extends15({}, otherInputProperties, {
     id: name2,
     name: name2,
     type: props.type
   })));
 }, "HTMLInputAdapter");
-var FormComponentDefault = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentDefault = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "text"
 }, props)), "FormComponentDefault");
-var FormComponentPassword = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentPassword = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "password"
 }, props)), "FormComponentPassword");
-var FormComponentNumber = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentNumber = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "number"
 }, props)), "FormComponentNumber");
-var FormComponentUrl = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentUrl = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "url"
 }, props)), "FormComponentUrl");
-var FormComponentEmail = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentEmail = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "email"
 }, props)), "FormComponentEmail");
 var FormComponentCheckbox = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+  return /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
     type: "checkbox"
   }, props));
 }, "FormComponentCheckbox");
-var FormComponentDate = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentDate = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "date"
 }, props)), "FormComponentDate");
-var FormComponentDateTime = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentDateTime = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "datetime-local"
 }, props)), "FormComponentDateTime");
-var FormComponentTime = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React26.createElement(HTMLInputAdapter, _extends15({
+var FormComponentTime = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React24.createElement(HTMLInputAdapter, _extends15({
   type: "time"
 }, props)), "FormComponentTime");
 var FormComponentStaticText = /* @__PURE__ */ __name((props) => {
   const { inputProperties } = props;
-  return /* @__PURE__ */ React26.createElement("input", _extends15({}, inputProperties, {
+  return /* @__PURE__ */ React24.createElement("input", _extends15({}, inputProperties, {
     disabled: true
   }));
 }, "FormComponentStaticText");
@@ -10812,19 +10804,19 @@ var FormComponentTextarea = /* @__PURE__ */ __name((props) => {
   const Components2 = useVulcanComponents();
   const { inputProperties = {}, itemProperties = {}, path } = props;
   const _a = inputProperties, { label, name: name2 } = _a, otherInputProperties = __objRest(_a, ["label", "name"]);
-  return /* @__PURE__ */ React26.createElement(Components2.FormItem, _extends15({
+  return /* @__PURE__ */ React24.createElement(Components2.FormItem, _extends15({
     name: name2,
     path,
     label,
     inputProperties
-  }, itemProperties), /* @__PURE__ */ React26.createElement("label", {
+  }, itemProperties), /* @__PURE__ */ React24.createElement("label", {
     htmlFor: "name"
-  }, label), /* @__PURE__ */ React26.createElement("textarea", _extends15({}, inputProperties)));
+  }, label), /* @__PURE__ */ React24.createElement("textarea", _extends15({}, inputProperties)));
 }, "FormComponentTextarea");
 
 // components/form/inputs/RadioGroup.tsx
 init_esm_shims();
-import React27 from "react";
+import React25 from "react";
 function _extends16() {
   _extends16 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -10846,19 +10838,19 @@ var FormComponentRadioGroup = /* @__PURE__ */ __name((props) => {
   if (!Array.isArray(options))
     throw new Error("RadioGroup not yet supporting functional options");
   const Components2 = useVulcanComponents();
-  return /* @__PURE__ */ React27.createElement(Components2.FormItem, _extends16({
+  return /* @__PURE__ */ React25.createElement(Components2.FormItem, _extends16({
     path,
     name: name2,
     label,
     inputProperties
   }, itemProperties), options.map((option) => {
     const { value, label: label2 } = option;
-    return /* @__PURE__ */ React27.createElement("div", {
+    return /* @__PURE__ */ React25.createElement("div", {
       key: value,
       className: "form-radio-group-radio-item"
-    }, /* @__PURE__ */ React27.createElement(Components2.FormOptionLabel, {
+    }, /* @__PURE__ */ React25.createElement(Components2.FormOptionLabel, {
       option
-    }), /* @__PURE__ */ React27.createElement("input", _extends16({
+    }), /* @__PURE__ */ React25.createElement("input", _extends16({
       type: "radio",
       id: value,
       name: name2,
@@ -10872,7 +10864,7 @@ var FormComponentRadioGroup = /* @__PURE__ */ __name((props) => {
 
 // components/form/inputs/Checkboxgroup.tsx
 init_esm_shims();
-import React28, { useState as useState4 } from "react";
+import React26, { useState as useState4 } from "react";
 import without2 from "lodash/without.js";
 import omit3 from "lodash/omit.js";
 import uniq2 from "lodash/uniq.js";
@@ -10924,9 +10916,9 @@ var OtherComponent = /* @__PURE__ */ __name(({ value, path }) => {
   const textFieldItemProperties = {
     layout: "elementOnly"
   };
-  return /* @__PURE__ */ React28.createElement("div", {
+  return /* @__PURE__ */ React26.createElement("div", {
     className: "form-option-other"
-  }, /* @__PURE__ */ React28.createElement(Components2.FormComponentCheckbox, {
+  }, /* @__PURE__ */ React26.createElement(Components2.FormComponentCheckbox, {
     layout: "elementOnly",
     label: "Other",
     value: showOther,
@@ -10949,7 +10941,7 @@ var OtherComponent = /* @__PURE__ */ __name(({ value, path }) => {
         });
       }
     }
-  }), showOther && /* @__PURE__ */ React28.createElement(Components2.FormComponentText, {
+  }), showOther && /* @__PURE__ */ React26.createElement(Components2.FormComponentText, {
     inputProperties: textFieldInputProperties,
     itemProperties: textFieldItemProperties
   }));
@@ -10963,23 +10955,23 @@ var FormComponentCheckboxGroup = /* @__PURE__ */ __name((props) => {
     throw new Error("FormComponentCheckboxGroup not yet supporting functional options");
   const value = valueFromProps ? uniq2(valueFromProps.filter((v) => isOtherValue(v) || options.map((o) => o.value).includes(v))) : [];
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ React28.createElement(Components2.FormItem, _extends17({
+  return /* @__PURE__ */ React26.createElement(Components2.FormItem, _extends17({
     name: name2,
     label,
     path,
     inputProperties
-  }, itemProperties), /* @__PURE__ */ React28.createElement("div", {
+  }, itemProperties), /* @__PURE__ */ React26.createElement("div", {
     className: "form-item-options"
   }, options.map((option, i) => {
     const isChecked1 = value.includes(option.value);
     const checkClass = hasValue ? isChecked1 ? "form-check-checked" : "form-check-unchecked" : "";
-    return /* @__PURE__ */ React28.createElement("div", {
+    return /* @__PURE__ */ React26.createElement("div", {
       className: "form-item-option",
       key: option.value
-    }, /* @__PURE__ */ React28.createElement(Components2.FormOptionLabel, {
+    }, /* @__PURE__ */ React26.createElement(Components2.FormOptionLabel, {
       option,
       name: name2
-    }), /* @__PURE__ */ React28.createElement("input", _extends17({
+    }), /* @__PURE__ */ React26.createElement("input", _extends17({
       type: "checkbox"
     }, omit3(inputProperties, "value"), {
       name: name2,
@@ -10998,7 +10990,7 @@ var FormComponentCheckboxGroup = /* @__PURE__ */ __name((props) => {
       },
       className: checkClass
     })));
-  }), itemProperties.showOther && /* @__PURE__ */ React28.createElement(OtherComponent, {
+  }), itemProperties.showOther && /* @__PURE__ */ React26.createElement(OtherComponent, {
     value,
     path
   })));
@@ -11006,7 +10998,7 @@ var FormComponentCheckboxGroup = /* @__PURE__ */ __name((props) => {
 
 // components/form/inputs/SelectInputs.tsx
 init_esm_shims();
-import React29 from "react";
+import React27 from "react";
 function _extends18() {
   _extends18 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -11028,29 +11020,52 @@ var HTMLSelectAdapter = /* @__PURE__ */ __name((props) => {
   if (!Array.isArray(options))
     throw new Error("HTMLSelectAdapater not yet supporting functional options");
   const Components2 = useVulcanComponents();
-  return /* @__PURE__ */ React29.createElement(Components2.FormItem, _extends18({
+  return /* @__PURE__ */ React27.createElement(Components2.FormItem, _extends18({
     name: name2,
     label: label1,
     path,
     inputProperties
-  }, itemProperties), /* @__PURE__ */ React29.createElement("select", _extends18({
+  }, itemProperties), /* @__PURE__ */ React27.createElement("select", _extends18({
     multiple
   }, inputProperties, {
     value: inputProperties.value === null ? void 0 : inputProperties.value
-  }), options.map(({ label, value }) => /* @__PURE__ */ React29.createElement("option", {
+  }), options.map(({ label, value }) => /* @__PURE__ */ React27.createElement("option", {
     key: value,
     label,
     value
   }))));
 }, "HTMLSelectAdapter");
-var FormComponentSelect = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React29.createElement(HTMLSelectAdapter, _extends18({}, props)), "FormComponentSelect");
+var FormComponentSelect = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React27.createElement(HTMLSelectAdapter, _extends18({}, props)), "FormComponentSelect");
 var FormComponentSelectMultiple = /* @__PURE__ */ __name((props) => {
   const Components2 = useVulcanComponents();
-  return /* @__PURE__ */ React29.createElement(Components2.FormComponentSelect, _extends18({
+  return /* @__PURE__ */ React27.createElement(Components2.FormComponentSelect, _extends18({
     multiple: true
   }, props));
 }, "FormComponentSelectMultiple");
 
+// components/form/inputs/FormItem.tsx
+init_esm_shims();
+import React28 from "react";
+var FormItem = /* @__PURE__ */ __name((props) => {
+  const { inputProperties, label, name: name2 } = props;
+  return /* @__PURE__ */ React28.createElement("div", {
+    className: `form-item ${name2}`
+  }, /* @__PURE__ */ React28.createElement("label", {
+    htmlFor: name2
+  }, label), props.children);
+}, "FormItem");
+
+// components/form/inputs/FormOptionLabel.tsx
+init_esm_shims();
+import React29 from "react";
+var FormOptionLabel = /* @__PURE__ */ __name(({ option, name: name2 }) => {
+  const { label } = option;
+  return /* @__PURE__ */ React29.createElement("label", {
+    htmlFor: name2,
+    className: "form-option-label"
+  }, label);
+}, "FormOptionLabel");
+
 // components/form/inputs/AutocompleteMultiple.tsx
 init_esm_shims();
 import { AsyncTypeahead } from "react-bootstrap-typeahead";
@@ -12730,7 +12745,7 @@ var defaultCellComponents = {
 init_esm_shims();
 import { FormattedMessage } from "@vulcanjs/react-i18n";
 
-// components/form/core/Button.tsx
+// components/core/Button.tsx
 init_esm_shims();
 import React56 from "react";
 function _extends33() {
@@ -12753,7 +12768,7 @@ var Button = /* @__PURE__ */ __name((_a) => {
   return /* @__PURE__ */ React56.createElement("button", _extends33({}, props), children);
 }, "Button");
 
-// components/form/core/Loading.tsx
+// components/core/Loading.tsx
 init_esm_shims();
 import React57 from "react";
 var Loading = /* @__PURE__ */ __name(() => /* @__PURE__ */ React57.createElement("span", {