@rjsf/core 6.0.0-alpha.0 → 6.0.0-beta.1

package/dist/index.esm.js

@@ -3,22 +3,26 @@ import { Component as Component5, createRef } from "react";
 import {
   createSchemaUtils,
   deepEquals as deepEquals3,
-  getTemplate as getTemplate20,
-  getUiOptions as getUiOptions12,
-  isObject as isObject5,
-  mergeObjects as mergeObjects2,
+  getChangedFields,
+  getTemplate as getTemplate24,
+  getUiOptions as getUiOptions16,
+  isObject as isObject6,
+  mergeObjects as mergeObjects3,
   NAME_KEY,
   RJSF_ADDITIONAL_PROPERTIES_FLAG,
   shouldRender,
   SUBMIT_BTN_OPTIONS_KEY,
   toErrorList,
   UI_GLOBAL_OPTIONS_KEY,
-  UI_OPTIONS_KEY as UI_OPTIONS_KEY2,
-  validationDataMerge
+  UI_OPTIONS_KEY as UI_OPTIONS_KEY3,
+  validationDataMerge,
+  createErrorHandler,
+  unwrapErrorHandler
 } from "@rjsf/utils";
 import _forEach from "lodash/forEach";
 import _get from "lodash/get";
 import _isEmpty from "lodash/isEmpty";
+import _isNil from "lodash/isNil";
 import _pick from "lodash/pick";
 import _toPath from "lodash/toPath";
 
@@ -68,189 +72,6 @@ var ArrayField = class extends Component {
    */
   constructor(props) {
     super(props);
-    /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
-     * that the schema is fixed and allows additional items.
-     */
-    this._getNewFormDataRow = () => {
-      const { schema, registry } = this.props;
-      const { schemaUtils } = registry;
-      let itemSchema = schema.items;
-      if (isFixedItems(schema) && allowAdditionalItems(schema)) {
-        itemSchema = schema.additionalItems;
-      }
-      return schemaUtils.getDefaultFormState(itemSchema);
-    };
-    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
-     * keyed data
-     *
-     * @param event - The event for the click
-     */
-    this.onAddClick = (event) => {
-      this._handleAddClick(event);
-    };
-    /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
-     * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
-     * form data converted from the keyed data
-     *
-     * @param index - The index at which the add button is clicked
-     */
-    this.onAddIndexClick = (index) => {
-      return (event) => {
-        this._handleAddClick(event, index);
-      };
-    };
-    /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
-     * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
-     * form data converted from the keyed data
-     *
-     * @param index - The index at which the copy button is clicked
-     */
-    this.onCopyIndexClick = (index) => {
-      return (event) => {
-        if (event) {
-          event.preventDefault();
-        }
-        const { onChange, errorSchema } = this.props;
-        const { keyedFormData } = this.state;
-        let newErrorSchema;
-        if (errorSchema) {
-          newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
-            if (i <= index) {
-              set(newErrorSchema, [i], errorSchema[idx]);
-            } else if (i > index) {
-              set(newErrorSchema, [i + 1], errorSchema[idx]);
-            }
-          }
-        }
-        const newKeyedFormDataRow = {
-          key: generateRowId(),
-          item: cloneDeep(keyedFormData[index].item)
-        };
-        const newKeyedFormData = [...keyedFormData];
-        if (index !== void 0) {
-          newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
-        } else {
-          newKeyedFormData.push(newKeyedFormDataRow);
-        }
-        this.setState(
-          {
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-        );
-      };
-    };
-    /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
-     * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
-     * from the keyed data
-     *
-     * @param index - The index at which the remove button is clicked
-     */
-    this.onDropIndexClick = (index) => {
-      return (event) => {
-        if (event) {
-          event.preventDefault();
-        }
-        const { onChange, errorSchema } = this.props;
-        const { keyedFormData } = this.state;
-        let newErrorSchema;
-        if (errorSchema) {
-          newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
-            if (i < index) {
-              set(newErrorSchema, [i], errorSchema[idx]);
-            } else if (i > index) {
-              set(newErrorSchema, [i - 1], errorSchema[idx]);
-            }
-          }
-        }
-        const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-        this.setState(
-          {
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-        );
-      };
-    };
-    /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
-     * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
-     * plain form data converted from the keyed data
-     *
-     * @param index - The index of the item to move
-     * @param newIndex - The index to where the item is to be moved
-     */
-    this.onReorderClick = (index, newIndex) => {
-      return (event) => {
-        if (event) {
-          event.preventDefault();
-          event.currentTarget.blur();
-        }
-        const { onChange, errorSchema } = this.props;
-        let newErrorSchema;
-        if (errorSchema) {
-          newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
-            if (i == index) {
-              set(newErrorSchema, [newIndex], errorSchema[index]);
-            } else if (i == newIndex) {
-              set(newErrorSchema, [index], errorSchema[newIndex]);
-            } else {
-              set(newErrorSchema, [idx], errorSchema[i]);
-            }
-          }
-        }
-        const { keyedFormData } = this.state;
-        function reOrderArray() {
-          const _newKeyedFormData = keyedFormData.slice();
-          _newKeyedFormData.splice(index, 1);
-          _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-          return _newKeyedFormData;
-        }
-        const newKeyedFormData = reOrderArray();
-        this.setState(
-          {
-            keyedFormData: newKeyedFormData
-          },
-          () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
-        );
-      };
-    };
-    /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
-     * `onChange` callback with the updated form data
-     *
-     * @param index - The index of the item being changed
-     */
-    this.onChangeForIndex = (index) => {
-      return (value, newErrorSchema, id) => {
-        const { formData, onChange, errorSchema } = this.props;
-        const arrayData = Array.isArray(formData) ? formData : [];
-        const newFormData = arrayData.map((item, i) => {
-          const jsonValue = typeof value === "undefined" ? null : value;
-          return index === i ? jsonValue : item;
-        });
-        onChange(
-          newFormData,
-          errorSchema && errorSchema && {
-            ...errorSchema,
-            [index]: newErrorSchema
-          },
-          id
-        );
-      };
-    };
-    /** Callback handler used to change the value for a checkbox */
-    this.onSelectChange = (value) => {
-      const { onChange, idSchema } = this.props;
-      onChange(value, void 0, idSchema && idSchema.$id);
-    };
     const { formData = [] } = props;
     const keyedFormData = generateKeyedFormData(formData);
     this.state = {
@@ -325,6 +146,18 @@ var ArrayField = class extends Component {
     }
     return addable;
   }
+  /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+   * that the schema is fixed and allows additional items.
+   */
+  _getNewFormDataRow = () => {
+    const { schema, registry } = this.props;
+    const { schemaUtils } = registry;
+    let itemSchema = schema.items;
+    if (isFixedItems(schema) && allowAdditionalItems(schema)) {
+      itemSchema = schema.additionalItems;
+    }
+    return schemaUtils.getDefaultFormState(itemSchema);
+  };
   /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
    * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
    * the state, and then returning `onChange()` with the plain form data converted from the keyed data
@@ -368,6 +201,177 @@ var ArrayField = class extends Component {
       () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
     );
   }
+  /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+   * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+   * keyed data
+   *
+   * @param event - The event for the click
+   */
+  onAddClick = (event) => {
+    this._handleAddClick(event);
+  };
+  /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
+   * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
+   * form data converted from the keyed data
+   *
+   * @param index - The index at which the add button is clicked
+   */
+  onAddIndexClick = (index) => {
+    return (event) => {
+      this._handleAddClick(event, index);
+    };
+  };
+  /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
+   * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
+   * form data converted from the keyed data
+   *
+   * @param index - The index at which the copy button is clicked
+   */
+  onCopyIndexClick = (index) => {
+    return (event) => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange, errorSchema } = this.props;
+      const { keyedFormData } = this.state;
+      let newErrorSchema;
+      if (errorSchema) {
+        newErrorSchema = {};
+        for (const idx in errorSchema) {
+          const i = parseInt(idx);
+          if (i <= index) {
+            set(newErrorSchema, [i], errorSchema[idx]);
+          } else if (i > index) {
+            set(newErrorSchema, [i + 1], errorSchema[idx]);
+          }
+        }
+      }
+      const newKeyedFormDataRow = {
+        key: generateRowId(),
+        item: cloneDeep(keyedFormData[index].item)
+      };
+      const newKeyedFormData = [...keyedFormData];
+      if (index !== void 0) {
+        newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
+      } else {
+        newKeyedFormData.push(newKeyedFormDataRow);
+      }
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
+    };
+  };
+  /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
+   * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
+   * from the keyed data
+   *
+   * @param index - The index at which the remove button is clicked
+   */
+  onDropIndexClick = (index) => {
+    return (event) => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange, errorSchema } = this.props;
+      const { keyedFormData } = this.state;
+      let newErrorSchema;
+      if (errorSchema) {
+        newErrorSchema = {};
+        for (const idx in errorSchema) {
+          const i = parseInt(idx);
+          if (i < index) {
+            set(newErrorSchema, [i], errorSchema[idx]);
+          } else if (i > index) {
+            set(newErrorSchema, [i - 1], errorSchema[idx]);
+          }
+        }
+      }
+      const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
+    };
+  };
+  /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
+   * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
+   * plain form data converted from the keyed data
+   *
+   * @param index - The index of the item to move
+   * @param newIndex - The index to where the item is to be moved
+   */
+  onReorderClick = (index, newIndex) => {
+    return (event) => {
+      if (event) {
+        event.preventDefault();
+        event.currentTarget.blur();
+      }
+      const { onChange, errorSchema } = this.props;
+      let newErrorSchema;
+      if (errorSchema) {
+        newErrorSchema = {};
+        for (const idx in errorSchema) {
+          const i = parseInt(idx);
+          if (i == index) {
+            set(newErrorSchema, [newIndex], errorSchema[index]);
+          } else if (i == newIndex) {
+            set(newErrorSchema, [index], errorSchema[newIndex]);
+          } else {
+            set(newErrorSchema, [idx], errorSchema[i]);
+          }
+        }
+      }
+      const { keyedFormData } = this.state;
+      function reOrderArray() {
+        const _newKeyedFormData = keyedFormData.slice();
+        _newKeyedFormData.splice(index, 1);
+        _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+        return _newKeyedFormData;
+      }
+      const newKeyedFormData = reOrderArray();
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
+    };
+  };
+  /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
+   * `onChange` callback with the updated form data
+   *
+   * @param index - The index of the item being changed
+   */
+  onChangeForIndex = (index) => {
+    return (value, newErrorSchema, id) => {
+      const { formData, onChange, errorSchema } = this.props;
+      const arrayData = Array.isArray(formData) ? formData : [];
+      const newFormData = arrayData.map((item, i) => {
+        const jsonValue = typeof value === "undefined" ? null : value;
+        return index === i ? jsonValue : item;
+      });
+      onChange(
+        newFormData,
+        errorSchema && errorSchema && {
+          ...errorSchema,
+          [index]: newErrorSchema
+        },
+        id
+      );
+    };
+  };
+  /** Callback handler used to change the value for a checkbox */
+  onSelectChange = (value) => {
+    const { onChange, idSchema } = this.props;
+    onChange(value, void 0, idSchema && idSchema.$id);
+  };
   /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
    */
   render() {
@@ -462,7 +466,7 @@ var ArrayField = class extends Component {
           totalItems: keyedFormData.length
         });
       }),
-      className: `field field-array field-array-of-${itemsSchema.type}`,
+      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
       disabled,
       idSchema,
       uiSchema,
