@rjsf/core 5.11.2 → 5.12.0

package/dist/core.umd.development.js

@@ -1,4393 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/toPath'), require('lodash-es/cloneDeep'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/omit'), require('lodash-es/unset'), require('markdown-to-jsx'), require('lodash-es/has')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/toPath', 'lodash-es/cloneDeep', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/omit', 'lodash-es/unset', 'markdown-to-jsx', 'lodash-es/has'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.jsxRuntime, global.React, global.utils, global.get, global.isEmpty, global._pick, global._toPath, global.cloneDeep, global.isObject, global.set, global.nanoid, global.omit, global.unset, global.Markdown, global.has));
-})(this, (function (exports, jsxRuntime, react, utils, get, isEmpty, _pick, _toPath, cloneDeep, isObject, set, nanoid, omit, unset, Markdown, has) { 'use strict';
-
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
-  var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
-  var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
-  var _toPath__default = /*#__PURE__*/_interopDefaultLegacy(_toPath);
-  var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
-  var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
-  var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
-  var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
-  var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
-  var Markdown__default = /*#__PURE__*/_interopDefaultLegacy(Markdown);
-  var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
-
-  /** Used to generate a unique ID for an element in a row */
-  function generateRowId() {
-    return nanoid.nanoid();
-  }
-  /** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
-   *
-   * @param formData - The data for the form
-   * @returns - The `formData` converted into a `KeyedFormDataType` element
-   */
-  function generateKeyedFormData(formData) {
-    return !Array.isArray(formData) ? [] : formData.map(item => {
-      return {
-        key: generateRowId(),
-        item
-      };
-    });
-  }
-  /** Converts `KeyedFormDataType` data into the inner `formData`
-   *
-   * @param keyedFormData - The `KeyedFormDataType` to be converted
-   * @returns - The inner `formData` item(s) in the `keyedFormData`
-   */
-  function keyedToPlainFormData(keyedFormData) {
-    if (Array.isArray(keyedFormData)) {
-      return keyedFormData.map(keyedItem => keyedItem.item);
-    }
-    return [];
-  }
-  /** The `ArrayField` component is used to render a field in the schema that is of type `array`. It supports both normal
-   * and fixed array, allowing user to add and remove elements from the array data.
-   */
-  class ArrayField extends react.Component {
-    /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
-     *
-     * @param props - The `FieldProps` for this template
-     */
-    constructor(props) {
-      super(props);
-      /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
-       * that the schema is fixed and allows additional items.
-       */
-      this._getNewFormDataRow = () => {
-        const {
-          schema,
-          registry
-        } = this.props;
-        const {
-          schemaUtils
-        } = registry;
-        let itemSchema = schema.items;
-        if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
-          itemSchema = schema.additionalItems;
-        }
-        // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
-        return schemaUtils.getDefaultFormState(itemSchema);
-      };
-      /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-       * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
-       * keyed data
-       *
-       * @param event - The event for the click
-       */
-      this.onAddClick = event => {
-        this._handleAddClick(event);
-      };
-      /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
-       * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
-       * form data converted from the keyed data
-       *
-       * @param index - The index at which the add button is clicked
-       */
-      this.onAddIndexClick = index => {
-        return event => {
-          this._handleAddClick(event, index);
-        };
-      };
-      /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
-       * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
-       * form data converted from the keyed data
-       *
-       * @param index - The index at which the copy button is clicked
-       */
-      this.onCopyIndexClick = index => {
-        return event => {
-          if (event) {
-            event.preventDefault();
-          }
-          const {
-            onChange
-          } = this.props;
-          const {
-            keyedFormData
-          } = this.state;
-          const newKeyedFormDataRow = {
-            key: generateRowId(),
-            item: cloneDeep__default["default"](keyedFormData[index].item)
-          };
-          const newKeyedFormData = [...keyedFormData];
-          if (index !== undefined) {
-            newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
-          } else {
-            newKeyedFormData.push(newKeyedFormDataRow);
-          }
-          this.setState({
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
-        };
-      };
-      /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
-       * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
-       * from the keyed data
-       *
-       * @param index - The index at which the remove button is clicked
-       */
-      this.onDropIndexClick = index => {
-        return event => {
-          if (event) {
-            event.preventDefault();
-          }
-          const {
-            onChange,
-            errorSchema
-          } = this.props;
-          const {
-            keyedFormData
-          } = this.state;
-          // refs #195: revalidate to ensure properly reindexing errors
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i < index) {
-                set__default["default"](newErrorSchema, [i], errorSchema[idx]);
-              } else if (i > index) {
-                set__default["default"](newErrorSchema, [i - 1], errorSchema[idx]);
-              }
-            }
-          }
-          const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-          this.setState({
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
-        };
-      };
-      /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
-       * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
-       * plain form data converted from the keyed data
-       *
-       * @param index - The index of the item to move
-       * @param newIndex - The index to where the item is to be moved
-       */
-      this.onReorderClick = (index, newIndex) => {
-        return event => {
-          if (event) {
-            event.preventDefault();
-            event.currentTarget.blur();
-          }
-          const {
-            onChange,
-            errorSchema
-          } = this.props;
-          let newErrorSchema;
-          if (errorSchema) {
-            newErrorSchema = {};
-            for (const idx in errorSchema) {
-              const i = parseInt(idx);
-              if (i == index) {
-                set__default["default"](newErrorSchema, [newIndex], errorSchema[index]);
-              } else if (i == newIndex) {
-                set__default["default"](newErrorSchema, [index], errorSchema[newIndex]);
-              } else {
-                set__default["default"](newErrorSchema, [idx], errorSchema[i]);
-              }
-            }
-          }
-          const {
-            keyedFormData
-          } = this.state;
-          function reOrderArray() {
-            // Copy item
-            const _newKeyedFormData = keyedFormData.slice();
-            // Moves item from index to newIndex
-            _newKeyedFormData.splice(index, 1);
-            _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-            return _newKeyedFormData;
-          }
-          const newKeyedFormData = reOrderArray();
-          this.setState({
-            keyedFormData: newKeyedFormData
-          }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
-        };
-      };
-      /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
-       * `onChange` callback with the updated form data
-       *
-       * @param index - The index of the item being changed
-       */
-      this.onChangeForIndex = index => {
-        return (value, newErrorSchema, id) => {
-          const {
-            formData,
-            onChange,
-            errorSchema
-          } = this.props;
-          const arrayData = Array.isArray(formData) ? formData : [];
-          const newFormData = arrayData.map((item, i) => {
-            // We need to treat undefined items as nulls to have validation.
-            // See https://github.com/tdegrunt/jsonschema/issues/206
-            const jsonValue = typeof value === 'undefined' ? null : value;
-            return index === i ? jsonValue : item;
-          });
-          onChange(newFormData, errorSchema && errorSchema && {
-            ...errorSchema,
-            [index]: newErrorSchema
-          }, id);
-        };
-      };
-      /** Callback handler used to change the value for a checkbox */
-      this.onSelectChange = value => {
-        const {
-          onChange,
-          idSchema
-        } = this.props;
-        onChange(value, undefined, idSchema && idSchema.$id);
-      };
-      const {
-        formData: _formData = []
-      } = props;
-      const _keyedFormData = generateKeyedFormData(_formData);
-      this.state = {
-        keyedFormData: _keyedFormData,
-        updatedKeyedFormData: false
-      };
-    }
-    /** React lifecycle method that is called when the props are about to change allowing the state to be updated. It
-     * regenerates the keyed form data and returns it
-     *
-     * @param nextProps - The next set of props data
-     * @param prevState - The previous set of state data
-     */
-    static getDerivedStateFromProps(nextProps, prevState) {
-      // Don't call getDerivedStateFromProps if keyed formdata was just updated.
-      if (prevState.updatedKeyedFormData) {
-        return {
-          updatedKeyedFormData: false
-        };
-      }
-      const nextFormData = Array.isArray(nextProps.formData) ? nextProps.formData : [];
-      const previousKeyedFormData = prevState.keyedFormData || [];
-      const newKeyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
-        return {
-          key: previousKeyedFormDatum.key,
-          item: nextFormData[index]
-        };
-      }) : generateKeyedFormData(nextFormData);
-      return {
-        keyedFormData: newKeyedFormData
-      };
-    }
-    /** Returns the appropriate title for an item by getting first the title from the schema.items, then falling back to
-     * the description from the schema.items, and finally the string "Item"
-     */
-    get itemTitle() {
-      const {
-        schema,
-        registry
-      } = this.props;
-      const {
-        translateString
-      } = registry;
-      return get__default["default"](schema, [utils.ITEMS_KEY, 'title'], get__default["default"](schema, [utils.ITEMS_KEY, 'description'], translateString(utils.TranslatableString.ArrayItemTitle)));
-    }
-    /** Determines whether the item described in the schema is always required, which is determined by whether any item
-     * may be null.
-     *
-     * @param itemSchema - The schema for the item
-     * @return - True if the item schema type does not contain the "null" type
-     */
-    isItemRequired(itemSchema) {
-      if (Array.isArray(itemSchema.type)) {
-        // While we don't yet support composite/nullable jsonschema types, it's
-        // future-proof to check for requirement against these.
-        return !itemSchema.type.includes('null');
-      }
-      // All non-null array item types are inherently required by design
-      return itemSchema.type !== 'null';
-    }
-    /** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
-     * then false is returned. Otherwise, if the schema indicates that there are a maximum number of items and the
-     * `formData` matches that value, then false is returned, otherwise true is returned.
-     *
-     * @param formItems - The list of items in the form
-     * @returns - True if the item is addable otherwise false
-     */
-    canAddItem(formItems) {
-      const {
-        schema,
-        uiSchema,
-        registry
-      } = this.props;
-      let {
-        addable
-      } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-      if (addable !== false) {
-        // if ui:options.addable was not explicitly set to false, we can add
-        // another item if we have not exceeded maxItems yet
-        if (schema.maxItems !== undefined) {
-          addable = formItems.length < schema.maxItems;
-        } else {
-          addable = true;
-        }
-      }
-      return addable;
-    }
-    /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
-     * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
-     * the state, and then returning `onChange()` with the plain form data converted from the keyed data
-     *
-     * @param event - The event for the click
-     * @param [index] - The optional index at which to add the new data
-     */
-    _handleAddClick(event, index) {
-      if (event) {
-        event.preventDefault();
-      }
-      const {
-        onChange
-      } = this.props;
-      const {
-        keyedFormData
-      } = this.state;
-      const newKeyedFormDataRow = {
-        key: generateRowId(),
-        item: this._getNewFormDataRow()
-      };
-      const newKeyedFormData = [...keyedFormData];
-      if (index !== undefined) {
-        newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
-      } else {
-        newKeyedFormData.push(newKeyedFormDataRow);
-      }
-      this.setState({
-        keyedFormData: newKeyedFormData,
-        updatedKeyedFormData: true
-      }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
-    }
-    /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
-     */
-    render() {
-      const {
-        schema,
-        uiSchema,
-        idSchema,
-        registry
-      } = this.props;
-      const {
-        schemaUtils,
-        translateString
-      } = registry;
-      if (!(utils.ITEMS_KEY in schema)) {
-        const uiOptions = utils.getUiOptions(uiSchema);
-        const UnsupportedFieldTemplate = utils.getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
-        return jsxRuntime.jsx(UnsupportedFieldTemplate, {
-          schema: schema,
-          idSchema: idSchema,
-          reason: translateString(utils.TranslatableString.MissingItems),
-          registry: registry
-        });
-      }
-      if (schemaUtils.isMultiSelect(schema)) {
-        // If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
-        return this.renderMultiSelect();
-      }
-      if (utils.isCustomWidget(uiSchema)) {
-        return this.renderCustomWidget();
-      }
-      if (utils.isFixedItems(schema)) {
-        return this.renderFixedArray();
-      }
-      if (schemaUtils.isFilesArray(schema, uiSchema)) {
-        return this.renderFiles();
-      }
-      return this.renderNormalArray();
-    }
-    /** Renders a normal array without any limitations of length
-     */
-    renderNormalArray() {
-      const {
-        schema,
-        uiSchema = {},
-        errorSchema,
-        idSchema,
-        name,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        registry,
-        onBlur,
-        onFocus,
-        idPrefix,
-        idSeparator = '_',
-        rawErrors
-      } = this.props;
-      const {
-        keyedFormData
-      } = this.state;
-      const title = schema.title === undefined ? name : schema.title;
-      const {
-        schemaUtils,
-        formContext
-      } = registry;
-      const uiOptions = utils.getUiOptions(uiSchema);
-      const _schemaItems = isObject__default["default"](schema.items) ? schema.items : {};
-      const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
-      const formData = keyedToPlainFormData(this.state.keyedFormData);
-      const canAdd = this.canAddItem(formData);
-      const arrayProps = {
-        canAdd,
-        items: keyedFormData.map((keyedItem, index) => {
-          const {
-            key,
-            item
-          } = keyedItem;
-          // While we are actually dealing with a single item of type T, the types require a T[], so cast
-          const itemCast = item;
-          const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
-          const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
-          const itemIdPrefix = idSchema.$id + idSeparator + index;
-          const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-          return this.renderArrayFieldItem({
-            key,
-            index,
-            name: name && `${name}-${index}`,
-            canAdd,
-            canMoveUp: index > 0,
-            canMoveDown: index < formData.length - 1,
-            itemSchema,
-            itemIdSchema,
-            itemErrorSchema,
-            itemData: itemCast,
-            itemUiSchema: uiSchema.items,
-            autofocus: autofocus && index === 0,
-            onBlur,
-            onFocus,
-            rawErrors,
-            totalItems: keyedFormData.length
-          });
-        }),
-        className: `field field-array field-array-of-${itemsSchema.type}`,
-        disabled,
-        idSchema,
-        uiSchema,
-        onAddClick: this.onAddClick,
-        readonly,
-        required,
-        schema,
-        title,
-        formContext,
-        formData,
-        rawErrors,
-        registry
-      };
-      const Template = utils.getTemplate('ArrayFieldTemplate', registry, uiOptions);
-      return jsxRuntime.jsx(Template, {
-        ...arrayProps
-      });
-    }
-    /** Renders an array using the custom widget provided by the user in the `uiSchema`
-     */
-    renderCustomWidget() {
-      const {
-        schema,
-        idSchema,
-        uiSchema,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        hideError,
-        placeholder,
-        onBlur,
-        onFocus,
-        formData: items = [],
-        registry,
-        rawErrors,
-        name
-      } = this.props;
-      const {
-        widgets,
-        formContext,
-        globalUiOptions,
-        schemaUtils
-      } = registry;
-      const {
-        widget,
-        title: uiTitle,
-        ...options
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget(schema, widget, widgets);
-      const label = uiTitle ?? schema.title ?? name;
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      return jsxRuntime.jsx(Widget, {
-        id: idSchema.$id,
-        name: name,
-        multiple: true,
-        onChange: this.onSelectChange,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        options: options,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry,
-        value: items,
-        disabled: disabled,
-        readonly: readonly,
-        hideError: hideError,
-        required: required,
-        label: label,
-        hideLabel: !displayLabel,
-        placeholder: placeholder,
-        formContext: formContext,
-        autofocus: autofocus,
-        rawErrors: rawErrors
-      });
-    }
-    /** Renders an array as a set of checkboxes
-     */
-    renderMultiSelect() {
-      const {
-        schema,
-        idSchema,
-        uiSchema,
-        formData: items = [],
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        placeholder,
-        onBlur,
-        onFocus,
-        registry,
-        rawErrors,
-        name
-      } = this.props;
-      const {
-        widgets,
-        schemaUtils,
-        formContext,
-        globalUiOptions
-      } = registry;
-      const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
-      const enumOptions = utils.optionsList(itemsSchema);
-      const {
-        widget = 'select',
-        title: uiTitle,
-        ...options
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget(schema, widget, widgets);
-      const label = uiTitle ?? schema.title ?? name;
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      return jsxRuntime.jsx(Widget, {
-        id: idSchema.$id,
-        name: name,
-        multiple: true,
-        onChange: this.onSelectChange,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        options: {
-          ...options,
-          enumOptions
-        },
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry,
-        value: items,
-        disabled: disabled,
-        readonly: readonly,
-        required: required,
-        label: label,
-        hideLabel: !displayLabel,
-        placeholder: placeholder,
-        formContext: formContext,
-        autofocus: autofocus,
-        rawErrors: rawErrors
-      });
-    }
-    /** Renders an array of files using the `FileWidget`
-     */
-    renderFiles() {
-      const {
-        schema,
-        uiSchema,
-        idSchema,
-        name,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        onBlur,
-        onFocus,
-        registry,
-        formData: items = [],
-        rawErrors
-      } = this.props;
-      const {
-        widgets,
-        formContext,
-        globalUiOptions,
-        schemaUtils
-      } = registry;
-      const {
-        widget = 'files',
-        title: uiTitle,
-        ...options
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget(schema, widget, widgets);
-      const label = uiTitle ?? schema.title ?? name;
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      return jsxRuntime.jsx(Widget, {
-        options: options,
-        id: idSchema.$id,
-        name: name,
-        multiple: true,
-        onChange: this.onSelectChange,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        schema: schema,
-        uiSchema: uiSchema,
-        value: items,
-        disabled: disabled,
-        readonly: readonly,
-        required: required,
-        registry: registry,
-        formContext: formContext,
-        autofocus: autofocus,
-        rawErrors: rawErrors,
-        label: label,
-        hideLabel: !displayLabel
-      });
-    }
-    /** Renders an array that has a maximum limit of items
-     */
-    renderFixedArray() {
-      const {
-        schema,
-        uiSchema = {},
-        formData = [],
-        errorSchema,
-        idPrefix,
-        idSeparator = '_',
-        idSchema,
-        name,
-        disabled = false,
-        readonly = false,
-        autofocus = false,
-        required = false,
-        registry,
-        onBlur,
-        onFocus,
-        rawErrors
-      } = this.props;
-      const {
-        keyedFormData
-      } = this.state;
-      let {
-        formData: items = []
-      } = this.props;
-      const title = schema.title || name;
-      const uiOptions = utils.getUiOptions(uiSchema);
-      const {
-        schemaUtils,
-        formContext
-      } = registry;
-      const _schemaItems = isObject__default["default"](schema.items) ? schema.items : [];
-      const itemSchemas = _schemaItems.map((item, index) => schemaUtils.retrieveSchema(item, formData[index]));
-      const additionalSchema = isObject__default["default"](schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
-      if (!items || items.length < itemSchemas.length) {
-        // to make sure at least all fixed items are generated
-        items = items || [];
-        items = items.concat(new Array(itemSchemas.length - items.length));
-      }
-      // These are the props passed into the render function
-      const canAdd = this.canAddItem(items) && !!additionalSchema;
-      const arrayProps = {
-        canAdd,
-        className: 'field field-array field-array-fixed-items',
-        disabled,
-        idSchema,
-        formData,
-        items: keyedFormData.map((keyedItem, index) => {
-          const {
-            key,
-            item
-          } = keyedItem;
-          // While we are actually dealing with a single item of type T, the types require a T[], so cast
-          const itemCast = item;
-          const additional = index >= itemSchemas.length;
-          const itemSchema = additional && isObject__default["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 itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
-          return this.renderArrayFieldItem({
-            key,
-            index,
-            name: name && `${name}-${index}`,
-            canAdd,
-            canRemove: additional,
-            canMoveUp: index >= itemSchemas.length + 1,
-            canMoveDown: additional && index < items.length - 1,
-            itemSchema,
-            itemData: itemCast,
-            itemUiSchema,
-            itemIdSchema,
-            itemErrorSchema,
-            autofocus: autofocus && index === 0,
-            onBlur,
-            onFocus,
-            rawErrors,
-            totalItems: keyedFormData.length
-          });
-        }),
-        onAddClick: this.onAddClick,
-        readonly,
-        required,
-        registry,
-        schema,
-        uiSchema,
-        title,
-        formContext,
-        rawErrors
-      };
-      const Template = utils.getTemplate('ArrayFieldTemplate', registry, uiOptions);
-      return jsxRuntime.jsx(Template, {
-        ...arrayProps
-      });
-    }
-    /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
-     * back to the `ArrayFieldItemTemplate`.
-     *
-     * @param props - The props for the individual array item to be rendered
-     */
-    renderArrayFieldItem(props) {
-      const {
-        key,
-        index,
-        name,
-        canAdd,
-        canRemove = true,
-        canMoveUp,
-        canMoveDown,
-        itemSchema,
-        itemData,
-        itemUiSchema,
-        itemIdSchema,
-        itemErrorSchema,
-        autofocus,
-        onBlur,
-        onFocus,
-        rawErrors,
-        totalItems
-      } = props;
-      const {
-        disabled,
-        hideError,
-        idPrefix,
-        idSeparator,
-        readonly,
-        uiSchema,
-        registry,
-        formContext
-      } = this.props;
-      const {
-        fields: {
-          ArraySchemaField,
-          SchemaField
-        },
-        globalUiOptions
-      } = registry;
-      const ItemSchemaField = ArraySchemaField || SchemaField;
-      const {
-        orderable = true,
-        removable = true,
-        copyable = false
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const has = {
-        moveUp: orderable && canMoveUp,
-        moveDown: orderable && canMoveDown,
-        copy: copyable && canAdd,
-        remove: removable && canRemove,
-        toolbar: false
-      };
-      has.toolbar = Object.keys(has).some(key => has[key]);
-      return {
-        children: jsxRuntime.jsx(ItemSchemaField, {
-          name: name,
-          index: index,
-          schema: itemSchema,
-          uiSchema: itemUiSchema,
-          formData: itemData,
-          formContext: formContext,
-          errorSchema: itemErrorSchema,
-          idPrefix: idPrefix,
-          idSeparator: idSeparator,
-          idSchema: itemIdSchema,
-          required: this.isItemRequired(itemSchema),
-          onChange: this.onChangeForIndex(index),
-          onBlur: onBlur,
-          onFocus: onFocus,
-          registry: registry,
-          disabled: disabled,
-          readonly: readonly,
-          hideError: hideError,
-          autofocus: autofocus,
-          rawErrors: rawErrors
-        }),
-        className: 'array-item',
-        disabled,
-        canAdd,
-        hasCopy: has.copy,
-        hasToolbar: has.toolbar,
-        hasMoveUp: has.moveUp,
-        hasMoveDown: has.moveDown,
-        hasRemove: has.remove,
-        index,
-        totalItems,
-        key,
-        onAddIndexClick: this.onAddIndexClick,
-        onCopyIndexClick: this.onCopyIndexClick,
-        onDropIndexClick: this.onDropIndexClick,
-        onReorderClick: this.onReorderClick,
-        readonly,
-        registry,
-        schema: itemSchema,
-        uiSchema: itemUiSchema
-      };
-    }
-  }
-
-  /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
-   * two boolean values based on the various alternatives in the schema.
-   *
-   * @param props - The `FieldProps` for this template
-   */
-  function BooleanField(props) {
-    const {
-      schema,
-      name,
-      uiSchema,
-      idSchema,
-      formData,
-      registry,
-      required,
-      disabled,
-      readonly,
-      autofocus,
-      onChange,
-      onFocus,
-      onBlur,
-      rawErrors
-    } = props;
-    const {
-      title
-    } = schema;
-    const {
-      widgets,
-      formContext,
-      translateString,
-      globalUiOptions
-    } = registry;
-    const {
-      widget = 'checkbox',
-      title: uiTitle,
-      // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
-      label: displayLabel = true,
-      ...options
-    } = utils.getUiOptions(uiSchema, globalUiOptions);
-    const Widget = utils.getWidget(schema, widget, widgets);
-    const yes = translateString(utils.TranslatableString.YesLabel);
-    const no = translateString(utils.TranslatableString.NoLabel);
-    let enumOptions;
-    const label = uiTitle ?? title ?? name;
-    if (Array.isArray(schema.oneOf)) {
-      enumOptions = utils.optionsList({
-        oneOf: schema.oneOf.map(option => {
-          if (isObject__default["default"](option)) {
-            return {
-              ...option,
-              title: option.title || (option.const === true ? yes : no)
-            };
-          }
-          return undefined;
-        }).filter(o => o) // cast away the error that typescript can't grok is fixed
-      });
-    } else {
-      // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
-      const schemaWithEnumNames = schema;
-      const enums = schema.enum ?? [true, false];
-      if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(v => typeof v === 'boolean')) {
-        enumOptions = [{
-          value: enums[0],
-          label: enums[0] ? yes : no
-        }, {
-          value: enums[1],
-          label: enums[1] ? yes : no
-        }];
-      } else {
-        enumOptions = utils.optionsList({
-          enum: enums,
-          // NOTE: enumNames is deprecated, but still supported for now.
-          enumNames: schemaWithEnumNames.enumNames
-        });
-      }
-    }
-    return jsxRuntime.jsx(Widget, {
-      options: {
-        ...options,
-        enumOptions
-      },
-      schema: schema,
-      uiSchema: uiSchema,
-      id: idSchema.$id,
-      name: name,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      label: label,
-      hideLabel: !displayLabel,
-      value: formData,
-      required: required,
-      disabled: disabled,
-      readonly: readonly,
-      registry: registry,
-      formContext: formContext,
-      autofocus: autofocus,
-      rawErrors: rawErrors
-    });
-  }
-
-  /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
-   * the currently selected option and cleans up any irrelevant data in `formData`.
-   *
-   * @param props - The `FieldProps` for this template
-   */
-  class AnyOfField extends react.Component {
-    /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
-     *
-     * @param props - The `FieldProps` for this template
-     */
-    constructor(props) {
-      super(props);
-      /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
-       * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
-       * the `onChange` handler.
-       *
-       * @param option - The new option value being selected
-       */
-      this.onOptionChange = option => {
-        const {
-          selectedOption,
-          retrievedOptions
-        } = this.state;
-        const {
-          formData,
-          onChange,
-          registry
-        } = this.props;
-        const {
-          schemaUtils
-        } = registry;
-        const intOption = option !== undefined ? parseInt(option, 10) : -1;
-        if (intOption === selectedOption) {
-          return;
-        }
-        const newOption = intOption >= 0 ? retrievedOptions[intOption] : undefined;
-        const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : undefined;
-        let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
-        if (newFormData && newOption) {
-          // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
-          // so that only the root objects themselves are created without adding undefined children properties
-          newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren');
-        }
-        onChange(newFormData, undefined, this.getFieldId());
-        this.setState({
-          selectedOption: intOption
-        });
-      };
-      const {
-        formData: _formData,
-        options,
-        registry: {
-          schemaUtils: _schemaUtils
-        }
-      } = this.props;
-      // cache the retrieved options in state in case they have $refs to save doing it later
-      const _retrievedOptions = options.map(opt => _schemaUtils.retrieveSchema(opt, _formData));
-      this.state = {
-        retrievedOptions: _retrievedOptions,
-        selectedOption: this.getMatchingOption(0, _formData, _retrievedOptions)
-      };
-    }
-    /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
-     * currently selected option based on the overall `formData`
-     *
-     * @param prevProps - The previous `FieldProps` for this template
-     * @param prevState - The previous `AnyOfFieldState` for this template
-     */
-    componentDidUpdate(prevProps, prevState) {
-      const {
-        formData,
-        options,
-        idSchema
-      } = this.props;
-      const {
-        selectedOption
-      } = this.state;
-      let newState = this.state;
-      if (!utils.deepEquals(prevProps.options, options)) {
-        const {
-          registry: {
-            schemaUtils
-          }
-        } = this.props;
-        // re-cache the retrieved options in state in case they have $refs to save doing it later
-        const retrievedOptions = options.map(opt => schemaUtils.retrieveSchema(opt, formData));
-        newState = {
-          selectedOption,
-          retrievedOptions
-        };
-      }
-      if (!utils.deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
-        const {
-          retrievedOptions
-        } = newState;
-        const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
-        if (prevState && matchingOption !== selectedOption) {
-          newState = {
-            selectedOption: matchingOption,
-            retrievedOptions
-          };
-        }
-      }
-      if (newState !== this.state) {
-        this.setState(newState);
-      }
-    }
-    /** Determines the best matching option for the given `formData` and `options`.
-     *
-     * @param formData - The new formData
-     * @param options - The list of options to choose from
-     * @return - The index of the `option` that best matches the `formData`
-     */
-    getMatchingOption(selectedOption, formData, options) {
-      const {
-        schema,
-        registry: {
-          schemaUtils
-        }
-      } = this.props;
-      const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
-      const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
-      return option;
-    }
-    getFieldId() {
-      const {
-        idSchema,
-        schema
-      } = this.props;
-      return `${idSchema.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
-    }
-    /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
-     */
-    render() {
-      const {
-        name,
-        disabled = false,
-        errorSchema = {},
-        formContext,
-        onBlur,
-        onFocus,
-        registry,
-        schema,
-        uiSchema
-      } = this.props;
-      const {
-        widgets,
-        fields,
-        translateString,
-        globalUiOptions,
-        schemaUtils
-      } = registry;
-      const {
-        SchemaField: _SchemaField
-      } = fields;
-      const {
-        selectedOption,
-        retrievedOptions
-      } = this.state;
-      const {
-        widget = 'select',
-        placeholder,
-        autofocus,
-        autocomplete,
-        title = schema.title,
-        ...uiOptions
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget({
-        type: 'number'
-      }, widget, widgets);
-      const rawErrors = get__default["default"](errorSchema, utils.ERRORS_KEY, []);
-      const fieldErrorSchema = omit__default["default"](errorSchema, [utils.ERRORS_KEY]);
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
-      let optionSchema;
-      if (option) {
-        const {
-          oneOf,
-          anyOf,
-          ...remaining
-        } = schema;
-        // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
-        unset__default["default"](remaining, utils.ADDITIONAL_PROPERTY_FLAG);
-        optionSchema = !isEmpty__default["default"](remaining) ? utils.mergeSchemas(remaining, option) : option;
-      }
-      const translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
-      const translateParams = title ? [title] : [];
-      const enumOptions = retrievedOptions.map((opt, index) => ({
-        label: opt.title || translateString(translateEnum, translateParams.concat(String(index + 1))),
-        value: index
-      }));
-      return jsxRuntime.jsxs("div", {
-        className: 'panel panel-default panel-body',
-        children: [jsxRuntime.jsx("div", {
-          className: 'form-group',
-          children: jsxRuntime.jsx(Widget, {
-            id: this.getFieldId(),
-            name: `${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`,
-            schema: {
-              type: 'number',
-              default: 0
-            },
-            onChange: this.onOptionChange,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            disabled: disabled || isEmpty__default["default"](enumOptions),
-            multiple: false,
-            rawErrors: rawErrors,
-            errorSchema: fieldErrorSchema,
-            value: selectedOption >= 0 ? selectedOption : undefined,
-            options: {
-              enumOptions,
-              ...uiOptions
-            },
-            registry: registry,
-            formContext: formContext,
-            placeholder: placeholder,
-            autocomplete: autocomplete,
-            autofocus: autofocus,
-            label: title ?? name,
-            hideLabel: !displayLabel
-          })
-        }), option !== null && jsxRuntime.jsx(_SchemaField, {
-          ...this.props,
-          schema: optionSchema
-        })]
-      });
-    }
-  }
-
-  // Matches a string that ends in a . character, optionally followed by a sequence of
-  // digits followed by any number of 0 characters up until the end of the line.
-  // Ensuring that there is at least one prefixed character is important so that
-  // you don't incorrectly match against "0".
-  const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
-  // This is used for trimming the trailing 0 and . characters without affecting
-  // the rest of the string. Its possible to use one RegEx with groups for this
-  // functionality, but it is fairly complex compared to simply defining two
-  // different matchers.
-  const trailingCharMatcher = /[0.]0*$/;
-  /**
-   * The NumberField class has some special handling for dealing with trailing
-   * decimal points and/or zeroes. This logic is designed to allow trailing values
-   * to be visible in the input element, but not be represented in the
-   * corresponding form data.
-   *
-   * The algorithm is as follows:
-   *
-   * 1. When the input value changes the value is cached in the component state
-   *
-   * 2. The value is then normalized, removing trailing decimal points and zeros,
-   *    then passed to the "onChange" callback
-   *
-   * 3. When the component is rendered, the formData value is checked against the
-   *    value cached in the state. If it matches the cached value, the cached
-   *    value is passed to the input instead of the formData value
-   */
-  function NumberField(props) {
-    const {
-      registry,
-      onChange,
-      formData,
-      value: initialValue
-    } = props;
-    const [lastValue, setLastValue] = react.useState(initialValue);
-    const {
-      StringField
-    } = registry.fields;
-    let value = formData;
-    /** Handle the change from the `StringField` to properly convert to a number
-     *
-     * @param value - The current value for the change occurring
-     */
-    const handleChange = react.useCallback(value => {
-      // Cache the original value in component state
-      setLastValue(value);
-      // Normalize decimals that don't start with a zero character in advance so
-      // that the rest of the normalization logic is simpler
-      if (`${value}`.charAt(0) === '.') {
-        value = `0${value}`;
-      }
-      // Check that the value is a string (this can happen if the widget used is a
-      // <select>, due to an enum declaration etc) then, if the value ends in a
-      // trailing decimal point or multiple zeroes, strip the trailing values
-      const processed = typeof value === 'string' && value.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value.replace(trailingCharMatcher, '')) : utils.asNumber(value);
-      onChange(processed);
-    }, [onChange]);
-    if (typeof lastValue === 'string' && typeof value === 'number') {
-      // Construct a regular expression that checks for a string that consists
-      // of the formData value suffixed with zero or one '.' characters and zero
-      // or more '0' characters
-      const re = new RegExp(`${value}`.replace('.', '\\.') + '\\.?0*$');
-      // If the cached "lastValue" is a match, use that instead of the formData
-      // value to prevent the input value from changing in the UI
-      if (lastValue.match(re)) {
-        value = lastValue;
-      }
-    }
-    return jsxRuntime.jsx(StringField, {
-      ...props,
-      formData: value,
-      onChange: handleChange
-    });
-  }
-
-  /** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
-   * additional property key was modified and what it was modified to
-   *
-   * @param props - The `FieldProps` for this template
-   */
-  class ObjectField extends react.Component {
-    constructor(...args) {
-      super(...args);
-      /** Set up the initial state */
-      this.state = {
-        wasPropertyKeyModified: false,
-        additionalProperties: {}
-      };
-      /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
-       * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
-       * formData.
-       *
-       * @param name - The name of the property
-       * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-       * @returns - The onPropertyChange callback for the `name` property
-       */
-      this.onPropertyChange = (name, addedByAdditionalProperties = false) => {
-        return (value, newErrorSchema, id) => {
-          const {
-            formData,
-            onChange,
-            errorSchema
-          } = this.props;
-          if (value === undefined && addedByAdditionalProperties) {
-            // Don't set value = undefined for fields added by
-            // additionalProperties. Doing so removes them from the
-            // formData, which causes them to completely disappear
-            // (including the input field for the property name). Unlike
-            // fields which are "mandated" by the schema, these fields can
-            // be set to undefined by clicking a "delete field" button, so
-            // set empty values to the empty string.
-            value = '';
-          }
-          const newFormData = {
-            ...formData,
-            [name]: value
-          };
-          onChange(newFormData, errorSchema && errorSchema && {
-            ...errorSchema,
-            [name]: newErrorSchema
-          }, id);
-        };
-      };
-      /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
-       * and calls the `onChange` callback with it
-       *
-       * @param key - The key for which the drop callback is desired
-       * @returns - The drop property click callback
-       */
-      this.onDropPropertyClick = key => {
-        return event => {
-          event.preventDefault();
-          const {
-            onChange,
-            formData
-          } = this.props;
-          const copiedFormData = {
-            ...formData
-          };
-          unset__default["default"](copiedFormData, key);
-          onChange(copiedFormData);
-        };
-      };
-      /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
-       * that is already not assigned is found.
-       *
-       * @param preferredKey - The preferred name of a new key
-       * @param [formData] - The form data in which to check if the desired key already exists
-       * @returns - The name of the next available key from `preferredKey`
-       */
-      this.getAvailableKey = (preferredKey, formData) => {
-        const {
-          uiSchema,
-          registry
-        } = this.props;
-        const {
-          duplicateKeySuffixSeparator = '-'
-        } = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-        let index = 0;
-        let newKey = preferredKey;
-        while (has__default["default"](formData, newKey)) {
-          newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
-        }
-        return newKey;
-      };
-      /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
-       * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
-       *
-       * @param oldValue - The old value of a field
-       * @returns - The key change callback function
-       */
-      this.onKeyChange = oldValue => {
-        return (value, newErrorSchema) => {
-          if (oldValue === value) {
-            return;
-          }
-          const {
-            formData,
-            onChange,
-            errorSchema
-          } = this.props;
-          value = this.getAvailableKey(value, formData);
-          const newFormData = {
-            ...formData
-          };
-          const newKeys = {
-            [oldValue]: value
-          };
-          const keyValues = Object.keys(newFormData).map(key => {
-            const newKey = newKeys[key] || key;
-            return {
-              [newKey]: newFormData[key]
-            };
-          });
-          const renamedObj = Object.assign({}, ...keyValues);
-          this.setState({
-            wasPropertyKeyModified: true
-          });
-          onChange(renamedObj, errorSchema && errorSchema && {
-            ...errorSchema,
-            [value]: newErrorSchema
-          });
-        };
-      };
-      /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
-       * default data for that field has been added to the formData.
-       *
-       * @param schema - The schema element to which the new property is being added
-       */
-      this.handleAddClick = schema => () => {
-        if (!schema.additionalProperties) {
-          return;
-        }
-        const {
-          formData,
-          onChange,
-          registry
-        } = this.props;
-        const newFormData = {
-          ...formData
-        };
-        let type = undefined;
-        if (isObject__default["default"](schema.additionalProperties)) {
-          type = schema.additionalProperties.type;
-          let apSchema = schema.additionalProperties;
-          if (utils.REF_KEY in apSchema) {
-            const {
-              schemaUtils
-            } = registry;
-            apSchema = schemaUtils.retrieveSchema({
-              $ref: apSchema[utils.REF_KEY]
-            }, formData);
-            type = apSchema.type;
-          }
-          if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
-            type = 'object';
-          }
-        }
-        const newKey = this.getAvailableKey('newKey', newFormData);
-        // Cast this to make the `set` work properly
-        set__default["default"](newFormData, newKey, this.getDefaultValue(type));
-        onChange(newFormData);
-      };
-    }
-    /** Returns a flag indicating whether the `name` field is required in the object schema
-     *
-     * @param name - The name of the field to check for required-ness
-     * @returns - True if the field `name` is required, false otherwise
-     */
-    isRequired(name) {
-      const {
-        schema
-      } = this.props;
-      return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
-    }
-    /** Returns a default value to be used for a new additional schema property of the given `type`
-     *
-     * @param type - The type of the new additional schema property
-     */
-    getDefaultValue(type) {
-      const {
-        registry: {
-          translateString
-        }
-      } = this.props;
-      switch (type) {
-        case 'array':
-          return [];
-        case 'boolean':
-          return false;
-        case 'null':
-          return null;
-        case 'number':
-          return 0;
-        case 'object':
-          return {};
-        case 'string':
-        default:
-          // We don't have a datatype for some reason (perhaps additionalProperties was true)
-          return translateString(utils.TranslatableString.NewStringDefault);
-      }
-    }
-    /** Renders the `ObjectField` from the given props
-     */
-    render() {
-      const {
-        schema: rawSchema,
-        uiSchema = {},
-        formData,
-        errorSchema,
-        idSchema,
-        name,
-        required = false,
-        disabled = false,
-        readonly = false,
-        hideError,
-        idPrefix,
-        idSeparator,
-        onBlur,
-        onFocus,
-        registry
-      } = this.props;
-      const {
-        fields,
-        formContext,
-        schemaUtils,
-        translateString,
-        globalUiOptions
-      } = registry;
-      const {
-        SchemaField
-      } = fields;
-      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-      const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
-      const {
-        properties: schemaProperties = {}
-      } = schema;
-      const title = uiOptions.title ?? schema.title ?? name;
-      const description = uiOptions.description ?? schema.description;
-      let orderedProperties;
-      try {
-        const properties = Object.keys(schemaProperties);
-        orderedProperties = utils.orderProperties(properties, uiOptions.order);
-      } catch (err) {
-        return jsxRuntime.jsxs("div", {
-          children: [jsxRuntime.jsx("p", {
-            className: 'config-error',
-            style: {
-              color: 'red'
-            },
-            children: jsxRuntime.jsx(Markdown__default["default"], {
-              children: translateString(utils.TranslatableString.InvalidObjectField, [name || 'root', err.message])
-            })
-          }), jsxRuntime.jsx("pre", {
-            children: JSON.stringify(schema)
-          })]
-        });
-      }
-      const Template = utils.getTemplate('ObjectFieldTemplate', registry, uiOptions);
-      const templateProps = {
-        // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
-        title: uiOptions.label === false ? '' : title,
-        description: uiOptions.label === false ? undefined : description,
-        properties: orderedProperties.map(name => {
-          const addedByAdditionalProperties = has__default["default"](schema, [utils.PROPERTIES_KEY, name, utils.ADDITIONAL_PROPERTY_FLAG]);
-          const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
-          const hidden = utils.getUiOptions(fieldUiSchema).widget === 'hidden';
-          const fieldIdSchema = get__default["default"](idSchema, [name], {});
-          return {
-            content: jsxRuntime.jsx(SchemaField, {
-              name: name,
-              required: this.isRequired(name),
-              schema: get__default["default"](schema, [utils.PROPERTIES_KEY, name], {}),
-              uiSchema: fieldUiSchema,
-              errorSchema: get__default["default"](errorSchema, name),
-              idSchema: fieldIdSchema,
-              idPrefix: idPrefix,
-              idSeparator: idSeparator,
-              formData: get__default["default"](formData, name),
-              formContext: formContext,
-              wasPropertyKeyModified: this.state.wasPropertyKeyModified,
-              onKeyChange: this.onKeyChange(name),
-              onChange: this.onPropertyChange(name, addedByAdditionalProperties),
-              onBlur: onBlur,
-              onFocus: onFocus,
-              registry: registry,
-              disabled: disabled,
-              readonly: readonly,
-              hideError: hideError,
-              onDropPropertyClick: this.onDropPropertyClick
-            }, name),
-            name,
-            readonly,
-            disabled,
-            required,
-            hidden
-          };
-        }),
-        readonly,
-        disabled,
-        required,
-        idSchema,
-        uiSchema,
-        errorSchema,
-        schema,
-        formData,
-        formContext,
-        registry
-      };
-      return jsxRuntime.jsx(Template, {
-        ...templateProps,
-        onAddClick: this.handleAddClick
-      });
-    }
-  }
-
-  /** The map of component type to FieldName */
-  const COMPONENT_TYPES = {
-    array: 'ArrayField',
-    boolean: 'BooleanField',
-    integer: 'NumberField',
-    number: 'NumberField',
-    object: 'ObjectField',
-    string: 'StringField',
-    null: 'NullField'
-  };
-  /** Computes and returns which `Field` implementation to return in order to render the field represented by the
-   * `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
-   * appropriate `Field` implementation can be found then a wrapper around `UnsupportedFieldTemplate` is used.
-   *
-   * @param schema - The schema from which to obtain the type
-   * @param uiOptions - The UI Options that may affect the component decision
-   * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
-   * @param registry - The registry from which fields and templates are obtained
-   * @returns - The `Field` component that is used to render the actual field data
-   */
-  function getFieldComponent(schema, uiOptions, idSchema, registry) {
-    const field = uiOptions.field;
-    const {
-      fields,
-      translateString
-    } = registry;
-    if (typeof field === 'function') {
-      return field;
-    }
-    if (typeof field === 'string' && field in fields) {
-      return fields[field];
-    }
-    const schemaType = utils.getSchemaType(schema);
-    const type = Array.isArray(schemaType) ? schemaType[0] : schemaType || '';
-    const schemaId = schema.$id;
-    let componentName = COMPONENT_TYPES[type];
-    if (schemaId && schemaId in fields) {
-      componentName = schemaId;
-    }
-    // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
-    // render a field and let the MultiSchemaField component handle the form display
-    if (!componentName && (schema.anyOf || schema.oneOf)) {
-      return () => null;
-    }
-    return componentName in fields ? fields[componentName] : () => {
-      const UnsupportedFieldTemplate = utils.getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
-      return jsxRuntime.jsx(UnsupportedFieldTemplate, {
-        schema: schema,
-        idSchema: idSchema,
-        reason: translateString(utils.TranslatableString.UnknownFieldType, [String(schema.type)]),
-        registry: registry
-      });
-    };
-  }
-  /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
-   * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
-   * `oneOf` fields.
-   *
-   * @param props - The `FieldProps` for this component
-   */
-  function SchemaFieldRender(props) {
-    const {
-      schema: _schema,
-      idSchema: _idSchema,
-      uiSchema,
-      formData,
-      errorSchema,
-      idPrefix,
-      idSeparator,
-      name,
-      onChange,
-      onKeyChange,
-      onDropPropertyClick,
-      required,
-      registry,
-      wasPropertyKeyModified = false
-    } = props;
-    const {
-      formContext,
-      schemaUtils,
-      globalUiOptions
-    } = registry;
-    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
-    const FieldTemplate = utils.getTemplate('FieldTemplate', registry, uiOptions);
-    const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
-    const FieldHelpTemplate = utils.getTemplate('FieldHelpTemplate', registry, uiOptions);
-    const FieldErrorTemplate = utils.getTemplate('FieldErrorTemplate', registry, uiOptions);
-    const schema = schemaUtils.retrieveSchema(_schema, formData);
-    const fieldId = _idSchema[utils.ID_KEY];
-    const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator), _idSchema);
-    /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
-     * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
-     */
-    const handleFieldComponentChange = react.useCallback((formData, newErrorSchema, id) => {
-      const theId = id || fieldId;
-      return onChange(formData, newErrorSchema, theId);
-    }, [fieldId, onChange]);
-    const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
-    const disabled = Boolean(props.disabled || uiOptions.disabled);
-    const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
-    const uiSchemaHideError = uiOptions.hideError;
-    // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
-    const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
-    const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
-    if (Object.keys(schema).length === 0) {
-      return null;
-    }
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-    const {
-      __errors,
-      ...fieldErrorSchema
-    } = errorSchema || {};
-    // See #439: uiSchema: Don't pass consumed class names or style to child components
-    const fieldUiSchema = omit__default["default"](uiSchema, ['ui:classNames', 'classNames', 'ui:style']);
-    if (utils.UI_OPTIONS_KEY in fieldUiSchema) {
-      fieldUiSchema[utils.UI_OPTIONS_KEY] = omit__default["default"](fieldUiSchema[utils.UI_OPTIONS_KEY], ['classNames', 'style']);
-    }
-    const field = jsxRuntime.jsx(FieldComponent, {
-      ...props,
-      onChange: handleFieldComponentChange,
-      idSchema: idSchema,
-      schema: schema,
-      uiSchema: fieldUiSchema,
-      disabled: disabled,
-      readonly: readonly,
-      hideError: hideError,
-      autofocus: autofocus,
-      errorSchema: fieldErrorSchema,
-      formContext: formContext,
-      rawErrors: __errors
-    });
-    const id = idSchema[utils.ID_KEY];
-    // If this schema has a title defined, but the user has set a new key/label, retain their input.
-    let label;
-    if (wasPropertyKeyModified) {
-      label = name;
-    } else {
-      label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
-    }
-    const description = uiOptions.description || props.schema.description || schema.description || '';
-    const richDescription = uiOptions.enableMarkdownInDescription ? jsxRuntime.jsx(Markdown__default["default"], {
-      children: description
-    }) : description;
-    const help = uiOptions.help;
-    const hidden = uiOptions.widget === 'hidden';
-    const classNames = ['form-group', 'field', `field-${utils.getSchemaType(schema)}`];
-    if (!hideError && __errors && __errors.length > 0) {
-      classNames.push('field-error has-error has-danger');
-    }
-    if (uiSchema !== null && uiSchema !== void 0 && uiSchema.classNames) {
-      {
-        console.warn("'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead.");
-      }
-      classNames.push(uiSchema.classNames);
-    }
-    if (uiOptions.classNames) {
-      classNames.push(uiOptions.classNames);
-    }
-    const helpComponent = jsxRuntime.jsx(FieldHelpTemplate, {
-      help: help,
-      idSchema: idSchema,
-      schema: schema,
-      uiSchema: uiSchema,
-      hasErrors: !hideError && __errors && __errors.length > 0,
-      registry: registry
-    });
-    /*
-     * AnyOf/OneOf errors handled by child schema
-     */
-    const errorsComponent = hideError || schema.anyOf || schema.oneOf ? undefined : jsxRuntime.jsx(FieldErrorTemplate, {
-      errors: __errors,
-      errorSchema: errorSchema,
-      idSchema: idSchema,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    });
-    const fieldProps = {
-      description: jsxRuntime.jsx(DescriptionFieldTemplate, {
-        id: utils.descriptionId(id),
-        description: richDescription,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry
-      }),
-      rawDescription: description,
-      help: helpComponent,
-      rawHelp: typeof help === 'string' ? help : undefined,
-      errors: errorsComponent,
-      rawErrors: hideError ? undefined : __errors,
-      id,
-      label,
-      hidden,
-      onChange,
-      onKeyChange,
-      onDropPropertyClick,
-      required,
-      disabled,
-      readonly,
-      hideError,
-      displayLabel,
-      classNames: classNames.join(' ').trim(),
-      style: uiOptions.style,
-      formContext,
-      formData,
-      schema,
-      uiSchema,
-      registry
-    };
-    const _AnyOfField = registry.fields.AnyOfField;
-    const _OneOfField = registry.fields.OneOfField;
-    const isReplacingAnyOrOneOf = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:field']) && (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:fieldReplacesAnyOrOneOf']) === true;
-    return jsxRuntime.jsx(FieldTemplate, {
-      ...fieldProps,
-      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && jsxRuntime.jsx(_AnyOfField, {
-          name: name,
-          disabled: disabled,
-          readonly: readonly,
-          hideError: hideError,
-          errorSchema: errorSchema,
-          formData: formData,
-          formContext: formContext,
-          idPrefix: idPrefix,
-          idSchema: idSchema,
-          idSeparator: idSeparator,
-          onBlur: props.onBlur,
-          onChange: props.onChange,
-          onFocus: props.onFocus,
-          options: schema.anyOf.map(_schema => schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData)),
-          registry: registry,
-          schema: schema,
-          uiSchema: uiSchema
-        }), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && jsxRuntime.jsx(_OneOfField, {
-          name: name,
-          disabled: disabled,
-          readonly: readonly,
-          hideError: hideError,
-          errorSchema: errorSchema,
-          formData: formData,
-          formContext: formContext,
-          idPrefix: idPrefix,
-          idSchema: idSchema,
-          idSeparator: idSeparator,
-          onBlur: props.onBlur,
-          onChange: props.onChange,
-          onFocus: props.onFocus,
-          options: schema.oneOf.map(_schema => schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData)),
-          registry: registry,
-          schema: schema,
-          uiSchema: uiSchema
-        })]
-      })
-    });
-  }
-  /** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
-   * and if so, calls the `SchemaFieldRender` component with the props.
-   */
-  class SchemaField extends react.Component {
-    shouldComponentUpdate(nextProps) {
-      return !utils.deepEquals(this.props, nextProps);
-    }
-    render() {
-      return jsxRuntime.jsx(SchemaFieldRender, {
-        ...this.props
-      });
-    }
-  }
-
-  /** The `StringField` component is used to render a schema field that represents a string type
-   *
-   * @param props - The `FieldProps` for this template
-   */
-  function StringField(props) {
-    const {
-      schema,
-      name,
-      uiSchema,
-      idSchema,
-      formData,
-      required,
-      disabled = false,
-      readonly = false,
-      autofocus = false,
-      onChange,
-      onBlur,
-      onFocus,
-      registry,
-      rawErrors
-    } = props;
-    const {
-      title,
-      format
-    } = schema;
-    const {
-      widgets,
-      formContext,
-      schemaUtils,
-      globalUiOptions
-    } = registry;
-    const enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema) : undefined;
-    let defaultWidget = enumOptions ? 'select' : 'text';
-    if (format && utils.hasWidget(schema, format, widgets)) {
-      defaultWidget = format;
-    }
-    const {
-      widget = defaultWidget,
-      placeholder = '',
-      title: uiTitle,
-      ...options
-    } = utils.getUiOptions(uiSchema);
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-    const label = uiTitle ?? title ?? name;
-    const Widget = utils.getWidget(schema, widget, widgets);
-    return jsxRuntime.jsx(Widget, {
-      options: {
-        ...options,
-        enumOptions
-      },
-      schema: schema,
-      uiSchema: uiSchema,
-      id: idSchema.$id,
-      name: name,
-      label: label,
-      hideLabel: !displayLabel,
-      value: formData,
-      onChange: onChange,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      required: required,
-      disabled: disabled,
-      readonly: readonly,
-      formContext: formContext,
-      autofocus: autofocus,
-      registry: registry,
-      placeholder: placeholder,
-      rawErrors: rawErrors
-    });
-  }
-
-  /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
-   * also set to null if it has no value.
-   *
-   * @param props - The `FieldProps` for this template
-   */
-  function NullField(props) {
-    const {
-      formData,
-      onChange
-    } = props;
-    react.useEffect(() => {
-      if (formData === undefined) {
-        onChange(null);
-      }
-    }, [formData, onChange]);
-    return null;
-  }
-
-  function fields() {
-    return {
-      AnyOfField: AnyOfField,
-      ArrayField: ArrayField,
-      // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
-      BooleanField,
-      NumberField,
-      ObjectField,
-      OneOfField: AnyOfField,
-      SchemaField,
-      StringField,
-      NullField
-    };
-  }
-
-  /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
-   * the `idSchema`.
-   *
-   * @param props - The `ArrayFieldDescriptionProps` for the component
-   */
-  function ArrayFieldDescriptionTemplate(props) {
-    const {
-      idSchema,
-      description,
-      registry,
-      schema,
-      uiSchema
-    } = props;
-    const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-    const {
-      label: displayLabel = true
-    } = options;
-    if (!description || !displayLabel) {
-      return null;
-    }
-    const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
-    return jsxRuntime.jsx(DescriptionFieldTemplate, {
-      id: utils.descriptionId(idSchema),
-      description: description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    });
-  }
-
-  /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
-   *
-   * @param props - The `ArrayFieldTemplateItemType` props for the component
-   */
-  function ArrayFieldItemTemplate(props) {
-    const {
-      children,
-      className,
-      disabled,
-      hasToolbar,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      hasCopy,
-      index,
-      onCopyIndexClick,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
-      registry,
-      uiSchema
-    } = props;
-    const {
-      CopyButton,
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
-    const btnStyle = {
-      flex: 1,
-      paddingLeft: 6,
-      paddingRight: 6,
-      fontWeight: 'bold'
-    };
-    return jsxRuntime.jsxs("div", {
-      className: className,
-      children: [jsxRuntime.jsx("div", {
-        className: hasToolbar ? 'col-xs-9' : 'col-xs-12',
-        children: children
-      }), hasToolbar && jsxRuntime.jsx("div", {
-        className: 'col-xs-3 array-item-toolbox',
-        children: jsxRuntime.jsxs("div", {
-          className: 'btn-group',
-          style: {
-            display: 'flex',
-            justifyContent: 'space-around'
-          },
-          children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
-            style: btnStyle,
-            disabled: disabled || readonly || !hasMoveUp,
-            onClick: onReorderClick(index, index - 1),
-            uiSchema: uiSchema,
-            registry: registry
-          }), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
-            style: btnStyle,
-            disabled: disabled || readonly || !hasMoveDown,
-            onClick: onReorderClick(index, index + 1),
-            uiSchema: uiSchema,
-            registry: registry
-          }), hasCopy && jsxRuntime.jsx(CopyButton, {
-            style: btnStyle,
-            disabled: disabled || readonly,
-            onClick: onCopyIndexClick(index),
-            uiSchema: uiSchema,
-            registry: registry
-          }), hasRemove && jsxRuntime.jsx(RemoveButton, {
-            style: btnStyle,
-            disabled: disabled || readonly,
-            onClick: onDropIndexClick(index),
-            uiSchema: uiSchema,
-            registry: registry
-          })]
-        })
-      })]
-    });
-  }
-
-  /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
-   *
-   * @param props - The `ArrayFieldTemplateItemType` props for the component
-   */
-  function ArrayFieldTemplate(props) {
-    const {
-      canAdd,
-      className,
-      disabled,
-      idSchema,
-      uiSchema,
-      items,
-      onAddClick,
-      readonly,
-      registry,
-      required,
-      schema,
-      title
-    } = props;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
-    const ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
-    const ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
-    // Button templates are not overridden in the uiSchema
-    const {
-      ButtonTemplates: {
-        AddButton
-      }
-    } = registry.templates;
-    return jsxRuntime.jsxs("fieldset", {
-      className: className,
-      id: idSchema.$id,
-      children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
-        idSchema: idSchema,
-        title: uiOptions.title || title,
-        required: required,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry
-      }), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
-        idSchema: idSchema,
-        description: uiOptions.description || schema.description,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry
-      }), jsxRuntime.jsx("div", {
-        className: 'row array-item-list',
-        children: items && items.map(({
-          key,
-          ...itemProps
-        }) => jsxRuntime.jsx(ArrayFieldItemTemplate, {
-          ...itemProps
-        }, key))
-      }), canAdd && jsxRuntime.jsx(AddButton, {
-        className: 'array-item-add',
-        onClick: onAddClick,
-        disabled: disabled || readonly,
-        uiSchema: uiSchema,
-        registry: registry
-      })]
-    });
-  }
-
-  /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
-   * the `idSchema`.
-   *
-   * @param props - The `ArrayFieldTitleProps` for the component
-   */
-  function ArrayFieldTitleTemplate(props) {
-    const {
-      idSchema,
-      title,
-      schema,
-      uiSchema,
-      required,
-      registry
-    } = props;
-    const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
-    const {
-      label: displayLabel = true
-    } = options;
-    if (!title || !displayLabel) {
-      return null;
-    }
-    const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
-    return jsxRuntime.jsx(TitleFieldTemplate, {
-      id: utils.titleId(idSchema),
-      title: title,
-      required: required,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    });
-  }
-
-  /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
-   * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
-   * It can be customized/overridden for other themes or individual implementations as needed.
-   *
-   * @param props - The `WidgetProps` for this template
-   */
-  function BaseInputTemplate(props) {
-    const {
-      id,
-      name,
-      // remove this from ...rest
-      value,
-      readonly,
-      disabled,
-      autofocus,
-      onBlur,
-      onFocus,
-      onChange,
-      onChangeOverride,
-      options,
-      schema,
-      uiSchema,
-      formContext,
-      registry,
-      rawErrors,
-      type,
-      hideLabel,
-      // remove this from ...rest
-      hideError,
-      // remove this from ...rest
-      ...rest
-    } = props;
-    // Note: since React 15.2.0 we can't forward unknown element attributes, so we
-    // exclude the "options" and "schema" ones here.
-    if (!id) {
-      console.log('No id for', props);
-      throw new Error(`no id for props ${JSON.stringify(props)}`);
-    }
-    const inputProps = {
-      ...rest,
-      ...utils.getInputProps(schema, type, options)
-    };
-    let inputValue;
-    if (inputProps.type === 'number' || inputProps.type === 'integer') {
-      inputValue = value || value === 0 ? value : '';
-    } else {
-      inputValue = value == null ? '' : value;
-    }
-    const _onChange = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onChange(value === '' ? options.emptyValue : value), [onChange, options]);
-    const _onBlur = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onBlur(id, value), [onBlur, id]);
-    const _onFocus = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onFocus(id, value), [onFocus, id]);
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx("input", {
-        id: id,
-        name: id,
-        className: 'form-control',
-        readOnly: readonly,
-        disabled: disabled,
-        autoFocus: autofocus,
-        value: inputValue,
-        ...inputProps,
-        list: schema.examples ? utils.examplesId(id) : undefined,
-        onChange: onChangeOverride || _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
-        "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
-      }), Array.isArray(schema.examples) && jsxRuntime.jsx("datalist", {
-        id: utils.examplesId(id),
-        children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
-          return jsxRuntime.jsx("option", {
-            value: example
-          }, example);
-        })
-      }, `datalist_${id}`)]
-    });
-  }
-
-  /** The `SubmitButton` renders a button that represent the `Submit` action on a form
-   */
-  function SubmitButton({
-    uiSchema
-  }) {
-    const {
-      submitText,
-      norender,
-      props: submitButtonProps = {}
-    } = utils.getSubmitButtonOptions(uiSchema);
-    if (norender) {
-      return null;
-    }
-    return jsxRuntime.jsx("div", {
-      children: jsxRuntime.jsx("button", {
-        type: 'submit',
-        ...submitButtonProps,
-        className: `btn btn-info ${submitButtonProps.className || ''}`,
-        children: submitText
-      })
-    });
-  }
-
-  function IconButton(props) {
-    const {
-      iconType = 'default',
-      icon,
-      className,
-      uiSchema,
-      registry,
-      ...otherProps
-    } = props;
-    return jsxRuntime.jsx("button", {
-      type: 'button',
-      className: `btn btn-${iconType} ${className}`,
-      ...otherProps,
-      children: jsxRuntime.jsx("i", {
-        className: `glyphicon glyphicon-${icon}`
-      })
-    });
-  }
-  function CopyButton(props) {
-    const {
-      registry: {
-        translateString
-      }
-    } = props;
-    return jsxRuntime.jsx(IconButton, {
-      title: translateString(utils.TranslatableString.CopyButton),
-      className: 'array-item-copy',
-      ...props,
-      icon: 'copy'
-    });
-  }
-  function MoveDownButton(props) {
-    const {
-      registry: {
-        translateString
-      }
-    } = props;
-    return jsxRuntime.jsx(IconButton, {
-      title: translateString(utils.TranslatableString.MoveDownButton),
-      className: 'array-item-move-down',
-      ...props,
-      icon: 'arrow-down'
-    });
-  }
-  function MoveUpButton(props) {
-    const {
-      registry: {
-        translateString
-      }
-    } = props;
-    return jsxRuntime.jsx(IconButton, {
-      title: translateString(utils.TranslatableString.MoveUpButton),
-      className: 'array-item-move-up',
-      ...props,
-      icon: 'arrow-up'
-    });
-  }
-  function RemoveButton(props) {
-    const {
-      registry: {
-        translateString
-      }
-    } = props;
-    return jsxRuntime.jsx(IconButton, {
-      title: translateString(utils.TranslatableString.RemoveButton),
-      className: 'array-item-remove',
-      ...props,
-      iconType: 'danger',
-      icon: 'remove'
-    });
-  }
-
-  /** The `AddButton` renders a button that represent the `Add` action on a form
-   */
-  function AddButton({
-    className,
-    onClick,
-    disabled,
-    registry
-  }) {
-    const {
-      translateString
-    } = registry;
-    return jsxRuntime.jsx("div", {
-      className: 'row',
-      children: jsxRuntime.jsx("p", {
-        className: `col-xs-3 col-xs-offset-9 text-right ${className}`,
-        children: jsxRuntime.jsx(IconButton, {
-          iconType: 'info',
-          icon: 'plus',
-          className: 'btn-add col-xs-12',
-          title: translateString(utils.TranslatableString.AddButton),
-          onClick: onClick,
-          disabled: disabled,
-          registry: registry
-        })
-      })
-    });
-  }
-
-  function buttonTemplates() {
-    return {
-      SubmitButton,
-      AddButton,
-      CopyButton,
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton
-    };
-  }
-
-  /** The `DescriptionField` is the template to use to render the description of a field
-   *
-   * @param props - The `DescriptionFieldProps` for this component
-   */
-  function DescriptionField(props) {
-    const {
-      id,
-      description
-    } = props;
-    if (!description) {
-      return null;
-    }
-    if (typeof description === 'string') {
-      return jsxRuntime.jsx("p", {
-        id: id,
-        className: 'field-description',
-        children: description
-      });
-    } else {
-      return jsxRuntime.jsx("div", {
-        id: id,
-        className: 'field-description',
-        children: description
-      });
-    }
-  }
-
-  /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
-   *
-   * @param props - The `ErrorListProps` for this component
-   */
-  function ErrorList({
-    errors,
-    registry
-  }) {
-    const {
-      translateString
-    } = registry;
-    return jsxRuntime.jsxs("div", {
-      className: 'panel panel-danger errors',
-      children: [jsxRuntime.jsx("div", {
-        className: 'panel-heading',
-        children: jsxRuntime.jsx("h3", {
-          className: 'panel-title',
-          children: translateString(utils.TranslatableString.ErrorsLabel)
-        })
-      }), jsxRuntime.jsx("ul", {
-        className: 'list-group',
-        children: errors.map((error, i) => {
-          return jsxRuntime.jsx("li", {
-            className: 'list-group-item text-danger',
-            children: error.stack
-          }, i);
-        })
-      })]
-    });
-  }
-
-  const REQUIRED_FIELD_SYMBOL$1 = '*';
-  /** Renders a label for a field
-   *
-   * @param props - The `LabelProps` for this component
-   */
-  function Label(props) {
-    const {
-      label,
-      required,
-      id
-    } = props;
-    if (!label) {
-      return null;
-    }
-    return jsxRuntime.jsxs("label", {
-      className: 'control-label',
-      htmlFor: id,
-      children: [label, required && jsxRuntime.jsx("span", {
-        className: 'required',
-        children: REQUIRED_FIELD_SYMBOL$1
-      })]
-    });
-  }
-
-  /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
-   * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
-   *
-   * @param props - The `FieldTemplateProps` for this component
-   */
-  function FieldTemplate(props) {
-    const {
-      id,
-      label,
-      children,
-      errors,
-      help,
-      description,
-      hidden,
-      required,
-      displayLabel,
-      registry,
-      uiSchema
-    } = props;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
-    if (hidden) {
-      return jsxRuntime.jsx("div", {
-        className: 'hidden',
-        children: children
-      });
-    }
-    return jsxRuntime.jsxs(WrapIfAdditionalTemplate, {
-      ...props,
-      children: [displayLabel && jsxRuntime.jsx(Label, {
-        label: label,
-        required: required,
-        id: id
-      }), displayLabel && description ? description : null, children, errors, help]
-    });
-  }
-
-  /** The `FieldErrorTemplate` component renders the errors local to the particular field
-   *
-   * @param props - The `FieldErrorProps` for the errors being rendered
-   */
-  function FieldErrorTemplate(props) {
-    const {
-      errors = [],
-      idSchema
-    } = props;
-    if (errors.length === 0) {
-      return null;
-    }
-    const id = utils.errorId(idSchema);
-    return jsxRuntime.jsx("div", {
-      children: jsxRuntime.jsx("ul", {
-        id: id,
-        className: 'error-detail bs-callout bs-callout-info',
-        children: errors.filter(elem => !!elem).map((error, index) => {
-          return jsxRuntime.jsx("li", {
-            className: 'text-danger',
-            children: error
-          }, index);
-        })
-      })
-    });
-  }
-
-  /** The `FieldHelpTemplate` component renders any help desired for a field
-   *
-   * @param props - The `FieldHelpProps` to be rendered
-   */
-  function FieldHelpTemplate(props) {
-    const {
-      idSchema,
-      help
-    } = props;
-    if (!help) {
-      return null;
-    }
-    const id = utils.helpId(idSchema);
-    if (typeof help === 'string') {
-      return jsxRuntime.jsx("p", {
-        id: id,
-        className: 'help-block',
-        children: help
-      });
-    }
-    return jsxRuntime.jsx("div", {
-      id: id,
-      className: 'help-block',
-      children: help
-    });
-  }
-
-  /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
-   * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
-   * the properties.
-   *
-   * @param props - The `ObjectFieldTemplateProps` for this component
-   */
-  function ObjectFieldTemplate(props) {
-    const {
-      description,
-      disabled,
-      formData,
-      idSchema,
-      onAddClick,
-      properties,
-      readonly,
-      registry,
-      required,
-      schema,
-      title,
-      uiSchema
-    } = props;
-    const options = utils.getUiOptions(uiSchema);
-    const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
-    const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
-    // Button templates are not overridden in the uiSchema
-    const {
-      ButtonTemplates: {
-        AddButton
-      }
-    } = registry.templates;
-    return jsxRuntime.jsxs("fieldset", {
-      id: idSchema.$id,
-      children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
-        id: utils.titleId(idSchema),
-        title: title,
-        required: required,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry
-      }), description && jsxRuntime.jsx(DescriptionFieldTemplate, {
-        id: utils.descriptionId(idSchema),
-        description: description,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry
-      }), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(AddButton, {
-        className: 'object-property-expand',
-        onClick: onAddClick(schema),
-        disabled: disabled || readonly,
-        uiSchema: uiSchema,
-        registry: registry
-      })]
-    });
-  }
-
-  const REQUIRED_FIELD_SYMBOL = '*';
-  /** The `TitleField` is the template to use to render the title of a field
-   *
-   * @param props - The `TitleFieldProps` for this component
-   */
-  function TitleField(props) {
-    const {
-      id,
-      title,
-      required
-    } = props;
-    return jsxRuntime.jsxs("legend", {
-      id: id,
-      children: [title, required && jsxRuntime.jsx("span", {
-        className: 'required',
-        children: REQUIRED_FIELD_SYMBOL
-      })]
-    });
-  }
-
-  /** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
-   * react-jsonschema-form.
-   *
-   * @param props - The `FieldProps` for this template
-   */
-  function UnsupportedField(props) {
-    const {
-      schema,
-      idSchema,
-      reason,
-      registry
-    } = props;
-    const {
-      translateString
-    } = registry;
-    let translateEnum = utils.TranslatableString.UnsupportedField;
-    const translateParams = [];
-    if (idSchema && idSchema.$id) {
-      translateEnum = utils.TranslatableString.UnsupportedFieldWithId;
-      translateParams.push(idSchema.$id);
-    }
-    if (reason) {
-      translateEnum = translateEnum === utils.TranslatableString.UnsupportedField ? utils.TranslatableString.UnsupportedFieldWithReason : utils.TranslatableString.UnsupportedFieldWithIdAndReason;
-      translateParams.push(reason);
-    }
-    return jsxRuntime.jsxs("div", {
-      className: 'unsupported-field',
-      children: [jsxRuntime.jsx("p", {
-        children: jsxRuntime.jsx(Markdown__default["default"], {
-          children: translateString(translateEnum, translateParams)
-        })
-      }), schema && jsxRuntime.jsx("pre", {
-        children: JSON.stringify(schema, null, 2)
-      })]
-    });
-  }
-
-  /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
-   * part of an `additionalProperties` part of a schema.
-   *
-   * @param props - The `WrapIfAdditionalProps` for this component
-   */
-  function WrapIfAdditionalTemplate(props) {
-    const {
-      id,
-      classNames,
-      style,
-      disabled,
-      label,
-      onKeyChange,
-      onDropPropertyClick,
-      readonly,
-      required,
-      schema,
-      children,
-      uiSchema,
-      registry
-    } = props;
-    const {
-      templates,
-      translateString
-    } = registry;
-    // Button templates are not overridden in the uiSchema
-    const {
-      RemoveButton
-    } = templates.ButtonTemplates;
-    const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
-    const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-    if (!additional) {
-      return jsxRuntime.jsx("div", {
-        className: classNames,
-        style: style,
-        children: children
-      });
-    }
-    return jsxRuntime.jsx("div", {
-      className: classNames,
-      style: style,
-      children: jsxRuntime.jsxs("div", {
-        className: 'row',
-        children: [jsxRuntime.jsx("div", {
-          className: 'col-xs-5 form-additional',
-          children: jsxRuntime.jsxs("div", {
-            className: 'form-group',
-            children: [jsxRuntime.jsx(Label, {
-              label: keyLabel,
-              required: required,
-              id: `${id}-key`
-            }), jsxRuntime.jsx("input", {
-              className: 'form-control',
-              type: 'text',
-              id: `${id}-key`,
-              onBlur: event => onKeyChange(event.target.value),
-              defaultValue: label
-            })]
-          })
-        }), jsxRuntime.jsx("div", {
-          className: 'form-additional form-group col-xs-5',
-          children: children
-        }), jsxRuntime.jsx("div", {
-          className: 'col-xs-2',
-          children: jsxRuntime.jsx(RemoveButton, {
-            className: 'array-item-remove btn-block',
-            style: {
-              border: '0'
-            },
-            disabled: disabled || readonly,
-            onClick: onDropPropertyClick(label),
-            uiSchema: uiSchema,
-            registry: registry
-          })
-        })]
-      })
-    });
-  }
-
-  function templates() {
-    return {
-      ArrayFieldDescriptionTemplate,
-      ArrayFieldItemTemplate,
-      ArrayFieldTemplate,
-      ArrayFieldTitleTemplate,
-      ButtonTemplates: buttonTemplates(),
-      BaseInputTemplate,
-      DescriptionFieldTemplate: DescriptionField,
-      ErrorListTemplate: ErrorList,
-      FieldTemplate,
-      FieldErrorTemplate,
-      FieldHelpTemplate,
-      ObjectFieldTemplate,
-      TitleFieldTemplate: TitleField,
-      UnsupportedFieldTemplate: UnsupportedField,
-      WrapIfAdditionalTemplate
-    };
-  }
-
-  function rangeOptions(start, stop) {
-    const options = [];
-    for (let i = start; i <= stop; i++) {
-      options.push({
-        value: i,
-        label: utils.pad(i, 2)
-      });
-    }
-    return options;
-  }
-  function readyForChange(state) {
-    return Object.values(state).every(value => value !== -1);
-  }
-  function dateElementProps(state, time, yearsRange = [1900, new Date().getFullYear() + 2]) {
-    const {
-      year,
-      month,
-      day,
-      hour,
-      minute,
-      second
-    } = state;
-    const data = [{
-      type: 'year',
-      range: yearsRange,
-      value: year
-    }, {
-      type: 'month',
-      range: [1, 12],
-      value: month
-    }, {
-      type: 'day',
-      range: [1, 31],
-      value: day
-    }];
-    if (time) {
-      data.push({
-        type: 'hour',
-        range: [0, 23],
-        value: hour
-      }, {
-        type: 'minute',
-        range: [0, 59],
-        value: minute
-      }, {
-        type: 'second',
-        range: [0, 59],
-        value: second
-      });
-    }
-    return data;
-  }
-  function DateElement({
-    type,
-    range,
-    value,
-    select,
-    rootId,
-    name,
-    disabled,
-    readonly,
-    autofocus,
-    registry,
-    onBlur,
-    onFocus
-  }) {
-    const id = rootId + '_' + type;
-    const {
-      SelectWidget
-    } = registry.widgets;
-    return jsxRuntime.jsx(SelectWidget, {
-      schema: {
-        type: 'integer'
-      },
-      id: id,
-      name: name,
-      className: 'form-control',
-      options: {
-        enumOptions: rangeOptions(range[0], range[1])
-      },
-      placeholder: type,
-      value: value,
-      disabled: disabled,
-      readonly: readonly,
-      autofocus: autofocus,
-      onChange: value => select(type, value),
-      onBlur: onBlur,
-      onFocus: onFocus,
-      registry: registry,
-      label: '',
-      "aria-describedby": utils.ariaDescribedByIds(rootId)
-    });
-  }
-  /** The `AltDateWidget` is an alternative widget for rendering date properties.
-   * @param props - The `WidgetProps` for this component
-   */
-  function AltDateWidget({
-    time = false,
-    disabled = false,
-    readonly = false,
-    autofocus = false,
-    options,
-    id,
-    name,
-    registry,
-    onBlur,
-    onFocus,
-    onChange,
-    value
-  }) {
-    const {
-      translateString
-    } = registry;
-    const [lastValue, setLastValue] = react.useState(value);
-    const [state, setState] = react.useReducer((state, action) => {
-      return {
-        ...state,
-        ...action
-      };
-    }, utils.parseDateString(value, time));
-    react.useEffect(() => {
-      const stateValue = utils.toDateString(state, time);
-      if (readyForChange(state) && stateValue !== value) {
-        // The user changed the date to a new valid data via the comboboxes, so call onChange
-        onChange(stateValue);
-      } else if (lastValue !== value) {
-        // We got a new value in the props
-        setLastValue(value);
-        setState(utils.parseDateString(value, time));
-      }
-    }, [time, value, onChange, state, lastValue]);
-    const handleChange = react.useCallback((property, value) => {
-      setState({
-        [property]: value
-      });
-    }, []);
-    const handleSetNow = react.useCallback(event => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      const nextState = utils.parseDateString(new Date().toJSON(), time);
-      onChange(utils.toDateString(nextState, time));
-    }, [disabled, readonly, time]);
-    const handleClear = react.useCallback(event => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      onChange(undefined);
-    }, [disabled, readonly, onChange]);
-    return jsxRuntime.jsxs("ul", {
-      className: 'list-inline',
-      children: [dateElementProps(state, time, options.yearsRange).map((elemProps, i) => jsxRuntime.jsx("li", {
-        className: 'list-inline-item',
-        children: jsxRuntime.jsx(DateElement, {
-          rootId: id,
-          name: name,
-          select: handleChange,
-          ...elemProps,
-          disabled: disabled,
-          readonly: readonly,
-          registry: registry,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          autofocus: autofocus && i === 0
-        })
-      }, i)), (options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && jsxRuntime.jsx("li", {
-        className: 'list-inline-item',
-        children: jsxRuntime.jsx("a", {
-          href: '#',
-          className: 'btn btn-info btn-now',
-          onClick: handleSetNow,
-          children: translateString(utils.TranslatableString.NowLabel)
-        })
-      }), (options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && jsxRuntime.jsx("li", {
-        className: 'list-inline-item',
-        children: jsxRuntime.jsx("a", {
-          href: '#',
-          className: 'btn btn-warning btn-clear',
-          onClick: handleClear,
-          children: translateString(utils.TranslatableString.ClearLabel)
-        })
-      })]
-    });
-  }
-
-  /** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
-   *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function AltDateTimeWidget({
-    time = true,
-    ...props
-  }) {
-    const {
-      AltDateWidget
-    } = props.registry.widgets;
-    return jsxRuntime.jsx(AltDateWidget, {
-      time: time,
-      ...props
-    });
-  }
-
-  /** The `CheckBoxWidget` is a widget for rendering boolean properties.
-   *  It is typically used to represent a boolean.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function CheckboxWidget({
-    schema,
-    uiSchema,
-    options,
-    id,
-    value,
-    disabled,
-    readonly,
-    label,
-    hideLabel,
-    autofocus = false,
-    onBlur,
-    onFocus,
-    onChange,
-    registry
-  }) {
-    const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
-    // Because an unchecked checkbox will cause html5 validation to fail, only add
-    // the "required" attribute if the field value must be "true", due to the
-    // "const" or "enum" keywords
-    const required = utils.schemaRequiresTrueValue(schema);
-    const handleChange = react.useCallback(event => onChange(event.target.checked), [onChange]);
-    const handleBlur = react.useCallback(event => onBlur(id, event.target.checked), [onBlur, id]);
-    const handleFocus = react.useCallback(event => onFocus(id, event.target.checked), [onFocus, id]);
-    const description = options.description ?? schema.description;
-    return jsxRuntime.jsxs("div", {
-      className: `checkbox ${disabled || readonly ? 'disabled' : ''}`,
-      children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
-        id: utils.descriptionId(id),
-        description: description,
-        schema: schema,
-        uiSchema: uiSchema,
-        registry: registry
-      }), jsxRuntime.jsxs("label", {
-        children: [jsxRuntime.jsx("input", {
-          type: 'checkbox',
-          id: id,
-          name: id,
-          checked: typeof value === 'undefined' ? false : value,
-          required: required,
-          disabled: disabled || readonly,
-          autoFocus: autofocus,
-          onChange: handleChange,
-          onBlur: handleBlur,
-          onFocus: handleFocus,
-          "aria-describedby": utils.ariaDescribedByIds(id)
-        }), utils.labelValue(jsxRuntime.jsx("span", {
-          children: label
-        }), hideLabel)]
-      })]
-    });
-  }
-
-  /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
-   *  It is typically used to represent an array of enums.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function CheckboxesWidget({
-    id,
-    disabled,
-    options: {
-      inline = false,
-      enumOptions,
-      enumDisabled,
-      emptyValue
-    },
-    value,
-    autofocus = false,
-    readonly,
-    onChange,
-    onBlur,
-    onFocus
-  }) {
-    const checkboxesValues = Array.isArray(value) ? value : [value];
-    const handleBlur = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onBlur, id]);
-    const handleFocus = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onFocus, id]);
-    return jsxRuntime.jsx("div", {
-      className: 'checkboxes',
-      id: id,
-      children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-        const checked = utils.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(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
-          } else {
-            onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
-          }
-        };
-        const checkbox = jsxRuntime.jsxs("span", {
-          children: [jsxRuntime.jsx("input", {
-            type: 'checkbox',
-            id: utils.optionId(id, index),
-            name: id,
-            checked: checked,
-            value: String(index),
-            disabled: disabled || itemDisabled || readonly,
-            autoFocus: autofocus && index === 0,
-            onChange: handleChange,
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            "aria-describedby": utils.ariaDescribedByIds(id)
-          }), jsxRuntime.jsx("span", {
-            children: option.label
-          })]
-        });
-        return inline ? jsxRuntime.jsx("label", {
-          className: `checkbox-inline ${disabledCls}`,
-          children: checkbox
-        }, index) : jsxRuntime.jsx("div", {
-          className: `checkbox ${disabledCls}`,
-          children: jsxRuntime.jsx("label", {
-            children: checkbox
-          })
-        }, index);
-      })
-    });
-  }
-
-  /** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
-   * either disabled or readonly.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function ColorWidget(props) {
-    const {
-      disabled,
-      readonly,
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'color',
-      ...props,
-      disabled: disabled || readonly
-    });
-  }
-
-  /** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
-   * the value to undefined when it is falsy during the `onChange` handling.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function DateWidget(props) {
-    const {
-      onChange,
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    const handleChange = react.useCallback(value => onChange(value || undefined), [onChange]);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'date',
-      ...props,
-      onChange: handleChange
-    });
-  }
-
-  /** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
-   * the value to/from utc using the appropriate utility functions.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function DateTimeWidget(props) {
-    const {
-      onChange,
-      value,
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'datetime-local',
-      ...props,
-      value: utils.utcToLocal(value),
-      onChange: value => onChange(utils.localToUTC(value))
-    });
-  }
-
-  /** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function EmailWidget(props) {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'email',
-      ...props
-    });
-  }
-
-  function addNameToDataURL(dataURL, name) {
-    if (dataURL === null) {
-      return null;
-    }
-    return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
-  }
-  function processFile(file) {
-    const {
-      name,
-      size,
-      type
-    } = file;
-    return new Promise((resolve, reject) => {
-      const reader = new window.FileReader();
-      reader.onerror = reject;
-      reader.onload = event => {
-        var _event$target;
-        if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === 'string') {
-          resolve({
-            dataURL: addNameToDataURL(event.target.result, name),
-            name,
-            size,
-            type
-          });
-        } else {
-          resolve({
-            dataURL: null,
-            name,
-            size,
-            type
-          });
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-  }
-  function processFiles(files) {
-    return Promise.all(Array.from(files).map(processFile));
-  }
-  function FileInfoPreview({
-    fileInfo,
-    registry
-  }) {
-    const {
-      translateString
-    } = registry;
-    const {
-      dataURL,
-      type,
-      name
-    } = fileInfo;
-    if (!dataURL) {
-      return null;
-    }
-    if (type.indexOf('image') !== -1) {
-      return jsxRuntime.jsx("img", {
-        src: dataURL,
-        style: {
-          maxWidth: '100%'
-        },
-        className: 'file-preview'
-      });
-    }
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [' ', jsxRuntime.jsx("a", {
-        download: `preview-${name}`,
-        href: dataURL,
-        className: 'file-download',
-        children: translateString(utils.TranslatableString.PreviewLabel)
-      })]
-    });
-  }
-  function FilesInfo({
-    filesInfo,
-    registry,
-    preview
-  }) {
-    if (filesInfo.length === 0) {
-      return null;
-    }
-    const {
-      translateString
-    } = registry;
-    return jsxRuntime.jsx("ul", {
-      className: 'file-info',
-      children: filesInfo.map((fileInfo, key) => {
-        const {
-          name,
-          size,
-          type
-        } = fileInfo;
-        return jsxRuntime.jsxs("li", {
-          children: [jsxRuntime.jsx(Markdown__default["default"], {
-            children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)])
-          }), preview && jsxRuntime.jsx(FileInfoPreview, {
-            fileInfo: fileInfo,
-            registry: registry
-          })]
-        }, key);
-      })
-    });
-  }
-  function extractFileInfo(dataURLs) {
-    return dataURLs.filter(dataURL => dataURL).map(dataURL => {
-      const {
-        blob,
-        name
-      } = utils.dataURItoBlob(dataURL);
-      return {
-        dataURL,
-        name: name,
-        size: blob.size,
-        type: blob.type
-      };
-    });
-  }
-  /**
-   *  The `FileWidget` is a widget for rendering file upload fields.
-   *  It is typically used with a string property with data-url format.
-   */
-  function FileWidget(props) {
-    const {
-      disabled,
-      readonly,
-      required,
-      multiple,
-      onChange,
-      value,
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    const [filesInfo, setFilesInfo] = react.useState(Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]));
-    const handleChange = react.useCallback(event => {
-      if (!event.target.files) {
-        return;
-      }
-      // Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
-      // This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
-      // file in each event and concatenate them together ourselves
-      processFiles(event.target.files).then(filesInfoEvent => {
-        const newValue = filesInfoEvent.map(fileInfo => fileInfo.dataURL);
-        if (multiple) {
-          setFilesInfo(filesInfo.concat(filesInfoEvent[0]));
-          onChange(value.concat(newValue[0]));
-        } else {
-          setFilesInfo(filesInfoEvent);
-          onChange(newValue[0]);
-        }
-      });
-    }, [multiple, value, filesInfo, onChange]);
-    return jsxRuntime.jsxs("div", {
-      children: [jsxRuntime.jsx(BaseInputTemplate, {
-        ...props,
-        disabled: disabled || readonly,
-        type: 'file',
-        required: value ? false : required,
-        onChangeOverride: handleChange,
-        value: '',
-        accept: options.accept ? String(options.accept) : undefined
-      }), jsxRuntime.jsx(FilesInfo, {
-        filesInfo: filesInfo,
-        registry: registry,
-        preview: options.filePreview
-      })]
-    });
-  }
-
-  /** The `HiddenWidget` is a widget for rendering a hidden input field.
-   *  It is typically used by setting type to "hidden".
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function HiddenWidget({
-    id,
-    value
-  }) {
-    return jsxRuntime.jsx("input", {
-      type: 'hidden',
-      id: id,
-      name: id,
-      value: typeof value === 'undefined' ? '' : value
-    });
-  }
-
-  /** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function PasswordWidget(props) {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'password',
-      ...props
-    });
-  }
-
-  /** The `RadioWidget` is a widget for rendering a radio group.
-   *  It is typically used with a string property constrained with enum options.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function RadioWidget({
-    options,
-    value,
-    required,
-    disabled,
-    readonly,
-    autofocus = false,
-    onBlur,
-    onFocus,
-    onChange,
-    id
-  }) {
-    const {
-      enumOptions,
-      enumDisabled,
-      inline,
-      emptyValue
-    } = options;
-    const handleBlur = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onBlur, id]);
-    const handleFocus = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onFocus, id]);
-    return jsxRuntime.jsx("div", {
-      className: 'field-radio-group',
-      id: id,
-      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
-        const checked = utils.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 = jsxRuntime.jsxs("span", {
-          children: [jsxRuntime.jsx("input", {
-            type: 'radio',
-            id: utils.optionId(id, i),
-            checked: checked,
-            name: id,
-            required: required,
-            value: String(i),
-            disabled: disabled || itemDisabled || readonly,
-            autoFocus: autofocus && i === 0,
-            onChange: handleChange,
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            "aria-describedby": utils.ariaDescribedByIds(id)
-          }), jsxRuntime.jsx("span", {
-            children: option.label
-          })]
-        });
-        return inline ? jsxRuntime.jsx("label", {
-          className: `radio-inline ${disabledCls}`,
-          children: radio
-        }, i) : jsxRuntime.jsx("div", {
-          className: `radio ${disabledCls}`,
-          children: jsxRuntime.jsx("label", {
-            children: radio
-          })
-        }, i);
-      })
-    });
-  }
-
-  /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
-   * in a div, with the value along side it.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function RangeWidget(props) {
-    const {
-      value,
-      registry: {
-        templates: {
-          BaseInputTemplate
-        }
-      }
-    } = props;
-    return jsxRuntime.jsxs("div", {
-      className: 'field-range-wrapper',
-      children: [jsxRuntime.jsx(BaseInputTemplate, {
-        type: 'range',
-        ...props
-      }), jsxRuntime.jsx("span", {
-        className: 'range-view',
-        children: value
-      })]
-    });
-  }
-
-  function getValue(event, multiple) {
-    if (multiple) {
-      return Array.from(event.target.options).slice().filter(o => o.selected).map(o => o.value);
-    }
-    return event.target.value;
-  }
-  /** The `SelectWidget` is a widget for rendering dropdowns.
-   *  It is typically used with string properties constrained with enum options.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function SelectWidget({
-    schema,
-    id,
-    options,
-    value,
-    required,
-    disabled,
-    readonly,
-    multiple = false,
-    autofocus = false,
-    onChange,
-    onBlur,
-    onFocus,
-    placeholder
-  }) {
-    const {
-      enumOptions,
-      enumDisabled,
-      emptyValue: optEmptyVal
-    } = options;
-    const emptyValue = multiple ? [] : '';
-    const handleFocus = react.useCallback(event => {
-      const newValue = getValue(event, multiple);
-      return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
-    }, [onFocus, id, schema, multiple, options]);
-    const handleBlur = react.useCallback(event => {
-      const newValue = getValue(event, multiple);
-      return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
-    }, [onBlur, id, schema, multiple, options]);
-    const handleChange = react.useCallback(event => {
-      const newValue = getValue(event, multiple);
-      return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
-    }, [onChange, schema, multiple, options]);
-    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
-    return jsxRuntime.jsxs("select", {
-      id: id,
-      name: id,
-      multiple: multiple,
-      className: 'form-control',
-      value: typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes,
-      required: required,
-      disabled: disabled || readonly,
-      autoFocus: autofocus,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onChange: handleChange,
-      "aria-describedby": utils.ariaDescribedByIds(id),
-      children: [!multiple && schema.default === undefined && jsxRuntime.jsx("option", {
-        value: '',
-        children: placeholder
-      }), Array.isArray(enumOptions) && enumOptions.map(({
-        value,
-        label
-      }, i) => {
-        const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
-        return jsxRuntime.jsx("option", {
-          value: String(i),
-          disabled: disabled,
-          children: label
-        }, i);
-      })]
-    });
-  }
-
-  /** The `TextareaWidget` is a widget for rendering input fields as textarea.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function TextareaWidget({
-    id,
-    options = {},
-    placeholder,
-    value,
-    required,
-    disabled,
-    readonly,
-    autofocus = false,
-    onChange,
-    onBlur,
-    onFocus
-  }) {
-    const handleChange = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onChange(value === '' ? options.emptyValue : value), [onChange, options.emptyValue]);
-    const handleBlur = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onBlur(id, value), [onBlur, id]);
-    const handleFocus = react.useCallback(({
-      target: {
-        value
-      }
-    }) => onFocus(id, value), [id, onFocus]);
-    return jsxRuntime.jsx("textarea", {
-      id: id,
-      name: id,
-      className: 'form-control',
-      value: value ? value : '',
-      placeholder: placeholder,
-      required: required,
-      disabled: disabled,
-      readOnly: readonly,
-      autoFocus: autofocus,
-      rows: options.rows,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onChange: handleChange,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    });
-  }
-  TextareaWidget.defaultProps = {
-    autofocus: false,
-    options: {}
-  };
-
-  /** The `TextWidget` component uses the `BaseInputTemplate`.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function TextWidget(props) {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      ...props
-    });
-  }
-
-  /** The `TimeWidget` component uses the `BaseInputTemplate` changing the type to `time` and transforms
-   * the value to undefined when it is falsy during the `onChange` handling.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function TimeWidget(props) {
-    const {
-      onChange,
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    const handleChange = react.useCallback(value => onChange(value ? `${value}:00` : undefined), [onChange]);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'time',
-      ...props,
-      onChange: handleChange
-    });
-  }
-
-  /** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function URLWidget(props) {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'url',
-      ...props
-    });
-  }
-
-  /** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
-   *
-   * @param props - The `WidgetProps` for this component
-   */
-  function UpDownWidget(props) {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
-    return jsxRuntime.jsx(BaseInputTemplate, {
-      type: 'number',
-      ...props
-    });
-  }
-
-  function widgets() {
-    return {
-      AltDateWidget,
-      AltDateTimeWidget,
-      CheckboxWidget,
-      CheckboxesWidget,
-      ColorWidget,
-      DateWidget,
-      DateTimeWidget,
-      EmailWidget,
-      FileWidget,
-      HiddenWidget,
-      PasswordWidget,
-      RadioWidget,
-      RangeWidget,
-      SelectWidget,
-      TextWidget,
-      TextareaWidget,
-      TimeWidget,
-      UpDownWidget,
-      URLWidget
-    };
-  }
-
-  /** The default registry consists of all the fields, templates and widgets provided in the core implementation,
-   * plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
-   * rootSchema and validator. It will be added into the computed registry later in the Form.
-   */
-  function getDefaultRegistry() {
-    return {
-      fields: fields(),
-      templates: templates(),
-      widgets: widgets(),
-      rootSchema: {},
-      formContext: {},
-      translateString: utils.englishStringTranslator
-    };
-  }
-
-  /** The `Form` component renders the outer form and all the fields defined in the `schema` */
-  class Form extends react.Component {
-    /** 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.
-     *
-     * @param props - The initial props for the `Form`
-     */
-    constructor(props) {
-      super(props);
-      /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
-       * provide any possible type here
-       */
-      this.formElement = void 0;
-      /** Returns the `formData` with only the elements specified in the `fields` list
-       *
-       * @param formData - The data for the `Form`
-       * @param fields - The fields to keep while filtering
-       */
-      this.getUsedFormData = (formData, fields) => {
-        // For the case of a single input form
-        if (fields.length === 0 && typeof formData !== 'object') {
-          return formData;
-        }
-        // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
-        const data = _pick__default["default"](formData, fields);
-        if (Array.isArray(formData)) {
-          return Object.keys(data).map(key => data[key]);
-        }
-        return data;
-      };
-      /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
-       *
-       * @param pathSchema - The `PathSchema` object for the form
-       * @param [formData] - The form data to use while checking for empty objects/arrays
-       */
-      this.getFieldNames = (pathSchema, formData) => {
-        const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-          Object.keys(_obj).forEach(key => {
-            if (typeof _obj[key] === 'object') {
-              const newPaths = paths.map(path => [...path, key]);
-              // If an object is marked with additionalProperties, all its keys are valid
-              if (_obj[key][utils.RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== '') {
-                acc.push(_obj[key][utils.NAME_KEY]);
-              } else {
-                getAllPaths(_obj[key], acc, newPaths);
-              }
-            } else if (key === utils.NAME_KEY && _obj[key] !== '') {
-              paths.forEach(path => {
-                const formValue = get__default["default"](formData, path);
-                // adds path to fieldNames if it points to a value
-                // or an empty object/array
-                if (typeof formValue !== 'object' || isEmpty__default["default"](formValue)) {
-                  acc.push(path);
-                }
-              });
-            }
-          });
-          return acc;
-        };
-        return getAllPaths(pathSchema);
-      };
-      /** 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 filterer to remove any extra data not
-       * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-       * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-       * callback will be called if specified with the updated state.
-       *
-       * @param formData - The new form data from a change to a field
-       * @param newErrorSchema - The new `ErrorSchema` based on the field change
-       * @param id - The id of the field that caused the change
-       */
-      this.onChange = (formData, newErrorSchema, id) => {
-        const {
-          extraErrors,
-          omitExtraData,
-          liveOmit,
-          noValidate,
-          liveValidate,
-          onChange
-        } = this.props;
-        const {
-          schemaUtils,
-          schema
-        } = this.state;
-        if (utils.isObject(formData) || Array.isArray(formData)) {
-          const newState = this.getStateFromProps(this.props, formData);
-          formData = newState.formData;
-        }
-        const mustValidate = !noValidate && liveValidate;
-        let state = {
-          formData,
-          schema
-        };
-        let newFormData = formData;
-        if (omitExtraData === true && liveOmit === true) {
-          const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-          const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
-          const fieldNames = this.getFieldNames(pathSchema, formData);
-          newFormData = this.getUsedFormData(formData, fieldNames);
-          state = {
-            formData: newFormData
-          };
-        }
-        if (mustValidate) {
-          const schemaValidation = this.validate(newFormData);
-          let errors = schemaValidation.errors;
-          let errorSchema = schemaValidation.errorSchema;
-          const schemaValidationErrors = errors;
-          const schemaValidationErrorSchema = errorSchema;
-          if (extraErrors) {
-            const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
-          }
-          state = {
-            formData: newFormData,
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          };
-        } else if (!noValidate && newErrorSchema) {
-          const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates') : newErrorSchema;
-          state = {
-            formData: newFormData,
-            errorSchema: errorSchema,
-            errors: utils.toErrorList(errorSchema)
-          };
-        }
-        this.setState(state, () => onChange && onChange({
-          ...this.state,
-          ...state
-        }, id));
-      };
-      /**
-       * Callback function to handle reset form data.
-       * - Reset all fields with default values.
-       * - Reset validations and errors
-       *
-       */
-      this.reset = () => {
-        const {
-          onChange
-        } = this.props;
-        const newState = this.getStateFromProps(this.props, undefined);
-        const newFormData = newState.formData;
-        const state = {
-          formData: newFormData,
-          errorSchema: {},
-          errors: [],
-          schemaValidationErrors: [],
-          schemaValidationErrorSchema: {}
-        };
-        this.setState(state, () => onChange && onChange({
-          ...this.state,
-          ...state
-        }));
-      };
-      /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-       * was provided.
-       *
-       * @param id - The unique `id` of the field that was blurred
-       * @param data - The data associated with the field that was blurred
-       */
-      this.onBlur = (id, data) => {
-        const {
-          onBlur
-        } = this.props;
-        if (onBlur) {
-          onBlur(id, data);
-        }
-      };
-      /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
-       * was provided.
-       *
-       * @param id - The unique `id` of the field that was focused
-       * @param data - The data associated with the field that was focused
-       */
-      this.onFocus = (id, data) => {
-        const {
-          onFocus
-        } = this.props;
-        if (onFocus) {
-          onFocus(id, data);
-        }
-      };
-      /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
-       * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
-       * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
-       * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
-       * back the `onSubmit` callback if it was provided.
-       *
-       * @param event - The submit HTML form event
-       */
-      this.onSubmit = event => {
-        event.preventDefault();
-        if (event.target !== event.currentTarget) {
-          return;
-        }
-        event.persist();
-        const {
-          omitExtraData,
-          extraErrors,
-          noValidate,
-          onSubmit
-        } = this.props;
-        let {
-          formData: newFormData
-        } = this.state;
-        const {
-          schema,
-          schemaUtils
-        } = this.state;
-        if (omitExtraData === true) {
-          const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-          const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', newFormData);
-          const fieldNames = this.getFieldNames(pathSchema, newFormData);
-          newFormData = this.getUsedFormData(newFormData, fieldNames);
-        }
-        if (noValidate || this.validateForm()) {
-          // There are no errors generated through schema validation.
-          // Check for user provided errors and update state accordingly.
-          const errorSchema = extraErrors || {};
-          const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
-          this.setState({
-            formData: newFormData,
-            errors,
-            errorSchema,
-            schemaValidationErrors: [],
-            schemaValidationErrorSchema: {}
-          }, () => {
-            if (onSubmit) {
-              onSubmit({
-                ...this.state,
-                formData: newFormData,
-                status: 'submitted'
-              }, event);
-            }
-          });
-        }
-      };
-      if (!props.validator) {
-        throw new Error('A validator is required for Form functionality to work');
-      }
-      this.state = this.getStateFromProps(props, props.formData);
-      if (this.props.onChange && !utils.deepEquals(this.state.formData, this.props.formData)) {
-        this.props.onChange(this.state);
-      }
-      this.formElement = /*#__PURE__*/react.createRef();
-    }
-    /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
-     * will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
-     * state construction.
-     *
-     * @param nextProps - The new set of props about to be applied to the `Form`
-     */
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      const nextState = this.getStateFromProps(nextProps, nextProps.formData);
-      if (!utils.deepEquals(nextState.formData, nextProps.formData) && !utils.deepEquals(nextState.formData, this.state.formData) && nextProps.onChange) {
-        nextProps.onChange(nextState);
-      }
-      this.setState(nextState);
-    }
-    /** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
-     * `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
-     * validation process IF required by the `props`.
-     *
-     * @param props - The props passed to the `Form`
-     * @param inputFormData - The new or current data for the `Form`
-     * @returns - The new state for the `Form`
-     */
-    getStateFromProps(props, inputFormData) {
-      const state = this.state || {};
-      const schema = 'schema' in props ? props.schema : this.props.schema;
-      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;
-      let schemaUtils = state.schemaUtils;
-      if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema, experimental_defaultFormStateBehavior)) {
-        schemaUtils = utils.createSchemaUtils(props.validator, rootSchema, experimental_defaultFormStateBehavior);
-      }
-      const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-      const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-      const getCurrentErrors = () => {
-        if (props.noValidate) {
-          return {
-            errors: [],
-            errorSchema: {}
-          };
-        } else if (!props.liveValidate) {
-          return {
-            errors: state.schemaValidationErrors || [],
-            errorSchema: state.schemaValidationErrorSchema || {}
-          };
-        }
-        return {
-          errors: state.errors || [],
-          errorSchema: state.errorSchema || {}
-        };
-      };
-      let errors;
-      let errorSchema;
-      let schemaValidationErrors = state.schemaValidationErrors;
-      let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
-      if (mustValidate) {
-        const schemaValidation = this.validate(formData, schema, schemaUtils);
-        errors = schemaValidation.errors;
-        errorSchema = schemaValidation.errorSchema;
-        schemaValidationErrors = errors;
-        schemaValidationErrorSchema = errorSchema;
-      } else {
-        const currentErrors = getCurrentErrors();
-        errors = currentErrors.errors;
-        errorSchema = currentErrors.errorSchema;
-      }
-      if (props.extraErrors) {
-        const merged = utils.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 nextState = {
-        schemaUtils,
-        schema,
-        uiSchema,
-        idSchema,
-        formData,
-        edit,
-        errors,
-        errorSchema,
-        schemaValidationErrors,
-        schemaValidationErrorSchema
-      };
-      return nextState;
-    }
-    /** React lifecycle method that is used to determine whether component should be updated.
-     *
-     * @param nextProps - The next version of the props
-     * @param nextState - The next version of the state
-     * @returns - True if the component should be updated, false otherwise
-     */
-    shouldComponentUpdate(nextProps, nextState) {
-      return utils.shouldRender(this, nextProps, nextState);
-    }
-    /** 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
-     */
-    validate(formData, schema = this.props.schema, altSchemaUtils) {
-      const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
-      const {
-        customValidate,
-        transformErrors,
-        uiSchema
-      } = this.props;
-      const resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
-      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
-    }
-    /** 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 = utils.getUiOptions(uiSchema);
-      const ErrorListTemplate = utils.getTemplate('ErrorListTemplate', registry, options);
-      if (errors && errors.length) {
-        return jsxRuntime.jsx(ErrorListTemplate, {
-          errors: errors,
-          errorSchema: errorSchema || {},
-          schema: schema,
-          uiSchema: uiSchema,
-          formContext: formContext,
-          registry: registry
-        });
-      }
-      return null;
-    }
-    /** Returns the registry for the form */
-    getRegistry() {
-      var _this$props$templates;
-      const {
-        translateString: customTranslateString,
-        uiSchema = {}
-      } = this.props;
-      const {
-        schemaUtils
-      } = this.state;
-      const {
-        fields,
-        templates,
-        widgets,
-        formContext,
-        translateString
-      } = getDefaultRegistry();
-      return {
-        fields: {
-          ...fields,
-          ...this.props.fields
-        },
-        templates: {
-          ...templates,
-          ...this.props.templates,
-          ButtonTemplates: {
-            ...templates.ButtonTemplates,
-            ...((_this$props$templates = this.props.templates) === null || _this$props$templates === void 0 ? void 0 : _this$props$templates.ButtonTemplates)
-          }
-        },
-        widgets: {
-          ...widgets,
-          ...this.props.widgets
-        },
-        rootSchema: this.props.schema,
-        formContext: this.props.formContext || formContext,
-        schemaUtils,
-        translateString: customTranslateString || translateString,
-        globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY]
-      };
-    }
-    /** Provides a function that can be used to programmatically submit the `Form` */
-    submit() {
-      if (this.formElement.current) {
-        this.formElement.current.dispatchEvent(new CustomEvent('submit', {
-          cancelable: true
-        }));
-        this.formElement.current.requestSubmit();
-      }
-    }
-    /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
-     * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
-     * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
-     *
-     * @param error - The error on which to focus
-     */
-    focusOnError(error) {
-      const {
-        idPrefix = 'root',
-        idSeparator = '_'
-      } = this.props;
-      const {
-        property
-      } = error;
-      const path = _toPath__default["default"](property);
-      if (path[0] === '') {
-        // Most of the time the `.foo` property results in the first element being empty, so replace it with the idPrefix
-        path[0] = idPrefix;
-      } else {
-        // Otherwise insert the idPrefix into the first location using unshift
-        path.unshift(idPrefix);
-      }
-      const elementId = path.join(idSeparator);
-      let field = this.formElement.current.elements[elementId];
-      if (!field) {
-        // if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
-        field = this.formElement.current.querySelector(`input[id^=${elementId}`);
-      }
-      if (field && field.length) {
-        // If we got a list with length > 0
-        field = field[0];
-      }
-      if (field) {
-        field.focus();
-      }
-    }
-    /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
-     * same way as would happen on form submission.
-     *
-     * @returns - True if the form is valid, false otherwise.
-     */
-    validateForm() {
-      const {
-        extraErrors,
-        extraErrorsBlockSubmit,
-        focusOnFirstError,
-        onError
-      } = this.props;
-      const {
-        formData
-      } = this.state;
-      const schemaValidation = this.validate(formData);
-      let errors = schemaValidation.errors;
-      let errorSchema = schemaValidation.errorSchema;
-      const schemaValidationErrors = errors;
-      const schemaValidationErrorSchema = errorSchema;
-      if (errors.length > 0 || extraErrors && extraErrorsBlockSubmit) {
-        if (extraErrors) {
-          const merged = utils.validationDataMerge(schemaValidation, extraErrors);
-          errorSchema = merged.errorSchema;
-          errors = merged.errors;
-        }
-        if (focusOnFirstError) {
-          if (typeof focusOnFirstError === 'function') {
-            focusOnFirstError(errors[0]);
-          } else {
-            this.focusOnError(errors[0]);
-          }
-        }
-        this.setState({
-          errors,
-          errorSchema,
-          schemaValidationErrors,
-          schemaValidationErrorSchema
-        }, () => {
-          if (onError) {
-            onError(errors);
-          } else {
-            console.error('Form validation failed', errors);
-          }
-        });
-        return false;
-      }
-      return true;
-    }
-    /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
-     * needed along with the submit button or any children of the form.
-     */
-    render() {
-      const {
-        children,
-        id,
-        idPrefix,
-        idSeparator,
-        className = '',
-        tagName,
-        name,
-        method,
-        target,
-        action,
-        autoComplete,
-        enctype,
-        acceptcharset,
-        noHtml5Validate = false,
-        disabled = false,
-        readonly = false,
-        formContext,
-        showErrorList = 'top',
-        _internalFormWrapper
-      } = this.props;
-      const {
-        schema,
-        uiSchema,
-        formData,
-        errorSchema,
-        idSchema
-      } = this.state;
-      const registry = this.getRegistry();
-      const {
-        SchemaField: _SchemaField
-      } = registry.fields;
-      const {
-        SubmitButton
-      } = registry.templates.ButtonTemplates;
-      // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
-      // PropTypes.elementType to use for the inner tag, so we'll need to pass `tagName` along if it is provided.
-      // NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
-      const as = _internalFormWrapper ? tagName : undefined;
-      const FormTag = _internalFormWrapper || tagName || 'form';
-      let {
-        [utils.SUBMIT_BTN_OPTIONS_KEY]: submitOptions = {}
-      } = utils.getUiOptions(uiSchema);
-      if (disabled) {
-        submitOptions = {
-          ...submitOptions,
-          props: {
-            ...submitOptions.props,
-            disabled: true
-          }
-        };
-      }
-      const submitUiSchema = {
-        [utils.UI_OPTIONS_KEY]: {
-          [utils.SUBMIT_BTN_OPTIONS_KEY]: submitOptions
-        }
-      };
-      return jsxRuntime.jsxs(FormTag, {
-        className: className ? className : 'rjsf',
-        id: id,
-        name: name,
-        method: method,
-        target: target,
-        action: action,
-        autoComplete: autoComplete,
-        encType: enctype,
-        acceptCharset: acceptcharset,
-        noValidate: noHtml5Validate,
-        onSubmit: this.onSubmit,
-        as: as,
-        ref: this.formElement,
-        children: [showErrorList === 'top' && this.renderErrors(registry), jsxRuntime.jsx(_SchemaField, {
-          name: '',
-          schema: schema,
-          uiSchema: uiSchema,
-          errorSchema: errorSchema,
-          idSchema: idSchema,
-          idPrefix: idPrefix,
-          idSeparator: idSeparator,
-          formContext: formContext,
-          formData: formData,
-          onChange: this.onChange,
-          onBlur: this.onBlur,
-          onFocus: this.onFocus,
-          registry: registry,
-          disabled: disabled,
-          readonly: readonly
-        }), children ? children : jsxRuntime.jsx(SubmitButton, {
-          uiSchema: submitUiSchema,
-          registry: registry
-        }), showErrorList === 'bottom' && this.renderErrors(registry)]
-      });
-    }
-  }
-
-  /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
-  function withTheme(themeProps) {
-    return /*#__PURE__*/react.forwardRef(({
-      fields,
-      widgets,
-      templates,
-      ...directProps
-    }, ref) => {
-      var _themeProps$templates, _templates;
-      fields = {
-        ...(themeProps === null || themeProps === void 0 ? void 0 : themeProps.fields),
-        ...fields
-      };
-      widgets = {
-        ...(themeProps === null || themeProps === void 0 ? void 0 : themeProps.widgets),
-        ...widgets
-      };
-      templates = {
-        ...(themeProps === null || themeProps === void 0 ? void 0 : themeProps.templates),
-        ...templates,
-        ButtonTemplates: {
-          ...(themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates),
-          ...((_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
-        }
-      };
-      return jsxRuntime.jsx(Form, {
-        ...themeProps,
-        ...directProps,
-        fields: fields,
-        widgets: widgets,
-        templates: templates,
-        ref: ref
-      });
-    });
-  }
-
-  exports["default"] = Form;
-  exports.getDefaultRegistry = getDefaultRegistry;
-  exports.withTheme = withTheme;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=core.umd.development.js.map