@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.21

package/dist/{index.js → index.cjs}

@@ -33,22 +33,23 @@ __export(index_exports, {
   RichDescription: () => RichDescription,
   default: () => index_default,
   getDefaultRegistry: () => getDefaultRegistry,
+  getTestRegistry: () => getTestRegistry,
   withTheme: () => withTheme
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form.tsx
-var import_react22 = require("react");
-var import_utils45 = require("@rjsf/utils");
-var import_forEach = __toESM(require("lodash/forEach"), 1);
+var import_react24 = require("react");
+var import_utils46 = require("@rjsf/utils");
+var import_cloneDeep2 = __toESM(require("lodash/cloneDeep"), 1);
 var import_get6 = __toESM(require("lodash/get"), 1);
 var import_isEmpty4 = __toESM(require("lodash/isEmpty"), 1);
-var import_isNil = __toESM(require("lodash/isNil"), 1);
 var import_pick = __toESM(require("lodash/pick"), 1);
+var import_set5 = __toESM(require("lodash/set"), 1);
 var import_toPath = __toESM(require("lodash/toPath"), 1);
 
 // src/getDefaultRegistry.ts
-var import_utils44 = require("@rjsf/utils");
+var import_utils45 = require("@rjsf/utils");
 
 // src/components/fields/ArrayField.tsx
 var import_react = require("react");
@@ -57,10 +58,10 @@ var import_cloneDeep = __toESM(require("lodash/cloneDeep"), 1);
 var import_get = __toESM(require("lodash/get"), 1);
 var import_isObject = __toESM(require("lodash/isObject"), 1);
 var import_set = __toESM(require("lodash/set"), 1);
-var import_nanoid = require("nanoid");
+var import_uniqueId = __toESM(require("lodash/uniqueId"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function generateRowId() {
-  return (0, import_nanoid.nanoid)();
+  return (0, import_uniqueId.default)("rjsf-array-item-");
 }
 function generateKeyedFormData(formData) {
   return !Array.isArray(formData) ? [] : formData.map((item) => {
@@ -83,7 +84,7 @@ var ArrayField = class extends import_react.Component {
    */
   constructor(props) {
     super(props);
-    const { formData = [] } = props;
+    const { formData } = props;
     const keyedFormData = generateKeyedFormData(formData);
     this.state = {
       keyedFormData,
@@ -180,7 +181,7 @@ var ArrayField = class extends import_react.Component {
     if (event) {
       event.preventDefault();
     }
-    const { onChange, errorSchema } = this.props;
+    const { onChange, errorSchema, fieldPathId } = this.props;
     const { keyedFormData } = this.state;
     let newErrorSchema;
     if (errorSchema) {
@@ -209,7 +210,8 @@ var ArrayField = class extends import_react.Component {
         keyedFormData: newKeyedFormData,
         updatedKeyedFormData: true
       },
-      () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      // add click will pass the empty `path` array to the onChange which adds the appropriate path
+      () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
     );
   }
   /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
@@ -243,7 +245,7 @@ var ArrayField = class extends import_react.Component {
       if (event) {
         event.preventDefault();
       }
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       const { keyedFormData } = this.state;
       let newErrorSchema;
       if (errorSchema) {
@@ -272,7 +274,7 @@ var ArrayField = class extends import_react.Component {
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
       );
     };
   };
@@ -287,7 +289,7 @@ var ArrayField = class extends import_react.Component {
       if (event) {
         event.preventDefault();
       }
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       const { keyedFormData } = this.state;
       let newErrorSchema;
       if (errorSchema) {
@@ -307,7 +309,7 @@ var ArrayField = class extends import_react.Component {
           keyedFormData: newKeyedFormData,
           updatedKeyedFormData: true
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
       );
     };
   };
@@ -324,7 +326,7 @@ var ArrayField = class extends import_react.Component {
         event.preventDefault();
         event.currentTarget.blur();
       }
-      const { onChange, errorSchema } = this.props;
+      const { onChange, errorSchema, fieldPathId } = this.props;
       let newErrorSchema;
       if (errorSchema) {
         newErrorSchema = {};
@@ -351,7 +353,7 @@ var ArrayField = class extends import_react.Component {
         {
           keyedFormData: newKeyedFormData
         },
-        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+        () => onChange(keyedToPlainFormData(newKeyedFormData), fieldPathId.path, newErrorSchema)
       );
     };
   };
@@ -361,32 +363,49 @@ var ArrayField = class extends import_react.Component {
    * @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;
-      });
+    return (value, path, newErrorSchema, id) => {
+      const { onChange } = this.props;
       onChange(
-        newFormData,
-        errorSchema && errorSchema && {
-          ...errorSchema,
-          [index]: newErrorSchema
-        },
+        // We need to treat undefined items as nulls to have validation.
+        // See https://github.com/tdegrunt/jsonschema/issues/206
+        value === void 0 ? null : value,
+        path,
+        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);
+    const { onChange, fieldPathId } = this.props;
+    onChange(value, fieldPathId.path, void 0, fieldPathId && fieldPathId.$id);
   };
+  /** Helper method to compute item UI schema for both normal and fixed arrays
+   * Handles both static object and dynamic function cases
+   *
+   * @param uiSchema - The parent UI schema containing items definition
+   * @param item - The item data
+   * @param index - The index of the item
+   * @param formContext - The form context
+   * @returns The computed UI schema for the item
+   */
+  computeItemUiSchema(uiSchema, item, index, formContext) {
+    if (typeof uiSchema.items === "function") {
+      try {
+        const result = uiSchema.items(item, index, formContext);
+        return result;
+      } catch (e) {
+        console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
+        return void 0;
+      }
+    } else {
+      return uiSchema.items;
+    }
+  }
   /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
    */
   render() {
-    const { schema, uiSchema, idSchema, registry } = this.props;
+    const { schema, uiSchema, fieldPathId, registry } = this.props;
     const { schemaUtils, translateString } = registry;
     if (!(import_utils.ITEMS_KEY in schema)) {
       const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
@@ -399,7 +418,7 @@ var ArrayField = class extends import_react.Component {
         UnsupportedFieldTemplate,
         {
           schema,
-          idSchema,
+          fieldPathId,
           reason: translateString(import_utils.TranslatableString.MissingItems),
           registry
         }
@@ -426,7 +445,7 @@ var ArrayField = class extends import_react.Component {
       schema,
       uiSchema = {},
       errorSchema,
-      idSchema,
+      fieldPathId,
       name,
       title,
       disabled = false,
@@ -436,27 +455,31 @@ var ArrayField = class extends import_react.Component {
       registry,
       onBlur,
       onFocus,
-      idPrefix,
-      idSeparator = "_",
       rawErrors
     } = this.props;
     const { keyedFormData } = this.state;
     const fieldTitle = schema.title || title || name;
-    const { schemaUtils, formContext } = registry;
+    const { schemaUtils, fields: fields2, formContext, globalFormOptions } = registry;
+    const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
     const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
     const _schemaItems = (0, import_isObject.default)(schema.items) ? schema.items : {};
     const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
     const formData = keyedToPlainFormData(this.state.keyedFormData);
-    const canAdd = this.canAddItem(formData);
+    const renderOptionalField = (0, import_utils.shouldRenderOptionalField)(registry, schema, required, uiSchema);
+    const hasFormData = (0, import_utils.isFormDataAvailable)(this.props.formData);
+    const canAdd = this.canAddItem(formData) && (!renderOptionalField || hasFormData);
+    const actualFormData = hasFormData ? keyedFormData : [];
+    const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
+    const optionalDataControl = renderOptionalField ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionalDataControlsField2, { ...this.props }) : void 0;
     const arrayProps = {
       canAdd,
-      items: keyedFormData.map((keyedItem, index) => {
+      items: actualFormData.map((keyedItem, index) => {
         const { key, item } = keyedItem;
         const itemCast = item;
         const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
         const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
-        const itemIdPrefix = idSchema.$id + idSeparator + index;
-        const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+        const itemFieldPathId = (0, import_utils.toFieldPathId)(index, globalFormOptions, fieldPathId);
+        const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
         return this.renderArrayFieldItem({
           key,
           index,
@@ -466,10 +489,10 @@ var ArrayField = class extends import_react.Component {
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
           itemSchema,
-          itemIdSchema,
+          itemFieldPathId,
           itemErrorSchema,
           itemData: itemCast,
-          itemUiSchema: uiSchema.items,
+          itemUiSchema,
           autofocus: autofocus && index === 0,
           onBlur,
           onFocus,
@@ -477,19 +500,19 @@ var ArrayField = class extends import_react.Component {
           totalItems: keyedFormData.length
         });
       }),
-      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
+      className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}${extraClass}`,
       disabled,
-      idSchema,
+      fieldPathId,
       uiSchema,
       onAddClick: this.onAddClick,
       readonly,
       required,
       schema,
       title: fieldTitle,
-      formContext,
       formData,
       rawErrors,
-      registry
+      registry,
+      optionalDataControl
     };
     const Template = (0, import_utils.getTemplate)("ArrayFieldTemplate", registry, uiOptions);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Template, { ...arrayProps });
@@ -499,7 +522,7 @@ var ArrayField = class extends import_react.Component {
   renderCustomWidget() {
     const {
       schema,
-      idSchema,
+      fieldPathId,
       uiSchema,
       disabled = false,
       readonly = false,
@@ -522,7 +545,7 @@ var ArrayField = class extends import_react.Component {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Widget,
       {
-        id: idSchema.$id,
+        id: fieldPathId.$id,
         name,
         multiple: true,
         onChange: this.onSelectChange,
@@ -551,7 +574,7 @@ var ArrayField = class extends import_react.Component {
   renderMultiSelect() {
     const {
       schema,
-      idSchema,
+      fieldPathId,
       uiSchema,
       formData: items = [],
       disabled = false,
@@ -575,7 +598,7 @@ var ArrayField = class extends import_react.Component {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Widget,
       {
-        id: idSchema.$id,
+        id: fieldPathId.$id,
         name,
         multiple: true,
         onChange: this.onSelectChange,
@@ -604,7 +627,7 @@ var ArrayField = class extends import_react.Component {
     const {
       schema,
       uiSchema,
-      idSchema,
+      fieldPathId,
       name,
       disabled = false,
       readonly = false,
@@ -625,7 +648,7 @@ var ArrayField = class extends import_react.Component {
       Widget,
       {
         options,
-        id: idSchema.$id,
+        id: fieldPathId.$id,
         name,
         multiple: true,
         onChange: this.onSelectChange,
@@ -652,11 +675,9 @@ var ArrayField = class extends import_react.Component {
     const {
       schema,
       uiSchema = {},
-      formData = [],
+      formData,
       errorSchema,
-      idPrefix,
-      idSeparator = "_",
-      idSchema,
+      fieldPathId,
       name,
       title,
       disabled = false,
@@ -668,35 +689,48 @@ var ArrayField = class extends import_react.Component {
       onFocus,
       rawErrors
     } = this.props;
-    const { keyedFormData } = this.state;
     let { formData: items = [] } = this.props;
+    const { keyedFormData } = this.state;
     const fieldTitle = schema.title || title || name;
     const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
-    const { schemaUtils, formContext } = registry;
+    const { schemaUtils, fields: fields2, formContext, globalFormOptions } = registry;
+    const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+    const renderOptionalField = (0, import_utils.shouldRenderOptionalField)(registry, schema, required, uiSchema);
+    const hasFormData = (0, import_utils.isFormDataAvailable)(formData);
     const _schemaItems = (0, import_isObject.default)(schema.items) ? schema.items : [];
     const itemSchemas = _schemaItems.map(
-      (item, index) => schemaUtils.retrieveSchema(item, formData[index])
+      (item, index) => schemaUtils.retrieveSchema(item, items[index])
     );
     const additionalSchema = (0, import_isObject.default)(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
-    if (!items || items.length < itemSchemas.length) {
-      items = items || [];
+    if (items.length < itemSchemas.length) {
       items = items.concat(new Array(itemSchemas.length - items.length));
     }
-    const canAdd = this.canAddItem(items) && !!additionalSchema;
+    const actualFormData = hasFormData ? keyedFormData : [];
+    const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
+    const optionalDataControl = renderOptionalField ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionalDataControlsField2, { ...this.props }) : void 0;
+    const canAdd = this.canAddItem(items) && !!additionalSchema && (!renderOptionalField || hasFormData);
     const arrayProps = {
       canAdd,
-      className: "rjsf-field rjsf-field-array rjsf-field-array-fixed-items",
+      className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`,
       disabled,
-      idSchema,
+      fieldPathId,
       formData,
-      items: keyedFormData.map((keyedItem, index) => {
+      items: actualFormData.map((keyedItem, index) => {
         const { key, item } = keyedItem;
         const itemCast = item;
         const additional = index >= itemSchemas.length;
         const itemSchema = (additional && (0, import_isObject.default)(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
-        const itemIdPrefix = idSchema.$id + idSeparator + index;
-        const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-        const itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
+        const itemFieldPathId = (0, import_utils.toFieldPathId)(index, globalFormOptions, fieldPathId);
+        let itemUiSchema;
+        if (additional) {
+          itemUiSchema = uiSchema.additionalItems;
+        } else {
+          if (Array.isArray(uiSchema.items)) {
+            itemUiSchema = uiSchema.items[index];
+          } else {
+            itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+          }
+        }
         const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
         return this.renderArrayFieldItem({
           key,
@@ -710,7 +744,7 @@ var ArrayField = class extends import_react.Component {
           itemSchema,
           itemData: itemCast,
           itemUiSchema,
-          itemIdSchema,
+          itemFieldPathId,
           itemErrorSchema,
           autofocus: autofocus && index === 0,
           onBlur,
@@ -726,9 +760,9 @@ var ArrayField = class extends import_react.Component {
       schema,
       uiSchema,
       title: fieldTitle,
-      formContext,
       errorSchema,
-      rawErrors
+      rawErrors,
+      optionalDataControl
     };
     const Template = (0, import_utils.getTemplate)("ArrayFieldTemplate", registry, uiOptions);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Template, { ...arrayProps });
@@ -750,7 +784,7 @@ var ArrayField = class extends import_react.Component {
       itemSchema,
       itemData,
       itemUiSchema,
-      itemIdSchema,
+      itemFieldPathId,
       itemErrorSchema,
       autofocus,
       onBlur,
@@ -759,7 +793,7 @@ var ArrayField = class extends import_react.Component {
       totalItems,
       title
     } = props;
-    const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
+    const { disabled, hideError, readonly, uiSchema, registry, formContext } = this.props;
     const {
       fields: { ArraySchemaField, SchemaField: SchemaField2 },
       globalUiOptions
@@ -786,9 +820,7 @@ var ArrayField = class extends import_react.Component {
           formData: itemData,
           formContext,
           errorSchema: itemErrorSchema,
-          idPrefix,
-          idSeparator,
-          idSchema: itemIdSchema,
+          fieldPathId: itemFieldPathId,
           required: this.isItemRequired(itemSchema),
           onChange: this.onChangeForIndex(index),
           onBlur,
@@ -802,7 +834,7 @@ var ArrayField = class extends import_react.Component {
         }
       ),
       buttonsProps: {
-        idSchema: itemIdSchema,
+        fieldPathId: itemFieldPathId,
         disabled,
         readonly,
         canAdd,
@@ -836,6 +868,7 @@ var ArrayField = class extends import_react.Component {
 var ArrayField_default = ArrayField;
 
 // src/components/fields/BooleanField.tsx
+var import_react2 = require("react");
 var import_utils2 = require("@rjsf/utils");
 var import_isObject2 = __toESM(require("lodash/isObject"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -844,7 +877,7 @@ function BooleanField(props) {
     schema,
     name,
     uiSchema,
-    idSchema,
+    fieldPathId,
     formData,
     registry,
     required,
@@ -906,15 +939,21 @@ function BooleanField(props) {
       enumOptions = (0, import_utils2.optionsList)({ enum: enums }, uiSchema);
     }
   }
+  const onWidgetChange = (0, import_react2.useCallback)(
+    (value, errorSchema, id) => {
+      return onChange(value, fieldPathId.path, errorSchema, id);
+    },
+    [onChange, fieldPathId]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Widget,
     {
       options: { ...options, enumOptions },
       schema,
       uiSchema,
-      id: idSchema.$id,
+      id: fieldPathId.$id,
       name,
-      onChange,
+      onChange: onWidgetChange,
       onFocus,
       onBlur,
       label,
@@ -934,9 +973,8 @@ function BooleanField(props) {
 var BooleanField_default = BooleanField;
 
 // src/components/fields/LayoutGridField.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_utils3 = require("@rjsf/utils");
-var import_cloneDeep2 = __toESM(require("lodash/cloneDeep"), 1);
 var import_each = __toESM(require("lodash/each"), 1);
 var import_flatten = __toESM(require("lodash/flatten"), 1);
 var import_get2 = __toESM(require("lodash/get"), 1);
@@ -950,17 +988,20 @@ var import_isObject3 = __toESM(require("lodash/isObject"), 1);
 var import_isPlainObject = __toESM(require("lodash/isPlainObject"), 1);
 var import_isString = __toESM(require("lodash/isString"), 1);
 var import_isUndefined = __toESM(require("lodash/isUndefined"), 1);
+var import_last = __toESM(require("lodash/last"), 1);
 var import_set2 = __toESM(require("lodash/set"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var import_react3 = require("react");
+var import_react4 = require("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 import_react2.PureComponent {
+function isNumericIndex(str) {
+  return /^\d+?$/.test(str);
+}
+var LayoutGridField = class _LayoutGridField extends import_react3.PureComponent {
   static defaultProps = {
     layoutGridSchema: void 0
   };
@@ -979,7 +1020,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
    * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
    */
   static computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
-    const globalUiOptions = (0, import_get2.default)(uiSchema, [UI_GLOBAL_OPTIONS], {});
+    const globalUiOptions = (0, import_get2.default)(uiSchema, [import_utils3.UI_GLOBAL_OPTIONS_KEY], {});
     const localUiSchema = (0, import_get2.default)(uiSchema, field);
     const localUiOptions = { ...(0, import_get2.default)(localUiSchema, [import_utils3.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
     const fieldUiSchema = { ...localUiSchema };
@@ -987,7 +1028,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
       (0, import_set2.default)(fieldUiSchema, [import_utils3.UI_OPTIONS_KEY], localUiOptions);
     }
     if (!(0, import_isEmpty.default)(globalUiOptions)) {
-      (0, import_set2.default)(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+      (0, import_set2.default)(fieldUiSchema, [import_utils3.UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
     }
     let { readonly: uiReadonly } = (0, import_utils3.getUiOptions)(fieldUiSchema);
     if (forceReadonly === true || (0, import_isUndefined.default)(uiReadonly) && schemaReadonly === true) {
@@ -1059,60 +1100,74 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
     }
     return { children, gridProps };
   }
-  /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
-   * as the id prefix.
+  /** Computes the `rawSchema` and `fieldPathId` for a `schema` and a `potentialIndex`. If the `schema` is of type array,
+   * has an `ITEMS_KEY` element and `potentialIndex` represents a numeric value, the element at `ITEMS_KEY` is checked
+   * to see if it is an array. If it is AND the `potentialIndex`th element is available, it is used as the `rawSchema`,
+   * otherwise the last value of the element is used. If it is not, then the element is used as the `rawSchema`. In
+   * either case, an `fieldPathId` is computed for the array index. If the `schema` does not represent an array or the
+   * `potentialIndex` is not a numeric value, then `rawSchema` is returned as undefined and given `fieldPathId` is returned
+   * as is.
    *
-   * @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`
+   * @param schema - The schema to generate the fieldPathId for
+   * @param fieldPathId - The FieldPathId for the schema
+   * @param potentialIndex - A string containing a potential index
+   * @returns - An object containing the `rawSchema` and `fieldPathId` of an array item, otherwise an undefined `rawSchema`
    */
-  static getIdSchema(schemaUtils, baseIdSchema, formData, schema = {}, idSeparator) {
-    const baseId = (0, import_get2.default)(baseIdSchema, import_utils3.ID_KEY);
-    return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
+  static computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) {
+    let rawSchema;
+    if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && (0, import_has.default)(schema, import_utils3.ITEMS_KEY)) {
+      const index = Number(potentialIndex);
+      const items = schema[import_utils3.ITEMS_KEY];
+      if (Array.isArray(items)) {
+        if (index > items.length) {
+          rawSchema = (0, import_last.default)(items);
+        } else {
+          rawSchema = items[index];
+        }
+      } else {
+        rawSchema = items;
+      }
+      fieldPathId = {
+        [import_utils3.ID_KEY]: fieldPathId[import_utils3.ID_KEY],
+        path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index]
+      };
+    }
+    return { rawSchema, fieldPathId };
   }
   /** 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 registry - The registry
    * @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
+   * @param initialFieldIdPath - The initial fieldPathId to start the search from
    * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
    *            info if a oneOf/anyOf
    */
-  static getSchemaDetailsForField(schemaUtils, dottedPath, initialSchema, formData, initialIdSchema, idSeparator) {
+  static getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) {
+    const { schemaUtils, globalFormOptions } = registry;
     let rawSchema = initialSchema;
-    let idSchema = initialIdSchema;
+    let fieldPathId = initialFieldIdPath;
     const parts = dottedPath.split(".");
     const leafPath = parts.pop();
     let schema = schemaUtils.retrieveSchema(rawSchema, formData);
     let innerData = formData;
     let isReadonly = schema.readOnly;
     parts.forEach((part) => {
+      fieldPathId = (0, import_utils3.toFieldPathId)(part, globalFormOptions, fieldPathId);
       if ((0, import_has.default)(schema, import_utils3.PROPERTIES_KEY)) {
         rawSchema = (0, import_get2.default)(schema, [import_utils3.PROPERTIES_KEY, part], {});
-        idSchema = (0, import_get2.default)(idSchema, part, {});
       } else if (schema && ((0, import_has.default)(schema, import_utils3.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils3.ANY_OF_KEY))) {
         const xxx = (0, import_has.default)(schema, import_utils3.ONE_OF_KEY) ? import_utils3.ONE_OF_KEY : import_utils3.ANY_OF_KEY;
         const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
-        const selectedIdSchema = _LayoutGridField.getIdSchema(
-          schemaUtils,
-          idSchema,
-          formData,
-          selectedSchema,
-          idSeparator
-        );
         rawSchema = (0, import_get2.default)(selectedSchema, [import_utils3.PROPERTIES_KEY, part], {});
-        idSchema = (0, import_get2.default)(selectedIdSchema, part, {});
       } else {
-        rawSchema = {};
+        const result = _LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, part);
+        rawSchema = result.rawSchema ?? {};
+        fieldPathId = result.fieldPathId;
       }
       innerData = (0, import_get2.default)(innerData, part, {});
       schema = schemaUtils.retrieveSchema(rawSchema, innerData);
@@ -1127,13 +1182,17 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
       if (schema && ((0, import_has.default)(schema, import_utils3.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils3.ANY_OF_KEY))) {
         const xxx = (0, import_has.default)(schema, import_utils3.ONE_OF_KEY) ? import_utils3.ONE_OF_KEY : import_utils3.ANY_OF_KEY;
         schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
-        const rawIdSchema = _LayoutGridField.getIdSchema(schemaUtils, idSchema, formData, schema, idSeparator);
-        idSchema = (0, import_utils3.mergeObjects)(rawIdSchema, idSchema);
       }
+      fieldPathId = (0, import_utils3.toFieldPathId)(leafPath, globalFormOptions, fieldPathId);
       isRequired = schema !== void 0 && Array.isArray(schema.required) && (0, import_includes.default)(schema.required, leafPath);
-      schema = (0, import_get2.default)(schema, [import_utils3.PROPERTIES_KEY, leafPath]);
-      schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
-      idSchema = (0, import_get2.default)(idSchema, leafPath, {});
+      const result = _LayoutGridField.computeArraySchemasIfPresent(schema, fieldPathId, leafPath);
+      if (result.rawSchema) {
+        schema = result.rawSchema;
+        fieldPathId = result.fieldPathId;
+      } else {
+        schema = (0, import_get2.default)(schema, [import_utils3.PROPERTIES_KEY, leafPath]);
+        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+      }
       isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
       if (schema && ((0, import_has.default)(schema, import_utils3.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils3.ANY_OF_KEY))) {
         const xxx = (0, import_has.default)(schema, import_utils3.ONE_OF_KEY) ? import_utils3.ONE_OF_KEY : import_utils3.ANY_OF_KEY;
@@ -1141,7 +1200,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
         optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
       }
     }
-    return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+    return { schema, isRequired, isReadonly, optionsInfo, fieldPathId };
   }
   /** 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,
@@ -1177,7 +1236,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
     if ((0, import_isString.default)(gridSchema) || (0, import_isUndefined.default)(gridSchema)) {
       name = gridSchema ?? "";
     } else {
-      const { name: innerName, render, ...innerProps } = gridSchema;
+      const { name: innerName = "", render, ...innerProps } = gridSchema;
       name = innerName;
       uiProps = innerProps;
       if (!(0, import_isEmpty.default)(uiProps)) {
@@ -1210,19 +1269,12 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
    * 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
+   * @returns - The `onChange` handling function for the `dottedPath` field of the `schemaType` type
    */
   onFieldChange = (dottedPath) => {
-    return (value, errSchema, id) => {
-      const { onChange, errorSchema, formData } = this.props;
-      const newFormData = (0, import_cloneDeep2.default)(formData || {});
-      let newErrorSchema = errorSchema;
-      if (errSchema && errorSchema) {
-        newErrorSchema = (0, import_cloneDeep2.default)(errorSchema);
-        (0, import_set2.default)(newErrorSchema, dottedPath, errSchema);
-      }
-      (0, import_set2.default)(newFormData, dottedPath, value);
-      onChange(newFormData, newErrorSchema, id);
+    return (value, path, errSchema, id) => {
+      const { onChange } = this.props;
+      onChange(value, path, errSchema, id);
     };
   };
   /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
@@ -1310,20 +1362,20 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
     const GridTemplate2 = (0, import_utils3.getTemplate)("GridTemplate", registry, uiOptions);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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
+  /** Iterates through all the `childrenLayoutGrfieldPathId`, 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`.
+   * `childrenLayoutGrfieldPathId` is passed as `layoutGridSchema`.
    *
-   * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+   * @param childrenLayoutGrfieldPathId - The list of strings or objects that represents the configurations for the
    *          children fields
    * @returns - The nested `LayoutGridField`s
    */
-  renderChildren(childrenLayoutGridSchema) {
+  renderChildren(childrenLayoutGrfieldPathId) {
     const { registry, schema: rawSchema, formData } = this.props;
     const { schemaUtils } = registry;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-    return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ (0, import_react3.createElement)(
+    return childrenLayoutGrfieldPathId.map((layoutGridSchema) => /* @__PURE__ */ (0, import_react4.createElement)(
       _LayoutGridField,
       {
         ...this.props,
@@ -1339,7 +1391,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
    * 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
+   * `uiSchema`, `errorSchema`, `fieldPathId` 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
@@ -1353,18 +1405,17 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
       schema: initialSchema,
       uiSchema,
       errorSchema,
-      idSchema,
+      fieldPathId,
       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 { fields: fields2 } = registry;
     const { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2;
     const uiComponentProps = _LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
     if (uiComponentProps.rendered) {
@@ -1376,15 +1427,8 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
       isRequired,
       isReadonly,
       optionsInfo,
-      idSchema: fieldIdSchema
-    } = _LayoutGridField.getSchemaDetailsForField(
-      schemaUtils,
-      name,
-      initialSchema,
-      formData,
-      idSchema,
-      idSeparator
-    );
+      fieldPathId: fieldIdSchema
+    } = _LayoutGridField.getSchemaDetailsForField(registry, name, initialSchema, formData, fieldPathId);
     if (schema) {
       const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
       const { fieldUiSchema, uiReadonly } = _LayoutGridField.computeFieldUiSchema(
@@ -1405,8 +1449,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
           schema,
           uiSchema: fieldUiSchema,
           errorSchema: (0, import_get2.default)(errorSchema, name),
-          idSchema: fieldIdSchema,
-          idSeparator,
+          fieldPathId: fieldIdSchema,
           formData: (0, import_get2.default)(formData, name),
           onChange: this.onFieldChange(name),
           onBlur,
@@ -1429,8 +1472,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
           errorSchema,
           uiSchema,
           schema: initialSchema,
-          idSchema,
-          idSeparator,
+          fieldPathId,
           onBlur,
           onFocus,
           registry,
@@ -1476,7 +1518,7 @@ var LayoutGridField = class _LayoutGridField extends import_react2.PureComponent
 var import_utils4 = require("@rjsf/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function LayoutHeaderField(props) {
-  const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+  const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
   const options = (0, import_utils4.getUiOptions)(uiSchema, registry.globalUiOptions);
   const { title: uiTitle } = options;
   const { title: schemaTitle } = schema;
@@ -1492,7 +1534,7 @@ function LayoutHeaderField(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     TitleFieldTemplate,
     {
-      id: (0, import_utils4.titleId)(idSchema),
+      id: (0, import_utils4.titleId)(fieldPathId),
       title: fieldTitle,
       required,
       schema,
@@ -1503,7 +1545,7 @@ function LayoutHeaderField(props) {
 }
 
 // src/components/fields/LayoutMultiSchemaField.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_utils5 = require("@rjsf/utils");
 var import_get3 = __toESM(require("lodash/get"), 1);
 var import_has2 = __toESM(require("lodash/has"), 1);
@@ -1541,7 +1583,7 @@ function LayoutMultiSchemaField(props) {
     baseType,
     disabled = false,
     formData,
-    idSchema,
+    fieldPathId,
     onBlur,
     onChange,
     options,
@@ -1557,8 +1599,8 @@ function LayoutMultiSchemaField(props) {
     hideError = false
   } = props;
   const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
-  const [enumOptions, setEnumOptions] = (0, import_react4.useState)(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
-  const id = (0, import_get3.default)(idSchema, import_utils5.ID_KEY);
+  const [enumOptions, setEnumOptions] = (0, import_react5.useState)(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+  const id = (0, import_get3.default)(fieldPathId, import_utils5.ID_KEY);
   const discriminator = (0, import_utils5.getDiscriminatorFieldFromSchema)(schema);
   const FieldErrorTemplate2 = (0, import_utils5.getTemplate)("FieldErrorTemplate", registry, options);
   const FieldTemplate2 = (0, import_utils5.getTemplate)("FieldTemplate", registry, options);
@@ -1566,7 +1608,7 @@ function LayoutMultiSchemaField(props) {
   const optionsHash = (0, import_utils5.hashObject)(options);
   const uiSchemaHash = uiSchema ? (0, import_utils5.hashObject)(uiSchema) : "";
   const formDataHash = formData ? (0, import_utils5.hashObject)(formData) : "";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
   }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
   const {
@@ -1599,10 +1641,10 @@ function LayoutMultiSchemaField(props) {
     if (newFormData) {
       (0, import_set3.default)(newFormData, selectorField, opt);
     }
-    onChange(newFormData, void 0, id);
+    onChange(newFormData, fieldPathId.path, void 0, id);
   };
   const widgetOptions = { enumOptions, ...uiOptions };
-  const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldErrorTemplate2, { idSchema, schema, errors: rawErrors, registry }) : void 0;
+  const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldErrorTemplate2, { fieldPathId, schema, errors: rawErrors, registry }) : void 0;
   const ignored = (value) => import_noop.default;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     FieldTemplate2,
@@ -1612,7 +1654,6 @@ function LayoutMultiSchemaField(props) {
       label: (title || schema.title) ?? "",
       disabled: disabled || Array.isArray(enumOptions) && (0, import_isEmpty2.default)(enumOptions),
       uiSchema,
-      formContext,
       required,
       readonly: !!readonly,
       registry,
@@ -1653,13 +1694,13 @@ function LayoutMultiSchemaField(props) {
 }
 
 // src/components/fields/MultiSchemaField.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_get4 = __toESM(require("lodash/get"), 1);
 var import_isEmpty3 = __toESM(require("lodash/isEmpty"), 1);
 var import_omit2 = __toESM(require("lodash/omit"), 1);
 var import_utils6 = require("@rjsf/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var AnyOfField = class extends import_react5.Component {
+var AnyOfField = class extends import_react6.Component {
   /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
    *
    * @param props - The `FieldProps` for this template
@@ -1684,7 +1725,7 @@ var AnyOfField = class extends import_react5.Component {
    * @param prevState - The previous `AnyOfFieldState` for this template
    */
   componentDidUpdate(prevProps, prevState) {
-    const { formData, options, idSchema } = this.props;
+    const { formData, options, fieldPathId } = this.props;
     const { selectedOption } = this.state;
     let newState = this.state;
     if (!(0, import_utils6.deepEquals)(prevProps.options, options)) {
@@ -1694,7 +1735,7 @@ var AnyOfField = class extends import_react5.Component {
       const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
       newState = { selectedOption, retrievedOptions };
     }
-    if (!(0, import_utils6.deepEquals)(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+    if (!(0, import_utils6.deepEquals)(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
       const { retrievedOptions } = newState;
       const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
       if (prevState && matchingOption !== selectedOption) {
@@ -1728,7 +1769,7 @@ var AnyOfField = class extends import_react5.Component {
    */
   onOptionChange = (option) => {
     const { selectedOption, retrievedOptions } = this.state;
-    const { formData, onChange, registry } = this.props;
+    const { formData, onChange, registry, fieldPathId } = this.props;
     const { schemaUtils } = registry;
     const intOption = option !== void 0 ? parseInt(option, 10) : -1;
     if (intOption === selectedOption) {
@@ -1741,12 +1782,12 @@ var AnyOfField = class extends import_react5.Component {
       newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
     }
     this.setState({ selectedOption: intOption }, () => {
-      onChange(newFormData, void 0, this.getFieldId());
+      onChange(newFormData, fieldPathId.path, void 0, this.getFieldId());
     });
   };
   getFieldId() {
-    const { idSchema, schema } = this.props;
-    return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+    const { fieldPathId, schema } = this.props;
+    return `${fieldPathId.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
   }
   /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
    */
@@ -1765,6 +1806,11 @@ var AnyOfField = class extends import_react5.Component {
     } = this.props;
     const { widgets: widgets2, fields: fields2, translateString, globalUiOptions, schemaUtils } = registry;
     const { SchemaField: _SchemaField } = fields2;
+    const MultiSchemaFieldTemplate2 = (0, import_utils6.getTemplate)(
+      "MultiSchemaFieldTemplate",
+      registry,
+      globalUiOptions
+    );
     const { selectedOption, retrievedOptions } = this.state;
     const {
       widget = "select",
@@ -1811,57 +1857,65 @@ var AnyOfField = class extends import_react5.Component {
         value: index
       };
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "panel panel-default panel-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        Widget,
-        {
-          id: this.getFieldId(),
-          name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
-          schema: { type: "number", default: 0 },
-          onChange: this.onOptionChange,
-          onBlur,
-          onFocus,
-          disabled: disabled || (0, import_isEmpty3.default)(enumOptions),
-          multiple: false,
-          rawErrors,
-          errorSchema: fieldErrorSchema,
-          value: selectedOption >= 0 ? selectedOption : void 0,
-          options: { enumOptions, ...uiOptions },
-          registry,
-          formContext,
-          placeholder,
-          autocomplete,
-          autofocus,
-          label: title ?? name,
-          hideLabel: !displayLabel,
-          readonly
-        }
-      ) }),
-      optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema })
-    ] });
+    const selector = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Widget,
+      {
+        id: this.getFieldId(),
+        name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
+        schema: { type: "number", default: 0 },
+        onChange: this.onOptionChange,
+        onBlur,
+        onFocus,
+        disabled: disabled || (0, import_isEmpty3.default)(enumOptions),
+        multiple: false,
+        rawErrors,
+        errorSchema: fieldErrorSchema,
+        value: selectedOption >= 0 ? selectedOption : void 0,
+        options: { enumOptions, ...uiOptions },
+        registry,
+        formContext,
+        placeholder,
+        autocomplete,
+        autofocus,
+        label: title ?? name,
+        hideLabel: !displayLabel,
+        readonly
+      }
+    );
+    const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      MultiSchemaFieldTemplate2,
+      {
+        schema,
+        registry,
+        uiSchema,
+        selector,
+        optionSchemaField: optionsSchemaField
+      }
+    );
   }
 };
 var MultiSchemaField_default = AnyOfField;
 
 // src/components/fields/NumberField.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_utils7 = require("@rjsf/utils");
 var import_jsx_runtime7 = require("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] = (0, import_react6.useState)(initialValue);
+  const [lastValue, setLastValue] = (0, import_react7.useState)(initialValue);
   const { StringField: StringField2 } = registry.fields;
   let value = formData;
-  const handleChange = (0, import_react6.useCallback)(
-    (value2, errorSchema, id) => {
+  const handleChange = (0, import_react7.useCallback)(
+    (value2, path, errorSchema, id) => {
       setLastValue(value2);
       if (`${value2}`.charAt(0) === ".") {
         value2 = `0${value2}`;
       }
       const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? (0, import_utils7.asNumber)(value2.replace(trailingCharMatcher, "")) : (0, import_utils7.asNumber)(value2);
-      onChange(processed, errorSchema, id);
+      onChange(processed, path, errorSchema, id);
     },
     [onChange]
   );
@@ -1876,7 +1930,7 @@ function NumberField(props) {
 var NumberField_default = NumberField;
 
 // src/components/fields/ObjectField.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_utils8 = require("@rjsf/utils");
 var import_markdown_to_jsx = __toESM(require("markdown-to-jsx"), 1);
 var import_get5 = __toESM(require("lodash/get"), 1);
@@ -1885,7 +1939,7 @@ var import_isObject4 = __toESM(require("lodash/isObject"), 1);
 var import_set4 = __toESM(require("lodash/set"), 1);
 var import_unset = __toESM(require("lodash/unset"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var ObjectField = class extends import_react7.Component {
+var ObjectField = class extends import_react8.Component {
   /** Set up the initial state */
   state = {
     wasPropertyKeyModified: false,
@@ -1909,20 +1963,12 @@ var ObjectField = class extends import_react7.Component {
    * @returns - The onPropertyChange callback for the `name` property
    */
   onPropertyChange = (name, addedByAdditionalProperties = false) => {
-    return (value, newErrorSchema, id) => {
-      const { formData, onChange, errorSchema } = this.props;
+    return (value, path, newErrorSchema, id) => {
+      const { onChange } = this.props;
       if (value === void 0 && addedByAdditionalProperties) {
         value = "";
       }
-      const newFormData = { ...formData, [name]: value };
-      onChange(
-        newFormData,
-        errorSchema && errorSchema && {
-          ...errorSchema,
-          [name]: newErrorSchema
-        },
-        id
-      );
+      onChange(value, path, newErrorSchema, id);
     };
   };
   /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
@@ -1934,10 +1980,10 @@ var ObjectField = class extends import_react7.Component {
   onDropPropertyClick = (key) => {
     return (event) => {
       event.preventDefault();
-      const { onChange, formData } = this.props;
+      const { onChange, formData, fieldPathId } = this.props;
       const copiedFormData = { ...formData };
       (0, import_unset.default)(copiedFormData, key);
-      onChange(copiedFormData);
+      onChange(copiedFormData, fieldPathId.path);
     };
   };
   /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
@@ -1964,11 +2010,11 @@ var ObjectField = class extends import_react7.Component {
    * @returns - The key change callback function
    */
   onKeyChange = (oldValue) => {
-    return (value, newErrorSchema) => {
+    return (value) => {
       if (oldValue === value) {
         return;
       }
-      const { formData, onChange, errorSchema } = this.props;
+      const { formData, onChange, fieldPathId } = this.props;
       value = this.getAvailableKey(value, formData);
       const newFormData = {
         ...formData
@@ -1980,13 +2026,7 @@ var ObjectField = class extends import_react7.Component {
       });
       const renamedObj = Object.assign({}, ...keyValues);
       this.setState({ wasPropertyKeyModified: true });
-      onChange(
-        renamedObj,
-        errorSchema && errorSchema && {
-          ...errorSchema,
-          [value]: newErrorSchema
-        }
-      );
+      onChange(renamedObj, fieldPathId.path);
     };
   };
   /** Returns a default value to be used for a new additional schema property of the given `type`
@@ -2022,7 +2062,7 @@ var ObjectField = class extends import_react7.Component {
     if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
-    const { formData, onChange, registry } = this.props;
+    const { formData, onChange, registry, fieldPathId } = this.props;
     const newFormData = { ...formData };
     const newKey = this.getAvailableKey("newKey", newFormData);
     if (schema.patternProperties) {
@@ -2050,7 +2090,7 @@ var ObjectField = class extends import_react7.Component {
       const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
       (0, import_set4.default)(newFormData, newKey, newValue);
     }
-    onChange(newFormData);
+    onChange(newFormData, fieldPathId.path);
   };
   /** Renders the `ObjectField` from the given props
    */
@@ -2060,37 +2100,40 @@ var ObjectField = class extends import_react7.Component {
       uiSchema = {},
       formData,
       errorSchema,
-      idSchema,
+      fieldPathId,
       name,
       required = false,
       disabled,
       readonly,
       hideError,
-      idPrefix,
-      idSeparator,
       onBlur,
       onFocus,
       registry,
       title
     } = this.props;
-    const { fields: fields2, formContext, schemaUtils, translateString, globalUiOptions } = registry;
-    const { SchemaField: SchemaField2 } = fields2;
-    const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+    const { fields: fields2, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
+    const { OptionalDataControlsField: OptionalDataControlsField2, SchemaField: SchemaField2 } = fields2;
+    const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
     const uiOptions = (0, import_utils8.getUiOptions)(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
-    let orderedProperties;
-    try {
-      const properties = Object.keys(schemaProperties);
-      orderedProperties = (0, import_utils8.orderProperties)(properties, uiOptions.order);
-    } catch (err) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_markdown_to_jsx.default, { options: { disableParsingRawHTML: true }, children: translateString(import_utils8.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { children: JSON.stringify(schema) })
-      ] });
+    const renderOptionalField = (0, import_utils8.shouldRenderOptionalField)(registry, schema, required, uiSchema);
+    const hasFormData = (0, import_utils8.isFormDataAvailable)(formData);
+    let orderedProperties = [];
+    if (!renderOptionalField || hasFormData) {
+      try {
+        const properties = Object.keys(schemaProperties);
+        orderedProperties = (0, import_utils8.orderProperties)(properties, uiOptions.order);
+      } catch (err) {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_markdown_to_jsx.default, { options: { disableParsingRawHTML: true }, children: translateString(import_utils8.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { children: JSON.stringify(schema) })
+        ] });
+      }
     }
     const Template = (0, import_utils8.getTemplate)("ObjectFieldTemplate", registry, uiOptions);
+    const optionalDataControl = renderOptionalField ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OptionalDataControlsField2, { ...this.props, schema }) : void 0;
     const templateProps = {
       // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
       title: uiOptions.label === false ? "" : templateTitle,
@@ -2099,7 +2142,7 @@ var ObjectField = class extends import_react7.Component {
         const addedByAdditionalProperties = (0, import_has3.default)(schema, [import_utils8.PROPERTIES_KEY, name2, import_utils8.ADDITIONAL_PROPERTY_FLAG]);
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name2];
         const hidden = (0, import_utils8.getUiOptions)(fieldUiSchema).widget === "hidden";
-        const fieldIdSchema = (0, import_get5.default)(idSchema, [name2], {});
+        const innerFieldIdPathId = (0, import_utils8.toFieldPathId)(name2, globalFormOptions, fieldPathId);
         return {
           content: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             SchemaField2,
@@ -2109,9 +2152,7 @@ var ObjectField = class extends import_react7.Component {
               schema: (0, import_get5.default)(schema, [import_utils8.PROPERTIES_KEY, name2], {}),
               uiSchema: fieldUiSchema,
               errorSchema: (0, import_get5.default)(errorSchema, name2),
-              idSchema: fieldIdSchema,
-              idPrefix,
-              idSeparator,
+              fieldPathId: innerFieldIdPathId,
               formData: (0, import_get5.default)(formData, name2),
               formContext,
               wasPropertyKeyModified: this.state.wasPropertyKeyModified,
@@ -2137,25 +2178,88 @@ var ObjectField = class extends import_react7.Component {
       readonly,
       disabled,
       required,
-      idSchema,
+      fieldPathId,
       uiSchema,
       errorSchema,
       schema,
       formData,
       formContext,
-      registry
+      registry,
+      optionalDataControl,
+      className: renderOptionalField ? "rjsf-optional-object-field" : void 0
     };
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Template, { ...templateProps, onAddClick: this.handleAddClick });
   }
 };
 var ObjectField_default = ObjectField;
 
-// src/components/fields/SchemaField.tsx
-var import_react8 = require("react");
+// src/components/fields/OptionalDataControlsField.tsx
 var import_utils9 = require("@rjsf/utils");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function OptionalDataControlsField(props) {
+  const {
+    schema,
+    uiSchema = {},
+    formData,
+    disabled = false,
+    readonly = false,
+    onChange,
+    errorSchema,
+    fieldPathId,
+    registry
+  } = props;
+  const { globalUiOptions = {}, schemaUtils, translateString } = registry;
+  const uiOptions = (0, import_utils9.getUiOptions)(uiSchema, globalUiOptions);
+  const OptionalDataControlsTemplate2 = (0, import_utils9.getTemplate)(
+    "OptionalDataControlsTemplate",
+    registry,
+    uiOptions
+  );
+  const hasFormData = (0, import_utils9.isFormDataAvailable)(formData);
+  let id;
+  let label;
+  let onAddClick;
+  let onRemoveClick;
+  if (disabled || readonly) {
+    id = (0, import_utils9.optionalControlsId)(fieldPathId, "Msg");
+    label = hasFormData ? void 0 : translateString(import_utils9.TranslatableString.OptionalObjectEmptyMsg);
+  } else {
+    const labelEnum = hasFormData ? import_utils9.TranslatableString.OptionalObjectRemove : import_utils9.TranslatableString.OptionalObjectAdd;
+    label = translateString(labelEnum);
+    if (hasFormData) {
+      id = (0, import_utils9.optionalControlsId)(fieldPathId, "Remove");
+      onRemoveClick = () => onChange(void 0, fieldPathId.path, errorSchema);
+    } else {
+      id = (0, import_utils9.optionalControlsId)(fieldPathId, "Add");
+      onAddClick = () => {
+        let newFormData = schemaUtils.getDefaultFormState(schema, formData, "excludeObjectChildren");
+        if (newFormData === void 0) {
+          newFormData = (0, import_utils9.getSchemaType)(schema) === "array" ? [] : {};
+        }
+        onChange(newFormData, fieldPathId.path, errorSchema);
+      };
+    }
+  }
+  return label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    OptionalDataControlsTemplate2,
+    {
+      id,
+      registry,
+      schema,
+      uiSchema,
+      label,
+      onAddClick,
+      onRemoveClick
+    }
+  );
+}
+
+// src/components/fields/SchemaField.tsx
+var import_react9 = require("react");
+var import_utils10 = require("@rjsf/utils");
 var import_isObject5 = __toESM(require("lodash/isObject"), 1);
 var import_omit3 = __toESM(require("lodash/omit"), 1);
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var COMPONENT_TYPES = {
   array: "ArrayField",
   boolean: "BooleanField",
@@ -2165,7 +2269,7 @@ var COMPONENT_TYPES = {
   string: "StringField",
   null: "NullField"
 };
-function getFieldComponent(schema, uiOptions, idSchema, registry) {
+function getFieldComponent(schema, uiOptions, fieldPathId, registry) {
   const field = uiOptions.field;
   const { fields: fields2, translateString } = registry;
   if (typeof field === "function") {
@@ -2174,7 +2278,7 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
   if (typeof field === "string" && field in fields2) {
     return fields2[field];
   }
-  const schemaType = (0, import_utils9.getSchemaType)(schema);
+  const schemaType = (0, import_utils10.getSchemaType)(schema);
   const type = Array.isArray(schemaType) ? schemaType[0] : schemaType || "";
   const schemaId = schema.$id;
   let componentName = COMPONENT_TYPES[type];
@@ -2185,17 +2289,17 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
     return () => null;
   }
   return componentName in fields2 ? fields2[componentName] : () => {
-    const UnsupportedFieldTemplate = (0, import_utils9.getTemplate)(
+    const UnsupportedFieldTemplate = (0, import_utils10.getTemplate)(
       "UnsupportedFieldTemplate",
       registry,
       uiOptions
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       UnsupportedFieldTemplate,
       {
         schema,
-        idSchema,
-        reason: translateString(import_utils9.TranslatableString.UnknownFieldType, [String(schema.type)]),
+        fieldPathId,
+        reason: translateString(import_utils10.TranslatableString.UnknownFieldType, [String(schema.type)]),
         registry
       }
     );
@@ -2204,12 +2308,10 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
 function SchemaFieldRender(props) {
   const {
     schema: _schema,
-    idSchema: _idSchema,
+    fieldPathId,
     uiSchema,
     formData,
     errorSchema,
-    idPrefix,
-    idSeparator,
     name,
     onChange,
     onKeyChange,
@@ -2219,29 +2321,25 @@ function SchemaFieldRender(props) {
     wasPropertyKeyModified = false
   } = props;
   const { formContext, schemaUtils, globalUiOptions } = registry;
-  const uiOptions = (0, import_utils9.getUiOptions)(uiSchema, globalUiOptions);
-  const FieldTemplate2 = (0, import_utils9.getTemplate)("FieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = (0, import_utils9.getTemplate)(
+  const uiOptions = (0, import_utils10.getUiOptions)(uiSchema, globalUiOptions);
+  const FieldTemplate2 = (0, import_utils10.getTemplate)("FieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = (0, import_utils10.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     uiOptions
   );
-  const FieldHelpTemplate2 = (0, import_utils9.getTemplate)("FieldHelpTemplate", registry, uiOptions);
-  const FieldErrorTemplate2 = (0, import_utils9.getTemplate)("FieldErrorTemplate", registry, uiOptions);
+  const FieldHelpTemplate2 = (0, import_utils10.getTemplate)("FieldHelpTemplate", registry, uiOptions);
+  const FieldErrorTemplate2 = (0, import_utils10.getTemplate)("FieldErrorTemplate", registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
-  const fieldId = _idSchema[import_utils9.ID_KEY];
-  const idSchema = (0, import_utils9.mergeObjects)(
-    schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
-    _idSchema
-  );
-  const handleFieldComponentChange = (0, import_react8.useCallback)(
-    (formData2, newErrorSchema, id2) => {
+  const fieldId = fieldPathId[import_utils10.ID_KEY];
+  const handleFieldComponentChange = (0, import_react9.useCallback)(
+    (formData2, path, newErrorSchema, id2) => {
       const theId = id2 || fieldId;
-      return onChange(formData2, newErrorSchema, theId);
+      return onChange(formData2, path, newErrorSchema, theId);
     },
     [fieldId, onChange]
   );
-  const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
+  const FieldComponent = getFieldComponent(schema, uiOptions, fieldPathId, registry);
   const disabled = Boolean(uiOptions.disabled ?? props.disabled);
   const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
   const uiSchemaHideError = uiOptions.hideError;
@@ -2253,15 +2351,15 @@ function SchemaFieldRender(props) {
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const { __errors, ...fieldErrorSchema } = errorSchema || {};
   const fieldUiSchema = (0, import_omit3.default)(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
-  if (import_utils9.UI_OPTIONS_KEY in fieldUiSchema) {
-    fieldUiSchema[import_utils9.UI_OPTIONS_KEY] = (0, import_omit3.default)(fieldUiSchema[import_utils9.UI_OPTIONS_KEY], ["classNames", "style"]);
+  if (import_utils10.UI_OPTIONS_KEY in fieldUiSchema) {
+    fieldUiSchema[import_utils10.UI_OPTIONS_KEY] = (0, import_omit3.default)(fieldUiSchema[import_utils10.UI_OPTIONS_KEY], ["classNames", "style"]);
   }
-  const field = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const field = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     FieldComponent,
     {
       ...props,
       onChange: handleFieldComponentChange,
-      idSchema,
+      fieldPathId,
       schema,
       uiSchema: fieldUiSchema,
       disabled,
@@ -2273,50 +2371,50 @@ function SchemaFieldRender(props) {
       rawErrors: __errors
     }
   );
-  const id = idSchema[import_utils9.ID_KEY];
+  const id = fieldPathId[import_utils10.ID_KEY];
   let label;
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = import_utils9.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || props.title || name;
+    label = import_utils10.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || props.title || name;
   }
   const description = uiOptions.description || props.schema.description || schema.description || "";
   const help = uiOptions.help;
   const hidden = uiOptions.widget === "hidden";
-  const classNames = ["rjsf-field", `rjsf-field-${(0, import_utils9.getSchemaType)(schema)}`];
+  const classNames = ["rjsf-field", `rjsf-field-${(0, import_utils10.getSchemaType)(schema)}`];
   if (!hideError && __errors && __errors.length > 0) {
     classNames.push("rjsf-field-error");
   }
   if (uiOptions.classNames) {
     classNames.push(uiOptions.classNames);
   }
-  const helpComponent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const helpComponent = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     FieldHelpTemplate2,
     {
       help,
-      idSchema,
+      fieldPathId,
       schema,
       uiSchema,
       hasErrors: !hideError && __errors && __errors.length > 0,
       registry
     }
   );
-  const errorsComponent = hideError || (schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const errorsComponent = hideError || (schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     FieldErrorTemplate2,
     {
       errors: __errors,
       errorSchema,
-      idSchema,
+      fieldPathId,
       schema,
       uiSchema,
       registry
     }
   );
   const fieldProps = {
-    description: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    description: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils9.descriptionId)(id),
+        id: (0, import_utils10.descriptionId)(id),
         description,
         schema,
         uiSchema,
@@ -2341,7 +2439,6 @@ function SchemaFieldRender(props) {
     displayLabel,
     classNames: classNames.join(" ").trim(),
     style: uiOptions.style,
-    formContext,
     formData,
     schema,
     uiSchema,
@@ -2350,9 +2447,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__ */ (0, import_jsx_runtime9.jsx)(FieldTemplate2, { ...fieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldTemplate2, { ...fieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     field,
-    schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       _AnyOfField,
       {
         name,
@@ -2362,9 +2459,7 @@ function SchemaFieldRender(props) {
         errorSchema,
         formData,
         formContext,
-        idPrefix,
-        idSchema,
-        idSeparator,
+        fieldPathId,
         onBlur: props.onBlur,
         onChange: props.onChange,
         onFocus: props.onFocus,
@@ -2377,7 +2472,7 @@ function SchemaFieldRender(props) {
         uiSchema
       }
     ),
-    schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       _OneOfField,
       {
         name,
@@ -2387,9 +2482,7 @@ function SchemaFieldRender(props) {
         errorSchema,
         formData,
         formContext,
-        idPrefix,
-        idSchema,
-        idSeparator,
+        fieldPathId,
         onBlur: props.onBlur,
         onChange: props.onChange,
         onFocus: props.onFocus,
@@ -2404,25 +2497,30 @@ function SchemaFieldRender(props) {
     )
   ] }) });
 }
-var SchemaField = class extends import_react8.Component {
+var SchemaField = class extends import_react9.Component {
   shouldComponentUpdate(nextProps) {
-    return !(0, import_utils9.deepEquals)(this.props, nextProps);
+    const {
+      registry: { globalFormOptions }
+    } = this.props;
+    const { experimental_componentUpdateStrategy = "customDeep" } = globalFormOptions;
+    return (0, import_utils10.shouldRender)(this, nextProps, this.state, experimental_componentUpdateStrategy);
   }
   render() {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SchemaFieldRender, { ...this.props });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SchemaFieldRender, { ...this.props });
   }
 };
 var SchemaField_default = SchemaField;
 
 // src/components/fields/StringField.tsx
-var import_utils10 = require("@rjsf/utils");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_utils11 = require("@rjsf/utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function StringField(props) {
   const {
     schema,
     name,
     uiSchema,
-    idSchema,
+    fieldPathId,
     formData,
     required,
     disabled = false,
@@ -2437,28 +2535,34 @@ function StringField(props) {
   } = props;
   const { title, format } = schema;
   const { widgets: widgets2, formContext, schemaUtils, globalUiOptions } = registry;
-  const enumOptions = schemaUtils.isSelect(schema) ? (0, import_utils10.optionsList)(schema, uiSchema) : void 0;
+  const enumOptions = schemaUtils.isSelect(schema) ? (0, import_utils11.optionsList)(schema, uiSchema) : void 0;
   let defaultWidget = enumOptions ? "select" : "text";
-  if (format && (0, import_utils10.hasWidget)(schema, format, widgets2)) {
+  if (format && (0, import_utils11.hasWidget)(schema, format, widgets2)) {
     defaultWidget = format;
   }
-  const { widget = defaultWidget, placeholder = "", title: uiTitle, ...options } = (0, import_utils10.getUiOptions)(uiSchema);
+  const { widget = defaultWidget, placeholder = "", title: uiTitle, ...options } = (0, import_utils11.getUiOptions)(uiSchema);
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   const label = uiTitle ?? title ?? name;
-  const Widget = (0, import_utils10.getWidget)(schema, widget, widgets2);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const Widget = (0, import_utils11.getWidget)(schema, widget, widgets2);
+  const onWidgetChange = (0, import_react10.useCallback)(
+    (value, errorSchema, id) => {
+      return onChange(value, fieldPathId.path, errorSchema, id);
+    },
+    [onChange, fieldPathId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Widget,
     {
       options: { ...options, enumOptions },
       schema,
       uiSchema,
-      id: idSchema.$id,
+      id: fieldPathId.$id,
       name,
       label,
       hideLabel: !displayLabel,
       hideError,
       value: formData,
-      onChange,
+      onChange: onWidgetChange,
       onBlur,
       onFocus,
       required,
@@ -2475,14 +2579,14 @@ function StringField(props) {
 var StringField_default = StringField;
 
 // src/components/fields/NullField.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 function NullField(props) {
-  const { formData, onChange } = props;
-  (0, import_react9.useEffect)(() => {
+  const { formData, onChange, fieldPathId } = props;
+  (0, import_react11.useEffect)(() => {
     if (formData === void 0) {
-      onChange(null);
+      onChange(null, fieldPathId.path);
     }
-  }, [formData, onChange]);
+  }, [fieldPathId, formData, onChange]);
   return null;
 }
 var NullField_default = NullField;
@@ -2500,6 +2604,7 @@ function fields() {
     NumberField: NumberField_default,
     ObjectField: ObjectField_default,
     OneOfField: MultiSchemaField_default,
+    OptionalDataControlsField,
     SchemaField: SchemaField_default,
     StringField: StringField_default,
     NullField: NullField_default
@@ -2508,24 +2613,24 @@ function fields() {
 var fields_default = fields;
 
 // src/components/templates/ArrayFieldDescriptionTemplate.tsx
-var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_utils12 = require("@rjsf/utils");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ArrayFieldDescriptionTemplate(props) {
-  const { idSchema, description, registry, schema, uiSchema } = props;
-  const options = (0, import_utils11.getUiOptions)(uiSchema, registry.globalUiOptions);
+  const { fieldPathId, description, registry, schema, uiSchema } = props;
+  const options = (0, import_utils12.getUiOptions)(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!description || !displayLabel) {
     return null;
   }
-  const DescriptionFieldTemplate = (0, import_utils11.getTemplate)(
+  const DescriptionFieldTemplate = (0, import_utils12.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     options
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     DescriptionFieldTemplate,
     {
-      id: (0, import_utils11.descriptionId)(idSchema),
+      id: (0, import_utils12.descriptionId)(fieldPathId),
       description,
       schema,
       uiSchema,
@@ -2535,12 +2640,12 @@ function ArrayFieldDescriptionTemplate(props) {
 }
 
 // src/components/templates/ArrayFieldItemTemplate.tsx
-var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_utils13 = require("@rjsf/utils");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ArrayFieldItemTemplate(props) {
   const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
-  const uiOptions = (0, import_utils12.getUiOptions)(uiSchema);
-  const ArrayFieldItemButtonsTemplate2 = (0, import_utils12.getTemplate)(
+  const uiOptions = (0, import_utils13.getUiOptions)(uiSchema);
+  const ArrayFieldItemButtonsTemplate2 = (0, import_utils13.getTemplate)(
     "ArrayFieldItemButtonsTemplate",
     registry,
     uiOptions
@@ -2551,9 +2656,9 @@ function ArrayFieldItemTemplate(props) {
     paddingRight: 6,
     fontWeight: "bold"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
-    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
+    hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: "btn-group",
@@ -2561,16 +2666,16 @@ function ArrayFieldItemTemplate(props) {
           display: "flex",
           justifyContent: "space-around"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle })
       }
     ) })
   ] });
 }
 
 // src/components/templates/ArrayFieldItemButtonsTemplate.tsx
-var import_react10 = require("react");
-var import_utils13 = require("@rjsf/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_utils14 = require("@rjsf/utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ArrayFieldItemButtonsTemplate(props) {
   const {
     disabled,
@@ -2578,7 +2683,7 @@ function ArrayFieldItemButtonsTemplate(props) {
     hasMoveDown,
     hasMoveUp,
     hasRemove,
-    idSchema,
+    fieldPathId,
     index,
     onCopyIndexClick,
     onDropIndexClick,
@@ -2588,15 +2693,15 @@ function ArrayFieldItemButtonsTemplate(props) {
     uiSchema
   } = props;
   const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
-  const onCopyClick = (0, import_react10.useMemo)(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = (0, import_react10.useMemo)(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = (0, import_react10.useMemo)(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = (0, import_react10.useMemo)(() => onReorderClick(index, index + 1), [index, onReorderClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    (hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const onCopyClick = (0, import_react12.useMemo)(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+  const onRemoveClick = (0, import_react12.useMemo)(() => onDropIndexClick(index), [index, onDropIndexClick]);
+  const onArrowUpClick = (0, import_react12.useMemo)(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowDownClick = (0, import_react12.useMemo)(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    (hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       MoveUpButton2,
       {
-        id: (0, import_utils13.buttonId)(idSchema, "moveUp"),
+        id: (0, import_utils14.buttonId)(fieldPathId, "moveUp"),
         className: "rjsf-array-item-move-up",
         disabled: disabled || readonly || !hasMoveUp,
         onClick: onArrowUpClick,
@@ -2604,10 +2709,10 @@ function ArrayFieldItemButtonsTemplate(props) {
         registry
       }
     ),
-    (hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    (hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       MoveDownButton2,
       {
-        id: (0, import_utils13.buttonId)(idSchema, "moveDown"),
+        id: (0, import_utils14.buttonId)(fieldPathId, "moveDown"),
         className: "rjsf-array-item-move-down",
         disabled: disabled || readonly || !hasMoveDown,
         onClick: onArrowDownClick,
@@ -2615,10 +2720,10 @@ function ArrayFieldItemButtonsTemplate(props) {
         registry
       }
     ),
-    hasCopy && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    hasCopy && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       CopyButton2,
       {
-        id: (0, import_utils13.buttonId)(idSchema, "copy"),
+        id: (0, import_utils14.buttonId)(fieldPathId, "copy"),
         className: "rjsf-array-item-copy",
         disabled: disabled || readonly,
         onClick: onCopyClick,
@@ -2626,10 +2731,10 @@ function ArrayFieldItemButtonsTemplate(props) {
         registry
       }
     ),
-    hasRemove && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    hasRemove && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       RemoveButton2,
       {
-        id: (0, import_utils13.buttonId)(idSchema, "remove"),
+        id: (0, import_utils14.buttonId)(fieldPathId, "remove"),
         className: "rjsf-array-item-remove",
         disabled: disabled || readonly,
         onClick: onRemoveClick,
@@ -2641,16 +2746,17 @@ function ArrayFieldItemButtonsTemplate(props) {
 }
 
 // src/components/templates/ArrayFieldTemplate.tsx
-var import_utils14 = require("@rjsf/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_utils15 = require("@rjsf/utils");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ArrayFieldTemplate(props) {
   const {
     canAdd,
     className,
     disabled,
-    idSchema,
+    fieldPathId,
     uiSchema,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     registry,
@@ -2658,52 +2764,55 @@ function ArrayFieldTemplate(props) {
     schema,
     title
   } = props;
-  const uiOptions = (0, import_utils14.getUiOptions)(uiSchema);
-  const ArrayFieldDescriptionTemplate2 = (0, import_utils14.getTemplate)(
+  const uiOptions = (0, import_utils15.getUiOptions)(uiSchema);
+  const ArrayFieldDescriptionTemplate2 = (0, import_utils15.getTemplate)(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils14.getTemplate)(
+  const ArrayFieldItemTemplate2 = (0, import_utils15.getTemplate)(
     "ArrayFieldItemTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldTitleTemplate2 = (0, import_utils14.getTemplate)(
+  const ArrayFieldTitleTemplate2 = (0, import_utils15.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("fieldset", { className, id: idSchema.$id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("fieldset", { className, id: fieldPathId.$id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ArrayFieldTitleTemplate2,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ArrayFieldDescriptionTemplate2,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
-    canAdd && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "row array-item-list", children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+    canAdd && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       AddButton2,
       {
-        id: (0, import_utils14.buttonId)(idSchema, "add"),
+        id: (0, import_utils15.buttonId)(fieldPathId, "add"),
         className: "rjsf-array-item-add",
         onClick: onAddClick,
         disabled: disabled || readonly,
@@ -2715,37 +2824,38 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/components/templates/ArrayFieldTitleTemplate.tsx
-var import_utils15 = require("@rjsf/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_utils16 = require("@rjsf/utils");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ArrayFieldTitleTemplate(props) {
-  const { idSchema, title, schema, uiSchema, required, registry } = props;
-  const options = (0, import_utils15.getUiOptions)(uiSchema, registry.globalUiOptions);
+  const { fieldPathId, title, schema, uiSchema, required, registry, optionalDataControl } = props;
+  const options = (0, import_utils16.getUiOptions)(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!title || !displayLabel) {
     return null;
   }
-  const TitleFieldTemplate = (0, import_utils15.getTemplate)(
+  const TitleFieldTemplate = (0, import_utils16.getTemplate)(
     "TitleFieldTemplate",
     registry,
     options
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     TitleFieldTemplate,
     {
-      id: (0, import_utils15.titleId)(idSchema),
+      id: (0, import_utils16.titleId)(fieldPathId),
       title,
       required,
       schema,
       uiSchema,
-      registry
+      registry,
+      optionalDataControl
     }
   );
 }
 
 // src/components/templates/BaseInputTemplate.tsx
-var import_react11 = require("react");
-var import_utils16 = require("@rjsf/utils");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_utils17 = require("@rjsf/utils");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
   const {
     id,
@@ -2778,7 +2888,7 @@ function BaseInputTemplate(props) {
   }
   const inputProps = {
     ...rest,
-    ...(0, import_utils16.getInputProps)(schema, type, options)
+    ...(0, import_utils17.getInputProps)(schema, type, options)
   };
   let inputValue;
   if (inputProps.type === "number" || inputProps.type === "integer") {
@@ -2786,20 +2896,20 @@ function BaseInputTemplate(props) {
   } else {
     inputValue = value == null ? "" : value;
   }
-  const _onChange = (0, import_react11.useCallback)(
+  const _onChange = (0, import_react13.useCallback)(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options]
   );
-  const _onBlur = (0, import_react11.useCallback)(
+  const _onBlur = (0, import_react13.useCallback)(
     ({ target }) => onBlur(id, target && target.value),
     [onBlur, id]
   );
-  const _onFocus = (0, import_react11.useCallback)(
+  const _onFocus = (0, import_react13.useCallback)(
     ({ target }) => onFocus(id, target && target.value),
     [onFocus, id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "input",
       {
         id,
@@ -2810,81 +2920,83 @@ function BaseInputTemplate(props) {
         autoFocus: autofocus,
         value: inputValue,
         ...inputProps,
-        list: schema.examples ? (0, import_utils16.examplesId)(id) : void 0,
+        list: schema.examples ? (0, import_utils17.examplesId)(id) : void 0,
         onChange: onChangeOverride || _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id, !!schema.examples)
+        "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id, !!schema.examples)
       }
     ),
-    Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("datalist", { id: (0, import_utils16.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: example }, example);
+    Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("datalist", { id: (0, import_utils17.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: example }, example);
     }) }, `datalist_${id}`)
   ] });
 }
 
 // src/components/templates/ButtonTemplates/SubmitButton.tsx
-var import_utils17 = require("@rjsf/utils");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_utils18 = require("@rjsf/utils");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function SubmitButton({ uiSchema }) {
-  const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils17.getSubmitButtonOptions)(uiSchema);
+  const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils18.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "submit", ...submitButtonProps, className: `btn btn-info ${submitButtonProps.className || ""}`, children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "submit", ...submitButtonProps, className: `btn btn-info ${submitButtonProps.className || ""}`, children: submitText }) });
 }
 
 // src/components/templates/ButtonTemplates/AddButton.tsx
-var import_utils19 = require("@rjsf/utils");
+var import_utils20 = require("@rjsf/utils");
 
 // src/components/templates/ButtonTemplates/IconButton.tsx
-var import_utils18 = require("@rjsf/utils");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_utils19 = require("@rjsf/utils");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function IconButton(props) {
   const { iconType = "default", icon, className, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: `btn btn-${iconType} ${className}`, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("i", { className: `glyphicon glyphicon-${icon}` }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: `btn btn-${iconType} ${className}`, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("i", { className: `glyphicon glyphicon-${icon}` }) });
 }
 function CopyButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { title: translateString(import_utils18.TranslatableString.CopyButton), ...props, icon: "copy" });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { title: translateString(import_utils19.TranslatableString.CopyButton), ...props, icon: "copy" });
 }
 function MoveDownButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { title: translateString(import_utils18.TranslatableString.MoveDownButton), ...props, icon: "arrow-down" });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { title: translateString(import_utils19.TranslatableString.MoveDownButton), ...props, icon: "arrow-down" });
 }
 function MoveUpButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { title: translateString(import_utils18.TranslatableString.MoveUpButton), ...props, icon: "arrow-up" });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { title: translateString(import_utils19.TranslatableString.MoveUpButton), ...props, icon: "arrow-up" });
 }
 function RemoveButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { title: translateString(import_utils18.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { title: translateString(import_utils19.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
 }
 
 // src/components/templates/ButtonTemplates/AddButton.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function AddButton({
+  id,
   className,
   onClick,
   disabled,
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     IconButton,
     {
+      id,
       iconType: "info",
       icon: "plus",
       className: "btn-add col-xs-12",
-      title: translateString(import_utils19.TranslatableString.AddButton),
+      title: translateString(import_utils20.TranslatableString.AddButton),
       onClick,
       disabled,
       registry
@@ -2906,78 +3018,78 @@ function buttonTemplates() {
 var ButtonTemplates_default = buttonTemplates;
 
 // src/components/RichDescription.tsx
-var import_utils20 = require("@rjsf/utils");
+var import_utils21 = require("@rjsf/utils");
 var import_markdown_to_jsx2 = __toESM(require("markdown-to-jsx"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var TEST_IDS = (0, import_utils20.getTestIds)();
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TEST_IDS = (0, import_utils21.getTestIds)();
 function RichDescription({ description, registry, uiSchema = {} }) {
   const { globalUiOptions } = registry;
-  const uiOptions = (0, import_utils20.getUiOptions)(uiSchema, globalUiOptions);
+  const uiOptions = (0, import_utils21.getUiOptions)(uiSchema, globalUiOptions);
   if (uiOptions.enableMarkdownInDescription && typeof description === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_markdown_to_jsx2.default, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_markdown_to_jsx2.default, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description });
   }
   return description;
 }
 RichDescription.TEST_IDS = TEST_IDS;
 
 // src/components/templates/DescriptionField.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id, className: "field-description", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichDescription, { description, registry, uiSchema }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { id, className: "field-description", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RichDescription, { description, registry, uiSchema }) });
 }
 
 // src/components/templates/ErrorList.tsx
-var import_utils21 = require("@rjsf/utils");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_utils22 = require("@rjsf/utils");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ErrorList({
   errors,
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "panel panel-danger errors", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "panel-heading", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "panel-title", children: translateString(import_utils21.TranslatableString.ErrorsLabel) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "list-group", children: errors.map((error, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: "list-group-item text-danger", children: error.stack }, i);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "panel panel-danger errors", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "panel-heading", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "panel-title", children: translateString(import_utils22.TranslatableString.ErrorsLabel) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "list-group", children: errors.map((error, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: "list-group-item text-danger", children: error.stack }, i);
     }) })
   ] });
 }
 
 // src/components/templates/FieldTemplate/FieldTemplate.tsx
-var import_utils22 = require("@rjsf/utils");
+var import_utils23 = require("@rjsf/utils");
 
 // src/components/templates/FieldTemplate/Label.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var REQUIRED_FIELD_SYMBOL = "*";
 function Label(props) {
   const { label, required, id } = props;
   if (!label) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "control-label", htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "control-label", htmlFor: id, children: [
     label,
-    required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "required", children: REQUIRED_FIELD_SYMBOL })
+    required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "required", children: REQUIRED_FIELD_SYMBOL })
   ] });
 }
 
 // src/components/templates/FieldTemplate/FieldTemplate.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function FieldTemplate(props) {
   const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema } = props;
-  const uiOptions = (0, import_utils22.getUiOptions)(uiSchema);
-  const WrapIfAdditionalTemplate2 = (0, import_utils22.getTemplate)(
+  const uiOptions = (0, import_utils23.getUiOptions)(uiSchema);
+  const WrapIfAdditionalTemplate2 = (0, import_utils23.getTemplate)(
     "WrapIfAdditionalTemplate",
     registry,
     uiOptions
   );
   if (hidden) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden", children });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden", children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(WrapIfAdditionalTemplate2, { ...props, children: [
-    displayLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { label, required, id }),
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(WrapIfAdditionalTemplate2, { ...props, children: [
+    displayLabel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { label, required, id }),
     displayLabel && description ? description : null,
     children,
     errors,
@@ -2989,51 +3101,63 @@ function FieldTemplate(props) {
 var FieldTemplate_default = FieldTemplate;
 
 // src/components/templates/FieldErrorTemplate.tsx
-var import_utils23 = require("@rjsf/utils");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_utils24 = require("@rjsf/utils");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function FieldErrorTemplate(props) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = (0, import_utils23.errorId)(idSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "text-danger", children: error }, index);
+  const id = (0, import_utils24.errorId)(fieldPathId);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: "text-danger", children: error }, index);
   }) }) });
 }
 
 // src/components/templates/FieldHelpTemplate.tsx
-var import_utils24 = require("@rjsf/utils");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_utils25 = require("@rjsf/utils");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = (0, import_utils24.helpId)(idSchema);
+  const id = (0, import_utils25.helpId)(fieldPathId);
   if (typeof help === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { id, className: "help-block", children: help });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { id, className: "help-block", children: help });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id, className: "help-block", children: help });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id, className: "help-block", children: help });
 }
 
 // src/components/templates/GridTemplate.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function GridTemplate(props) {
   const { children, column, className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, ...rest, children });
+}
+
+// src/components/templates/MultiSchemaFieldTemplate.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function MultiSchemaFieldTemplate(props) {
+  const { selector, optionSchemaField } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "panel panel-default panel-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "form-group", children: selector }),
+    optionSchemaField
+  ] });
 }
 
 // src/components/templates/ObjectFieldTemplate.tsx
-var import_utils25 = require("@rjsf/utils");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_utils26 = require("@rjsf/utils");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
+    className,
     description,
     disabled,
     formData,
-    idSchema,
+    fieldPathId,
     onAddClick,
+    optionalDataControl,
     properties,
     readonly,
     registry,
@@ -3042,43 +3166,46 @@ function ObjectFieldTemplate(props) {
     title,
     uiSchema
   } = props;
-  const options = (0, import_utils25.getUiOptions)(uiSchema);
-  const TitleFieldTemplate = (0, import_utils25.getTemplate)("TitleFieldTemplate", registry, options);
-  const DescriptionFieldTemplate = (0, import_utils25.getTemplate)(
+  const options = (0, import_utils26.getUiOptions)(uiSchema);
+  const TitleFieldTemplate = (0, import_utils26.getTemplate)("TitleFieldTemplate", registry, options);
+  const DescriptionFieldTemplate = (0, import_utils26.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     options
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("fieldset", { id: idSchema.$id, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("fieldset", { className, id: fieldPathId.$id, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       TitleFieldTemplate,
       {
-        id: (0, import_utils25.titleId)(idSchema),
+        id: (0, import_utils26.titleId)(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils25.descriptionId)(idSchema),
+        id: (0, import_utils26.descriptionId)(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     properties.map((prop) => prop.content),
-    (0, import_utils25.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    (0, import_utils26.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       AddButton2,
       {
-        id: (0, import_utils25.buttonId)(idSchema, "add"),
+        id: (0, import_utils26.buttonId)(fieldPathId, "add"),
         className: "rjsf-object-property-expand",
         onClick: onAddClick(schema),
         disabled: disabled || readonly,
@@ -3089,44 +3216,77 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/components/templates/OptionalDataControlsTemplate.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      IconButton,
+      {
+        id,
+        registry,
+        icon: "plus",
+        className: "rjsf-add-optional-data btn-sm",
+        onClick: onAddClick,
+        title: label
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      IconButton,
+      {
+        id,
+        registry,
+        icon: "remove",
+        className: "rjsf-remove-optional-data btn-sm",
+        onClick: onRemoveClick,
+        title: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("em", { id, children: label });
+}
+
 // src/components/templates/TitleField.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var REQUIRED_FIELD_SYMBOL2 = "*";
 function TitleField(props) {
-  const { id, title, required } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("legend", { id, children: [
+  const { id, title, required, optionalDataControl } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("legend", { id, children: [
     title,
-    required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "required", children: REQUIRED_FIELD_SYMBOL2 })
+    required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "required", children: REQUIRED_FIELD_SYMBOL2 }),
+    optionalDataControl && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pull-right", style: { marginBottom: "2px" }, children: optionalDataControl })
   ] });
 }
 
 // src/components/templates/UnsupportedField.tsx
-var import_utils26 = require("@rjsf/utils");
+var import_utils27 = require("@rjsf/utils");
 var import_markdown_to_jsx3 = __toESM(require("markdown-to-jsx"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function UnsupportedField(props) {
-  const { schema, idSchema, reason, registry } = props;
+  const { schema, fieldPathId, reason, registry } = props;
   const { translateString } = registry;
-  let translateEnum = import_utils26.TranslatableString.UnsupportedField;
+  let translateEnum = import_utils27.TranslatableString.UnsupportedField;
   const translateParams = [];
-  if (idSchema && idSchema.$id) {
-    translateEnum = import_utils26.TranslatableString.UnsupportedFieldWithId;
-    translateParams.push(idSchema.$id);
+  if (fieldPathId && fieldPathId.$id) {
+    translateEnum = import_utils27.TranslatableString.UnsupportedFieldWithId;
+    translateParams.push(fieldPathId.$id);
   }
   if (reason) {
-    translateEnum = translateEnum === import_utils26.TranslatableString.UnsupportedField ? import_utils26.TranslatableString.UnsupportedFieldWithReason : import_utils26.TranslatableString.UnsupportedFieldWithIdAndReason;
+    translateEnum = translateEnum === import_utils27.TranslatableString.UnsupportedField ? import_utils27.TranslatableString.UnsupportedFieldWithReason : import_utils27.TranslatableString.UnsupportedFieldWithIdAndReason;
     translateParams.push(reason);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "unsupported-field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_markdown_to_jsx3.default, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
-    schema && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("pre", { children: JSON.stringify(schema, null, 2) })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "unsupported-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_markdown_to_jsx3.default, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
+    schema && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("pre", { children: JSON.stringify(schema, null, 2) })
   ] });
 }
 var UnsupportedField_default = UnsupportedField;
 
 // src/components/templates/WrapIfAdditionalTemplate.tsx
-var import_utils27 = require("@rjsf/utils");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_utils28 = require("@rjsf/utils");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
@@ -3147,20 +3307,20 @@ function WrapIfAdditionalTemplate(props) {
   } = props;
   const { templates: templates2, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates2.ButtonTemplates;
-  const keyLabel = translateString(import_utils27.TranslatableString.KeyLabel, [label]);
-  const additional = import_utils27.ADDITIONAL_PROPERTY_FLAG in schema;
+  const keyLabel = translateString(import_utils28.TranslatableString.KeyLabel, [label]);
+  const additional = import_utils28.ADDITIONAL_PROPERTY_FLAG 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__ */ (0, import_jsx_runtime31.jsx)("div", { className: uiClassNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: uiClassNames, style, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: uiClassNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "form-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { label: keyLabel, required, id: `${id}-key` }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: uiClassNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "form-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { label: keyLabel, required, id: `${id}-key` }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "input",
         {
           className: "form-control",
@@ -3171,11 +3331,11 @@ function WrapIfAdditionalTemplate(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "form-additional form-group col-xs-5", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "col-xs-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "form-additional form-group col-xs-5", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "col-xs-2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       RemoveButton2,
       {
-        id: (0, import_utils27.buttonId)(id, "remove"),
+        id: (0, import_utils28.buttonId)(id, "remove"),
         className: "rjsf-object-property-remove btn-block",
         style: { border: "0" },
         disabled: disabled || readonly,
@@ -3203,7 +3363,9 @@ function templates() {
     FieldErrorTemplate,
     FieldHelpTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     UnsupportedFieldTemplate: UnsupportedField_default,
     WrapIfAdditionalTemplate
@@ -3212,9 +3374,9 @@ function templates() {
 var templates_default = templates;
 
 // src/components/widgets/AltDateWidget.tsx
-var import_react12 = require("react");
-var import_utils28 = require("@rjsf/utils");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_utils29 = require("@rjsf/utils");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function readyForChange(state) {
   return Object.values(state).every((value) => value !== -1);
 }
@@ -3234,14 +3396,14 @@ function DateElement({
 }) {
   const id = rootId + "_" + type;
   const { SelectWidget: SelectWidget2 } = registry.widgets;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     SelectWidget2,
     {
       schema: { type: "integer" },
       id,
       name,
       className: "form-control",
-      options: { enumOptions: (0, import_utils28.dateRangeOptions)(range[0], range[1]) },
+      options: { enumOptions: (0, import_utils29.dateRangeOptions)(range[0], range[1]) },
       placeholder: type,
       value,
       disabled,
@@ -3252,7 +3414,7 @@ function DateElement({
       onFocus,
       registry,
       label: "",
-      "aria-describedby": (0, import_utils28.ariaDescribedByIds)(rootId)
+      "aria-describedby": (0, import_utils29.ariaDescribedByIds)(rootId)
     }
   );
 }
@@ -3271,37 +3433,36 @@ function AltDateWidget({
   value
 }) {
   const { translateString } = registry;
-  const [lastValue, setLastValue] = (0, import_react12.useState)(value);
-  const [state, setState] = (0, import_react12.useReducer)(
-    (state2, action) => {
-      return { ...state2, ...action };
+  const [state, setState] = (0, import_react14.useState)((0, import_utils29.parseDateString)(value, time));
+  (0, import_react14.useEffect)(() => {
+    setState((0, import_utils29.parseDateString)(value, time));
+  }, [time, value]);
+  const handleChange = (0, import_react14.useCallback)(
+    (property, value2) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value2 === "undefined" ? -1 : value2
+      };
+      if (readyForChange(nextState)) {
+        onChange((0, import_utils29.toDateString)(nextState, time));
+      } else {
+        setState(nextState);
+      }
     },
-    (0, import_utils28.parseDateString)(value, time)
+    [state, onChange, time]
   );
-  (0, import_react12.useEffect)(() => {
-    const stateValue = (0, import_utils28.toDateString)(state, time);
-    if (readyForChange(state) && stateValue !== value) {
-      onChange(stateValue);
-    } else if (lastValue !== value) {
-      setLastValue(value);
-      setState((0, import_utils28.parseDateString)(value, time));
-    }
-  }, [time, value, onChange, state, lastValue]);
-  const handleChange = (0, import_react12.useCallback)((property, value2) => {
-    setState({ [property]: value2 });
-  }, []);
-  const handleSetNow = (0, import_react12.useCallback)(
+  const handleSetNow = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
         return;
       }
-      const nextState = (0, import_utils28.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), time);
-      onChange((0, import_utils28.toDateString)(nextState, time));
+      const nextState = (0, import_utils29.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), time);
+      onChange((0, import_utils29.toDateString)(nextState, time));
     },
-    [disabled, readonly, time]
+    [disabled, readonly, time, onChange]
   );
-  const handleClear = (0, import_react12.useCallback)(
+  const handleClear = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       if (disabled || readonly) {
@@ -3311,13 +3472,13 @@ function AltDateWidget({
     },
     [disabled, readonly, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("ul", { className: "list-inline", children: [
-    (0, import_utils28.getDateElementProps)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { className: "list-inline", children: [
+    (0, import_utils29.getDateElementProps)(
       state,
       time,
       options.yearsRange,
       options.format
-    ).map((elemProps, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    ).map((elemProps, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       DateElement,
       {
         rootId: id,
@@ -3332,27 +3493,27 @@ function AltDateWidget({
         autofocus: autofocus && i === 0
       }
     ) }, i)),
-    (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: "#", className: "btn btn-info btn-now", onClick: handleSetNow, children: translateString(import_utils28.TranslatableString.NowLabel) }) }),
-    (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: "#", className: "btn btn-warning btn-clear", onClick: handleClear, children: translateString(import_utils28.TranslatableString.ClearLabel) }) })
+    (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: "#", className: "btn btn-info btn-now", onClick: handleSetNow, children: translateString(import_utils29.TranslatableString.NowLabel) }) }),
+    (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { href: "#", className: "btn btn-warning btn-clear", onClick: handleClear, children: translateString(import_utils29.TranslatableString.ClearLabel) }) })
   ] });
 }
 var AltDateWidget_default = AltDateWidget;
 
 // src/components/widgets/AltDateTimeWidget.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function AltDateTimeWidget({
   time = true,
   ...props
 }) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AltDateWidget2, { time, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AltDateWidget2, { time, ...props });
 }
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/components/widgets/CheckboxWidget.tsx
-var import_react13 = require("react");
-var import_utils29 = require("@rjsf/utils");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_utils30 = require("@rjsf/utils");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function CheckboxWidget({
   schema,
   uiSchema,
@@ -3369,38 +3530,38 @@ function CheckboxWidget({
   onChange,
   registry
 }) {
-  const DescriptionFieldTemplate = (0, import_utils29.getTemplate)(
+  const DescriptionFieldTemplate = (0, import_utils30.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     options
   );
-  const required = (0, import_utils29.schemaRequiresTrueValue)(schema);
-  const handleChange = (0, import_react13.useCallback)(
+  const required = (0, import_utils30.schemaRequiresTrueValue)(schema);
+  const handleChange = (0, import_react15.useCallback)(
     (event) => onChange(event.target.checked),
     [onChange]
   );
-  const handleBlur = (0, import_react13.useCallback)(
+  const handleBlur = (0, import_react15.useCallback)(
     (event) => onBlur(id, event.target.checked),
     [onBlur, id]
   );
-  const handleFocus = (0, import_react13.useCallback)(
+  const handleFocus = (0, import_react15.useCallback)(
     (event) => onFocus(id, event.target.checked),
     [onFocus, id]
   );
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: `checkbox ${disabled || readonly ? "disabled" : ""}`, children: [
-    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `checkbox ${disabled || readonly ? "disabled" : ""}`, children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils29.descriptionId)(id),
+        id: (0, import_utils30.descriptionId)(id),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "input",
         {
           type: "checkbox",
@@ -3413,19 +3574,19 @@ function CheckboxWidget({
           onChange: handleChange,
           onBlur: handleBlur,
           onFocus: handleFocus,
-          "aria-describedby": (0, import_utils29.ariaDescribedByIds)(id)
+          "aria-describedby": (0, import_utils30.ariaDescribedByIds)(id)
         }
       ),
-      (0, import_utils29.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label }), hideLabel)
+      (0, import_utils30.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: label }), hideLabel)
     ] })
   ] });
 }
 var CheckboxWidget_default = CheckboxWidget;
 
 // src/components/widgets/CheckboxesWidget.tsx
-var import_react14 = require("react");
-var import_utils30 = require("@rjsf/utils");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_utils31 = require("@rjsf/utils");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function CheckboxesWidget({
   id,
   disabled,
@@ -3438,31 +3599,31 @@ function CheckboxesWidget({
   onFocus
 }) {
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const handleBlur = (0, import_react14.useCallback)(
-    ({ target }) => onBlur(id, (0, import_utils30.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id]
+  const handleBlur = (0, import_react16.useCallback)(
+    ({ target }) => onBlur(id, (0, import_utils31.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
+    [onBlur, id, enumOptions, emptyValue]
   );
-  const handleFocus = (0, import_react14.useCallback)(
-    ({ target }) => onFocus(id, (0, import_utils30.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id]
+  const handleFocus = (0, import_react16.useCallback)(
+    ({ target }) => onFocus(id, (0, import_utils31.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
+    [onFocus, id, enumOptions, emptyValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-    const checked = (0, import_utils30.enumOptionsIsSelected)(option.value, checkboxesValues);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    const checked = (0, import_utils31.enumOptionsIsSelected)(option.value, checkboxesValues);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
     const handleChange = (event) => {
       if (event.target.checked) {
-        onChange((0, import_utils30.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
+        onChange((0, import_utils31.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
       } else {
-        onChange((0, import_utils30.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
+        onChange((0, import_utils31.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
       }
     };
-    const checkbox = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    const checkbox = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "input",
         {
           type: "checkbox",
-          id: (0, import_utils30.optionId)(id, index),
+          id: (0, import_utils31.optionId)(id, index),
           name: id,
           checked,
           value: String(index),
@@ -3471,67 +3632,67 @@ function CheckboxesWidget({
           onChange: handleChange,
           onBlur: handleBlur,
           onFocus: handleFocus,
-          "aria-describedby": (0, import_utils30.ariaDescribedByIds)(id)
+          "aria-describedby": (0, import_utils31.ariaDescribedByIds)(id)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: option.label })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: option.label })
     ] });
-    return inline ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { children: checkbox }) }, index);
+    return inline ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("label", { children: checkbox }) }, index);
   }) });
 }
 var CheckboxesWidget_default = CheckboxesWidget;
 
 // src/components/widgets/ColorWidget.tsx
-var import_utils31 = require("@rjsf/utils");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_utils32 = require("@rjsf/utils");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ColorWidget(props) {
   const { disabled, readonly, options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils31.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(BaseInputTemplate2, { type: "color", ...props, disabled: disabled || readonly });
+  const BaseInputTemplate2 = (0, import_utils32.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BaseInputTemplate2, { type: "color", ...props, disabled: disabled || readonly });
 }
 
 // src/components/widgets/DateWidget.tsx
-var import_react15 = require("react");
-var import_utils32 = require("@rjsf/utils");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_utils33 = require("@rjsf/utils");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function DateWidget(props) {
   const { onChange, options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils32.getTemplate)("BaseInputTemplate", registry, options);
-  const handleChange = (0, import_react15.useCallback)((value) => onChange(value || void 0), [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
+  const BaseInputTemplate2 = (0, import_utils33.getTemplate)("BaseInputTemplate", registry, options);
+  const handleChange = (0, import_react17.useCallback)((value) => onChange(value || void 0), [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
 }
 
 // src/components/widgets/DateTimeWidget.tsx
-var import_utils33 = require("@rjsf/utils");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_utils34 = require("@rjsf/utils");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function DateTimeWidget(props) {
   const { onChange, value, options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils33.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  const BaseInputTemplate2 = (0, import_utils34.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     BaseInputTemplate2,
     {
       type: "datetime-local",
       ...props,
-      value: (0, import_utils33.utcToLocal)(value),
-      onChange: (value2) => onChange((0, import_utils33.localToUTC)(value2))
+      value: (0, import_utils34.utcToLocal)(value),
+      onChange: (value2) => onChange((0, import_utils34.localToUTC)(value2))
     }
   );
 }
 
 // src/components/widgets/EmailWidget.tsx
-var import_utils34 = require("@rjsf/utils");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_utils35 = require("@rjsf/utils");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function EmailWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils34.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BaseInputTemplate2, { type: "email", ...props });
+  const BaseInputTemplate2 = (0, import_utils35.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BaseInputTemplate2, { type: "email", ...props });
 }
 
 // src/components/widgets/FileWidget.tsx
-var import_react16 = require("react");
-var import_utils35 = require("@rjsf/utils");
+var import_react18 = require("react");
+var import_utils36 = require("@rjsf/utils");
 var import_markdown_to_jsx4 = __toESM(require("markdown-to-jsx"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function addNameToDataURL(dataURL, name) {
   if (dataURL === null) {
     return null;
@@ -3576,11 +3737,11 @@ function FileInfoPreview({
     return null;
   }
   if (["image/jpeg", "image/png"].includes(type)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: dataURL, style: { maxWidth: "100%" }, className: "file-preview" });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src: dataURL, style: { maxWidth: "100%" }, className: "file-preview" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("a", { download: `preview-${name}`, href: dataURL, className: "file-download", children: translateString(import_utils35.TranslatableString.PreviewLabel) })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { download: `preview-${name}`, href: dataURL, className: "file-download", children: translateString(import_utils36.TranslatableString.PreviewLabel) })
   ] });
 }
 function FilesInfo({
@@ -3594,14 +3755,14 @@ function FilesInfo({
     return null;
   }
   const { translateString } = registry;
-  const { RemoveButton: RemoveButton2 } = (0, import_utils35.getTemplate)("ButtonTemplates", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
+  const { RemoveButton: RemoveButton2 } = (0, import_utils36.getTemplate)("ButtonTemplates", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
     const { name, size, type } = fileInfo;
     const handleRemove = () => onRemove(key);
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_markdown_to_jsx4.default, { children: translateString(import_utils35.TranslatableString.FilesInfo, [name, type, String(size)]) }),
-      preview && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FileInfoPreview, { fileInfo, registry }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RemoveButton2, { onClick: handleRemove, registry })
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_markdown_to_jsx4.default, { children: translateString(import_utils36.TranslatableString.FilesInfo, [name, type, String(size)]) }),
+      preview && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FileInfoPreview, { fileInfo, registry }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RemoveButton2, { onClick: handleRemove, registry })
     ] }, key);
   }) });
 }
@@ -3611,7 +3772,7 @@ function extractFileInfo(dataURLs) {
       return acc;
     }
     try {
-      const { blob, name } = (0, import_utils35.dataURItoBlob)(dataURL);
+      const { blob, name } = (0, import_utils36.dataURItoBlob)(dataURL);
       return [
         ...acc,
         {
@@ -3628,8 +3789,8 @@ function extractFileInfo(dataURLs) {
 }
 function FileWidget(props) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils35.getTemplate)("BaseInputTemplate", registry, options);
-  const handleChange = (0, import_react16.useCallback)(
+  const BaseInputTemplate2 = (0, import_utils36.getTemplate)("BaseInputTemplate", registry, options);
+  const handleChange = (0, import_react18.useCallback)(
     (event) => {
       if (!event.target.files) {
         return;
@@ -3645,8 +3806,8 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  const filesInfo = (0, import_react16.useMemo)(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
-  const rmFile = (0, import_react16.useCallback)(
+  const filesInfo = (0, import_react18.useMemo)(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
+  const rmFile = (0, import_react18.useCallback)(
     (index) => {
       if (multiple) {
         const newValue = value.filter((_, i) => i !== index);
@@ -3657,8 +3818,8 @@ function FileWidget(props) {
     },
     [multiple, value, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       BaseInputTemplate2,
       {
         ...props,
@@ -3670,7 +3831,7 @@ function FileWidget(props) {
         accept: options.accept ? String(options.accept) : void 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       FilesInfo,
       {
         filesInfo,
@@ -3685,28 +3846,28 @@ function FileWidget(props) {
 var FileWidget_default = FileWidget;
 
 // src/components/widgets/HiddenWidget.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function HiddenWidget({
   id,
   value
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("input", { type: "hidden", id, name: id, value: typeof value === "undefined" ? "" : value });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("input", { type: "hidden", id, name: id, value: typeof value === "undefined" ? "" : value });
 }
 var HiddenWidget_default = HiddenWidget;
 
 // src/components/widgets/PasswordWidget.tsx
-var import_utils36 = require("@rjsf/utils");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_utils37 = require("@rjsf/utils");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function PasswordWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils36.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BaseInputTemplate2, { type: "password", ...props });
+  const BaseInputTemplate2 = (0, import_utils37.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BaseInputTemplate2, { type: "password", ...props });
 }
 
 // src/components/widgets/RadioWidget.tsx
-var import_react17 = require("react");
-var import_utils37 = require("@rjsf/utils");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_utils38 = require("@rjsf/utils");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function RadioWidget({
   options,
   value,
@@ -3720,25 +3881,25 @@ function RadioWidget({
   id
 }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
-  const handleBlur = (0, import_react17.useCallback)(
-    ({ target }) => onBlur(id, (0, import_utils37.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
+  const handleBlur = (0, import_react19.useCallback)(
+    ({ target }) => onBlur(id, (0, import_utils38.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
     [onBlur, enumOptions, emptyValue, id]
   );
-  const handleFocus = (0, import_react17.useCallback)(
-    ({ target }) => onFocus(id, (0, import_utils37.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
+  const handleFocus = (0, import_react19.useCallback)(
+    ({ target }) => onFocus(id, (0, import_utils38.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
     [onFocus, enumOptions, emptyValue, id]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
-    const checked = (0, import_utils37.enumOptionsIsSelected)(option.value, value);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
+    const checked = (0, import_utils38.enumOptionsIsSelected)(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__ */ (0, import_jsx_runtime43.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    const radio = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "input",
         {
           type: "radio",
-          id: (0, import_utils37.optionId)(id, i),
+          id: (0, import_utils38.optionId)(id, i),
           checked,
           name: id,
           required,
@@ -3748,18 +3909,18 @@ function RadioWidget({
           onChange: handleChange,
           onBlur: handleBlur,
           onFocus: handleFocus,
-          "aria-describedby": (0, import_utils37.ariaDescribedByIds)(id)
+          "aria-describedby": (0, import_utils38.ariaDescribedByIds)(id)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: option.label })
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: option.label })
     ] });
-    return inline ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { className: `radio-inline ${disabledCls}`, children: radio }, i) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `radio ${disabledCls}`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { children: radio }) }, i);
+    return inline ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: `radio-inline ${disabledCls}`, children: radio }, i) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `radio ${disabledCls}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { children: radio }) }, i);
   }) });
 }
 var RadioWidget_default = RadioWidget;
 
 // src/components/widgets/RangeWidget.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const {
     value,
@@ -3767,15 +3928,15 @@ function RangeWidget(props) {
       templates: { BaseInputTemplate: BaseInputTemplate2 }
     }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "field-range-wrapper", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BaseInputTemplate2, { type: "range", ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "range-view", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "field-range-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BaseInputTemplate2, { type: "range", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "range-view", children: value })
   ] });
 }
 
 // src/components/widgets/RatingWidget.tsx
-var import_react18 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function RatingWidget({
   id,
   value,
@@ -3792,7 +3953,7 @@ function RatingWidget({
   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 = (0, import_react18.useCallback)(
+  const handleStarClick = (0, import_react20.useCallback)(
     (starValue) => {
       if (!disabled && !readonly) {
         onChange(starValue);
@@ -3800,7 +3961,7 @@ function RatingWidget({
     },
     [onChange, disabled, readonly]
   );
-  const handleFocus = (0, import_react18.useCallback)(
+  const handleFocus = (0, import_react20.useCallback)(
     (event) => {
       if (onFocus) {
         const starValue = Number(event.target.dataset.value);
@@ -3809,7 +3970,7 @@ function RatingWidget({
     },
     [onFocus, id]
   );
-  const handleBlur = (0, import_react18.useCallback)(
+  const handleBlur = (0, import_react20.useCallback)(
     (event) => {
       if (onBlur) {
         const starValue = Number(event.target.dataset.value);
@@ -3824,7 +3985,7 @@ function RatingWidget({
     }
     return isFilled ? "\u2605" : "\u2606";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       className: "rating-widget",
@@ -3837,7 +3998,7 @@ function RatingWidget({
         [...Array(numStars)].map((_, index) => {
           const starValue = min + index;
           const isFilled = starValue <= value;
-          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "span",
             {
               onClick: () => handleStarClick(starValue),
@@ -3859,7 +4020,7 @@ function RatingWidget({
             index
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "input",
           {
             type: "hidden",
@@ -3877,9 +4038,9 @@ function RatingWidget({
 }
 
 // src/components/widgets/SelectWidget.tsx
-var import_react19 = require("react");
-var import_utils38 = require("@rjsf/utils");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_utils39 = require("@rjsf/utils");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function getValue(event, multiple) {
   if (multiple) {
     return Array.from(event.target.options).slice().filter((o) => o.selected).map((o) => o.value);
@@ -3903,30 +4064,30 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : "";
-  const handleFocus = (0, import_react19.useCallback)(
+  const handleFocus = (0, import_react21.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onFocus(id, (0, import_utils38.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onFocus(id, (0, import_utils39.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
     },
     [onFocus, id, multiple, enumOptions, optEmptyVal]
   );
-  const handleBlur = (0, import_react19.useCallback)(
+  const handleBlur = (0, import_react21.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onBlur(id, (0, import_utils38.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onBlur(id, (0, import_utils39.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
     },
     [onBlur, id, multiple, enumOptions, optEmptyVal]
   );
-  const handleChange = (0, import_react19.useCallback)(
+  const handleChange = (0, import_react21.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onChange((0, import_utils38.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onChange((0, import_utils39.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
     },
     [onChange, multiple, enumOptions, optEmptyVal]
   );
-  const selectedIndexes = (0, import_utils38.enumOptionsIndexForValue)(value, enumOptions, multiple);
+  const selectedIndexes = (0, import_utils39.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "select",
     {
       id,
@@ -3941,12 +4102,12 @@ function SelectWidget({
       onBlur: handleBlur,
       onFocus: handleFocus,
       onChange: handleChange,
-      "aria-describedby": (0, import_utils38.ariaDescribedByIds)(id),
+      "aria-describedby": (0, import_utils39.ariaDescribedByIds)(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: String(i), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -3955,9 +4116,9 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/components/widgets/TextareaWidget.tsx
-var import_react20 = require("react");
-var import_utils39 = require("@rjsf/utils");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_utils40 = require("@rjsf/utils");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function TextareaWidget({
   id,
   options = {},
@@ -3971,19 +4132,19 @@ function TextareaWidget({
   onBlur,
   onFocus
 }) {
-  const handleChange = (0, import_react20.useCallback)(
+  const handleChange = (0, import_react22.useCallback)(
     ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
     [onChange, options.emptyValue]
   );
-  const handleBlur = (0, import_react20.useCallback)(
+  const handleBlur = (0, import_react22.useCallback)(
     ({ target }) => onBlur(id, target && target.value),
     [onBlur, id]
   );
-  const handleFocus = (0, import_react20.useCallback)(
+  const handleFocus = (0, import_react22.useCallback)(
     ({ target }) => onFocus(id, target && target.value),
     [id, onFocus]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "textarea",
     {
       id,
@@ -3999,7 +4160,7 @@ function TextareaWidget({
       onBlur: handleBlur,
       onFocus: handleFocus,
       onChange: handleChange,
-      "aria-describedby": (0, import_utils39.ariaDescribedByIds)(id)
+      "aria-describedby": (0, import_utils40.ariaDescribedByIds)(id)
     }
   );
 }
@@ -4010,41 +4171,41 @@ TextareaWidget.defaultProps = {
 var TextareaWidget_default = TextareaWidget;
 
 // src/components/widgets/TextWidget.tsx
-var import_utils40 = require("@rjsf/utils");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_utils41 = require("@rjsf/utils");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function TextWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils40.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BaseInputTemplate2, { ...props });
+  const BaseInputTemplate2 = (0, import_utils41.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BaseInputTemplate2, { ...props });
 }
 
 // src/components/widgets/TimeWidget.tsx
-var import_react21 = require("react");
-var import_utils41 = require("@rjsf/utils");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_utils42 = require("@rjsf/utils");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function TimeWidget(props) {
   const { onChange, options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils41.getTemplate)("BaseInputTemplate", registry, options);
-  const handleChange = (0, import_react21.useCallback)((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
+  const BaseInputTemplate2 = (0, import_utils42.getTemplate)("BaseInputTemplate", registry, options);
+  const handleChange = (0, import_react23.useCallback)((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
 }
 
 // src/components/widgets/URLWidget.tsx
-var import_utils42 = require("@rjsf/utils");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_utils43 = require("@rjsf/utils");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function URLWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils42.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BaseInputTemplate2, { type: "url", ...props });
+  const BaseInputTemplate2 = (0, import_utils43.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BaseInputTemplate2, { type: "url", ...props });
 }
 
 // src/components/widgets/UpDownWidget.tsx
-var import_utils43 = require("@rjsf/utils");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_utils44 = require("@rjsf/utils");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function UpDownWidget(props) {
   const { options, registry } = props;
-  const BaseInputTemplate2 = (0, import_utils43.getTemplate)("BaseInputTemplate", registry, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BaseInputTemplate2, { type: "number", ...props });
+  const BaseInputTemplate2 = (0, import_utils44.getTemplate)("BaseInputTemplate", registry, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(BaseInputTemplate2, { type: "number", ...props });
 }
 
 // src/components/widgets/index.ts
@@ -4082,17 +4243,21 @@ function getDefaultRegistry() {
     widgets: widgets_default(),
     rootSchema: {},
     formContext: {},
-    translateString: import_utils44.englishStringTranslator
+    translateString: import_utils45.englishStringTranslator,
+    globalFormOptions: { idPrefix: import_utils45.DEFAULT_ID_PREFIX, idSeparator: import_utils45.DEFAULT_ID_SEPARATOR }
   };
 }
 
 // src/components/Form.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var Form = class extends import_react22.Component {
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var Form = class extends import_react24.Component {
   /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
    * provide any possible type here
    */
   formElement;
+  /** The list of pending changes
+   */
+  pendingChanges = [];
   /** 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.
@@ -4105,10 +4270,10 @@ var Form = class extends import_react22.Component {
       throw new Error("A validator is required for Form functionality to work");
     }
     this.state = this.getStateFromProps(props, props.formData);
-    if (this.props.onChange && !(0, import_utils45.deepEquals)(this.state.formData, this.props.formData)) {
+    if (this.props.onChange && !(0, import_utils46.deepEquals)(this.state.formData, this.props.formData)) {
       this.props.onChange(this.state);
     }
-    this.formElement = (0, import_react22.createRef)();
+    this.formElement = (0, import_react24.createRef)();
   }
   /**
    * `getSnapshotBeforeUpdate` is a React lifecycle method that is invoked right before the most recently rendered
@@ -4129,10 +4294,12 @@ var Form = class extends import_react22.Component {
    *        with a flag indicating that an update is not necessary.
    */
   getSnapshotBeforeUpdate(prevProps, prevState) {
-    if (!(0, import_utils45.deepEquals)(this.props, prevProps)) {
-      const formDataChangedFields = (0, import_utils45.getChangedFields)(this.props.formData, prevProps.formData);
-      const isSchemaChanged = !(0, import_utils45.deepEquals)(prevProps.schema, this.props.schema);
-      const isFormDataChanged = formDataChangedFields.length > 0 || !(0, import_utils45.deepEquals)(prevProps.formData, this.props.formData);
+    if (!(0, import_utils46.deepEquals)(this.props, prevProps)) {
+      const formDataChangedFields = (0, import_utils46.getChangedFields)(this.props.formData, prevProps.formData);
+      const stateDataChangedFields = (0, import_utils46.getChangedFields)(this.props.formData, this.state.formData);
+      const isSchemaChanged = !(0, import_utils46.deepEquals)(prevProps.schema, this.props.schema);
+      const isFormDataChanged = formDataChangedFields.length > 0 || !(0, import_utils46.deepEquals)(prevProps.formData, this.props.formData);
+      const isStateDataChanged = stateDataChangedFields.length > 0 || !(0, import_utils46.deepEquals)(this.state.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -4141,9 +4308,11 @@ var Form = class extends import_react22.Component {
         //  match one of the subSchemas, the retrieved schema must be updated.
         isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
         isSchemaChanged,
-        formDataChangedFields
+        formDataChangedFields,
+        // Skip live validation for this request if no form data has changed from the last state
+        !isStateDataChanged
       );
-      const shouldUpdate = !(0, import_utils45.deepEquals)(nextState, prevState);
+      const shouldUpdate = !(0, import_utils46.deepEquals)(nextState, prevState);
       return { nextState, shouldUpdate };
     }
     return { shouldUpdate: false };
@@ -4163,7 +4332,7 @@ var Form = class extends import_react22.Component {
   componentDidUpdate(_, prevState, snapshot) {
     if (snapshot.shouldUpdate) {
       const { nextState } = snapshot;
-      if (!(0, import_utils45.deepEquals)(nextState.formData, this.props.formData) && !(0, import_utils45.deepEquals)(nextState.formData, prevState.formData) && this.props.onChange) {
+      if (!(0, import_utils46.deepEquals)(nextState.formData, this.props.formData) && !(0, import_utils46.deepEquals)(nextState.formData, prevState.formData) && this.props.onChange) {
         this.props.onChange(nextState);
       }
       this.setState(nextState);
@@ -4178,35 +4347,42 @@ var Form = class extends import_react22.Component {
    * @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`
+   * @param skipLiveValidate - Optional flag, if true, means that we are not running live validation
    * @returns - The new state for the `Form`
    */
-  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
+  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = [], skipLiveValidate = false) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
+    const validator2 = "validator" in props ? props.validator : this.props.validator;
     const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
     const edit = typeof inputFormData !== "undefined";
     const liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
     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,
+      validator2,
+      schema,
       experimental_defaultFormStateBehavior,
       experimental_customMergeAllOf
     )) {
-      schemaUtils = (0, import_utils45.createSchemaUtils)(
-        props.validator,
-        rootSchema,
+      schemaUtils = (0, import_utils46.createSchemaUtils)(
+        validator2,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf
       );
     }
-    const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
+    const rootSchema = schemaUtils.getRootSchema();
+    const formData = schemaUtils.getDefaultFormState(
+      rootSchema,
+      inputFormData,
+      false,
+      state.initialDefaultsGenerated
+    );
     const _retrievedSchema = this.updateRetrievedSchema(
-      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+      retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
     );
     const getCurrentErrors = () => {
       if (props.noValidate || isSchemaChanged) {
@@ -4226,25 +4402,28 @@ var Form = class extends import_react22.Component {
     let errorSchema;
     let schemaValidationErrors = state.schemaValidationErrors;
     let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
-    if (mustValidate) {
-      const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
-      errors = schemaValidation.errors;
-      if (retrievedSchema === void 0) {
-        errorSchema = schemaValidation.errorSchema;
-      } else {
-        errorSchema = (0, import_utils45.mergeObjects)(
-          this.state?.errorSchema,
-          schemaValidation.errorSchema,
-          "preventDuplicates"
-        );
-      }
-      schemaValidationErrors = errors;
-      schemaValidationErrorSchema = errorSchema;
+    if (mustValidate && !skipLiveValidate) {
+      const liveValidation = this.liveValidate(
+        rootSchema,
+        schemaUtils,
+        state.errorSchema,
+        formData,
+        void 0,
+        state.customErrors,
+        retrievedSchema,
+        // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
+        // Else in the case where it hasn't changed,
+        retrievedSchema !== void 0
+      );
+      errors = liveValidation.errors;
+      errorSchema = liveValidation.errorSchema;
+      schemaValidationErrors = liveValidation.schemaValidationErrors;
+      schemaValidationErrorSchema = liveValidation.schemaValidationErrorSchema;
     } else {
       const currentErrors = getCurrentErrors();
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
-      if (formDataChangedFields.length > 0) {
+      if (formDataChangedFields.length > 0 && !mustValidate) {
         const newErrorSchema = formDataChangedFields.reduce(
           (acc, key) => {
             acc[key] = void 0;
@@ -4252,37 +4431,30 @@ var Form = class extends import_react22.Component {
           },
           {}
         );
-        errorSchema = schemaValidationErrorSchema = (0, import_utils45.mergeObjects)(
+        errorSchema = schemaValidationErrorSchema = (0, import_utils46.mergeObjects)(
           currentErrors.errorSchema,
           newErrorSchema,
           "preventDuplicates"
         );
       }
+      const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
+      errors = mergedErrors.errors;
+      errorSchema = mergedErrors.errorSchema;
     }
-    if (props.extraErrors) {
-      const merged = (0, import_utils45.validationDataMerge)({ errorSchema, errors }, props.extraErrors);
-      errorSchema = merged.errorSchema;
-      errors = merged.errors;
-    }
-    const idSchema = schemaUtils.toIdSchema(
-      _retrievedSchema,
-      uiSchema["ui:rootFieldId"],
-      formData,
-      props.idPrefix,
-      props.idSeparator
-    );
+    const fieldPathId = (0, import_utils46.toFieldPathId)("", this.getGlobalFormOptions(this.props));
     const nextState = {
       schemaUtils,
-      schema,
+      schema: rootSchema,
       uiSchema,
-      idSchema,
+      fieldPathId,
       formData,
       edit,
       errors,
       errorSchema,
       schemaValidationErrors,
       schemaValidationErrorSchema,
-      retrievedSchema: _retrievedSchema
+      retrievedSchema: _retrievedSchema,
+      initialDefaultsGenerated: true
     };
     return nextState;
   }
@@ -4293,31 +4465,18 @@ var Form = class extends import_react22.Component {
    * @returns - True if the component should be updated, false otherwise
    */
   shouldComponentUpdate(nextProps, nextState) {
-    return (0, import_utils45.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, (0, import_utils45.createErrorHandler)(prevFormData), uiSchema);
-      const userErrorSchema = (0, import_utils45.unwrapErrorHandler)(errorHandler);
-      customValidateErrors = userErrorSchema;
-    }
-    return customValidateErrors;
+    const { experimental_componentUpdateStrategy = "customDeep" } = this.props;
+    return (0, import_utils46.shouldRender)(this, nextProps, nextState, experimental_componentUpdateStrategy);
   }
   /** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
    * `schemaUtils` in the state), returning the results.
    *
    * @param formData - The new form data to validate
    * @param schema - The schema used to validate against
-   * @param altSchemaUtils - The alternate schemaUtils to use for validation
+   * @param [altSchemaUtils] - The alternate schemaUtils to use for validation
+   * @param [retrievedSchema] - An optionally retrieved schema for per
    */
-  validate(formData, schema = this.props.schema, altSchemaUtils, retrievedSchema) {
+  validate(formData, schema = this.state.schema, altSchemaUtils, retrievedSchema) {
     const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
     const { customValidate, transformErrors, uiSchema } = this.props;
     const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
@@ -4326,24 +4485,75 @@ var Form = class extends import_react22.Component {
   /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
   renderErrors(registry) {
     const { errors, errorSchema, schema, uiSchema } = this.state;
-    const { formContext } = this.props;
-    const options = (0, import_utils45.getUiOptions)(uiSchema);
-    const ErrorListTemplate = (0, import_utils45.getTemplate)("ErrorListTemplate", registry, options);
+    const options = (0, import_utils46.getUiOptions)(uiSchema);
+    const ErrorListTemplate = (0, import_utils46.getTemplate)("ErrorListTemplate", registry, options);
     if (errors && errors.length) {
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         ErrorListTemplate,
         {
           errors,
           errorSchema: errorSchema || {},
           schema,
           uiSchema,
-          formContext,
           registry
         }
       );
     }
     return null;
   }
+  /** Merges any `extraErrors` or `customErrors` into the given `schemaValidation` object, returning the result
+   *
+   * @param schemaValidation - The `ValidationData` object into which additional errors are merged
+   * @param [extraErrors] - The extra errors from the props
+   * @param [customErrors] - The customErrors from custom components
+   * @return - The `extraErrors` and `customErrors` merged into the `schemaValidation`
+   * @private
+   */
+  mergeErrors(schemaValidation, extraErrors, customErrors) {
+    let errorSchema = schemaValidation.errorSchema;
+    let errors = schemaValidation.errors;
+    if (extraErrors) {
+      const merged = (0, import_utils46.validationDataMerge)(schemaValidation, extraErrors);
+      errorSchema = merged.errorSchema;
+      errors = merged.errors;
+    }
+    if (customErrors) {
+      const merged = (0, import_utils46.validationDataMerge)(schemaValidation, customErrors.ErrorSchema, true);
+      errorSchema = merged.errorSchema;
+      errors = merged.errors;
+    }
+    return { errors, errorSchema };
+  }
+  /** Performs live validation and then updates and returns the errors and error schemas by potentially merging in
+   * `extraErrors` and `customErrors`.
+   *
+   * @param rootSchema - The `rootSchema` from the state
+   * @param schemaUtils - The `SchemaUtilsType` from the state
+   * @param originalErrorSchema - The original `ErrorSchema` from the state
+   * @param [formData] - The new form data to validate
+   * @param [extraErrors] - The extra errors from the props
+   * @param [customErrors] - The customErrors from custom components
+   * @param [retrievedSchema] - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`
+   * @param [mergeIntoOriginalErrorSchema=false] - Optional flag indicating whether we merge into original schema
+   * @returns - An object containing `errorSchema`, `errors`, `schemaValidationErrors` and `schemaValidationErrorSchema`
+   * @private
+   */
+  liveValidate(rootSchema, schemaUtils, originalErrorSchema, formData, extraErrors, customErrors, retrievedSchema, mergeIntoOriginalErrorSchema = false) {
+    const schemaValidation = this.validate(formData, rootSchema, schemaUtils, retrievedSchema);
+    const errors = schemaValidation.errors;
+    let errorSchema = schemaValidation.errorSchema;
+    if (mergeIntoOriginalErrorSchema) {
+      errorSchema = (0, import_utils46.mergeObjects)(
+        originalErrorSchema,
+        schemaValidation.errorSchema,
+        "preventDuplicates"
+      );
+    }
+    const schemaValidationErrors = errors;
+    const schemaValidationErrorSchema = errorSchema;
+    const mergedErrors = this.mergeErrors({ errorSchema, errors }, extraErrors, customErrors);
+    return { ...mergedErrors, schemaValidationErrors, schemaValidationErrorSchema };
+  }
   /** Returns the `formData` with only the elements specified in the `fields` list
    *
    * @param formData - The data for the `Form`
@@ -4365,19 +4575,23 @@ var Form = class extends import_react22.Component {
    * @param [formData] - The form data to use while checking for empty objects/arrays
    */
   getFieldNames = (pathSchema, formData) => {
+    const formValueHasData = (value, isLeaf) => typeof value !== "object" || (0, import_isEmpty4.default)(value) || isLeaf && !(0, import_isEmpty4.default)(value);
     const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-      Object.keys(_obj).forEach((key) => {
-        if (typeof _obj[key] === "object") {
+      const objKeys = Object.keys(_obj);
+      objKeys.forEach((key) => {
+        const data = _obj[key];
+        if (typeof data === "object") {
           const newPaths = paths.map((path) => [...path, key]);
-          if (_obj[key][import_utils45.RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][import_utils45.NAME_KEY] !== "") {
-            acc.push(_obj[key][import_utils45.NAME_KEY]);
+          if (data[import_utils46.RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[import_utils46.NAME_KEY] !== "") {
+            acc.push(data[import_utils46.NAME_KEY]);
           } else {
-            getAllPaths(_obj[key], acc, newPaths);
+            getAllPaths(data, acc, newPaths);
           }
-        } else if (key === import_utils45.NAME_KEY && _obj[key] !== "") {
+        } else if (key === import_utils46.NAME_KEY && data !== "") {
           paths.forEach((path) => {
             const formValue = (0, import_get6.default)(formData, path);
-            if (typeof formValue !== "object" || (0, import_isEmpty4.default)(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
+            const isLeaf = objKeys.length === 1;
+            if (formValueHasData(formValue, isLeaf) || Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf))) {
               acc.push(path);
             }
           });
@@ -4397,60 +4611,49 @@ var Form = class extends import_react22.Component {
     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;
+    return this.getUsedFormData(formData, fieldNames);
   };
-  // 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;
-    const _retrievedSchema = resolvedSchema ?? retrievedSchema;
-    const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
-    const fieldNames = this.getFieldNames(pathSchema, formData);
-    const filteredErrors = (0, import_pick.default)(schemaErrors, fieldNames);
-    if (resolvedSchema?.type !== "object" && resolvedSchema?.type !== "array") {
-      filteredErrors.__errors = schemaErrors.__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 = {}) => {
-      (0, import_forEach.default)(errors, (errorAtKey, errorKey) => {
-        const prevCustomValidateErrorAtKey = previousCustomValidateErrors[errorKey];
-        if ((0, import_isNil.default)(errorAtKey) || Array.isArray(errorAtKey) && errorAtKey.length === 0) {
-          delete errors[errorKey];
-        } else if ((0, import_utils45.isObject)(errorAtKey) && (0, import_utils45.isObject)(prevCustomValidateErrorAtKey) && Array.isArray(prevCustomValidateErrorAtKey?.__errors)) {
-          errors[errorKey] = filterPreviousCustomErrors(errorAtKey.__errors, prevCustomValidateErrorAtKey.__errors);
-        } else if (typeof errorAtKey === "object" && !Array.isArray(errorAtKey.__errors)) {
-          filterNilOrEmptyErrors(errorAtKey, previousCustomValidateErrors[errorKey]);
-        }
-      });
-      return errors;
-    };
-    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.
+  /** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
+   * the array only contains a single pending change.
    *
-   * @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
+   * @param newValue - The new form data from a change to a field
+   * @param path - The path to the change into which to set the formData
+   * @param [newErrorSchema] - The new `ErrorSchema` based on the field change
+   * @param [id] - The id of the field that caused the change
+   */
+  onChange = (newValue, path, newErrorSchema, id) => {
+    this.pendingChanges.push({ newValue, path, newErrorSchema, id });
+    if (this.pendingChanges.length === 1) {
+      this.processPendingChange();
+    }
+  };
+  /** Function to handle changes made to a field in the `Form`. This handler gets the first change from the
+   * `pendingChanges` list, containing the `newValue` for the `formData` and the `path` at which the `newValue` is to be
+   * updated, along with a new, optional `ErrorSchema` for that same `path` and potentially the `id` of the field being
+   * changed. 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 and the `processPendingChange()` function is called again.
    */
-  onChange = (formData, newErrorSchema, id) => {
+  processPendingChange() {
+    if (this.pendingChanges.length === 0) {
+      return;
+    }
+    const { newValue, path, id } = this.pendingChanges[0];
+    const { newErrorSchema } = this.pendingChanges[0];
     const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-    const { schemaUtils, schema } = this.state;
+    const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
+    let { customErrors, errorSchema: originalErrorSchema } = this.state;
+    const rootPathId = fieldPathId.path[0] || "";
+    const isRootPath = !path || path.length === 0 || path.length === 1 && path[0] === rootPathId;
     let retrievedSchema = this.state.retrievedSchema;
-    if ((0, import_utils45.isObject)(formData) || Array.isArray(formData)) {
-      const newState = this.getStateFromProps(this.props, formData);
+    let formData = isRootPath ? newValue : (0, import_cloneDeep2.default)(oldFormData);
+    if ((0, import_utils46.isObject)(formData) || Array.isArray(formData)) {
+      if (!isRootPath) {
+        (0, import_set5.default)(formData, path, newValue);
+      }
+      const newState = this.getStateFromProps(this.props, formData, void 0, void 0, void 0, true);
       formData = newState.formData;
       retrievedSchema = newState.retrievedSchema;
     }
@@ -4463,38 +4666,54 @@ var Form = class extends import_react22.Component {
         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 = (0, import_utils45.validationDataMerge)(schemaValidation, extraErrors);
-        errorSchema = merged.errorSchema;
-        errors = merged.errors;
-      }
-      if (newErrorSchema) {
-        const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-        errorSchema = (0, import_utils45.mergeObjects)(errorSchema, filteredErrors, "preventDuplicates");
+    if (newErrorSchema) {
+      const oldValidationError = !isRootPath ? (0, import_get6.default)(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
+      if (!(0, import_isEmpty4.default)(oldValidationError)) {
+        if (!isRootPath) {
+          (0, import_set5.default)(originalErrorSchema, path, newErrorSchema);
+        } else {
+          originalErrorSchema = newErrorSchema;
+        }
+      } else {
+        if (!customErrors) {
+          customErrors = new import_utils46.ErrorSchemaBuilder();
+        }
+        if (isRootPath) {
+          customErrors.setErrors((0, import_get6.default)(newErrorSchema, import_utils46.ERRORS_KEY, ""));
+        } else {
+          (0, import_set5.default)(customErrors.ErrorSchema, path, newErrorSchema);
+        }
       }
-      state = {
-        formData: newFormData,
-        errors,
-        errorSchema,
-        schemaValidationErrors,
-        schemaValidationErrorSchema
-      };
+    } else if (customErrors && (0, import_get6.default)(customErrors.ErrorSchema, [...path, import_utils46.ERRORS_KEY])) {
+      customErrors.clearErrors(path);
+    }
+    if (mustValidate && this.pendingChanges.length === 1) {
+      const liveValidation = this.liveValidate(
+        schema,
+        schemaUtils,
+        originalErrorSchema,
+        newFormData,
+        extraErrors,
+        customErrors,
+        retrievedSchema
+      );
+      state = { formData: newFormData, ...liveValidation, customErrors };
     } else if (!noValidate && newErrorSchema) {
-      const errorSchema = extraErrors ? (0, import_utils45.mergeObjects)(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+      const mergedErrors = this.mergeErrors({ errorSchema: originalErrorSchema, errors }, extraErrors, customErrors);
       state = {
         formData: newFormData,
-        errorSchema,
-        errors: (0, import_utils45.toErrorList)(errorSchema)
+        ...mergedErrors,
+        customErrors
       };
     }
-    this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-  };
+    this.setState(state, () => {
+      if (onChange) {
+        onChange({ ...this.state, ...state }, id);
+      }
+      this.pendingChanges.shift();
+      this.processPendingChange();
+    });
+  }
   /**
    * If the retrievedSchema has changed the new retrievedSchema is returned.
    * Otherwise, the old retrievedSchema is returned to persist reference.
@@ -4505,7 +4724,7 @@ var Form = class extends import_react22.Component {
    * @returns The new retrieved schema if it has changed, else the old retrieved schema.
    */
   updateRetrievedSchema(retrievedSchema) {
-    const isTheSame = (0, import_utils45.deepEquals)(retrievedSchema, this.state?.retrievedSchema);
+    const isTheSame = (0, import_utils46.deepEquals)(retrievedSchema, this.state?.retrievedSchema);
     return isTheSame ? this.state.retrievedSchema : retrievedSchema;
   }
   /**
@@ -4523,7 +4742,9 @@ var Form = class extends import_react22.Component {
       errorSchema: {},
       errors: [],
       schemaValidationErrors: [],
-      schemaValidationErrorSchema: {}
+      schemaValidationErrorSchema: {},
+      initialDefaultsGenerated: false,
+      customErrors: void 0
     };
     this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
   };
@@ -4572,7 +4793,7 @@ var Form = class extends import_react22.Component {
     }
     if (noValidate || this.validateFormWithFormData(newFormData)) {
       const errorSchema = extraErrors || {};
-      const errors = extraErrors ? (0, import_utils45.toErrorList)(extraErrors) : [];
+      const errors = extraErrors ? (0, import_utils46.toErrorList)(extraErrors) : [];
       this.setState(
         {
           formData: newFormData,
@@ -4589,10 +4810,26 @@ var Form = class extends import_react22.Component {
       );
     }
   };
+  /** Extracts the `GlobalFormOptions` from the given Form `props`
+   *
+   * @param props - The form props to extract the global form options from
+   * @returns - The `GlobalFormOptions` from the props
+   * @private
+   */
+  getGlobalFormOptions(props) {
+    const {
+      uiSchema = {},
+      experimental_componentUpdateStrategy,
+      idSeparator = import_utils46.DEFAULT_ID_SEPARATOR,
+      idPrefix = import_utils46.DEFAULT_ID_PREFIX
+    } = props;
+    const rootFieldId = uiSchema["ui:rootFieldId"];
+    return { idPrefix: rootFieldId || idPrefix, idSeparator, experimental_componentUpdateStrategy };
+  }
   /** Returns the registry for the form */
   getRegistry() {
     const { translateString: customTranslateString, uiSchema = {} } = this.props;
-    const { schemaUtils } = this.state;
+    const { schema, schemaUtils } = this.state;
     const { fields: fields2, templates: templates2, widgets: widgets2, formContext, translateString } = getDefaultRegistry();
     return {
       fields: { ...fields2, ...this.props.fields },
@@ -4605,11 +4842,12 @@ var Form = class extends import_react22.Component {
         }
       },
       widgets: { ...widgets2, ...this.props.widgets },
-      rootSchema: this.props.schema,
+      rootSchema: schema,
       formContext: this.props.formContext || formContext,
       schemaUtils,
       translateString: customTranslateString || translateString,
-      globalUiOptions: uiSchema[import_utils45.UI_GLOBAL_OPTIONS_KEY]
+      globalUiOptions: uiSchema[import_utils46.UI_GLOBAL_OPTIONS_KEY],
+      globalFormOptions: this.getGlobalFormOptions(this.props)
     };
   }
   /** Provides a function that can be used to programmatically submit the `Form` */
@@ -4667,7 +4905,7 @@ var Form = class extends import_react22.Component {
     const hasError = errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
     if (hasError) {
       if (extraErrors) {
-        const merged = (0, import_utils45.validationDataMerge)(schemaValidation, extraErrors);
+        const merged = (0, import_utils46.validationDataMerge)(schemaValidation, extraErrors);
         errorSchema = merged.errorSchema;
         errors = merged.errors;
       }
@@ -4724,8 +4962,6 @@ var Form = class extends import_react22.Component {
     const {
       children,
       id,
-      idPrefix,
-      idSeparator,
       className = "",
       tagName,
       name,
@@ -4738,22 +4974,21 @@ var Form = class extends import_react22.Component {
       noHtml5Validate = false,
       disabled,
       readonly,
-      formContext,
       showErrorList = "top",
       _internalFormWrapper
     } = this.props;
-    const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
+    const { schema, uiSchema, formData, errorSchema, fieldPathId } = this.state;
     const registry = this.getRegistry();
     const { SchemaField: _SchemaField } = registry.fields;
     const { SubmitButton: SubmitButton2 } = registry.templates.ButtonTemplates;
     const as = _internalFormWrapper ? tagName : void 0;
     const FormTag = _internalFormWrapper || tagName || "form";
-    let { [import_utils45.SUBMIT_BTN_OPTIONS_KEY]: submitOptions = {} } = (0, import_utils45.getUiOptions)(uiSchema);
+    let { [import_utils46.SUBMIT_BTN_OPTIONS_KEY]: submitOptions = {} } = (0, import_utils46.getUiOptions)(uiSchema);
     if (disabled) {
       submitOptions = { ...submitOptions, props: { ...submitOptions.props, disabled: true } };
     }
-    const submitUiSchema = { [import_utils45.UI_OPTIONS_KEY]: { [import_utils45.SUBMIT_BTN_OPTIONS_KEY]: submitOptions } };
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    const submitUiSchema = { [import_utils46.UI_OPTIONS_KEY]: { [import_utils46.SUBMIT_BTN_OPTIONS_KEY]: submitOptions } };
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       FormTag,
       {
         className: className ? className : "rjsf",
@@ -4771,17 +5006,14 @@ var Form = class extends import_react22.Component {
         ref: this.formElement,
         children: [
           showErrorList === "top" && this.renderErrors(registry),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             _SchemaField,
             {
               name: "",
               schema,
               uiSchema,
               errorSchema,
-              idSchema,
-              idPrefix,
-              idSeparator,
-              formContext,
+              fieldPathId,
               formData,
               onChange: this.onChange,
               onBlur: this.onBlur,
@@ -4791,7 +5023,7 @@ var Form = class extends import_react22.Component {
               readonly
             }
           ),
-          children ? children : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SubmitButton2, { uiSchema: submitUiSchema, registry }),
+          children ? children : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SubmitButton2, { uiSchema: submitUiSchema, registry }),
           showErrorList === "bottom" && this.renderErrors(registry)
         ]
       }
@@ -4800,10 +5032,10 @@ var Form = class extends import_react22.Component {
 };
 
 // src/withTheme.tsx
-var import_react23 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function withTheme(themeProps) {
-  return (0, import_react23.forwardRef)(
+  return (0, import_react25.forwardRef)(
     ({ fields: fields2, widgets: widgets2, templates: templates2, ...directProps }, ref) => {
       fields2 = { ...themeProps?.fields, ...fields2 };
       widgets2 = { ...themeProps?.widgets, ...widgets2 };
@@ -4815,7 +5047,7 @@ function withTheme(themeProps) {
           ...templates2?.ButtonTemplates
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Form,
         {
           ...themeProps,
@@ -4830,6 +5062,24 @@ function withTheme(themeProps) {
   );
 }
 
+// src/getTestRegistry.tsx
+var import_utils47 = require("@rjsf/utils");
+var import_validator_ajv8 = __toESM(require("@rjsf/validator-ajv8"), 1);
+function getTestRegistry(rootSchema, fields2 = {}, templates2 = {}, widgets2 = {}, formContext = {}, globalFormOptions = { idPrefix: import_utils47.DEFAULT_ID_PREFIX, idSeparator: import_utils47.DEFAULT_ID_SEPARATOR }) {
+  const defaults = getDefaultRegistry();
+  const schemaUtils = (0, import_utils47.createSchemaUtils)(import_validator_ajv8.default, rootSchema);
+  return {
+    fields: { ...defaults.fields, ...fields2 },
+    templates: { ...defaults.templates, ...templates2 },
+    widgets: { ...defaults.widgets, ...widgets2 },
+    formContext,
+    rootSchema,
+    schemaUtils,
+    translateString: import_utils47.englishStringTranslator,
+    globalFormOptions
+  };
+}
+
 // src/index.ts
 var index_default = Form;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map