@@ -670,7 +674,7 @@ var ArrayField = class extends Component {
     const canAdd = this.canAddItem(items) && !!additionalSchema;
     const arrayProps = {
       canAdd,
-      className: "field field-array field-array-fixed-items",
+      className: "rjsf-field rjsf-field-array rjsf-field-array-fixed-items",
       disabled,
       idSchema,
       formData,
@@ -751,14 +755,14 @@ var ArrayField = class extends Component {
     } = registry;
     const ItemSchemaField = ArraySchemaField || SchemaField2;
     const { orderable = true, removable = true, copyable = false } = getUiOptions(uiSchema, globalUiOptions);
-    const has2 = {
+    const has4 = {
       moveUp: orderable && canMoveUp,
       moveDown: orderable && canMoveDown,
       copy: copyable && canAdd,
       remove: removable && canRemove,
       toolbar: false
     };
-    has2.toolbar = Object.keys(has2).some((key2) => has2[key2]);
+    has4.toolbar = Object.keys(has4).some((key2) => has4[key2]);
     return {
       children: /* @__PURE__ */ jsx(
         ItemSchemaField,
@@ -786,21 +790,31 @@ var ArrayField = class extends Component {
           rawErrors
         }
       ),
-      className: "array-item",
+      buttonsProps: {
+        idSchema: itemIdSchema,
+        disabled,
+        readonly,
+        canAdd,
+        hasCopy: has4.copy,
+        hasMoveUp: has4.moveUp,
+        hasMoveDown: has4.moveDown,
+        hasRemove: has4.remove,
+        index,
+        totalItems,
+        onAddIndexClick: this.onAddIndexClick,
+        onCopyIndexClick: this.onCopyIndexClick,
+        onDropIndexClick: this.onDropIndexClick,
+        onReorderClick: this.onReorderClick,
+        registry,
+        schema: itemSchema,
+        uiSchema: itemUiSchema
+      },
+      className: "rjsf-array-item",
       disabled,
-      canAdd,
-      hasCopy: has2.copy,
-      hasToolbar: has2.toolbar,
-      hasMoveUp: has2.moveUp,
-      hasMoveDown: has2.moveDown,
-      hasRemove: has2.remove,
+      hasToolbar: has4.toolbar,
       index,
       totalItems,
       key,
-      onAddIndexClick: this.onAddIndexClick,
-      onCopyIndexClick: this.onCopyIndexClick,
-      onDropIndexClick: this.onDropIndexClick,
-      onReorderClick: this.onReorderClick,
       readonly,
       registry,
       schema: itemSchema,
@@ -845,6 +859,7 @@ function BooleanField(props) {
     title: uiTitle,
     // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
     label: displayLabel = true,
+    enumNames,
     ...options
   } = getUiOptions2(uiSchema, globalUiOptions);
   const Widget = getWidget2(schema, widget, widgets2);
@@ -869,9 +884,8 @@ function BooleanField(props) {
       uiSchema
     );
   } else {
-    const schemaWithEnumNames = schema;
     const enums = schema.enum ?? [true, false];
-    if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) {
+    if (!enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) {
       enumOptions = [
         {
           value: enums[0],
@@ -883,14 +897,7 @@ function BooleanField(props) {
         }
       ];
     } else {
-      enumOptions = optionsList2(
-        {
-          enum: enums,
-          // NOTE: enumNames is deprecated, but still supported for now.
-          enumNames: schemaWithEnumNames.enumNames
-        },
-        uiSchema
-      );
+      enumOptions = optionsList2({ enum: enums }, uiSchema);
     }
   }
   return /* @__PURE__ */ jsx2(
@@ -920,184 +927,937 @@ function BooleanField(props) {
 }
 var BooleanField_default = BooleanField;
 
-// src/components/fields/MultiSchemaField.tsx
-import { Component as Component2 } from "react";
-import get2 from "lodash/get";
-import isEmpty from "lodash/isEmpty";
-import omit from "lodash/omit";
+// src/components/fields/LayoutGridField.tsx
+import { PureComponent } from "react";
 import {
   ANY_OF_KEY,
-  deepEquals,
-  ERRORS_KEY,
   getDiscriminatorFieldFromSchema,
+  getTemplate as getTemplate2,
+  getTestIds,
   getUiOptions as getUiOptions3,
-  getWidget as getWidget3,
-  mergeSchemas,
+  hashObject,
+  ID_KEY,
+  lookupFromFormContext,
+  mergeObjects,
   ONE_OF_KEY,
-  TranslatableString as TranslatableString3
+  PROPERTIES_KEY,
+  READONLY_KEY,
+  UI_OPTIONS_KEY
 } from "@rjsf/utils";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var AnyOfField = class extends Component2 {
-  /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
+import cloneDeep2 from "lodash/cloneDeep";
+import each from "lodash/each";
+import flatten from "lodash/flatten";
+import get2 from "lodash/get";
+import has from "lodash/has";
+import includes from "lodash/includes";
+import intersection from "lodash/intersection";
+import isEmpty from "lodash/isEmpty";
+import isFunction from "lodash/isFunction";
+import isEqual from "lodash/isEqual";
+import isObject3 from "lodash/isObject";
+import isPlainObject from "lodash/isPlainObject";
+import isString from "lodash/isString";
+import isUndefined from "lodash/isUndefined";
+import set2 from "lodash/set";
+import { jsx as jsx3 } from "react/jsx-runtime";
+import { createElement } from "react";
+var LOOKUP_REGEX = /^\$lookup=(.+)/;
+var LAYOUT_GRID_UI_OPTION = "layoutGrid";
+var LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`;
+var UI_GLOBAL_OPTIONS = "ui:global_options";
+function getNonNullishValue(value, fallback) {
+  return value ?? fallback;
+}
+var LayoutGridField = class _LayoutGridField extends PureComponent {
+  static defaultProps = {
+    layoutGridSchema: void 0
+  };
+  static TEST_IDS = getTestIds();
+  /** Computes the uiSchema for the field with `name` from the `uiProps` and `uiSchema` provided. The field UI Schema
+   * will always contain a copy of the global options from the `uiSchema` (so they can be passed down) as well as
+   * copying them into the local ui options. When the `forceReadonly` flag is true, then the field UI Schema is
+   * updated to make "readonly" be true. When the `schemaReadonly` flag is true AND the field UI Schema does NOT have
+   * the flag already provided, then we also make "readonly" true. We always make sure to return the final value of the
+   * field UI Schema's "readonly" flag as `uiReadonly` along with the `fieldUiSchema` in the return value.
    *
-   * @param props - The `FieldProps` for this template
+   * @param field - The name of the field to pull the existing UI Schema for
+   * @param uiProps - Any props that should be put into the field's uiSchema
+   * @param [uiSchema] - The optional UI Schema from which to get the UI schema for the field
+   * @param [schemaReadonly] - Optional flag indicating whether the schema indicates the field is readonly
+   * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
    */
-  constructor(props) {
-    super(props);
-    /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
-     * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
-     * the `onChange` handler.
-     *
-     * @param option - The new option value being selected
-     */
-    this.onOptionChange = (option) => {
-      const { selectedOption, retrievedOptions } = this.state;
-      const { formData, onChange, registry } = this.props;
-      const { schemaUtils } = registry;
-      const intOption = option !== void 0 ? parseInt(option, 10) : -1;
-      if (intOption === selectedOption) {
-        return;
-      }
-      const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
-      const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
-      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
-      if (newFormData && newOption) {
-        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+  static computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
+    const globalUiOptions = get2(uiSchema, [UI_GLOBAL_OPTIONS], {});
+    const localUiSchema = get2(uiSchema, field);
+    const localUiOptions = { ...get2(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
+    const fieldUiSchema = { ...localUiSchema };
+    if (!isEmpty(localUiOptions)) {
+      set2(fieldUiSchema, [UI_OPTIONS_KEY], localUiOptions);
+    }
+    if (!isEmpty(globalUiOptions)) {
+      set2(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+    }
+    let { readonly: uiReadonly } = getUiOptions3(fieldUiSchema);
+    if (forceReadonly === true || isUndefined(uiReadonly) && schemaReadonly === true) {
+      uiReadonly = true;
+      if (has(localUiOptions, READONLY_KEY)) {
+        set2(fieldUiSchema, [UI_OPTIONS_KEY, READONLY_KEY], true);
+      } else {
+        set2(fieldUiSchema, `ui:${READONLY_KEY}`, true);
       }
-      onChange(newFormData, void 0, this.getFieldId());
-      this.setState({ selectedOption: intOption });
-    };
-    const {
-      formData,
-      options,
-      registry: { schemaUtils }
-    } = this.props;
-    const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-    this.state = {
-      retrievedOptions,
-      selectedOption: this.getMatchingOption(0, formData, retrievedOptions)
-    };
+    }
+    return { fieldUiSchema, uiReadonly };
   }
-  /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
-   * currently selected option based on the overall `formData`
+  /** Given an `operator`, `datum` and `value` determines whether this condition is considered matching. Matching
+   * depends on the `operator`. The `datum` and `value` are converted into arrays if they aren't already and then the
+   * contents of the two arrays are compared using the `operator`. When `operator` is All, then the two arrays must be
+   * equal to match. When `operator` is SOME then the intersection of the two arrays must have at least one value in
+   * common to match. When `operator` is NONE then the intersection of the two arrays must not have any values in common
+   * to match.
    *
-   * @param prevProps - The previous `FieldProps` for this template
-   * @param prevState - The previous `AnyOfFieldState` for this template
+   * @param [operator] - The optional operator for the condition
+   * @param [datum] - The optional datum for the condition, this can be an item or a list of items of type unknown
+   * @param [value='$0m3tH1nG Un3xP3cT3d'] The optional value for the condition, defaulting to a highly unlikely value
+   *        to avoid comparing two undefined elements when `value` was forgotten in the condition definition.
+   *        This can be an item or a list of items of type unknown
+   * @returns - True if the condition matches, false otherwise
    */
-  componentDidUpdate(prevProps, prevState) {
-    const { formData, options, idSchema } = this.props;
-    const { selectedOption } = this.state;
-    let newState = this.state;
-    if (!deepEquals(prevProps.options, options)) {
-      const {
-        registry: { schemaUtils }
-      } = this.props;
-      const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-      newState = { selectedOption, retrievedOptions };
+  static conditionMatches(operator, datum, value = "$0m3tH1nG Un3xP3cT3d") {
+    const data = flatten([datum]).sort();
+    const values = flatten([value]).sort();
+    switch (operator) {
+      case "all" /* ALL */:
+        return isEqual(data, values);
+      case "some" /* SOME */:
+        return intersection(data, values).length > 0;
+      case "none" /* NONE */:
+        return intersection(data, values).length === 0;
+      default:
+        return false;
     }
-    if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
-      const { retrievedOptions } = newState;
-      const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
-      if (prevState && matchingOption !== selectedOption) {
-        newState = { selectedOption: matchingOption, retrievedOptions };
+  }
+  /** From within the `layoutGridSchema` finds the `children` and any extra `gridProps` from the object keyed by
+   * `schemaKey`. If the `children` contains extra `gridProps` and those props contain a `className` string, try to
+   * lookup whether that `className` has a replacement value in the `registry` using the `FORM_CONTEXT_LOOKUP_BASE`.
+   * When the `className` value contains multiple classNames separated by a space, the lookup will look for a
+   * replacement value for each `className` and combine them into one.
+   *
+   * @param layoutGridSchema - The GridSchemaType instance from which to obtain the `schemaKey` children and extra props
+   * @param schemaKey - A `GridType` value, used to get the children and extra props from within the `layoutGridSchema`
+   * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+   * @returns - An object containing the list of `LayoutGridSchemaType` `children` and any extra `gridProps`
+   * @throws - A `TypeError` when the `children` is not an array
+   */
+  static findChildrenAndProps(layoutGridSchema, schemaKey, registry) {
+    let gridProps = {};
+    let children = layoutGridSchema[schemaKey];
+    if (isPlainObject(children)) {
+      const { children: elements, className: toMapClassNames, ...otherProps } = children;
+      children = elements;
+      if (toMapClassNames) {
+        const classes = toMapClassNames.split(" ");
+        const className = classes.map((ele) => lookupFromFormContext(registry, ele, ele)).join(" ");
+        gridProps = { ...otherProps, className };
+      } else {
+        gridProps = otherProps;
       }
     }
-    if (newState !== this.state) {
-      this.setState(newState);
+    if (!Array.isArray(children)) {
+      throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`);
     }
+    return { children, gridProps };
   }
-  /** Determines the best matching option for the given `formData` and `options`.
+  /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
+   * as the id prefix.
    *
-   * @param formData - The new formData
-   * @param options - The list of options to choose from
-   * @return - The index of the `option` that best matches the `formData`
+   * @param schemaUtils - The `SchemaUtilsType` used to call `toIdSchema`
+   * @param schema - The schema to generate the idSchema for
+   * @param baseIdSchema - The IdSchema for the base
+   * @param formData - The formData to pass the `toIdSchema`
+   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+   * @returns - The generated `idSchema` for the `schema`
    */
-  getMatchingOption(selectedOption, formData, options) {
-    const {
-      schema,
-      registry: { schemaUtils }
-    } = this.props;
-    const discriminator = getDiscriminatorFieldFromSchema(schema);
-    const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
-    return option;
-  }
-  getFieldId() {
-    const { idSchema, schema } = this.props;
-    return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+  static getIdSchema(schemaUtils, baseIdSchema, formData, schema = {}, idSeparator) {
+    const baseId = get2(baseIdSchema, ID_KEY);
+    return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
   }
-  /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
+  /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
+   * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
+   * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
+   * `options`.
+   *
+   * @param schemaUtils - The `SchemaUtilsType` used to call `retrieveSchema`
+   * @param dottedPath - The dotted-path to the field for which to get the schema
+   * @param initialSchema - The initial schema to start the search from
+   * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
+   * @param initialIdSchema - The initial idSchema to start the search from
+   * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+   * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
+   *            info if a oneOf/anyOf
    */
-  render() {
-    const {
-      name,
-      disabled = false,
-      errorSchema = {},
-      formContext,
-      onBlur,
-      onFocus,
-      registry,
-      schema,
-      uiSchema
-    } = this.props;
-    const { widgets: widgets2, fields: fields2, translateString, globalUiOptions, schemaUtils } = registry;
-    const { SchemaField: _SchemaField } = fields2;
-    const { selectedOption, retrievedOptions } = this.state;
-    const {
-      widget = "select",
-      placeholder,
-      autofocus,
-      autocomplete,
-      title = schema.title,
-      ...uiOptions
-    } = getUiOptions3(uiSchema, globalUiOptions);
-    const Widget = getWidget3({ type: "number" }, widget, widgets2);
-    const rawErrors = get2(errorSchema, ERRORS_KEY, []);
-    const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-    const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
-    let optionSchema;
-    if (option) {
-      const { required } = schema;
-      optionSchema = required ? mergeSchemas({ required }, option) : option;
-    }
-    let optionsUiSchema = [];
-    if (ONE_OF_KEY in schema && uiSchema && ONE_OF_KEY in uiSchema) {
-      if (Array.isArray(uiSchema[ONE_OF_KEY])) {
-        optionsUiSchema = uiSchema[ONE_OF_KEY];
+  static getSchemaDetailsForField(schemaUtils, dottedPath, initialSchema, formData, initialIdSchema, idSeparator) {
+    let rawSchema = initialSchema;
+    let idSchema = initialIdSchema;
+    const parts = dottedPath.split(".");
+    const leafPath = parts.pop();
+    let schema = schemaUtils.retrieveSchema(rawSchema, formData);
+    let innerData = formData;
+    let isReadonly = schema.readOnly;
+    parts.forEach((part) => {
+      if (has(schema, PROPERTIES_KEY)) {
+        rawSchema = get2(schema, [PROPERTIES_KEY, part], {});
+        idSchema = get2(idSchema, part, {});
+      } else if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
+        const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+        const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
+        const selectedIdSchema = _LayoutGridField.getIdSchema(
+          schemaUtils,
+          idSchema,
+          formData,
+          selectedSchema,
+          idSeparator
+        );
+        rawSchema = get2(selectedSchema, [PROPERTIES_KEY, part], {});
+        idSchema = get2(selectedIdSchema, part, {});
       } else {
-        console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
+        rawSchema = {};
       }
-    } else if (ANY_OF_KEY in schema && uiSchema && ANY_OF_KEY in uiSchema) {
-      if (Array.isArray(uiSchema[ANY_OF_KEY])) {
-        optionsUiSchema = uiSchema[ANY_OF_KEY];
-      } else {
-        console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
+      innerData = get2(innerData, part, {});
+      schema = schemaUtils.retrieveSchema(rawSchema, innerData);
+      isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
+    });
+    let optionsInfo;
+    let isRequired = false;
+    if (isEmpty(schema)) {
+      schema = void 0;
+    }
+    if (schema && leafPath) {
+      if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
+        const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+        schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
+        const rawIdSchema = _LayoutGridField.getIdSchema(schemaUtils, idSchema, formData, schema, idSeparator);
+        idSchema = mergeObjects(rawIdSchema, idSchema);
+      }
+      isRequired = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
+      schema = get2(schema, [PROPERTIES_KEY, leafPath]);
+      schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+      idSchema = get2(idSchema, leafPath, {});
+      isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
+      if (schema && (has(schema, ONE_OF_KEY) || has(schema, ANY_OF_KEY))) {
+        const xxx = has(schema, ONE_OF_KEY) ? ONE_OF_KEY : ANY_OF_KEY;
+        const discriminator = getDiscriminatorFieldFromSchema(schema);
+        optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
       }
     }
-    let optionUiSchema = uiSchema;
-    if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
-      optionUiSchema = optionsUiSchema[selectedOption];
+    return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+  }
+  /** Gets the custom render component from the `render`, by either determining that it is either already a function or
+   * it is a non-function value that can be used to look up the function in the registry. If no function can be found,
+   * null is returned.
+   *
+   * @param render - The potential render function or lookup name to one
+   * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+   * @returns - Either a render function if available, or null if not
+   */
+  static getCustomRenderComponent(render, registry) {
+    let customRenderer = render;
+    if (isString(customRenderer)) {
+      customRenderer = lookupFromFormContext(registry, customRenderer);
     }
-    const translateEnum = title ? TranslatableString3.TitleOptionPrefix : TranslatableString3.OptionPrefix;
-    const translateParams = title ? [title] : [];
-    const enumOptions = retrievedOptions.map((opt, index) => {
-      const { title: uiTitle = opt.title } = getUiOptions3(optionsUiSchema[index]);
-      return {
-        label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
-        value: index
-      };
-    });
-    return /* @__PURE__ */ jsxs("div", { className: "panel panel-default panel-body", children: [
-      /* @__PURE__ */ jsx3("div", { className: "form-group", children: /* @__PURE__ */ jsx3(
-        Widget,
-        {
+    if (isFunction(customRenderer)) {
+      return customRenderer;
+    }
+    return null;
+  }
+  /** Extract the `name`, and optional `render` and all other props from the `gridSchema`. We look up the `render` to
+   * see if can be resolved to a UIComponent. If `name` does not exist and there is an optional `render` UIComponent, we
+   * set the `rendered` component with only specified props for that component in the object.
+   *
+   * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+   * @param gridSchema - The string or object that represents the configuration for the grid field
+   * @returns - The UIComponentPropsType computed from the gridSchema
+   */
+  static computeUIComponentPropsFromGridSchema(registry, gridSchema) {
+    let name;
+    let UIComponent = null;
+    let uiProps = {};
+    let rendered;
+    if (isString(gridSchema) || isUndefined(gridSchema)) {
+      name = gridSchema ?? "";
+    } else {
+      const { name: innerName, render, ...innerProps } = gridSchema;
+      name = innerName;
+      uiProps = innerProps;
+      if (!isEmpty(uiProps)) {
+        each(uiProps, (prop, key) => {
+          if (isString(prop)) {
+            const match = LOOKUP_REGEX.exec(prop);
+            if (Array.isArray(match) && match.length > 1) {
+              const name2 = match[1];
+              uiProps[key] = lookupFromFormContext(registry, name2, name2);
+            }
+          }
+        });
+      }
+      UIComponent = _LayoutGridField.getCustomRenderComponent(render, registry);
+      if (!innerName && UIComponent) {
+        rendered = /* @__PURE__ */ jsx3(UIComponent, { ...innerProps, "data-testid": _LayoutGridField.TEST_IDS.uiComponent });
+      }
+    }
+    return { name, UIComponent, uiProps, rendered };
+  }
+  /** Constructs an `LayoutGridField` with the given `props`
+   *
+   * @param props - The `LayoutGridField` for this template
+   */
+  constructor(props) {
+    super(props);
+  }
+  /** Generates an `onChange` handler for the field associated with the `dottedPath`. This handler will clone and update
+   * the `formData` with the new `value` and the `errorSchema` if an `errSchema` is provided. After updating those two
+   * elements, they will then be passed on to the `onChange` handler of the `LayoutFieldGrid`.
+   *
+   * @param dottedPath - The dotted-path to the field for which to generate the onChange handler
+   * @returns - The `onChange` handling function for the `dottedPath` field
+   */
+  onFieldChange = (dottedPath) => {
+    return (value, errSchema, id) => {
+      const { onChange, errorSchema, formData } = this.props;
+      const newFormData = cloneDeep2(formData || {});
+      let newErrorSchema = errorSchema;
+      if (errSchema && errorSchema) {
+        newErrorSchema = cloneDeep2(errorSchema);
+        set2(newErrorSchema, dottedPath, errSchema);
+      }
+      set2(newFormData, dottedPath, value);
+      onChange(newFormData, newErrorSchema, id);
+    };
+  };
+  /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
+   * `GridType.CONDITION` is separated into the `children` and other `gridProps`. The `gridProps` are used to extract
+   * the `operator`, `field` and `value` of the condition. If the condition matches, then all of the `children` are
+   * rendered, otherwise null is returned.
+   *
+   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+   * @returns - The rendered the children for the `GridType.CONDITION` or null
+   */
+  renderCondition(layoutGridSchema) {
+    const { formData, registry } = this.props;
+    const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+      layoutGridSchema,
+      "ui:condition" /* CONDITION */,
+      registry
+    );
+    const { operator, field = "", value } = gridProps;
+    const fieldData = get2(formData, field, null);
+    if (_LayoutGridField.conditionMatches(operator, fieldData, value)) {
+      return this.renderChildren(children);
+    }
+    return null;
+  }
+  /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMN` is separated
+   * into the `children` and other `gridProps`. The `gridProps` will be spread onto the outer `GridTemplate`. Inside
+   * the `GridTemplate` all the `children` are rendered.
+   *
+   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+   * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMN`
+   */
+  renderCol(layoutGridSchema) {
+    const { registry, uiSchema } = this.props;
+    const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+      layoutGridSchema,
+      "ui:col" /* COLUMN */,
+      registry
+    );
+    const uiOptions = getUiOptions3(uiSchema);
+    const GridTemplate2 = getTemplate2("GridTemplate", registry, uiOptions);
+    return /* @__PURE__ */ jsx3(GridTemplate2, { column: true, "data-testid": _LayoutGridField.TEST_IDS.col, ...gridProps, children: this.renderChildren(children) });
+  }
+  /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMNS` is separated
+   * into the `children` and other `gridProps`. The `children` is iterated on and `gridProps` will be spread onto the
+   * outer `GridTemplate`. Each child will have their own rendered `GridTemplate`.
+   *
+   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+   * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMNS`
+   */
+  renderColumns(layoutGridSchema) {
+    const { registry, uiSchema } = this.props;
+    const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+      layoutGridSchema,
+      "ui:columns" /* COLUMNS */,
+      registry
+    );
+    const uiOptions = getUiOptions3(uiSchema);
+    const GridTemplate2 = getTemplate2("GridTemplate", registry, uiOptions);
+    return children.map((child) => /* @__PURE__ */ jsx3(
+      GridTemplate2,
+      {
+        column: true,
+        "data-testid": _LayoutGridField.TEST_IDS.col,
+        ...gridProps,
+        children: this.renderChildren([child])
+      },
+      `column-${hashObject(child)}`
+    ));
+  }
+  /** Renders a material-ui `GridTemplate` as a container. The
+   * `layoutGridSchema` for the `GridType.ROW` is separated into the `children` and other `gridProps`. The `gridProps`
+   * will be spread onto the outer `GridTemplate`. Inside of the `GridTemplate` all of the `children` are rendered.
+   *
+   * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+   * @returns - The rendered `GridTemplate` containing the children for the `GridType.ROW`
+   */
+  renderRow(layoutGridSchema) {
+    const { registry, uiSchema } = this.props;
+    const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+      layoutGridSchema,
+      "ui:row" /* ROW */,
+      registry
+    );
+    const uiOptions = getUiOptions3(uiSchema);
+    const GridTemplate2 = getTemplate2("GridTemplate", registry, uiOptions);
+    return /* @__PURE__ */ jsx3(GridTemplate2, { ...gridProps, "data-testid": _LayoutGridField.TEST_IDS.row, children: this.renderChildren(children) });
+  }
+  /** Iterates through all the `childrenLayoutGridSchema`, rendering a nested `LayoutGridField` for each item in the
+   * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
+   * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
+   * `childrenLayoutGridSchema` is passed as `layoutGridSchema`.
+   *
+   * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+   *          children fields
+   * @returns - The nested `LayoutGridField`s
+   */
+  renderChildren(childrenLayoutGridSchema) {
+    const { registry, schema: rawSchema, formData } = this.props;
+    const { schemaUtils } = registry;
+    const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+    return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ createElement(
+      _LayoutGridField,
+      {
+        ...this.props,
+        key: `layoutGrid-${hashObject(layoutGridSchema)}`,
+        schema,
+        layoutGridSchema
+      }
+    ));
+  }
+  /** Renders the field described by `gridSchema`. If `gridSchema` is not an object, then is will be assumed
+   * to be the dotted-path to the field in the schema. Otherwise, we extract the `name`, and optional `render` and all
+   * other props. If `name` does not exist and there is an optional `render`, we return the `render` component with only
+   * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
+   * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
+   * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
+   * `uiSchema`, `errorSchema`, `idSchema` and `formData` drilled down to the dotted-path field, spreading any other
+   * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
+   * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
+   * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
+   * handling props. If none of the previous render paths are valid, then a null is returned.
+   *
+   * @param gridSchema - The string or object that represents the configuration for the grid field
+   * @returns - One of `LayoutMultiSchemaField`, `SchemaField`, a custom render component or null, depending
+   */
+  renderField(gridSchema) {
+    const {
+      schema: initialSchema,
+      uiSchema,
+      errorSchema,
+      idSchema,
+      onBlur,
+      onFocus,
+      formData,
+      readonly,
+      registry,
+      idSeparator,
+      layoutGridSchema,
+      // Used to pull this out of otherProps since we don't want to pass it through
+      ...otherProps
+    } = this.props;
+    const { fields: fields2, schemaUtils } = registry;
+    const { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2;
+    const uiComponentProps = _LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
+    if (uiComponentProps.rendered) {
+      return uiComponentProps.rendered;
+    }
+    const { name, UIComponent, uiProps } = uiComponentProps;
+    const {
+      schema,
+      isRequired,
+      isReadonly,
+      optionsInfo,
+      idSchema: fieldIdSchema
+    } = _LayoutGridField.getSchemaDetailsForField(
+      schemaUtils,
+      name,
+      initialSchema,
+      formData,
+      idSchema,
+      idSeparator
+    );
+    if (schema) {
+      const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
+      const { fieldUiSchema, uiReadonly } = _LayoutGridField.computeFieldUiSchema(
+        name,
+        uiProps,
+        uiSchema,
+        isReadonly,
+        readonly
+      );
+      return /* @__PURE__ */ jsx3(
+        Field,
+        {
+          "data-testid": optionsInfo?.hasDiscriminator ? _LayoutGridField.TEST_IDS.layoutMultiSchemaField : _LayoutGridField.TEST_IDS.field,
+          ...otherProps,
+          name,
+          required: isRequired,
+          readonly: uiReadonly,
+          schema,
+          uiSchema: fieldUiSchema,
+          errorSchema: get2(errorSchema, name),
+          idSchema: fieldIdSchema,
+          idSeparator,
+          formData: get2(formData, name),
+          onChange: this.onFieldChange(name),
+          onBlur,
+          onFocus,
+          options: optionsInfo?.options,
+          registry
+        }
+      );
+    }
+    if (UIComponent) {
+      return /* @__PURE__ */ jsx3(
+        UIComponent,
+        {
+          "data-testid": _LayoutGridField.TEST_IDS.uiComponent,
+          ...otherProps,
+          name,
+          required: isRequired,
+          formData,
+          readOnly: !!isReadonly || readonly,
+          errorSchema,
+          uiSchema,
+          schema: initialSchema,
+          idSchema,
+          idSeparator,
+          onBlur,
+          onFocus,
+          registry,
+          ...uiProps
+        }
+      );
+    }
+    return null;
+  }
+  /** Renders the `LayoutGridField`. If there isn't a `layoutGridSchema` prop defined, then try pulling it out of the
+   * `uiSchema` via `ui:LayoutGridField`. If `layoutGridSchema` is an object, then check to see if any of the properties
+   * match one of the `GridType`s. If so, call the appropriate render function for the type. Otherwise, just call the
+   * generic `renderField()` function with the `layoutGridSchema`.
+   *
+   * @returns - the rendered `LayoutGridField`
+   */
+  render() {
+    const { uiSchema } = this.props;
+    let { layoutGridSchema } = this.props;
+    const uiOptions = getUiOptions3(uiSchema);
+    if (!layoutGridSchema && LAYOUT_GRID_UI_OPTION in uiOptions && isObject3(uiOptions[LAYOUT_GRID_UI_OPTION])) {
+      layoutGridSchema = uiOptions[LAYOUT_GRID_UI_OPTION];
+    }
+    if (isObject3(layoutGridSchema)) {
+      if ("ui:row" /* ROW */ in layoutGridSchema) {
+        return this.renderRow(layoutGridSchema);
+      }
+      if ("ui:col" /* COLUMN */ in layoutGridSchema) {
+        return this.renderCol(layoutGridSchema);
+      }
+      if ("ui:columns" /* COLUMNS */ in layoutGridSchema) {
+        return this.renderColumns(layoutGridSchema);
+      }
+      if ("ui:condition" /* CONDITION */ in layoutGridSchema) {
+        return this.renderCondition(layoutGridSchema);
+      }
+    }
+    return this.renderField(layoutGridSchema);
+  }
+};
+
+// src/components/fields/LayoutHeaderField.tsx
+import {
+  getTemplate as getTemplate3,
+  getUiOptions as getUiOptions4,
+  titleId
+} from "@rjsf/utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function LayoutHeaderField(props) {
+  const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+  const options = getUiOptions4(uiSchema, registry.globalUiOptions);
+  const { title: uiTitle } = options;
+  const { title: schemaTitle } = schema;
+  const fieldTitle = uiTitle || title || schemaTitle || name;
+  if (!fieldTitle) {
+    return null;
+  }
+  const TitleFieldTemplate = getTemplate3(
+    "TitleFieldTemplate",
+    registry,
+    options
+  );
+  return /* @__PURE__ */ jsx4(
+    TitleFieldTemplate,
+    {
+      id: titleId(idSchema),
+      title: fieldTitle,
+      required,
+      schema,
+      uiSchema,
+      registry
+    }
+  );
+}
+
+// src/components/fields/LayoutMultiSchemaField.tsx
+import { useState, useEffect } from "react";
+import {
+  ANY_OF_KEY as ANY_OF_KEY2,
+  CONST_KEY,
+  DEFAULT_KEY,
+  ERRORS_KEY,
+  getDiscriminatorFieldFromSchema as getDiscriminatorFieldFromSchema2,
+  hashObject as hashObject2,
+  ID_KEY as ID_KEY2,
+  ONE_OF_KEY as ONE_OF_KEY2,
+  optionsList as optionsList3,
+  PROPERTIES_KEY as PROPERTIES_KEY2,
+  getTemplate as getTemplate4,
+  getUiOptions as getUiOptions5,
+  getWidget as getWidget3
+} from "@rjsf/utils";
+import get3 from "lodash/get";
+import has2 from "lodash/has";
+import isEmpty2 from "lodash/isEmpty";
+import noop from "lodash/noop";
+import omit from "lodash/omit";
+import set3 from "lodash/set";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function getSelectedOption(options, selectorField, value) {
+  const defaultValue = "!@#!@$@#$!@$#";
+  const schemaOptions = options.map(({ schema }) => schema);
+  return schemaOptions.find((option) => {
+    const selector = get3(option, [PROPERTIES_KEY2, selectorField]);
+    const result = get3(selector, DEFAULT_KEY, get3(selector, CONST_KEY, defaultValue));
+    return result === value;
+  });
+}
+function computeEnumOptions(schema, options, schemaUtils, uiSchema, formData) {
+  const realOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
+  let tempSchema = schema;
+  if (has2(schema, ONE_OF_KEY2)) {
+    tempSchema = { ...schema, [ONE_OF_KEY2]: realOptions };
+  } else if (has2(schema, ANY_OF_KEY2)) {
+    tempSchema = { ...schema, [ANY_OF_KEY2]: realOptions };
+  }
+  const enumOptions = optionsList3(tempSchema, uiSchema);
+  if (!enumOptions) {
+    throw new Error(`No enumOptions were computed from the schema ${JSON.stringify(tempSchema)}`);
+  }
+  return enumOptions;
+}
+function LayoutMultiSchemaField(props) {
+  const {
+    name,
+    baseType,
+    disabled = false,
+    formData,
+    idSchema,
+    onBlur,
+    onChange,
+    options,
+    onFocus,
+    registry,
+    uiSchema,
+    schema,
+    formContext,
+    autofocus,
+    readonly,
+    required,
+    errorSchema,
+    hideError = false
+  } = props;
+  const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
+  const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+  const id = get3(idSchema, ID_KEY2);
+  const discriminator = getDiscriminatorFieldFromSchema2(schema);
+  const FieldErrorTemplate2 = getTemplate4("FieldErrorTemplate", registry, options);
+  const FieldTemplate2 = getTemplate4("FieldTemplate", registry, options);
+  const schemaHash = hashObject2(schema);
+  const optionsHash = hashObject2(options);
+  const uiSchemaHash = uiSchema ? hashObject2(uiSchema) : "";
+  const formDataHash = formData ? hashObject2(formData) : "";
+  useEffect(() => {
+    setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+  }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
+  const {
+    widget = discriminator ? "radio" : "select",
+    title = "",
+    placeholder = "",
+    optionsSchemaSelector: selectorField = discriminator,
+    hideError: uiSchemaHideError,
+    ...uiOptions
+  } = getUiOptions5(uiSchema);
+  if (!selectorField) {
+    throw new Error("No selector field provided for the LayoutMultiSchemaField");
+  }
+  const selectedOption = get3(formData, selectorField);
+  let optionSchema = get3(enumOptions[0]?.schema, [PROPERTIES_KEY2, selectorField], {});
+  const option = getSelectedOption(enumOptions, selectorField, selectedOption);
+  optionSchema = optionSchema?.type ? optionSchema : { ...optionSchema, type: option?.type || baseType };
+  const Widget = getWidget3(optionSchema, widget, widgets2);
+  const hideFieldError = uiSchemaHideError === void 0 ? hideError : Boolean(uiSchemaHideError);
+  const rawErrors = get3(errorSchema, [ERRORS_KEY], []);
+  const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+  const onOptionChange = (opt) => {
+    const newOption = getSelectedOption(enumOptions, selectorField, opt);
+    const oldOption = getSelectedOption(enumOptions, selectorField, selectedOption);
+    let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+    if (newFormData && newOption) {
+      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+    }
+    if (newFormData) {
+      set3(newFormData, selectorField, opt);
+    }
+    onChange(newFormData, void 0, id);
+  };
+  const widgetOptions = { enumOptions, ...uiOptions };
+  const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ jsx5(FieldErrorTemplate2, { idSchema, schema, errors: rawErrors, registry }) : void 0;
+  const ignored = (value) => noop;
+  return /* @__PURE__ */ jsx5(
+    FieldTemplate2,
+    {
+      id,
+      schema,
+      label: (title || schema.title) ?? "",
+      disabled: disabled || Array.isArray(enumOptions) && isEmpty2(enumOptions),
+      uiSchema,
+      formContext,
+      required,
+      readonly: !!readonly,
+      registry,
+      displayLabel,
+      errors,
+      onChange,
+      onDropPropertyClick: ignored,
+      onKeyChange: ignored,
+      children: /* @__PURE__ */ jsx5(
+        Widget,
+        {
+          id,
+          name,
+          schema,
+          label: (title || schema.title) ?? "",
+          disabled: disabled || Array.isArray(enumOptions) && isEmpty2(enumOptions),
+          uiSchema,
+          formContext,
+          autofocus,
+          readonly,
+          required,
+          registry,
+          multiple: false,
+          rawErrors,
+          hideError: hideFieldError,
+          hideLabel: !displayLabel,
+          errorSchema: fieldErrorSchema,
+          placeholder,
+          onChange: onOptionChange,
+          onBlur,
+          onFocus,
+          value: selectedOption,
+          options: widgetOptions
+        }
+      )
+    }
+  );
+}
+
+// src/components/fields/MultiSchemaField.tsx
+import { Component as Component2 } from "react";
+import get4 from "lodash/get";
+import isEmpty3 from "lodash/isEmpty";
+import omit2 from "lodash/omit";
+import {
+  ANY_OF_KEY as ANY_OF_KEY3,
+  deepEquals,
+  ERRORS_KEY as ERRORS_KEY2,
+  getDiscriminatorFieldFromSchema as getDiscriminatorFieldFromSchema3,
+  getUiOptions as getUiOptions6,
+  getWidget as getWidget4,
+  mergeSchemas,
+  ONE_OF_KEY as ONE_OF_KEY3,
+  TranslatableString as TranslatableString3
+} from "@rjsf/utils";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var AnyOfField = class extends Component2 {
+  /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
+   *
+   * @param props - The `FieldProps` for this template
+   */
+  constructor(props) {
+    super(props);
+    const {
+      formData,
+      options,
+      registry: { schemaUtils }
+    } = this.props;
+    const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
+    this.state = {
+      retrievedOptions,
+      selectedOption: this.getMatchingOption(0, formData, retrievedOptions)
+    };
+  }
+  /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
+   * currently selected option based on the overall `formData`
+   *
+   * @param prevProps - The previous `FieldProps` for this template
+   * @param prevState - The previous `AnyOfFieldState` for this template
+   */
+  componentDidUpdate(prevProps, prevState) {
+    const { formData, options, idSchema } = this.props;
+    const { selectedOption } = this.state;
+    let newState = this.state;
+    if (!deepEquals(prevProps.options, options)) {
+      const {
+        registry: { schemaUtils }
+      } = this.props;
+      const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
+      newState = { selectedOption, retrievedOptions };
+    }
+    if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+      const { retrievedOptions } = newState;
+      const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
+      if (prevState && matchingOption !== selectedOption) {
+        newState = { selectedOption: matchingOption, retrievedOptions };
+      }
+    }
+    if (newState !== this.state) {
+      this.setState(newState);
+    }
+  }
+  /** Determines the best matching option for the given `formData` and `options`.
+   *
+   * @param formData - The new formData
+   * @param options - The list of options to choose from
+   * @return - The index of the `option` that best matches the `formData`
+   */
+  getMatchingOption(selectedOption, formData, options) {
+    const {
+      schema,
+      registry: { schemaUtils }
+    } = this.props;
+    const discriminator = getDiscriminatorFieldFromSchema3(schema);
+    const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
+    return option;
+  }
+  /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
+   * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
+   * the `onChange` handler.
+   *
+   * @param option - The new option value being selected
+   */
+  onOptionChange = (option) => {
+    const { selectedOption, retrievedOptions } = this.state;
+    const { formData, onChange, registry } = this.props;
+    const { schemaUtils } = registry;
+    const intOption = option !== void 0 ? parseInt(option, 10) : -1;
+    if (intOption === selectedOption) {
+      return;
+    }
+    const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
+    const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
+    let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+    if (newOption) {
+      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+    }
+    this.setState({ selectedOption: intOption }, () => {
+      onChange(newFormData, void 0, this.getFieldId());
+    });
+  };
+  getFieldId() {
+    const { idSchema, schema } = this.props;
+    return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+  }
+  /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
+   */
+  render() {
+    const {
+      name,
+      disabled = false,
+      errorSchema = {},
+      formContext,
+      onBlur,
+      onFocus,
+      readonly,
+      registry,
+      schema,
+      uiSchema
+    } = this.props;
+    const { widgets: widgets2, fields: fields2, translateString, globalUiOptions, schemaUtils } = registry;
+    const { SchemaField: _SchemaField } = fields2;
+    const { selectedOption, retrievedOptions } = this.state;
+    const {
+      widget = "select",
+      placeholder,
+      autofocus,
+      autocomplete,
+      title = schema.title,
+      ...uiOptions
+    } = getUiOptions6(uiSchema, globalUiOptions);
+    const Widget = getWidget4({ type: "number" }, widget, widgets2);
+    const rawErrors = get4(errorSchema, ERRORS_KEY2, []);
+    const fieldErrorSchema = omit2(errorSchema, [ERRORS_KEY2]);
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
+    let optionSchema;
+    if (option) {
+      const { required } = schema;
+      optionSchema = required ? mergeSchemas({ required }, option) : option;
+    }
+    let optionsUiSchema = [];
+    if (ONE_OF_KEY3 in schema && uiSchema && ONE_OF_KEY3 in uiSchema) {
+      if (Array.isArray(uiSchema[ONE_OF_KEY3])) {
+        optionsUiSchema = uiSchema[ONE_OF_KEY3];
+      } else {
+        console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
+      }
+    } else if (ANY_OF_KEY3 in schema && uiSchema && ANY_OF_KEY3 in uiSchema) {
+      if (Array.isArray(uiSchema[ANY_OF_KEY3])) {
+        optionsUiSchema = uiSchema[ANY_OF_KEY3];
+      } else {
+        console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
+      }
+    }
+    let optionUiSchema = uiSchema;
+    if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
+      optionUiSchema = optionsUiSchema[selectedOption];
+    }
+    const translateEnum = title ? TranslatableString3.TitleOptionPrefix : TranslatableString3.OptionPrefix;
+    const translateParams = title ? [title] : [];
+    const enumOptions = retrievedOptions.map((opt, index) => {
+      const { title: uiTitle = opt.title } = getUiOptions6(optionsUiSchema[index]);
+      return {
+        label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
+        value: index
+      };
+    });
+    return /* @__PURE__ */ jsxs("div", { className: "panel panel-default panel-body", children: [
+      /* @__PURE__ */ jsx6("div", { className: "form-group", children: /* @__PURE__ */ jsx6(
+        Widget,
+        {
           id: this.getFieldId(),
           name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
           schema: { type: "number", default: 0 },
           onChange: this.onOptionChange,
           onBlur,
           onFocus,
-          disabled: disabled || isEmpty(enumOptions),
+          disabled: disabled || isEmpty3(enumOptions),
           multiple: false,
           rawErrors,
           errorSchema: fieldErrorSchema,
@@ -1109,196 +1869,74 @@ var AnyOfField = class extends Component2 {
           autocomplete,
           autofocus,
           label: title ?? name,
-          hideLabel: !displayLabel
+          hideLabel: !displayLabel,
+          readonly
         }
       ) }),
-      optionSchema && /* @__PURE__ */ jsx3(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema })
+      optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsx6(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema })
     ] });
   }
 };
 var MultiSchemaField_default = AnyOfField;
 
 // src/components/fields/NumberField.tsx
-import { useState, useCallback } from "react";
+import { useState as useState2, useCallback } from "react";
 import { asNumber } from "@rjsf/utils";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
 var trailingCharMatcher = /[0.]0*$/;
-function NumberField(props) {
-  const { registry, onChange, formData, value: initialValue } = props;
-  const [lastValue, setLastValue] = useState(initialValue);
-  const { StringField: StringField2 } = registry.fields;
-  let value = formData;
-  const handleChange = useCallback(
-    (value2) => {
-      setLastValue(value2);
-      if (`${value2}`.charAt(0) === ".") {
-        value2 = `0${value2}`;
-      }
-      const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? asNumber(value2.replace(trailingCharMatcher, "")) : asNumber(value2);
-      onChange(processed);
-    },
-    [onChange]
-  );
-  if (typeof lastValue === "string" && typeof value === "number") {
-    const re = new RegExp(`^(${String(value).replace(".", "\\.")})?\\.?0*$`);
-    if (lastValue.match(re)) {
-      value = lastValue;
-    }
-  }
-  return /* @__PURE__ */ jsx4(StringField2, { ...props, formData: value, onChange: handleChange });
-}
-var NumberField_default = NumberField;
-
-// src/components/fields/ObjectField.tsx
-import { Component as Component3 } from "react";
-import {
-  getTemplate as getTemplate2,
-  getUiOptions as getUiOptions4,
-  orderProperties,
-  TranslatableString as TranslatableString4,
-  ADDITIONAL_PROPERTY_FLAG,
-  PROPERTIES_KEY,
-  REF_KEY,
-  ANY_OF_KEY as ANY_OF_KEY2,
-  ONE_OF_KEY as ONE_OF_KEY2
-} from "@rjsf/utils";
-import Markdown from "markdown-to-jsx";
-import get3 from "lodash/get";
-import has from "lodash/has";
-import isObject3 from "lodash/isObject";
-import set2 from "lodash/set";
-import unset from "lodash/unset";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var ObjectField = class extends Component3 {
-  constructor() {
-    super(...arguments);
-    /** Set up the initial state */
-    this.state = {
-      wasPropertyKeyModified: false,
-      additionalProperties: {}
-    };
-    /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
-     * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
-     * formData.
-     *
-     * @param name - The name of the property
-     * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-     * @returns - The onPropertyChange callback for the `name` property
-     */
-    this.onPropertyChange = (name, addedByAdditionalProperties = false) => {
-      return (value, newErrorSchema, id) => {
-        const { formData, onChange, errorSchema } = this.props;
-        if (value === void 0 && addedByAdditionalProperties) {
-          value = "";
-        }
-        const newFormData = { ...formData, [name]: value };
-        onChange(
-          newFormData,
-          errorSchema && errorSchema && {
-            ...errorSchema,
-            [name]: newErrorSchema
-          },
-          id
-        );
-      };
-    };
-    /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
-     * and calls the `onChange` callback with it
-     *
-     * @param key - The key for which the drop callback is desired
-     * @returns - The drop property click callback
-     */
-    this.onDropPropertyClick = (key) => {
-      return (event) => {
-        event.preventDefault();
-        const { onChange, formData } = this.props;
-        const copiedFormData = { ...formData };
-        unset(copiedFormData, key);
-        onChange(copiedFormData);
-      };
-    };
-    /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
-     * that is already not assigned is found.
-     *
-     * @param preferredKey - The preferred name of a new key
-     * @param [formData] - The form data in which to check if the desired key already exists
-     * @returns - The name of the next available key from `preferredKey`
-     */
-    this.getAvailableKey = (preferredKey, formData) => {
-      const { uiSchema, registry } = this.props;
-      const { duplicateKeySuffixSeparator = "-" } = getUiOptions4(uiSchema, registry.globalUiOptions);
-      let index = 0;
-      let newKey = preferredKey;
-      while (has(formData, newKey)) {
-        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
-      }
-      return newKey;
-    };
-    /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
-     * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
-     *
-     * @param oldValue - The old value of a field
-     * @returns - The key change callback function
-     */
-    this.onKeyChange = (oldValue) => {
-      return (value, newErrorSchema) => {
-        if (oldValue === value) {
-          return;
-        }
-        const { formData, onChange, errorSchema } = this.props;
-        value = this.getAvailableKey(value, formData);
-        const newFormData = {
-          ...formData
-        };
-        const newKeys = { [oldValue]: value };
-        const keyValues = Object.keys(newFormData).map((key) => {
-          const newKey = newKeys[key] || key;
-          return { [newKey]: newFormData[key] };
-        });
-        const renamedObj = Object.assign({}, ...keyValues);
-        this.setState({ wasPropertyKeyModified: true });
-        onChange(
-          renamedObj,
-          errorSchema && errorSchema && {
-            ...errorSchema,
-            [value]: newErrorSchema
-          }
-        );
-      };
-    };
-    /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
-     * default data for that field has been added to the formData.
-     *
-     * @param schema - The schema element to which the new property is being added
-     */
-    this.handleAddClick = (schema) => () => {
-      if (!schema.additionalProperties) {
-        return;
-      }
-      const { formData, onChange, registry } = this.props;
-      const newFormData = { ...formData };
-      let type = void 0;
-      let defaultValue = void 0;
-      if (isObject3(schema.additionalProperties)) {
-        type = schema.additionalProperties.type;
-        defaultValue = schema.additionalProperties.default;
-        let apSchema = schema.additionalProperties;
-        if (REF_KEY in apSchema) {
-          const { schemaUtils } = registry;
-          apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] }, formData);
-          type = apSchema.type;
-          defaultValue = apSchema.default;
-        }
-        if (!type && (ANY_OF_KEY2 in apSchema || ONE_OF_KEY2 in apSchema)) {
-          type = "object";
-        }
+function NumberField(props) {
+  const { registry, onChange, formData, value: initialValue } = props;
+  const [lastValue, setLastValue] = useState2(initialValue);
+  const { StringField: StringField2 } = registry.fields;
+  let value = formData;
+  const handleChange = useCallback(
+    (value2, errorSchema, id) => {
+      setLastValue(value2);
+      if (`${value2}`.charAt(0) === ".") {
+        value2 = `0${value2}`;
       }
-      const newKey = this.getAvailableKey("newKey", newFormData);
-      set2(newFormData, newKey, defaultValue ?? this.getDefaultValue(type));
-      onChange(newFormData);
-    };
+      const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? asNumber(value2.replace(trailingCharMatcher, "")) : asNumber(value2);
+      onChange(processed, errorSchema, id);
+    },
+    [onChange]
+  );
+  if (typeof lastValue === "string" && typeof value === "number") {
+    const re = new RegExp(`^(${String(value).replace(".", "\\.")})?\\.?0*$`);
+    if (lastValue.match(re)) {
+      value = lastValue;
+    }
   }
+  return /* @__PURE__ */ jsx7(StringField2, { ...props, formData: value, onChange: handleChange });
+}
+var NumberField_default = NumberField;
+
+// src/components/fields/ObjectField.tsx
+import { Component as Component3 } from "react";
+import {
+  getTemplate as getTemplate5,
+  getUiOptions as getUiOptions7,
+  orderProperties,
+  TranslatableString as TranslatableString4,
+  ADDITIONAL_PROPERTY_FLAG,
+  PROPERTIES_KEY as PROPERTIES_KEY3,
+  REF_KEY,
+  ANY_OF_KEY as ANY_OF_KEY4,
+  ONE_OF_KEY as ONE_OF_KEY4
+} from "@rjsf/utils";
+import Markdown from "markdown-to-jsx";
+import get5 from "lodash/get";
+import has3 from "lodash/has";
+import isObject4 from "lodash/isObject";
+import set4 from "lodash/set";
+import unset from "lodash/unset";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var ObjectField = class extends Component3 {
+  /** Set up the initial state */
+  state = {
+    wasPropertyKeyModified: false,
+    additionalProperties: {}
+  };
   /** Returns a flag indicating whether the `name` field is required in the object schema
    *
    * @param name - The name of the field to check for required-ness
@@ -1308,6 +1946,95 @@ var ObjectField = class extends Component3 {
     const { schema } = this.props;
     return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
   }
+  /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
+   * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
+   * formData.
+   *
+   * @param name - The name of the property
+   * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
+   * @returns - The onPropertyChange callback for the `name` property
+   */
+  onPropertyChange = (name, addedByAdditionalProperties = false) => {
+    return (value, newErrorSchema, id) => {
+      const { formData, onChange, errorSchema } = this.props;
+      if (value === void 0 && addedByAdditionalProperties) {
+        value = "";
+      }
+      const newFormData = { ...formData, [name]: value };
+      onChange(
+        newFormData,
+        errorSchema && errorSchema && {
+          ...errorSchema,
+          [name]: newErrorSchema
+        },
+        id
+      );
+    };
+  };
+  /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
+   * and calls the `onChange` callback with it
+   *
+   * @param key - The key for which the drop callback is desired
+   * @returns - The drop property click callback
+   */
+  onDropPropertyClick = (key) => {
+    return (event) => {
+      event.preventDefault();
+      const { onChange, formData } = this.props;
+      const copiedFormData = { ...formData };
+      unset(copiedFormData, key);
+      onChange(copiedFormData);
+    };
+  };
+  /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
+   * that is already not assigned is found.
+   *
+   * @param preferredKey - The preferred name of a new key
+   * @param [formData] - The form data in which to check if the desired key already exists
+   * @returns - The name of the next available key from `preferredKey`
+   */
+  getAvailableKey = (preferredKey, formData) => {
+    const { uiSchema, registry } = this.props;
+    const { duplicateKeySuffixSeparator = "-" } = getUiOptions7(uiSchema, registry.globalUiOptions);
+    let index = 0;
+    let newKey = preferredKey;
+    while (has3(formData, newKey)) {
+      newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+    }
+    return newKey;
+  };
+  /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
+   * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
+   *
+   * @param oldValue - The old value of a field
+   * @returns - The key change callback function
+   */
+  onKeyChange = (oldValue) => {
+    return (value, newErrorSchema) => {
+      if (oldValue === value) {
+        return;
+      }
+      const { formData, onChange, errorSchema } = this.props;
+      value = this.getAvailableKey(value, formData);
+      const newFormData = {
+        ...formData
+      };
+      const newKeys = { [oldValue]: value };
+      const keyValues = Object.keys(newFormData).map((key) => {
+        const newKey = newKeys[key] || key;
+        return { [newKey]: newFormData[key] };
+      });
+      const renamedObj = Object.assign({}, ...keyValues);
+      this.setState({ wasPropertyKeyModified: true });
+      onChange(
+        renamedObj,
+        errorSchema && errorSchema && {
+          ...errorSchema,
+          [value]: newErrorSchema
+        }
+      );
+    };
+  };
   /** Returns a default value to be used for a new additional schema property of the given `type`
    *
    * @param type - The type of the new additional schema property
@@ -1332,6 +2059,45 @@ var ObjectField = class extends Component3 {
         return translateString(TranslatableString4.NewStringDefault);
     }
   }
+  /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
+   * default data for that field has been added to the formData.
+   *
+   * @param schema - The schema element to which the new property is being added
+   */
+  handleAddClick = (schema) => () => {
+    if (!(schema.additionalProperties || schema.patternProperties)) {
+      return;
+    }
+    const { formData, onChange, registry } = this.props;
+    const newFormData = { ...formData };
+    const newKey = this.getAvailableKey("newKey", newFormData);
+    if (schema.patternProperties) {
+      set4(newFormData, newKey, null);
+    } else {
+      let type = void 0;
+      let constValue = void 0;
+      let defaultValue = void 0;
+      if (isObject4(schema.additionalProperties)) {
+        type = schema.additionalProperties.type;
+        constValue = schema.additionalProperties.const;
+        defaultValue = schema.additionalProperties.default;
+        let apSchema = schema.additionalProperties;
+        if (REF_KEY in apSchema) {
+          const { schemaUtils } = registry;
+          apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] }, formData);
+          type = apSchema.type;
+          constValue = apSchema.const;
+          defaultValue = apSchema.default;
+        }
+        if (!type && (ANY_OF_KEY4 in apSchema || ONE_OF_KEY4 in apSchema)) {
+          type = "object";
+        }
+      }
+      const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+      set4(newFormData, newKey, newValue);
+    }
+    onChange(newFormData);
+  };
   /** Renders the `ObjectField` from the given props
    */
   render() {
@@ -1356,7 +2122,7 @@ var ObjectField = class extends Component3 {
     const { fields: fields2, formContext, schemaUtils, translateString, globalUiOptions } = registry;
     const { SchemaField: SchemaField2 } = fields2;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-    const uiOptions = getUiOptions4(uiSchema, globalUiOptions);
+    const uiOptions = getUiOptions7(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
@@ -1366,33 +2132,33 @@ var ObjectField = class extends Component3 {
       orderedProperties = orderProperties(properties, uiOptions.order);
     } catch (err) {
       return /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx5("p", { className: "config-error", style: { color: "red" }, children: /* @__PURE__ */ jsx5(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString4.InvalidObjectField, [name || "root", err.message]) }) }),
-        /* @__PURE__ */ jsx5("pre", { children: JSON.stringify(schema) })
+        /* @__PURE__ */ jsx8("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsx8(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString4.InvalidObjectField, [name || "root", err.message]) }) }),
+        /* @__PURE__ */ jsx8("pre", { children: JSON.stringify(schema) })
       ] });
     }
-    const Template = getTemplate2("ObjectFieldTemplate", registry, uiOptions);
+    const Template = getTemplate5("ObjectFieldTemplate", registry, uiOptions);
     const templateProps = {
       // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
       title: uiOptions.label === false ? "" : templateTitle,
       description: uiOptions.label === false ? void 0 : description,
       properties: orderedProperties.map((name2) => {
-        const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name2, ADDITIONAL_PROPERTY_FLAG]);
+        const addedByAdditionalProperties = has3(schema, [PROPERTIES_KEY3, name2, ADDITIONAL_PROPERTY_FLAG]);
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name2];
-        const hidden = getUiOptions4(fieldUiSchema).widget === "hidden";
-        const fieldIdSchema = get3(idSchema, [name2], {});
+        const hidden = getUiOptions7(fieldUiSchema).widget === "hidden";
+        const fieldIdSchema = get5(idSchema, [name2], {});
         return {
-          content: /* @__PURE__ */ jsx5(
+          content: /* @__PURE__ */ jsx8(
             SchemaField2,
             {
               name: name2,
               required: this.isRequired(name2),
-              schema: get3(schema, [PROPERTIES_KEY, name2], {}),
+              schema: get5(schema, [PROPERTIES_KEY3, name2], {}),
               uiSchema: fieldUiSchema,
-              errorSchema: get3(errorSchema, name2),
+              errorSchema: get5(errorSchema, name2),
               idSchema: fieldIdSchema,
               idPrefix,
               idSeparator,
-              formData: get3(formData, name2),
+              formData: get5(formData, name2),
               formContext,
               wasPropertyKeyModified: this.state.wasPropertyKeyModified,
               onKeyChange: this.onKeyChange(name2),
@@ -1425,7 +2191,7 @@ var ObjectField = class extends Component3 {
       formContext,
       registry
     };
-    return /* @__PURE__ */ jsx5(Template, { ...templateProps, onAddClick: this.handleAddClick });
+    return /* @__PURE__ */ jsx8(Template, { ...templateProps, onAddClick: this.handleAddClick });
   }
 };
 var ObjectField_default = ObjectField;
@@ -1437,17 +2203,17 @@ import {
   deepEquals as deepEquals2,
   descriptionId,
   getSchemaType,
-  getTemplate as getTemplate3,
-  getUiOptions as getUiOptions5,
-  ID_KEY,
-  mergeObjects,
+  getTemplate as getTemplate6,
+  getUiOptions as getUiOptions8,
+  ID_KEY as ID_KEY3,
+  mergeObjects as mergeObjects2,
   TranslatableString as TranslatableString5,
-  UI_OPTIONS_KEY
+  UI_OPTIONS_KEY as UI_OPTIONS_KEY2
 } from "@rjsf/utils";
-import isObject4 from "lodash/isObject";
-import omit2 from "lodash/omit";
+import isObject5 from "lodash/isObject";
+import omit3 from "lodash/omit";
 import Markdown2 from "markdown-to-jsx";
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var COMPONENT_TYPES = {
   array: "ArrayField",
   boolean: "BooleanField",
@@ -1477,12 +2243,12 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
     return () => null;
   }
   return componentName in fields2 ? fields2[componentName] : () => {
-    const UnsupportedFieldTemplate = getTemplate3(
+    const UnsupportedFieldTemplate = getTemplate6(
       "UnsupportedFieldTemplate",
       registry,
       uiOptions
     );
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx9(
       UnsupportedFieldTemplate,
       {
         schema,
@@ -1511,18 +2277,18 @@ function SchemaFieldRender(props) {
     wasPropertyKeyModified = false
   } = props;
   const { formContext, schemaUtils, globalUiOptions } = registry;
-  const uiOptions = getUiOptions5(uiSchema, globalUiOptions);
-  const FieldTemplate2 = getTemplate3("FieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = getTemplate3(
+  const uiOptions = getUiOptions8(uiSchema, globalUiOptions);
+  const FieldTemplate2 = getTemplate6("FieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate6(
     "DescriptionFieldTemplate",
     registry,
     uiOptions
   );
-  const FieldHelpTemplate2 = getTemplate3("FieldHelpTemplate", registry, uiOptions);
-  const FieldErrorTemplate2 = getTemplate3("FieldErrorTemplate", registry, uiOptions);
+  const FieldHelpTemplate2 = getTemplate6("FieldHelpTemplate", registry, uiOptions);
+  const FieldErrorTemplate2 = getTemplate6("FieldErrorTemplate", registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
-  const fieldId = _idSchema[ID_KEY];
-  const idSchema = mergeObjects(
+  const fieldId = _idSchema[ID_KEY3];
+  const idSchema = mergeObjects2(
     schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
     _idSchema
   );
@@ -1544,11 +2310,11 @@ function SchemaFieldRender(props) {
   }
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const { __errors, ...fieldErrorSchema } = errorSchema || {};
-  const fieldUiSchema = omit2(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
-  if (UI_OPTIONS_KEY in fieldUiSchema) {
-    fieldUiSchema[UI_OPTIONS_KEY] = omit2(fieldUiSchema[UI_OPTIONS_KEY], ["classNames", "style"]);
+  const fieldUiSchema = omit3(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
+  if (UI_OPTIONS_KEY2 in fieldUiSchema) {
+    fieldUiSchema[UI_OPTIONS_KEY2] = omit3(fieldUiSchema[UI_OPTIONS_KEY2], ["classNames", "style"]);
   }
-  const field = /* @__PURE__ */ jsx6(
+  const field = /* @__PURE__ */ jsx9(
     FieldComponent,
     {
       ...props,
@@ -1565,7 +2331,7 @@ function SchemaFieldRender(props) {
       rawErrors: __errors
     }
   );
-  const id = idSchema[ID_KEY];
+  const id = idSchema[ID_KEY3];
   let label;
   if (wasPropertyKeyModified) {
     label = name;
@@ -1573,25 +2339,17 @@ function SchemaFieldRender(props) {
     label = ADDITIONAL_PROPERTY_FLAG2 in schema ? name : uiOptions.title || props.schema.title || schema.title || props.title || name;
   }
   const description = uiOptions.description || props.schema.description || schema.description || "";
-  const richDescription = uiOptions.enableMarkdownInDescription ? /* @__PURE__ */ jsx6(Markdown2, { options: { disableParsingRawHTML: true }, children: description }) : description;
+  const richDescription = uiOptions.enableMarkdownInDescription ? /* @__PURE__ */ jsx9(Markdown2, { options: { disableParsingRawHTML: true }, children: description }) : description;
   const help = uiOptions.help;
   const hidden = uiOptions.widget === "hidden";
-  const classNames = ["form-group", "field", `field-${getSchemaType(schema)}`];
+  const classNames = ["rjsf-field", `rjsf-field-${getSchemaType(schema)}`];
   if (!hideError && __errors && __errors.length > 0) {
-    classNames.push("field-error has-error has-danger");
-  }
-  if (uiSchema?.classNames) {
-    if (true) {
-      console.warn(
-        "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
-      );
-    }
-    classNames.push(uiSchema.classNames);
+    classNames.push("rjsf-field-error");
   }
   if (uiOptions.classNames) {
     classNames.push(uiOptions.classNames);
   }
-  const helpComponent = /* @__PURE__ */ jsx6(
+  const helpComponent = /* @__PURE__ */ jsx9(
     FieldHelpTemplate2,
     {
       help,
@@ -1602,7 +2360,7 @@ function SchemaFieldRender(props) {
       registry
     }
   );
-  const errorsComponent = hideError || (schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) ? void 0 : /* @__PURE__ */ jsx6(
+  const errorsComponent = hideError || (schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) ? void 0 : /* @__PURE__ */ jsx9(
     FieldErrorTemplate2,
     {
       errors: __errors,
@@ -1614,7 +2372,7 @@ function SchemaFieldRender(props) {
     }
   );
   const fieldProps = {
-    description: /* @__PURE__ */ jsx6(
+    description: /* @__PURE__ */ jsx9(
       DescriptionFieldTemplate,
       {
         id: descriptionId(id),
@@ -1651,9 +2409,9 @@ function SchemaFieldRender(props) {
   const _AnyOfField = registry.fields.AnyOfField;
   const _OneOfField = registry.fields.OneOfField;
   const isReplacingAnyOrOneOf = uiSchema?.["ui:field"] && uiSchema?.["ui:fieldReplacesAnyOrOneOf"] === true;
-  return /* @__PURE__ */ jsx6(FieldTemplate2, { ...fieldProps, children: /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsx9(FieldTemplate2, { ...fieldProps, children: /* @__PURE__ */ jsxs3(Fragment, { children: [
     field,
-    schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ jsx6(
+    schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ jsx9(
       _AnyOfField,
       {
         name,
@@ -1670,14 +2428,15 @@ function SchemaFieldRender(props) {
         onChange: props.onChange,
         onFocus: props.onFocus,
         options: schema.anyOf.map(
-          (_schema2) => schemaUtils.retrieveSchema(isObject4(_schema2) ? _schema2 : {}, formData)
+          (_schema2) => schemaUtils.retrieveSchema(isObject5(_schema2) ? _schema2 : {}, formData)
         ),
         registry,
+        required,
         schema,
         uiSchema
       }
     ),
-    schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ jsx6(
+    schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ jsx9(
       _OneOfField,
       {
         name,
@@ -1694,9 +2453,10 @@ function SchemaFieldRender(props) {
         onChange: props.onChange,
         onFocus: props.onFocus,
         options: schema.oneOf.map(
-          (_schema2) => schemaUtils.retrieveSchema(isObject4(_schema2) ? _schema2 : {}, formData)
+          (_schema2) => schemaUtils.retrieveSchema(isObject5(_schema2) ? _schema2 : {}, formData)
         ),
         registry,
+        required,
         schema,
         uiSchema
       }
@@ -1708,19 +2468,19 @@ var SchemaField = class extends Component4 {
     return !deepEquals2(this.props, nextProps);
   }
   render() {
-    return /* @__PURE__ */ jsx6(SchemaFieldRender, { ...this.props });
+    return /* @__PURE__ */ jsx9(SchemaFieldRender, { ...this.props });
   }
 };
 var SchemaField_default = SchemaField;
 
 // src/components/fields/StringField.tsx
 import {
-  getWidget as getWidget4,
-  getUiOptions as getUiOptions6,
-  optionsList as optionsList3,
+  getWidget as getWidget5,
+  getUiOptions as getUiOptions9,
+  optionsList as optionsList4,
   hasWidget
 } from "@rjsf/utils";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function StringField(props) {
   const {
     schema,
@@ -1741,16 +2501,16 @@ function StringField(props) {
   } = props;
   const { title, format } = schema;
   const { widgets: widgets2, formContext, schemaUtils, globalUiOptions } = registry;
-  const enumOptions = schemaUtils.isSelect(schema) ? optionsList3(schema, uiSchema) : void 0;
+  const enumOptions = schemaUtils.isSelect(schema) ? optionsList4(schema, uiSchema) : void 0;
   let defaultWidget = enumOptions ? "select" : "text";
   if (format && hasWidget(schema, format, widgets2)) {
     defaultWidget = format;
   }
-  const { widget = defaultWidget, placeholder = "", title: uiTitle, ...options } = getUiOptions6(uiSchema);
+  const { widget = defaultWidget, placeholder = "", title: uiTitle, ...options } = getUiOptions9(uiSchema);
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const label = uiTitle ?? title ?? name;
-  const Widget = getWidget4(schema, widget, widgets2);
-  return /* @__PURE__ */ jsx7(
+  const Widget = getWidget5(schema, widget, widgets2);
+  return /* @__PURE__ */ jsx10(
     Widget,
     {
       options: { ...options, enumOptions },
@@ -1779,10 +2539,10 @@ function StringField(props) {
 var StringField_default = StringField;
 
 // src/components/fields/NullField.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function NullField(props) {
   const { formData, onChange } = props;
-  useEffect(() => {
+  useEffect2(() => {
     if (formData === void 0) {
       onChange(null);
     }
@@ -1798,6 +2558,9 @@ function fields() {
     ArrayField: ArrayField_default,
     // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
     BooleanField: BooleanField_default,
+    LayoutGridField,
+    LayoutHeaderField,
+    LayoutMultiSchemaField,
     NumberField: NumberField_default,
     ObjectField: ObjectField_default,
     OneOfField: MultiSchemaField_default,
@@ -1811,23 +2574,23 @@ var fields_default = fields;
 // src/components/templates/ArrayFieldDescriptionTemplate.tsx
 import {
   descriptionId as descriptionId2,
-  getTemplate as getTemplate4,
-  getUiOptions as getUiOptions7
+  getTemplate as getTemplate7,
+  getUiOptions as getUiOptions10
 } from "@rjsf/utils";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function ArrayFieldDescriptionTemplate(props) {
   const { idSchema, description, registry, schema, uiSchema } = props;
-  const options = getUiOptions7(uiSchema, registry.globalUiOptions);
+  const options = getUiOptions10(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!description || !displayLabel) {
     return null;
   }
-  const DescriptionFieldTemplate = getTemplate4(
+  const DescriptionFieldTemplate = getTemplate7(
     "DescriptionFieldTemplate",
     registry,
     options
   );
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     DescriptionFieldTemplate,
     {
       id: descriptionId2(idSchema),
@@ -1840,26 +2603,19 @@ function ArrayFieldDescriptionTemplate(props) {
 }
 
 // src/components/templates/ArrayFieldItemTemplate.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import {
+  getTemplate as getTemplate8,
+  getUiOptions as getUiOptions11
+} from "@rjsf/utils";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function ArrayFieldItemTemplate(props) {
-  const {
-    children,
-    className,
-    disabled,
-    hasToolbar,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    hasCopy,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
+  const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+  const uiOptions = getUiOptions11(uiSchema);
+  const ArrayFieldItemButtonsTemplate2 = getTemplate8(
+    "ArrayFieldItemButtonsTemplate",
     registry,
-    uiSchema
-  } = props;
-  const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+    uiOptions
+  );
   const btnStyle = {
     flex: 1,
     paddingLeft: 6,
@@ -1867,8 +2623,8 @@ function ArrayFieldItemTemplate(props) {
     fontWeight: "bold"
   };
   return /* @__PURE__ */ jsxs4("div", { className, children: [
-    /* @__PURE__ */ jsx9("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
-    hasToolbar && /* @__PURE__ */ jsx9("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx12("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
+    hasToolbar && /* @__PURE__ */ jsx12("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsx12(
       "div",
       {
         className: "btn-group",
@@ -1876,59 +2632,94 @@ function ArrayFieldItemTemplate(props) {
           display: "flex",
           justifyContent: "space-around"
         },
-        children: [
-          (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx9(
-            MoveUpButton2,
-            {
-              style: btnStyle,
-              disabled: disabled || readonly || !hasMoveUp,
-              onClick: onReorderClick(index, index - 1),
-              uiSchema,
-              registry
-            }
-          ),
-          (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx9(
-            MoveDownButton2,
-            {
-              style: btnStyle,
-              disabled: disabled || readonly || !hasMoveDown,
-              onClick: onReorderClick(index, index + 1),
-              uiSchema,
-              registry
-            }
-          ),
-          hasCopy && /* @__PURE__ */ jsx9(
-            CopyButton2,
-            {
-              style: btnStyle,
-              disabled: disabled || readonly,
-              onClick: onCopyIndexClick(index),
-              uiSchema,
-              registry
-            }
-          ),
-          hasRemove && /* @__PURE__ */ jsx9(
-            RemoveButton2,
-            {
-              style: btnStyle,
-              disabled: disabled || readonly,
-              onClick: onDropIndexClick(index),
-              uiSchema,
-              registry
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsx12(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle })
       }
     ) })
   ] });
 }
 
+// src/components/templates/ArrayFieldItemButtonsTemplate.tsx
+import { useMemo } from "react";
+import {
+  buttonId
+} from "@rjsf/utils";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function ArrayFieldItemButtonsTemplate(props) {
+  const {
+    disabled,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    idSchema,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema
+  } = props;
+  const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx13(
+      MoveUpButton2,
+      {
+        id: buttonId(idSchema, "moveUp"),
+        className: "rjsf-array-item-move-up",
+        disabled: disabled || readonly || !hasMoveUp,
+        onClick: onArrowUpClick,
+        uiSchema,
+        registry
+      }
+    ),
+    (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx13(
+      MoveDownButton2,
+      {
+        id: buttonId(idSchema, "moveDown"),
+        className: "rjsf-array-item-move-down",
+        disabled: disabled || readonly || !hasMoveDown,
+        onClick: onArrowDownClick,
+        uiSchema,
+        registry
+      }
+    ),
+    hasCopy && /* @__PURE__ */ jsx13(
+      CopyButton2,
+      {
+        id: buttonId(idSchema, "copy"),
+        className: "rjsf-array-item-copy",
+        disabled: disabled || readonly,
+        onClick: onCopyClick,
+        uiSchema,
+        registry
+      }
+    ),
+    hasRemove && /* @__PURE__ */ jsx13(
+      RemoveButton2,
+      {
+        id: buttonId(idSchema, "remove"),
+        className: "rjsf-array-item-remove",
+        disabled: disabled || readonly,
+        onClick: onRemoveClick,
+        uiSchema,
+        registry
+      }
+    )
+  ] });
+}
+
 // src/components/templates/ArrayFieldTemplate.tsx
 import {
-  getTemplate as getTemplate5,
-  getUiOptions as getUiOptions8
+  getTemplate as getTemplate9,
+  getUiOptions as getUiOptions12,
+  buttonId as buttonId2
 } from "@rjsf/utils";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
   const {
     canAdd,
@@ -1944,18 +2735,18 @@ function ArrayFieldTemplate(props) {
     schema,
     title
   } = props;
-  const uiOptions = getUiOptions8(uiSchema);
-  const ArrayFieldDescriptionTemplate2 = getTemplate5(
+  const uiOptions = getUiOptions12(uiSchema);
+  const ArrayFieldDescriptionTemplate2 = getTemplate9(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate5(
+  const ArrayFieldItemTemplate2 = getTemplate9(
     "ArrayFieldItemTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldTitleTemplate2 = getTemplate5(
+  const ArrayFieldTitleTemplate2 = getTemplate9(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
@@ -1963,8 +2754,8 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs5("fieldset", { className, id: idSchema.$id, children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs6("fieldset", { className, id: idSchema.$id, children: [
+    /* @__PURE__ */ jsx14(
       ArrayFieldTitleTemplate2,
       {
         idSchema,
@@ -1975,7 +2766,7 @@ function ArrayFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx14(
       ArrayFieldDescriptionTemplate2,
       {
         idSchema,
@@ -1985,11 +2776,12 @@ function ArrayFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx10("div", { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx10(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
-    canAdd && /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx14("div", { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx14(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+    canAdd && /* @__PURE__ */ jsx14(
       AddButton2,
       {
-        className: "array-item-add",
+        id: buttonId2(idSchema, "add"),
+        className: "rjsf-array-item-add",
         onClick: onAddClick,
         disabled: disabled || readonly,
         uiSchema,
@@ -2001,27 +2793,27 @@ function ArrayFieldTemplate(props) {
 
 // src/components/templates/ArrayFieldTitleTemplate.tsx
 import {
-  getTemplate as getTemplate6,
-  getUiOptions as getUiOptions9,
-  titleId
+  getTemplate as getTemplate10,
+  getUiOptions as getUiOptions13,
+  titleId as titleId2
 } from "@rjsf/utils";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ArrayFieldTitleTemplate(props) {
   const { idSchema, title, schema, uiSchema, required, registry } = props;
-  const options = getUiOptions9(uiSchema, registry.globalUiOptions);
+  const options = getUiOptions13(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!title || !displayLabel) {
     return null;
   }
-  const TitleFieldTemplate = getTemplate6(
+  const TitleFieldTemplate = getTemplate10(
     "TitleFieldTemplate",
     registry,
     options
   );
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx15(
     TitleFieldTemplate,
     {
-      id: titleId(idSchema),
+      id: titleId2(idSchema),
       title,
       required,
       schema,
@@ -2038,7 +2830,7 @@ import {
   examplesId,
   getInputProps
 } from "@rjsf/utils";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
@@ -2091,8 +2883,8 @@ function BaseInputTemplate(props) {
     ({ target }) => onFocus(id, target && target.value),
     [onFocus, id]
   );
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx16(
       "input",
       {
         id,
@@ -2110,21 +2902,21 @@ function BaseInputTemplate(props) {
         "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
       }
     ),
-    Array.isArray(schema.examples) && /* @__PURE__ */ jsx12("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
-      return /* @__PURE__ */ jsx12("option", { value: example }, example);
+    Array.isArray(schema.examples) && /* @__PURE__ */ jsx16("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
+      return /* @__PURE__ */ jsx16("option", { value: example }, example);
     }) }, `datalist_${id}`)
   ] });
 }
 
 // src/components/templates/ButtonTemplates/SubmitButton.tsx
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("button", { type: "submit", ...submitButtonProps, className: `btn btn-info ${submitButtonProps.className || ""}`, children: submitText }) });
+  return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17("button", { type: "submit", ...submitButtonProps, className: `btn btn-info ${submitButtonProps.className || ""}`, children: submitText }) });
 }
 
 // src/components/templates/ButtonTemplates/AddButton.tsx
@@ -2132,71 +2924,38 @@ import { TranslatableString as TranslatableString7 } from "@rjsf/utils";
 
 // src/components/templates/ButtonTemplates/IconButton.tsx
 import { TranslatableString as TranslatableString6 } from "@rjsf/utils";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function IconButton(props) {
   const { iconType = "default", icon, className, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ jsx14("button", { type: "button", className: `btn btn-${iconType} ${className}`, ...otherProps, children: /* @__PURE__ */ jsx14("i", { className: `glyphicon glyphicon-${icon}` }) });
+  return /* @__PURE__ */ jsx18("button", { type: "button", className: `btn btn-${iconType} ${className}`, ...otherProps, children: /* @__PURE__ */ jsx18("i", { className: `glyphicon glyphicon-${icon}` }) });
 }
 function CopyButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx14(
-    IconButton,
-    {
-      title: translateString(TranslatableString6.CopyButton),
-      className: "array-item-copy",
-      ...props,
-      icon: "copy"
-    }
-  );
+  return /* @__PURE__ */ jsx18(IconButton, { title: translateString(TranslatableString6.CopyButton), ...props, icon: "copy" });
 }
 function MoveDownButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx14(
-    IconButton,
-    {
-      title: translateString(TranslatableString6.MoveDownButton),
-      className: "array-item-move-down",
-      ...props,
-      icon: "arrow-down"
-    }
-  );
+  return /* @__PURE__ */ jsx18(IconButton, { title: translateString(TranslatableString6.MoveDownButton), ...props, icon: "arrow-down" });
 }
 function MoveUpButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx14(
-    IconButton,
-    {
-      title: translateString(TranslatableString6.MoveUpButton),
-      className: "array-item-move-up",
-      ...props,
-      icon: "arrow-up"
-    }
-  );
+  return /* @__PURE__ */ jsx18(IconButton, { title: translateString(TranslatableString6.MoveUpButton), ...props, icon: "arrow-up" });
 }
 function RemoveButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx14(
-    IconButton,
-    {
-      title: translateString(TranslatableString6.RemoveButton),
-      className: "array-item-remove",
-      ...props,
-      iconType: "danger",
-      icon: "remove"
-    }
-  );
+  return /* @__PURE__ */ jsx18(IconButton, { title: translateString(TranslatableString6.RemoveButton), ...props, iconType: "danger", icon: "remove" });
 }
 
 // src/components/templates/ButtonTemplates/AddButton.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function AddButton({
   className,
   onClick,
@@ -2204,7 +2963,7 @@ function AddButton({
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsx15("div", { className: "row", children: /* @__PURE__ */ jsx15("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx19("div", { className: "row", children: /* @__PURE__ */ jsx19("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ jsx19(
     IconButton,
     {
       iconType: "info",
@@ -2232,16 +2991,16 @@ function buttonTemplates() {
 var ButtonTemplates_default = buttonTemplates;
 
 // src/components/templates/DescriptionField.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function DescriptionField(props) {
   const { id, description } = props;
   if (!description) {
     return null;
   }
   if (typeof description === "string") {
-    return /* @__PURE__ */ jsx16("p", { id, className: "field-description", children: description });
+    return /* @__PURE__ */ jsx20("p", { id, className: "field-description", children: description });
   } else {
-    return /* @__PURE__ */ jsx16("div", { id, className: "field-description", children: description });
+    return /* @__PURE__ */ jsx20("div", { id, className: "field-description", children: description });
   }
 }
 
@@ -2249,55 +3008,55 @@ function DescriptionField(props) {
 import {
   TranslatableString as TranslatableString8
 } from "@rjsf/utils";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 function ErrorList({
   errors,
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsxs7("div", { className: "panel panel-danger errors", children: [
-    /* @__PURE__ */ jsx17("div", { className: "panel-heading", children: /* @__PURE__ */ jsx17("h3", { className: "panel-title", children: translateString(TranslatableString8.ErrorsLabel) }) }),
-    /* @__PURE__ */ jsx17("ul", { className: "list-group", children: errors.map((error, i) => {
-      return /* @__PURE__ */ jsx17("li", { className: "list-group-item text-danger", children: error.stack }, i);
+  return /* @__PURE__ */ jsxs8("div", { className: "panel panel-danger errors", children: [
+    /* @__PURE__ */ jsx21("div", { className: "panel-heading", children: /* @__PURE__ */ jsx21("h3", { className: "panel-title", children: translateString(TranslatableString8.ErrorsLabel) }) }),
+    /* @__PURE__ */ jsx21("ul", { className: "list-group", children: errors.map((error, i) => {
+      return /* @__PURE__ */ jsx21("li", { className: "list-group-item text-danger", children: error.stack }, i);
     }) })
   ] });
 }
 
 // src/components/templates/FieldTemplate/FieldTemplate.tsx
 import {
-  getTemplate as getTemplate7,
-  getUiOptions as getUiOptions10
+  getTemplate as getTemplate11,
+  getUiOptions as getUiOptions14
 } from "@rjsf/utils";
 
 // src/components/templates/FieldTemplate/Label.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var REQUIRED_FIELD_SYMBOL = "*";
 function Label(props) {
   const { label, required, id } = props;
   if (!label) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("label", { className: "control-label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs9("label", { className: "control-label", htmlFor: id, children: [
     label,
-    required && /* @__PURE__ */ jsx18("span", { className: "required", children: REQUIRED_FIELD_SYMBOL })
+    required && /* @__PURE__ */ jsx22("span", { className: "required", children: REQUIRED_FIELD_SYMBOL })
   ] });
 }
 
 // src/components/templates/FieldTemplate/FieldTemplate.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema } = props;
-  const uiOptions = getUiOptions10(uiSchema);
-  const WrapIfAdditionalTemplate2 = getTemplate7(
+  const uiOptions = getUiOptions14(uiSchema);
+  const WrapIfAdditionalTemplate2 = getTemplate11(
     "WrapIfAdditionalTemplate",
     registry,
     uiOptions
   );
   if (hidden) {
-    return /* @__PURE__ */ jsx19("div", { className: "hidden", children });
+    return /* @__PURE__ */ jsx23("div", { className: "hidden", children });
   }
-  return /* @__PURE__ */ jsxs9(WrapIfAdditionalTemplate2, { ...props, children: [
-    displayLabel && /* @__PURE__ */ jsx19(Label, { label, required, id }),
+  return /* @__PURE__ */ jsxs10(WrapIfAdditionalTemplate2, { ...props, children: [
+    displayLabel && /* @__PURE__ */ jsx23(Label, { label, required, id }),
     displayLabel && description ? description : null,
     children,
     errors,
@@ -2310,21 +3069,21 @@ var FieldTemplate_default = FieldTemplate;
 
 // src/components/templates/FieldErrorTemplate.tsx
 import { errorId } from "@rjsf/utils";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function FieldErrorTemplate(props) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {
     return null;
   }
   const id = errorId(idSchema);
-  return /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
-    return /* @__PURE__ */ jsx20("li", { className: "text-danger", children: error }, index);
+  return /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
+    return /* @__PURE__ */ jsx24("li", { className: "text-danger", children: error }, index);
   }) }) });
 }
 
 // src/components/templates/FieldHelpTemplate.tsx
 import { helpId } from "@rjsf/utils";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
   const { idSchema, help } = props;
   if (!help) {
@@ -2332,20 +3091,28 @@ function FieldHelpTemplate(props) {
   }
   const id = helpId(idSchema);
   if (typeof help === "string") {
-    return /* @__PURE__ */ jsx21("p", { id, className: "help-block", children: help });
+    return /* @__PURE__ */ jsx25("p", { id, className: "help-block", children: help });
   }
-  return /* @__PURE__ */ jsx21("div", { id, className: "help-block", children: help });
+  return /* @__PURE__ */ jsx25("div", { id, className: "help-block", children: help });
+}
+
+// src/components/templates/GridTemplate.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function GridTemplate(props) {
+  const { children, column, className, ...rest } = props;
+  return /* @__PURE__ */ jsx26("div", { className, ...rest, children });
 }
 
 // src/components/templates/ObjectFieldTemplate.tsx
 import {
   canExpand,
   descriptionId as descriptionId3,
-  getTemplate as getTemplate8,
-  getUiOptions as getUiOptions11,
-  titleId as titleId2
+  getTemplate as getTemplate12,
+  getUiOptions as getUiOptions15,
+  titleId as titleId3,
+  buttonId as buttonId3
 } from "@rjsf/utils";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -2361,9 +3128,9 @@ function ObjectFieldTemplate(props) {
     title,
     uiSchema
   } = props;
-  const options = getUiOptions11(uiSchema);
-  const TitleFieldTemplate = getTemplate8("TitleFieldTemplate", registry, options);
-  const DescriptionFieldTemplate = getTemplate8(
+  const options = getUiOptions15(uiSchema);
+  const TitleFieldTemplate = getTemplate12("TitleFieldTemplate", registry, options);
+  const DescriptionFieldTemplate = getTemplate12(
     "DescriptionFieldTemplate",
     registry,
     options
@@ -2371,11 +3138,11 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs10("fieldset", { id: idSchema.$id, children: [
-    title && /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs11("fieldset", { id: idSchema.$id, children: [
+    title && /* @__PURE__ */ jsx27(
       TitleFieldTemplate,
       {
-        id: titleId2(idSchema),
+        id: titleId3(idSchema),
         title,
         required,
         schema,
@@ -2383,7 +3150,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    description && /* @__PURE__ */ jsx22(
+    description && /* @__PURE__ */ jsx27(
       DescriptionFieldTemplate,
       {
         id: descriptionId3(idSchema),
@@ -2394,10 +3161,11 @@ function ObjectFieldTemplate(props) {
       }
     ),
     properties.map((prop) => prop.content),
-    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx22(
+    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx27(
       AddButton2,
       {
-        className: "object-property-expand",
+        id: buttonId3(idSchema, "add"),
+        className: "rjsf-object-property-expand",
         onClick: onAddClick(schema),
         disabled: disabled || readonly,
         uiSchema,
@@ -2408,20 +3176,20 @@ function ObjectFieldTemplate(props) {
 }
 
 // src/components/templates/TitleField.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
 var REQUIRED_FIELD_SYMBOL2 = "*";
 function TitleField(props) {
   const { id, title, required } = props;
-  return /* @__PURE__ */ jsxs11("legend", { id, children: [
+  return /* @__PURE__ */ jsxs12("legend", { id, children: [
     title,
-    required && /* @__PURE__ */ jsx23("span", { className: "required", children: REQUIRED_FIELD_SYMBOL2 })
+    required && /* @__PURE__ */ jsx28("span", { className: "required", children: REQUIRED_FIELD_SYMBOL2 })
   ] });
 }
 
 // src/components/templates/UnsupportedField.tsx
 import { TranslatableString as TranslatableString9 } from "@rjsf/utils";
 import Markdown3 from "markdown-to-jsx";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function UnsupportedField(props) {
   const { schema, idSchema, reason, registry } = props;
   const { translateString } = registry;
@@ -2435,9 +3203,9 @@ function UnsupportedField(props) {
     translateEnum = translateEnum === TranslatableString9.UnsupportedField ? TranslatableString9.UnsupportedFieldWithReason : TranslatableString9.UnsupportedFieldWithIdAndReason;
     translateParams.push(reason);
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "unsupported-field", children: [
-    /* @__PURE__ */ jsx24("p", { children: /* @__PURE__ */ jsx24(Markdown3, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
-    schema && /* @__PURE__ */ jsx24("pre", { children: JSON.stringify(schema, null, 2) })
+  return /* @__PURE__ */ jsxs13("div", { className: "unsupported-field", children: [
+    /* @__PURE__ */ jsx29("p", { children: /* @__PURE__ */ jsx29(Markdown3, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
+    schema && /* @__PURE__ */ jsx29("pre", { children: JSON.stringify(schema, null, 2) })
   ] });
 }
 var UnsupportedField_default = UnsupportedField;
@@ -2445,9 +3213,10 @@ var UnsupportedField_default = UnsupportedField;
 // src/components/templates/WrapIfAdditionalTemplate.tsx
 import {
   ADDITIONAL_PROPERTY_FLAG as ADDITIONAL_PROPERTY_FLAG3,
+  buttonId as buttonId4,
   TranslatableString as TranslatableString10
 } from "@rjsf/utils";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
@@ -2460,6 +3229,8 @@ function WrapIfAdditionalTemplate(props) {
     readonly,
     required,
     schema,
+    hideError,
+    rawErrors,
     children,
     uiSchema,
     registry
@@ -2468,13 +3239,18 @@ function WrapIfAdditionalTemplate(props) {
   const { RemoveButton: RemoveButton2 } = templates2.ButtonTemplates;
   const keyLabel = translateString(TranslatableString10.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG3 in schema;
+  const classNamesList = ["form-group", classNames];
+  if (!hideError && rawErrors && rawErrors.length > 0) {
+    classNamesList.push("has-error has-danger");
+  }
+  const uiClassNames = classNamesList.join(" ").trim();
   if (!additional) {
-    return /* @__PURE__ */ jsx25("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx30("div", { className: uiClassNames, style, children });
   }
-  return /* @__PURE__ */ jsx25("div", { className: classNames, style, children: /* @__PURE__ */ jsxs13("div", { className: "row", children: [
-    /* @__PURE__ */ jsx25("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ jsxs13("div", { className: "form-group", children: [
-      /* @__PURE__ */ jsx25(Label, { label: keyLabel, required, id: `${id}-key` }),
-      /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx30("div", { className: uiClassNames, style, children: /* @__PURE__ */ jsxs14("div", { className: "row", children: [
+    /* @__PURE__ */ jsx30("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ jsxs14("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsx30(Label, { label: keyLabel, required, id: `${id}-key` }),
+      /* @__PURE__ */ jsx30(
         "input",
         {
           className: "form-control",
@@ -2485,11 +3261,12 @@ function WrapIfAdditionalTemplate(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx25("div", { className: "form-additional form-group col-xs-5", children }),
-    /* @__PURE__ */ jsx25("div", { className: "col-xs-2", children: /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx30("div", { className: "form-additional form-group col-xs-5", children }),
+    /* @__PURE__ */ jsx30("div", { className: "col-xs-2", children: /* @__PURE__ */ jsx30(
       RemoveButton2,
       {
-        className: "array-item-remove btn-block",
+        id: buttonId4(id, "remove"),
+        className: "rjsf-object-property-remove btn-block",
         style: { border: "0" },
         disabled: disabled || readonly,
         onClick: onDropPropertyClick(label),
@@ -2505,6 +3282,7 @@ function templates() {
   return {
     ArrayFieldDescriptionTemplate,
     ArrayFieldItemTemplate,
+    ArrayFieldItemButtonsTemplate,
     ArrayFieldTemplate,
     ArrayFieldTitleTemplate,
     ButtonTemplates: ButtonTemplates_default(),
@@ -2514,6 +3292,7 @@ function templates() {
     FieldTemplate: FieldTemplate_default,
     FieldErrorTemplate,
     FieldHelpTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     UnsupportedFieldTemplate: UnsupportedField_default,
@@ -2523,7 +3302,7 @@ function templates() {
 var templates_default = templates;
 
 // src/components/widgets/AltDateWidget.tsx
-import { useCallback as useCallback4, useEffect as useEffect2, useReducer, useState as useState2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useReducer, useState as useState3 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds2,
   dateRangeOptions,
@@ -2532,7 +3311,7 @@ import {
   TranslatableString as TranslatableString11,
   getDateElementProps
 } from "@rjsf/utils";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 function readyForChange(state) {
   return Object.values(state).every((value) => value !== -1);
 }
@@ -2552,7 +3331,7 @@ function DateElement({
 }) {
   const id = rootId + "_" + type;
   const { SelectWidget: SelectWidget2 } = registry.widgets;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     SelectWidget2,
     {
       schema: { type: "integer" },
@@ -2589,11 +3368,14 @@ function AltDateWidget({
   value
 }) {
   const { translateString } = registry;
-  const [lastValue, setLastValue] = useState2(value);
-  const [state, setState] = useReducer((state2, action) => {
-    return { ...state2, ...action };
-  }, parseDateString(value, time));
-  useEffect2(() => {
+  const [lastValue, setLastValue] = useState3(value);
+  const [state, setState] = useReducer(
+    (state2, action) => {
+      return { ...state2, ...action };
+    },
+    parseDateString(value, time)
+  );
+  useEffect3(() => {
     const stateValue = toDateString(state, time);
     if (readyForChange(state) && stateValue !== value) {
       onChange(stateValue);
@@ -2626,13 +3408,13 @@ function AltDateWidget({
     },
     [disabled, readonly, onChange]
   );
-  return /* @__PURE__ */ jsxs14("ul", { className: "list-inline", children: [
+  return /* @__PURE__ */ jsxs15("ul", { className: "list-inline", children: [
     getDateElementProps(
       state,
       time,
       options.yearsRange,
       options.format
-    ).map((elemProps, i) => /* @__PURE__ */ jsx26("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx26(
+    ).map((elemProps, i) => /* @__PURE__ */ jsx31("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx31(
       DateElement,
       {
         rootId: id,
@@ -2647,20 +3429,20 @@ function AltDateWidget({
         autofocus: autofocus && i === 0
       }
     ) }, i)),
-    (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx26("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx26("a", { href: "#", className: "btn btn-info btn-now", onClick: handleSetNow, children: translateString(TranslatableString11.NowLabel) }) }),
-    (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx26("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx26("a", { href: "#", className: "btn btn-warning btn-clear", onClick: handleClear, children: translateString(TranslatableString11.ClearLabel) }) })
+    (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx31("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx31("a", { href: "#", className: "btn btn-info btn-now", onClick: handleSetNow, children: translateString(TranslatableString11.NowLabel) }) }),
+    (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx31("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx31("a", { href: "#", className: "btn btn-warning btn-clear", onClick: handleClear, children: translateString(TranslatableString11.ClearLabel) }) })
   ] });
 }
 var AltDateWidget_default = AltDateWidget;
 
 // src/components/widgets/AltDateTimeWidget.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function AltDateTimeWidget({
   time = true,
   ...props
 }) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx27(AltDateWidget2, { time, ...props });
+  return /* @__PURE__ */ jsx32(AltDateWidget2, { time, ...props });
 }
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
@@ -2669,11 +3451,11 @@ import { useCallback as useCallback5 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
   descriptionId as descriptionId4,
-  getTemplate as getTemplate9,
+  getTemplate as getTemplate13,
   labelValue,
   schemaRequiresTrueValue
 } from "@rjsf/utils";
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 function CheckboxWidget({
   schema,
   uiSchema,
@@ -2690,7 +3472,7 @@ function CheckboxWidget({
   onChange,
   registry
 }) {
-  const DescriptionFieldTemplate = getTemplate9(
+  const DescriptionFieldTemplate = getTemplate13(
     "DescriptionFieldTemplate",
     registry,
     options
@@ -2709,8 +3491,8 @@ function CheckboxWidget({
     [onFocus, id]
   );
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ jsxs15("div", { className: `checkbox ${disabled || readonly ? "disabled" : ""}`, children: [
-    !hideLabel && !!description && /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs16("div", { className: `checkbox ${disabled || readonly ? "disabled" : ""}`, children: [
+    !hideLabel && !!description && /* @__PURE__ */ jsx33(
       DescriptionFieldTemplate,
       {
         id: descriptionId4(id),
@@ -2720,8 +3502,8 @@ function CheckboxWidget({
         registry
       }
     ),
-    /* @__PURE__ */ jsxs15("label", { children: [
-      /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsxs16("label", { children: [
+      /* @__PURE__ */ jsx33(
         "input",
         {
           type: "checkbox",
@@ -2737,7 +3519,7 @@ function CheckboxWidget({
           "aria-describedby": ariaDescribedByIds3(id)
         }
       ),
-      labelValue(/* @__PURE__ */ jsx28("span", { children: label }), hideLabel)
+      labelValue(/* @__PURE__ */ jsx33("span", { children: label }), hideLabel)
     ] })
   ] });
 }
@@ -2753,7 +3535,7 @@ import {
   enumOptionsValueForIndex,
   optionId
 } from "@rjsf/utils";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 function CheckboxesWidget({
   id,
   disabled,
@@ -2774,7 +3556,7 @@ function CheckboxesWidget({
     ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
     [onFocus, id]
   );
-  return /* @__PURE__ */ jsx29("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ jsx34("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = enumOptionsIsSelected(option.value, checkboxesValues);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
@@ -2785,8 +3567,8 @@ function CheckboxesWidget({
         onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
       }
     };
-    const checkbox = /* @__PURE__ */ jsxs16("span", { children: [
-      /* @__PURE__ */ jsx29(
+    const checkbox = /* @__PURE__ */ jsxs17("span", { children: [
+      /* @__PURE__ */ jsx34(
         "input",
         {
           type: "checkbox",
@@ -2802,44 +3584,44 @@ function CheckboxesWidget({
           "aria-describedby": ariaDescribedByIds4(id)
         }
       ),
-      /* @__PURE__ */ jsx29("span", { children: option.label })
+      /* @__PURE__ */ jsx34("span", { children: option.label })
     ] });
-    return inline ? /* @__PURE__ */ jsx29("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index) : /* @__PURE__ */ jsx29("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ jsx29("label", { children: checkbox }) }, index);
+    return inline ? /* @__PURE__ */ jsx34("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index) : /* @__PURE__ */ jsx34("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ jsx34("label", { children: checkbox }) }, index);
   }) });
 }
 var CheckboxesWidget_default = CheckboxesWidget;
 
 // src/components/widgets/ColorWidget.tsx
-import { getTemplate as getTemplate10 } from "@rjsf/utils";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { getTemplate as getTemplate14 } from "@rjsf/utils";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function ColorWidget(props) {
   const { disabled, readonly, options, registry } = props;
-  const BaseInputTemplate2 = getTemplate10("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx30(BaseInputTemplate2, { type: "color", ...props, disabled: disabled || readonly });
+  const BaseInputTemplate2 = getTemplate14("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx35(BaseInputTemplate2, { type: "color", ...props, disabled: disabled || readonly });
 }
 
 // src/components/widgets/DateWidget.tsx
 import { useCallback as useCallback7 } from "react";
-import { getTemplate as getTemplate11 } from "@rjsf/utils";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { getTemplate as getTemplate15 } from "@rjsf/utils";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function DateWidget(props) {
   const { onChange, options, registry } = props;
-  const BaseInputTemplate2 = getTemplate11("BaseInputTemplate", registry, options);
+  const BaseInputTemplate2 = getTemplate15("BaseInputTemplate", registry, options);
   const handleChange = useCallback7((value) => onChange(value || void 0), [onChange]);
-  return /* @__PURE__ */ jsx31(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
+  return /* @__PURE__ */ jsx36(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
 }
 
 // src/components/widgets/DateTimeWidget.tsx
 import {
-  getTemplate as getTemplate12,
+  getTemplate as getTemplate16,
   localToUTC,
   utcToLocal
 } from "@rjsf/utils";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function DateTimeWidget(props) {
   const { onChange, value, options, registry } = props;
-  const BaseInputTemplate2 = getTemplate12("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx32(
+  const BaseInputTemplate2 = getTemplate16("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx37(
     BaseInputTemplate2,
     {
       type: "datetime-local",
@@ -2851,23 +3633,23 @@ function DateTimeWidget(props) {
 }
 
 // src/components/widgets/EmailWidget.tsx
-import { getTemplate as getTemplate13 } from "@rjsf/utils";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { getTemplate as getTemplate17 } from "@rjsf/utils";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function EmailWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = getTemplate13("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx33(BaseInputTemplate2, { type: "email", ...props });
+  const BaseInputTemplate2 = getTemplate17("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx38(BaseInputTemplate2, { type: "email", ...props });
 }
 
 // src/components/widgets/FileWidget.tsx
-import { useCallback as useCallback8, useMemo } from "react";
+import { useCallback as useCallback8, useMemo as useMemo2 } from "react";
 import {
   dataURItoBlob,
-  getTemplate as getTemplate14,
+  getTemplate as getTemplate18,
   TranslatableString as TranslatableString12
 } from "@rjsf/utils";
 import Markdown4 from "markdown-to-jsx";
-import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 function addNameToDataURL(dataURL, name) {
   if (dataURL === null) {
     return null;
@@ -2912,11 +3694,11 @@ function FileInfoPreview({
     return null;
   }
   if (["image/jpeg", "image/png"].includes(type)) {
-    return /* @__PURE__ */ jsx34("img", { src: dataURL, style: { maxWidth: "100%" }, className: "file-preview" });
+    return /* @__PURE__ */ jsx39("img", { src: dataURL, style: { maxWidth: "100%" }, className: "file-preview" });
   }
-  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
     " ",
-    /* @__PURE__ */ jsx34("a", { download: `preview-${name}`, href: dataURL, className: "file-download", children: translateString(TranslatableString12.PreviewLabel) })
+    /* @__PURE__ */ jsx39("a", { download: `preview-${name}`, href: dataURL, className: "file-download", children: translateString(TranslatableString12.PreviewLabel) })
   ] });
 }
 function FilesInfo({
@@ -2930,14 +3712,14 @@ function FilesInfo({
     return null;
   }
   const { translateString } = registry;
-  const { RemoveButton: RemoveButton2 } = getTemplate14("ButtonTemplates", registry, options);
-  return /* @__PURE__ */ jsx34("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
+  const { RemoveButton: RemoveButton2 } = getTemplate18("ButtonTemplates", registry, options);
+  return /* @__PURE__ */ jsx39("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
     const { name, size, type } = fileInfo;
     const handleRemove = () => onRemove(key);
-    return /* @__PURE__ */ jsxs17("li", { children: [
-      /* @__PURE__ */ jsx34(Markdown4, { children: translateString(TranslatableString12.FilesInfo, [name, type, String(size)]) }),
-      preview && /* @__PURE__ */ jsx34(FileInfoPreview, { fileInfo, registry }),
-      /* @__PURE__ */ jsx34(RemoveButton2, { onClick: handleRemove, registry })
+    return /* @__PURE__ */ jsxs18("li", { children: [
+      /* @__PURE__ */ jsx39(Markdown4, { children: translateString(TranslatableString12.FilesInfo, [name, type, String(size)]) }),
+      preview && /* @__PURE__ */ jsx39(FileInfoPreview, { fileInfo, registry }),
+      /* @__PURE__ */ jsx39(RemoveButton2, { onClick: handleRemove, registry })
     ] }, key);
   }) });
 }
@@ -2957,14 +3739,14 @@ function extractFileInfo(dataURLs) {
           type: blob.type
         }
       ];
-    } catch (e) {
+    } catch {
       return acc;
     }
   }, []);
 }
 function FileWidget(props) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
-  const BaseInputTemplate2 = getTemplate14("BaseInputTemplate", registry, options);
+  const BaseInputTemplate2 = getTemplate18("BaseInputTemplate", registry, options);
   const handleChange = useCallback8(
     (event) => {
       if (!event.target.files) {
@@ -2973,7 +3755,7 @@ function FileWidget(props) {
       processFiles(event.target.files).then((filesInfoEvent) => {
         const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
         if (multiple) {
-          onChange(value.concat(newValue[0]));
+          onChange(value.concat(newValue));
         } else {
           onChange(newValue[0]);
         }
@@ -2981,7 +3763,7 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const filesInfo = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
+  const filesInfo = useMemo2(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
   const rmFile = useCallback8(
     (index) => {
       if (multiple) {
@@ -2993,8 +3775,8 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  return /* @__PURE__ */ jsxs17("div", { children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsx39(
       BaseInputTemplate2,
       {
         ...props,
@@ -3006,7 +3788,7 @@ function FileWidget(props) {
         accept: options.accept ? String(options.accept) : void 0
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx39(
       FilesInfo,
       {
         filesInfo,
@@ -3021,22 +3803,22 @@ function FileWidget(props) {
 var FileWidget_default = FileWidget;
 
 // src/components/widgets/HiddenWidget.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function HiddenWidget({
   id,
   value
 }) {
-  return /* @__PURE__ */ jsx35("input", { type: "hidden", id, name: id, value: typeof value === "undefined" ? "" : value });
+  return /* @__PURE__ */ jsx40("input", { type: "hidden", id, name: id, value: typeof value === "undefined" ? "" : value });
 }
 var HiddenWidget_default = HiddenWidget;
 
 // src/components/widgets/PasswordWidget.tsx
-import { getTemplate as getTemplate15 } from "@rjsf/utils";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { getTemplate as getTemplate19 } from "@rjsf/utils";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function PasswordWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = getTemplate15("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx36(BaseInputTemplate2, { type: "password", ...props });
+  const BaseInputTemplate2 = getTemplate19("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx41(BaseInputTemplate2, { type: "password", ...props });
 }
 
 // src/components/widgets/RadioWidget.tsx
@@ -3047,7 +3829,7 @@ import {
   enumOptionsValueForIndex as enumOptionsValueForIndex2,
   optionId as optionId2
 } from "@rjsf/utils";
-import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 function RadioWidget({
   options,
   value,
@@ -3063,19 +3845,19 @@ function RadioWidget({
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const handleBlur = useCallback9(
     ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id]
+    [onBlur, enumOptions, emptyValue, id]
   );
   const handleFocus = useCallback9(
     ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id]
+    [onFocus, enumOptions, emptyValue, id]
   );
-  return /* @__PURE__ */ jsx37("div", { className: "field-radio-group", id, children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
+  return /* @__PURE__ */ jsx42("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
     const checked = enumOptionsIsSelected2(option.value, value);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
     const handleChange = () => onChange(option.value);
-    const radio = /* @__PURE__ */ jsxs18("span", { children: [
-      /* @__PURE__ */ jsx37(
+    const radio = /* @__PURE__ */ jsxs19("span", { children: [
+      /* @__PURE__ */ jsx42(
         "input",
         {
           type: "radio",
@@ -3092,15 +3874,15 @@ function RadioWidget({
           "aria-describedby": ariaDescribedByIds5(id)
         }
       ),
-      /* @__PURE__ */ jsx37("span", { children: option.label })
+      /* @__PURE__ */ jsx42("span", { children: option.label })
     ] });
-    return inline ? /* @__PURE__ */ jsx37("label", { className: `radio-inline ${disabledCls}`, children: radio }, i) : /* @__PURE__ */ jsx37("div", { className: `radio ${disabledCls}`, children: /* @__PURE__ */ jsx37("label", { children: radio }) }, i);
+    return inline ? /* @__PURE__ */ jsx42("label", { className: `radio-inline ${disabledCls}`, children: radio }, i) : /* @__PURE__ */ jsx42("div", { className: `radio ${disabledCls}`, children: /* @__PURE__ */ jsx42("label", { children: radio }) }, i);
   }) });
 }
 var RadioWidget_default = RadioWidget;
 
 // src/components/widgets/RangeWidget.tsx
-import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const {
     value,
@@ -3108,20 +3890,123 @@ function RangeWidget(props) {
       templates: { BaseInputTemplate: BaseInputTemplate2 }
     }
   } = props;
-  return /* @__PURE__ */ jsxs19("div", { className: "field-range-wrapper", children: [
-    /* @__PURE__ */ jsx38(BaseInputTemplate2, { type: "range", ...props }),
-    /* @__PURE__ */ jsx38("span", { className: "range-view", children: value })
+  return /* @__PURE__ */ jsxs20("div", { className: "field-range-wrapper", children: [
+    /* @__PURE__ */ jsx43(BaseInputTemplate2, { type: "range", ...props }),
+    /* @__PURE__ */ jsx43("span", { className: "range-view", children: value })
   ] });
 }
 
-// src/components/widgets/SelectWidget.tsx
+// src/components/widgets/RatingWidget.tsx
 import { useCallback as useCallback10 } from "react";
+import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
+function RatingWidget({
+  id,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus,
+  onChange,
+  onFocus,
+  onBlur,
+  schema,
+  options
+}) {
+  const { stars = 5, shape = "star" } = options;
+  const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
+  const min = schema.minimum || 0;
+  const handleStarClick = useCallback10(
+    (starValue) => {
+      if (!disabled && !readonly) {
+        onChange(starValue);
+      }
+    },
+    [onChange, disabled, readonly]
+  );
+  const handleFocus = useCallback10(
+    (event) => {
+      if (onFocus) {
+        const starValue = Number(event.target.dataset.value);
+        onFocus(id, starValue);
+      }
+    },
+    [onFocus, id]
+  );
+  const handleBlur = useCallback10(
+    (event) => {
+      if (onBlur) {
+        const starValue = Number(event.target.dataset.value);
+        onBlur(id, starValue);
+      }
+    },
+    [onBlur, id]
+  );
+  const getSymbol = (isFilled) => {
+    if (shape === "heart") {
+      return isFilled ? "\u2665" : "\u2661";
+    }
+    return isFilled ? "\u2605" : "\u2606";
+  };
+  return /* @__PURE__ */ jsx44(Fragment5, { children: /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: "rating-widget",
+      style: {
+        display: "inline-flex",
+        fontSize: "1.5rem",
+        cursor: disabled || readonly ? "default" : "pointer"
+      },
+      children: [
+        [...Array(numStars)].map((_, index) => {
+          const starValue = min + index;
+          const isFilled = starValue <= value;
+          return /* @__PURE__ */ jsx44(
+            "span",
+            {
+              onClick: () => handleStarClick(starValue),
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              "data-value": starValue,
+              tabIndex: disabled || readonly ? -1 : 0,
+              role: "radio",
+              "aria-checked": starValue === value,
+              "aria-label": `${starValue} ${shape === "heart" ? "heart" : "star"}${starValue === 1 ? "" : "s"}`,
+              style: {
+                color: isFilled ? "#FFD700" : "#ccc",
+                padding: "0 0.2rem",
+                transition: "color 0.2s",
+                userSelect: "none"
+              },
+              children: getSymbol(isFilled)
+            },
+            index
+          );
+        }),
+        /* @__PURE__ */ jsx44(
+          "input",
+          {
+            type: "hidden",
+            id,
+            name: id,
+            value: value || "",
+            required,
+            disabled: disabled || readonly,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/components/widgets/SelectWidget.tsx
+import { useCallback as useCallback11 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds6,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex as enumOptionsValueForIndex3
 } from "@rjsf/utils";
-import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
 function getValue(event, multiple) {
   if (multiple) {
     return Array.from(event.target.options).slice().filter((o) => o.selected).map((o) => o.value);
@@ -3145,35 +4030,36 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : "";
-  const handleFocus = useCallback10(
+  const handleFocus = useCallback11(
     (event) => {
       const newValue = getValue(event, multiple);
       return onFocus(id, enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
     },
-    [onFocus, id, schema, multiple, enumOptions, optEmptyVal]
+    [onFocus, id, multiple, enumOptions, optEmptyVal]
   );
-  const handleBlur = useCallback10(
+  const handleBlur = useCallback11(
     (event) => {
       const newValue = getValue(event, multiple);
       return onBlur(id, enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
     },
-    [onBlur, id, schema, multiple, enumOptions, optEmptyVal]
+    [onBlur, id, multiple, enumOptions, optEmptyVal]
   );
-  const handleChange = useCallback10(
+  const handleChange = useCallback11(
     (event) => {
       const newValue = getValue(event, multiple);
       return onChange(enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
     },
-    [onChange, schema, multiple, enumOptions, optEmptyVal]
+    [onChange, multiple, enumOptions, optEmptyVal]
   );
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(
     "select",
     {
       id,
       name: id,
       multiple,
+      role: "combobox",
       className: "form-control",
       value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
       required,
@@ -3184,10 +4070,10 @@ function SelectWidget({
       onChange: handleChange,
       "aria-describedby": ariaDescribedByIds6(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ jsx39("option", { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ jsx45("option", { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ jsx39("option", { value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ jsx45("option", { value: String(i), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -3196,9 +4082,9 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/components/widgets/TextareaWidget.tsx
-import { useCallback as useCallback11 } from "react";
+import { useCallback as useCallback12 } from "react";
 import { ariaDescribedByIds as ariaDescribedByIds7 } from "@rjsf/utils";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function TextareaWidget({
   id,
   options = {},
@@ -3212,19 +4098,19 @@ function TextareaWidget({
   onBlur,
   onFocus
 }) {
-  const handleChange = useCallback11(
+  const handleChange = useCallback12(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options.emptyValue]
   );
-  const handleBlur = useCallback11(
+  const handleBlur = useCallback12(
     ({ target }) => onBlur(id, target && target.value),
     [onBlur, id]
   );
-  const handleFocus = useCallback11(
+  const handleFocus = useCallback12(
     ({ target }) => onFocus(id, target && target.value),
     [id, onFocus]
   );
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx46(
     "textarea",
     {
       id,
@@ -3251,41 +4137,41 @@ TextareaWidget.defaultProps = {
 var TextareaWidget_default = TextareaWidget;
 
 // src/components/widgets/TextWidget.tsx
-import { getTemplate as getTemplate16 } from "@rjsf/utils";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { getTemplate as getTemplate20 } from "@rjsf/utils";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function TextWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = getTemplate16("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx41(BaseInputTemplate2, { ...props });
+  const BaseInputTemplate2 = getTemplate20("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx47(BaseInputTemplate2, { ...props });
 }
 
 // src/components/widgets/TimeWidget.tsx
-import { useCallback as useCallback12 } from "react";
-import { getTemplate as getTemplate17 } from "@rjsf/utils";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { useCallback as useCallback13 } from "react";
+import { getTemplate as getTemplate21 } from "@rjsf/utils";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function TimeWidget(props) {
   const { onChange, options, registry } = props;
-  const BaseInputTemplate2 = getTemplate17("BaseInputTemplate", registry, options);
-  const handleChange = useCallback12((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
-  return /* @__PURE__ */ jsx42(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
+  const BaseInputTemplate2 = getTemplate21("BaseInputTemplate", registry, options);
+  const handleChange = useCallback13((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
+  return /* @__PURE__ */ jsx48(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
 }
 
 // src/components/widgets/URLWidget.tsx
-import { getTemplate as getTemplate18 } from "@rjsf/utils";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { getTemplate as getTemplate22 } from "@rjsf/utils";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function URLWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = getTemplate18("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx43(BaseInputTemplate2, { type: "url", ...props });
+  const BaseInputTemplate2 = getTemplate22("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx49(BaseInputTemplate2, { type: "url", ...props });
 }
 
 // src/components/widgets/UpDownWidget.tsx
-import { getTemplate as getTemplate19 } from "@rjsf/utils";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { getTemplate as getTemplate23 } from "@rjsf/utils";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function UpDownWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = getTemplate19("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ jsx44(BaseInputTemplate2, { type: "number", ...props });
+  const BaseInputTemplate2 = getTemplate23("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ jsx50(BaseInputTemplate2, { type: "number", ...props });
 }
 
 // src/components/widgets/index.ts
@@ -3304,6 +4190,7 @@ function widgets() {
     PasswordWidget,
     RadioWidget: RadioWidget_default,
     RangeWidget,
+    RatingWidget,
     SelectWidget: SelectWidget_default,
     TextWidget,
     TextareaWidget: TextareaWidget_default,
@@ -3327,8 +4214,12 @@ function getDefaultRegistry() {
 }
 
 // src/components/Form.tsx
-import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
 var Form = class extends Component5 {
+  /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
+   * provide any possible type here
+   */
+  formElement;
   /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
    * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
    * state construction.
@@ -3337,270 +4228,6 @@ var Form = class extends Component5 {
    */
   constructor(props) {
     super(props);
-    /** Returns the `formData` with only the elements specified in the `fields` list
-     *
-     * @param formData - The data for the `Form`
-     * @param fields - The fields to keep while filtering
-     */
-    this.getUsedFormData = (formData, fields2) => {
-      if (fields2.length === 0 && typeof formData !== "object") {
-        return formData;
-      }
-      const data = _pick(formData, fields2);
-      if (Array.isArray(formData)) {
-        return Object.keys(data).map((key) => data[key]);
-      }
-      return data;
-    };
-    /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
-     *
-     * @param pathSchema - The `PathSchema` object for the form
-     * @param [formData] - The form data to use while checking for empty objects/arrays
-     */
-    this.getFieldNames = (pathSchema, formData) => {
-      const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-        Object.keys(_obj).forEach((key) => {
-          if (typeof _obj[key] === "object") {
-            const newPaths = paths.map((path) => [...path, key]);
-            if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
-              acc.push(_obj[key][NAME_KEY]);
-            } else {
-              getAllPaths(_obj[key], acc, newPaths);
-            }
-          } else if (key === NAME_KEY && _obj[key] !== "") {
-            paths.forEach((path) => {
-              const formValue = _get(formData, path);
-              if (typeof formValue !== "object" || _isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
-                acc.push(path);
-              }
-            });
-          }
-        });
-        return acc;
-      };
-      return getAllPaths(pathSchema);
-    };
-    /** Returns the `formData` after filtering to remove any extra data not in a form field
-     *
-     * @param formData - The data for the `Form`
-     * @returns The `formData` after omitting extra data
-     */
-    this.omitExtraData = (formData) => {
-      const { schema, schemaUtils } = this.state;
-      const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-      const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
-      const fieldNames = this.getFieldNames(pathSchema, formData);
-      const newFormData = this.getUsedFormData(formData, fieldNames);
-      return newFormData;
-    };
-    /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
-     * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-     * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
-     * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-     * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-     * callback will be called if specified with the updated state.
-     *
-     * @param formData - The new form data from a change to a field
-     * @param newErrorSchema - The new `ErrorSchema` based on the field change
-     * @param id - The id of the field that caused the change
-     */
-    this.onChange = (formData, newErrorSchema, id) => {
-      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-      const { schemaUtils, schema, retrievedSchema } = this.state;
-      if (isObject5(formData) || Array.isArray(formData)) {
-        const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
-        formData = newState.formData;
-      }
-      const mustValidate = !noValidate && liveValidate;
-      let state = { formData, schema };
-      let newFormData = formData;
-      let _retrievedSchema;
-      if (omitExtraData === true && liveOmit === true) {
-        newFormData = this.omitExtraData(formData);
-        state = {
-          formData: newFormData
-        };
-      }
-      if (mustValidate) {
-        const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-        let errors = schemaValidation.errors;
-        let errorSchema = schemaValidation.errorSchema;
-        const schemaValidationErrors = errors;
-        const schemaValidationErrorSchema = errorSchema;
-        if (extraErrors) {
-          const merged = validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (newErrorSchema) {
-          const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-          errorSchema = mergeObjects2(errorSchema, filteredErrors, "preventDuplicates");
-        }
-        state = {
-          formData: newFormData,
-          errors,
-          errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema
-        };
-      } else if (!noValidate && newErrorSchema) {
-        const errorSchema = extraErrors ? mergeObjects2(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
-        state = {
-          formData: newFormData,
-          errorSchema,
-          errors: toErrorList(errorSchema)
-        };
-      }
-      if (_retrievedSchema) {
-        state.retrievedSchema = _retrievedSchema;
-      }
-      this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-    };
-    /**
-     * Callback function to handle reset form data.
-     * - Reset all fields with default values.
-     * - Reset validations and errors
-     *
-     */
-    this.reset = () => {
-      const { onChange } = this.props;
-      const newState = this.getStateFromProps(this.props, void 0);
-      const newFormData = newState.formData;
-      const state = {
-        formData: newFormData,
-        errorSchema: {},
-        errors: [],
-        schemaValidationErrors: [],
-        schemaValidationErrorSchema: {}
-      };
-      this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
-    };
-    /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-     * was provided.
-     *
-     * @param id - The unique `id` of the field that was blurred
-     * @param data - The data associated with the field that was blurred
-     */
-    this.onBlur = (id, data) => {
-      const { onBlur } = this.props;
-      if (onBlur) {
-        onBlur(id, data);
-      }
-    };
-    /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
-     * was provided.
-     *
-     * @param id - The unique `id` of the field that was focused
-     * @param data - The data associated with the field that was focused
-     */
-    this.onFocus = (id, data) => {
-      const { onFocus } = this.props;
-      if (onFocus) {
-        onFocus(id, data);
-      }
-    };
-    /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
-     * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
-     * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
-     * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
-     * back the `onSubmit` callback if it was provided.
-     *
-     * @param event - The submit HTML form event
-     */
-    this.onSubmit = (event) => {
-      event.preventDefault();
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      event.persist();
-      const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
-      let { formData: newFormData } = this.state;
-      if (omitExtraData === true) {
-        newFormData = this.omitExtraData(newFormData);
-      }
-      if (noValidate || this.validateFormWithFormData(newFormData)) {
-        const errorSchema = extraErrors || {};
-        const errors = extraErrors ? toErrorList(extraErrors) : [];
-        this.setState(
-          {
-            formData: newFormData,
-            errors,
-            errorSchema,
-            schemaValidationErrors: [],
-            schemaValidationErrorSchema: {}
-          },
-          () => {
-            if (onSubmit) {
-              onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
-            }
-          }
-        );
-      }
-    };
-    /** Provides a function that can be used to programmatically submit the `Form` */
-    this.submit = () => {
-      if (this.formElement.current) {
-        const submitCustomEvent = new CustomEvent("submit", {
-          cancelable: true
-        });
-        submitCustomEvent.preventDefault();
-        this.formElement.current.dispatchEvent(submitCustomEvent);
-        this.formElement.current.requestSubmit();
-      }
-    };
-    /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
-     * If `onError` is provided, then it will be called with the list of errors.
-     *
-     * @param formData - The form data to validate
-     * @returns - True if the form is valid, false otherwise.
-     */
-    this.validateFormWithFormData = (formData) => {
-      const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-      const { errors: prevErrors } = this.state;
-      const schemaValidation = this.validate(formData);
-      let errors = schemaValidation.errors;
-      let errorSchema = schemaValidation.errorSchema;
-      const schemaValidationErrors = errors;
-      const schemaValidationErrorSchema = errorSchema;
-      const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
-      if (hasError) {
-        if (extraErrors) {
-          const merged = validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (focusOnFirstError) {
-          if (typeof focusOnFirstError === "function") {
-            focusOnFirstError(errors[0]);
-          } else {
-            this.focusOnError(errors[0]);
-          }
-        }
-        this.setState(
-          {
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          },
-          () => {
-            if (onError) {
-              onError(errors);
-            } else {
-              console.error("Form validation failed", errors);
-            }
-          }
-        );
-      } else if (prevErrors.length > 0) {
-        this.setState({
-          errors: [],
-          errorSchema: {},
-          schemaValidationErrors: [],
-          schemaValidationErrorSchema: {}
-        });
-      }
-      return !hasError;
-    };
     if (!props.validator) {
       throw new Error("A validator is required for Form functionality to work");
     }
@@ -3630,8 +4257,9 @@ var Form = class extends Component5 {
    */
   getSnapshotBeforeUpdate(prevProps, prevState) {
     if (!deepEquals3(this.props, prevProps)) {
+      const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
       const isSchemaChanged = !deepEquals3(prevProps.schema, this.props.schema);
-      const isFormDataChanged = !deepEquals3(prevProps.formData, this.props.formData);
+      const isFormDataChanged = formDataChangedFields.length > 0 || !deepEquals3(prevProps.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -3639,7 +4267,8 @@ var Form = class extends Component5 {
         // Or if the `formData` changes, for example in the case of a schema with dependencies that need to
         //  match one of the subSchemas, the retrieved schema must be updated.
         isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
-        isSchemaChanged
+        isSchemaChanged,
+        formDataChangedFields
       );
       const shouldUpdate = !deepEquals3(nextState, prevState);
       return { nextState, shouldUpdate };
@@ -3654,9 +4283,6 @@ var Form = class extends Component5 {
    * If an update is required, it applies the next state and, if needed, triggers the `onChange` handler to inform about
    * changes.
    *
-   * This method effectively replaces the deprecated `UNSAFE_componentWillReceiveProps`, providing a safer alternative
-   * to handle prop changes and state updates.
-   *
    * @param _ - The previous set of props.
    * @param prevState - The previous state of the component before the update.
    * @param snapshot - The value returned from `getSnapshotBeforeUpdate`.
@@ -3678,9 +4304,10 @@ var Form = class extends Component5 {
    * @param inputFormData - The new or current data for the `Form`
    * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
    * @param isSchemaChanged - A flag indicating whether the schema has changed.
+   * @param formDataChangedFields - The changed fields of `formData`
    * @returns - The new state for the `Form`
    */
-  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false) {
+  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
     const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
@@ -3689,12 +4316,25 @@ var Form = class extends Component5 {
     const mustValidate = edit && !props.noValidate && liveValidate;
     const rootSchema = schema;
     const experimental_defaultFormStateBehavior = "experimental_defaultFormStateBehavior" in props ? props.experimental_defaultFormStateBehavior : this.props.experimental_defaultFormStateBehavior;
+    const experimental_customMergeAllOf = "experimental_customMergeAllOf" in props ? props.experimental_customMergeAllOf : this.props.experimental_customMergeAllOf;
     let schemaUtils = state.schemaUtils;
-    if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema, experimental_defaultFormStateBehavior)) {
-      schemaUtils = createSchemaUtils(props.validator, rootSchema, experimental_defaultFormStateBehavior);
+    if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(
+      props.validator,
+      rootSchema,
+      experimental_defaultFormStateBehavior,
+      experimental_customMergeAllOf
+    )) {
+      schemaUtils = createSchemaUtils(
+        props.validator,
+        rootSchema,
+        experimental_defaultFormStateBehavior,
+        experimental_customMergeAllOf
+      );
     }
     const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-    const _retrievedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+    const _retrievedSchema = this.updateRetrievedSchema(
+      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+    );
     const getCurrentErrors = () => {
       if (props.noValidate || isSchemaChanged) {
         return { errors: [], errorSchema: {} };
@@ -3716,10 +4356,10 @@ var Form = class extends Component5 {
     if (mustValidate) {
       const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
       errors = schemaValidation.errors;
-      if (isSchemaChanged) {
+      if (retrievedSchema === void 0) {
         errorSchema = schemaValidation.errorSchema;
       } else {
-        errorSchema = mergeObjects2(
+        errorSchema = mergeObjects3(
           this.state?.errorSchema,
           schemaValidation.errorSchema,
           "preventDuplicates"
@@ -3731,6 +4371,20 @@ var Form = class extends Component5 {
       const currentErrors = getCurrentErrors();
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
+      if (formDataChangedFields.length > 0) {
+        const newErrorSchema = formDataChangedFields.reduce(
+          (acc, key) => {
+            acc[key] = void 0;
+            return acc;
+          },
+          {}
+        );
+        errorSchema = schemaValidationErrorSchema = mergeObjects3(
+          currentErrors.errorSchema,
+          newErrorSchema,
+          "preventDuplicates"
+        );
+      }
     }
     if (props.extraErrors) {
       const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
@@ -3768,6 +4422,21 @@ var Form = class extends Component5 {
   shouldComponentUpdate(nextProps, nextState) {
     return shouldRender(this, nextProps, nextState);
   }
+  /** Gets the previously raised customValidate errors.
+   *
+   * @returns the previous customValidate errors
+   */
+  getPreviousCustomValidateErrors() {
+    const { customValidate, uiSchema } = this.props;
+    const prevFormData = this.state.formData;
+    let customValidateErrors = {};
+    if (typeof customValidate === "function") {
+      const errorHandler = customValidate(prevFormData, createErrorHandler(prevFormData), uiSchema);
+      const userErrorSchema = unwrapErrorHandler(errorHandler);
+      customValidateErrors = userErrorSchema;
+    }
+    return customValidateErrors;
+  }
   /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
    * `schemaUtils` in the state), returning the results.
    *
@@ -3785,10 +4454,10 @@ var Form = class extends Component5 {
   renderErrors(registry) {
     const { errors, errorSchema, schema, uiSchema } = this.state;
     const { formContext } = this.props;
-    const options = getUiOptions12(uiSchema);
-    const ErrorListTemplate = getTemplate20("ErrorListTemplate", registry, options);
+    const options = getUiOptions16(uiSchema);
+    const ErrorListTemplate = getTemplate24("ErrorListTemplate", registry, options);
     if (errors && errors.length) {
-      return /* @__PURE__ */ jsx45(
+      return /* @__PURE__ */ jsx51(
         ErrorListTemplate,
         {
           errors,
@@ -3802,6 +4471,62 @@ var Form = class extends Component5 {
     }
     return null;
   }
+  /** Returns the `formData` with only the elements specified in the `fields` list
+   *
+   * @param formData - The data for the `Form`
+   * @param fields - The fields to keep while filtering
+   */
+  getUsedFormData = (formData, fields2) => {
+    if (fields2.length === 0 && typeof formData !== "object") {
+      return formData;
+    }
+    const data = _pick(formData, fields2);
+    if (Array.isArray(formData)) {
+      return Object.keys(data).map((key) => data[key]);
+    }
+    return data;
+  };
+  /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
+   *
+   * @param pathSchema - The `PathSchema` object for the form
+   * @param [formData] - The form data to use while checking for empty objects/arrays
+   */
+  getFieldNames = (pathSchema, formData) => {
+    const getAllPaths = (_obj, acc = [], paths = [[]]) => {
+      Object.keys(_obj).forEach((key) => {
+        if (typeof _obj[key] === "object") {
+          const newPaths = paths.map((path) => [...path, key]);
+          if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
+            acc.push(_obj[key][NAME_KEY]);
+          } else {
+            getAllPaths(_obj[key], acc, newPaths);
+          }
+        } else if (key === NAME_KEY && _obj[key] !== "") {
+          paths.forEach((path) => {
+            const formValue = _get(formData, path);
+            if (typeof formValue !== "object" || _isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
+              acc.push(path);
+            }
+          });
+        }
+      });
+      return acc;
+    };
+    return getAllPaths(pathSchema);
+  };
+  /** Returns the `formData` after filtering to remove any extra data not in a form field
+   *
+   * @param formData - The data for the `Form`
+   * @returns The `formData` after omitting extra data
+   */
+  omitExtraData = (formData) => {
+    const { schema, schemaUtils } = this.state;
+    const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+    const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+    const fieldNames = this.getFieldNames(pathSchema, formData);
+    const newFormData = this.getUsedFormData(formData, fieldNames);
+    return newFormData;
+  };
   // Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
   filterErrorsBasedOnSchema(schemaErrors, resolvedSchema, formData) {
     const { retrievedSchema, schemaUtils } = this.state;
@@ -3812,18 +4537,185 @@ var Form = class extends Component5 {
     if (resolvedSchema?.type !== "object" && resolvedSchema?.type !== "array") {
       filteredErrors.__errors = schemaErrors.__errors;
     }
-    const filterUndefinedErrors = (errors) => {
+    const prevCustomValidateErrors = this.getPreviousCustomValidateErrors();
+    const filterPreviousCustomErrors = (errors = [], prevCustomErrors) => {
+      if (errors.length === 0) {
+        return errors;
+      }
+      return errors.filter((error) => {
+        return !prevCustomErrors.includes(error);
+      });
+    };
+    const filterNilOrEmptyErrors = (errors, previousCustomValidateErrors = {}) => {
       _forEach(errors, (errorAtKey, errorKey) => {
-        if (errorAtKey === void 0) {
+        const prevCustomValidateErrorAtKey = previousCustomValidateErrors[errorKey];
+        if (_isNil(errorAtKey) || Array.isArray(errorAtKey) && errorAtKey.length === 0) {
           delete errors[errorKey];
+        } else if (isObject6(errorAtKey) && isObject6(prevCustomValidateErrorAtKey) && Array.isArray(prevCustomValidateErrorAtKey?.__errors)) {
+          errors[errorKey] = filterPreviousCustomErrors(errorAtKey.__errors, prevCustomValidateErrorAtKey.__errors);
         } else if (typeof errorAtKey === "object" && !Array.isArray(errorAtKey.__errors)) {
-          filterUndefinedErrors(errorAtKey);
+          filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
         }
       });
       return errors;
     };
-    return filterUndefinedErrors(filteredErrors);
+    return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
+  }
+  /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
+   * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
+   * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
+   * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
+   * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
+   * callback will be called if specified with the updated state.
+   *
+   * @param formData - The new form data from a change to a field
+   * @param newErrorSchema - The new `ErrorSchema` based on the field change
+   * @param id - The id of the field that caused the change
+   */
+  onChange = (formData, newErrorSchema, id) => {
+    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+    const { schemaUtils, schema } = this.state;
+    let retrievedSchema = this.state.retrievedSchema;
+    if (isObject6(formData) || Array.isArray(formData)) {
+      const newState = this.getStateFromProps(this.props, formData);
+      formData = newState.formData;
+      retrievedSchema = newState.retrievedSchema;
+    }
+    const mustValidate = !noValidate && liveValidate;
+    let state = { formData, schema };
+    let newFormData = formData;
+    if (omitExtraData === true && liveOmit === true) {
+      newFormData = this.omitExtraData(formData);
+      state = {
+        formData: newFormData
+      };
+    }
+    if (mustValidate) {
+      const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
+      let errors = schemaValidation.errors;
+      let errorSchema = schemaValidation.errorSchema;
+      const schemaValidationErrors = errors;
+      const schemaValidationErrorSchema = errorSchema;
+      if (extraErrors) {
+        const merged = validationDataMerge(schemaValidation, extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+      if (newErrorSchema) {
+        const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
+        errorSchema = mergeObjects3(errorSchema, filteredErrors, "preventDuplicates");
+      }
+      state = {
+        formData: newFormData,
+        errors,
+        errorSchema,
+        schemaValidationErrors,
+        schemaValidationErrorSchema
+      };
+    } else if (!noValidate && newErrorSchema) {
+      const errorSchema = extraErrors ? mergeObjects3(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+      state = {
+        formData: newFormData,
+        errorSchema,
+        errors: toErrorList(errorSchema)
+      };
+    }
+    this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
+  };
+  /**
+   * If the retrievedSchema has changed the new retrievedSchema is returned.
+   * Otherwise, the old retrievedSchema is returned to persist reference.
+   * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+   *    avoiding the performance cost of recompiling the schema.
+   *
+   * @param retrievedSchema The new retrieved schema.
+   * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+   */
+  updateRetrievedSchema(retrievedSchema) {
+    const isTheSame = deepEquals3(retrievedSchema, this.state?.retrievedSchema);
+    return isTheSame ? this.state.retrievedSchema : retrievedSchema;
   }
+  /**
+   * Callback function to handle reset form data.
+   * - Reset all fields with default values.
+   * - Reset validations and errors
+   *
+   */
+  reset = () => {
+    const { onChange } = this.props;
+    const newState = this.getStateFromProps(this.props, void 0);
+    const newFormData = newState.formData;
+    const state = {
+      formData: newFormData,
+      errorSchema: {},
+      errors: [],
+      schemaValidationErrors: [],
+      schemaValidationErrorSchema: {}
+    };
+    this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+  };
+  /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
+   * was provided.
+   *
+   * @param id - The unique `id` of the field that was blurred
+   * @param data - The data associated with the field that was blurred
+   */
+  onBlur = (id, data) => {
+    const { onBlur } = this.props;
+    if (onBlur) {
+      onBlur(id, data);
+    }
+  };
+  /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
+   * was provided.
+   *
+   * @param id - The unique `id` of the field that was focused
+   * @param data - The data associated with the field that was focused
+   */
+  onFocus = (id, data) => {
+    const { onFocus } = this.props;
+    if (onFocus) {
+      onFocus(id, data);
+    }
+  };
+  /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
+   * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
+   * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
+   * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
+   * back the `onSubmit` callback if it was provided.
+   *
+   * @param event - The submit HTML form event
+   */
+  onSubmit = (event) => {
+    event.preventDefault();
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    event.persist();
+    const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+    let { formData: newFormData } = this.state;
+    if (omitExtraData === true) {
+      newFormData = this.omitExtraData(newFormData);
+    }
+    if (noValidate || this.validateFormWithFormData(newFormData)) {
+      const errorSchema = extraErrors || {};
+      const errors = extraErrors ? toErrorList(extraErrors) : [];
+      this.setState(
+        {
+          formData: newFormData,
+          errors,
+          errorSchema,
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        },
+        () => {
+          if (onSubmit) {
+            onSubmit({ ...this.state, formData: newFormData, status: "submitted" }, event);
+          }
+        }
+      );
+    }
+  };
   /** Returns the registry for the form */
   getRegistry() {
     const { translateString: customTranslateString, uiSchema = {} } = this.props;
@@ -3847,6 +4739,17 @@ var Form = class extends Component5 {
       globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY]
     };
   }
+  /** Provides a function that can be used to programmatically submit the `Form` */
+  submit = () => {
+    if (this.formElement.current) {
+      const submitCustomEvent = new CustomEvent("submit", {
+        cancelable: true
+      });
+      submitCustomEvent.preventDefault();
+      this.formElement.current.dispatchEvent(submitCustomEvent);
+      this.formElement.current.requestSubmit();
+    }
+  };
   /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
    * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
    * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
@@ -3865,7 +4768,7 @@ var Form = class extends Component5 {
     const elementId = path.join(idSeparator);
     let field = this.formElement.current.elements[elementId];
     if (!field) {
-      field = this.formElement.current.querySelector(`input[id^=${elementId}`);
+      field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
     }
     if (field && field.length) {
       field = field[0];
@@ -3874,6 +4777,59 @@ var Form = class extends Component5 {
       field.focus();
     }
   }
+  /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
+   * If `onError` is provided, then it will be called with the list of errors.
+   *
+   * @param formData - The form data to validate
+   * @returns - True if the form is valid, false otherwise.
+   */
+  validateFormWithFormData = (formData) => {
+    const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
+    const { errors: prevErrors } = this.state;
+    const schemaValidation = this.validate(formData);
+    let errors = schemaValidation.errors;
+    let errorSchema = schemaValidation.errorSchema;
+    const schemaValidationErrors = errors;
+    const schemaValidationErrorSchema = errorSchema;
+    const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
+    if (hasError) {
+      if (extraErrors) {
+        const merged = validationDataMerge(schemaValidation, extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+      if (focusOnFirstError) {
+        if (typeof focusOnFirstError === "function") {
+          focusOnFirstError(errors[0]);
+        } else {
+          this.focusOnError(errors[0]);
+        }
+      }
+      this.setState(
+        {
+          errors,
+          errorSchema,
+          schemaValidationErrors,
+          schemaValidationErrorSchema
+        },
+        () => {
+          if (onError) {
+            onError(errors);
+          } else {
+            console.error("Form validation failed", errors);
+          }
+        }
+      );
+    } else if (prevErrors.length > 0) {
+      this.setState({
+        errors: [],
+        errorSchema: {},
+        schemaValidationErrors: [],
+        schemaValidationErrorSchema: {}
+      });
+    }
+    return !hasError;
+  };
   /** Programmatically validate the form.  If `omitExtraData` is true, the `formData` will first be filtered to remove
    * any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
    * same way as would happen on form submission.
@@ -3905,7 +4861,6 @@ var Form = class extends Component5 {
       action,
       autoComplete,
       enctype,
-      acceptcharset,
       acceptCharset,
       noHtml5Validate = false,
       disabled,
@@ -3920,12 +4875,12 @@ var Form = class extends Component5 {
     const { SubmitButton: SubmitButton2 } = registry.templates.ButtonTemplates;
     const as = _internalFormWrapper ? tagName : void 0;
     const FormTag = _internalFormWrapper || tagName || "form";
-    let { [SUBMIT_BTN_OPTIONS_KEY]: submitOptions = {} } = getUiOptions12(uiSchema);
+    let { [SUBMIT_BTN_OPTIONS_KEY]: submitOptions = {} } = getUiOptions16(uiSchema);
     if (disabled) {
       submitOptions = { ...submitOptions, props: { ...submitOptions.props, disabled: true } };
     }
-    const submitUiSchema = { [UI_OPTIONS_KEY2]: { [SUBMIT_BTN_OPTIONS_KEY]: submitOptions } };
-    return /* @__PURE__ */ jsxs21(
+    const submitUiSchema = { [UI_OPTIONS_KEY3]: { [SUBMIT_BTN_OPTIONS_KEY]: submitOptions } };
+    return /* @__PURE__ */ jsxs23(
       FormTag,
       {
         className: className ? className : "rjsf",
@@ -3936,14 +4891,14 @@ var Form = class extends Component5 {
         action,
         autoComplete,
         encType: enctype,
-        acceptCharset: acceptCharset || acceptcharset,
+        acceptCharset,
         noValidate: noHtml5Validate,
         onSubmit: this.onSubmit,
         as,
         ref: this.formElement,
         children: [
           showErrorList === "top" && this.renderErrors(registry),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx51(
             _SchemaField,
             {
               name: "",
@@ -3963,7 +4918,7 @@ var Form = class extends Component5 {
               readonly
             }
           ),
-          children ? children : /* @__PURE__ */ jsx45(SubmitButton2, { uiSchema: submitUiSchema, registry }),
+          children ? children : /* @__PURE__ */ jsx51(SubmitButton2, { uiSchema: submitUiSchema, registry }),
           showErrorList === "bottom" && this.renderErrors(registry)
         ]
       }
@@ -3973,7 +4928,7 @@ var Form = class extends Component5 {
 
 // src/withTheme.tsx
 import { forwardRef } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function withTheme(themeProps) {
   return forwardRef(
     ({ fields: fields2, widgets: widgets2, templates: templates2, ...directProps }, ref) => {
@@ -3987,7 +4942,7 @@ function withTheme(themeProps) {
           ...templates2?.ButtonTemplates
         }
       };
-      return /* @__PURE__ */ jsx46(
+      return /* @__PURE__ */ jsx52(
         Form,
         {
           ...themeProps,
@@ -4003,9 +4958,9 @@ function withTheme(themeProps) {
 }
 
 // src/index.ts
-var src_default = Form;
+var index_default = Form;
 export {
-  src_default as default,
+  index_default as default,
   getDefaultRegistry,
   withTheme
 };