@rjsf/core 5.1.0 → 5.2.1

package/dist/core.umd.development.js

@@ -1,12 +1,11 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/toPath'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/omit'), require('lodash-es/has'), require('lodash-es/unset')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/toPath', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/omit', 'lodash-es/has', 'lodash-es/unset'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.React, global.utils, global.get, global.isEmpty, global._pick, global._toPath, global.isObject, global.set, global.nanoid, global.omit, global.has, global.unset));
-})(this, (function (exports, React, utils, get, isEmpty, _pick, _toPath, isObject, set, nanoid, omit, has, unset) { 'use strict';
+  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/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/omit'), require('lodash-es/has'), require('lodash-es/unset'), require('markdown-to-jsx')) :
+  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/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/omit', 'lodash-es/has', 'lodash-es/unset', 'markdown-to-jsx'], 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.isObject, global.set, global.nanoid, global.omit, global.has, global.unset, global.Markdown));
+})(this, (function (exports, jsxRuntime, react, utils, get, isEmpty, _pick, _toPath, isObject, set, nanoid, omit, has, unset, Markdown) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
   var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
   var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
@@ -16,6 +15,7 @@
   var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
   var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
   var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
+  var Markdown__default = /*#__PURE__*/_interopDefaultLegacy(Markdown);
 
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
@@ -195,7 +195,7 @@
             onChange = _this$props3.onChange,
             errorSchema = _this$props3.errorSchema;
           var newErrorSchema;
-          if (_this.props.errorSchema) {
+          if (errorSchema) {
             newErrorSchema = {};
             for (var idx in errorSchema) {
               var i = parseInt(idx);
@@ -236,7 +236,7 @@
           var newFormData = arrayData.map(function (item, i) {
             // We need to treat undefined items as nulls to have validation.
             // See https://github.com/tdegrunt/jsonschema/issues/206
-            var jsonValue = typeof value === "undefined" ? null : value;
+            var jsonValue = typeof value === 'undefined' ? null : value;
             return index === i ? jsonValue : item;
           });
           onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends2 = {}, _extends2[index] = newErrorSchema, _extends2)), id);
@@ -296,10 +296,10 @@
       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");
+        return !itemSchema.type.includes('null');
       }
       // All non-null array item types are inherently required by design
-      return itemSchema.type !== "null";
+      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
@@ -372,14 +372,15 @@
         uiSchema = _this$props7.uiSchema,
         idSchema = _this$props7.idSchema,
         registry = _this$props7.registry;
-      var schemaUtils = registry.schemaUtils;
+      var schemaUtils = registry.schemaUtils,
+        translateString = registry.translateString;
       if (!(utils.ITEMS_KEY in schema)) {
         var uiOptions = utils.getUiOptions(uiSchema);
-        var UnsupportedFieldTemplate = utils.getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
-        return /*#__PURE__*/React__default["default"].createElement(UnsupportedFieldTemplate, {
+        var UnsupportedFieldTemplate = utils.getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
+        return jsxRuntime.jsx(UnsupportedFieldTemplate, {
           schema: schema,
           idSchema: idSchema,
-          reason: "Missing items definition",
+          reason: translateString(utils.TranslatableString.MissingItems),
           registry: registry
         });
       }
@@ -422,7 +423,7 @@
         onFocus = _this$props8.onFocus,
         idPrefix = _this$props8.idPrefix,
         _this$props8$idSepara = _this$props8.idSeparator,
-        idSeparator = _this$props8$idSepara === void 0 ? "_" : _this$props8$idSepara,
+        idSeparator = _this$props8$idSepara === void 0 ? '_' : _this$props8$idSepara,
         rawErrors = _this$props8.rawErrors;
       var keyedFormData = this.state.keyedFormData;
       var title = schema.title === undefined ? name : schema.title;
@@ -477,8 +478,8 @@
         rawErrors: rawErrors,
         registry: registry
       };
-      var Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
-      return /*#__PURE__*/React__default["default"].createElement(Template, _extends({}, arrayProps));
+      var Template = utils.getTemplate('ArrayFieldTemplate', registry, uiOptions);
+      return jsxRuntime.jsx(Template, _extends({}, arrayProps));
     }
     /** Renders an array using the custom widget provided by the user in the `uiSchema`
      */;
@@ -511,8 +512,9 @@
         widget = _getUiOptions2.widget,
         options = _objectWithoutPropertiesLoose(_getUiOptions2, _excluded$9);
       var Widget = utils.getWidget(schema, widget, widgets);
-      return /*#__PURE__*/React__default["default"].createElement(Widget, {
+      return jsxRuntime.jsx(Widget, {
         id: idSchema.$id,
+        name: name,
         multiple: true,
         onChange: this.onSelectChange,
         onBlur: onBlur,
@@ -564,11 +566,12 @@
       var enumOptions = utils.optionsList(itemsSchema);
       var _getUiOptions3 = utils.getUiOptions(uiSchema),
         _getUiOptions3$widget = _getUiOptions3.widget,
-        widget = _getUiOptions3$widget === void 0 ? "select" : _getUiOptions3$widget,
+        widget = _getUiOptions3$widget === void 0 ? 'select' : _getUiOptions3$widget,
         options = _objectWithoutPropertiesLoose(_getUiOptions3, _excluded2);
       var Widget = utils.getWidget(schema, widget, widgets);
-      return /*#__PURE__*/React__default["default"].createElement(Widget, {
+      return jsxRuntime.jsx(Widget, {
         id: idSchema.$id,
+        name: name,
         multiple: true,
         onChange: this.onSelectChange,
         onBlur: onBlur,
@@ -617,12 +620,13 @@
         formContext = registry.formContext;
       var _getUiOptions4 = utils.getUiOptions(uiSchema),
         _getUiOptions4$widget = _getUiOptions4.widget,
-        widget = _getUiOptions4$widget === void 0 ? "files" : _getUiOptions4$widget,
+        widget = _getUiOptions4$widget === void 0 ? 'files' : _getUiOptions4$widget,
         options = _objectWithoutPropertiesLoose(_getUiOptions4, _excluded3);
       var Widget = utils.getWidget(schema, widget, widgets);
-      return /*#__PURE__*/React__default["default"].createElement(Widget, {
+      return jsxRuntime.jsx(Widget, {
         options: options,
         id: idSchema.$id,
+        name: name,
         multiple: true,
         onChange: this.onSelectChange,
         onBlur: onBlur,
@@ -638,7 +642,7 @@
         formContext: formContext,
         autofocus: autofocus,
         rawErrors: rawErrors,
-        label: ""
+        label: ''
       });
     }
     /** Renders an array that has a maximum limit of items
@@ -654,7 +658,7 @@
         errorSchema = _this$props12.errorSchema,
         idPrefix = _this$props12.idPrefix,
         _this$props12$idSepar = _this$props12.idSeparator,
-        idSeparator = _this$props12$idSepar === void 0 ? "_" : _this$props12$idSepar,
+        idSeparator = _this$props12$idSepar === void 0 ? '_' : _this$props12$idSepar,
         idSchema = _this$props12.idSchema,
         name = _this$props12.name,
         _this$props12$disable = _this$props12.disabled,
@@ -690,7 +694,7 @@
       var canAdd = this.canAddItem(items) && !!additionalSchema;
       var arrayProps = {
         canAdd: canAdd,
-        className: "field field-array field-array-fixed-items",
+        className: 'field field-array field-array-fixed-items',
         disabled: disabled,
         idSchema: idSchema,
         formData: formData,
@@ -735,8 +739,8 @@
         formContext: formContext,
         rawErrors: rawErrors
       };
-      var Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
-      return /*#__PURE__*/React__default["default"].createElement(Template, _extends({}, arrayProps));
+      var Template = utils.getTemplate('ArrayFieldTemplate', registry, uiOptions);
+      return jsxRuntime.jsx(Template, _extends({}, arrayProps));
     }
     /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
      * back to the `ArrayFieldItemTemplate`.
@@ -792,7 +796,7 @@
         return has[key];
       });
       return {
-        children: /*#__PURE__*/React__default["default"].createElement(ItemSchemaField, {
+        children: jsxRuntime.jsx(ItemSchemaField, {
           name: name,
           index: index,
           schema: itemSchema,
@@ -814,7 +818,7 @@
           autofocus: autofocus,
           rawErrors: rawErrors
         }),
-        className: "array-item",
+        className: 'array-item',
         disabled: disabled,
         canAdd: canAdd,
         hasToolbar: has.toolbar,
@@ -836,12 +840,15 @@
     _createClass(ArrayField, [{
       key: "itemTitle",
       get: function get() {
-        var schema = this.props.schema;
-        return get__default["default"](schema, [utils.ITEMS_KEY, "title"], get__default["default"](schema, [utils.ITEMS_KEY, "description"], "Item"));
+        var _this$props14 = this.props,
+          schema = _this$props14.schema,
+          registry = _this$props14.registry;
+        var translateString = registry.translateString;
+        return get__default["default"](schema, [utils.ITEMS_KEY, 'title'], get__default["default"](schema, [utils.ITEMS_KEY, 'description'], translateString(utils.TranslatableString.ArrayItemTitle)));
       }
     }]);
     return ArrayField;
-  }(React.Component);
+  }(react.Component);
 
   var _excluded$8 = ["widget"];
   /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
@@ -866,19 +873,22 @@
       rawErrors = props.rawErrors;
     var title = schema.title;
     var widgets = registry.widgets,
-      formContext = registry.formContext;
+      formContext = registry.formContext,
+      translateString = registry.translateString;
     var _getUiOptions = utils.getUiOptions(uiSchema),
       _getUiOptions$widget = _getUiOptions.widget,
-      widget = _getUiOptions$widget === void 0 ? "checkbox" : _getUiOptions$widget,
+      widget = _getUiOptions$widget === void 0 ? 'checkbox' : _getUiOptions$widget,
       options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$8);
     var Widget = utils.getWidget(schema, widget, widgets);
+    var yes = translateString(utils.TranslatableString.YesLabel);
+    var no = translateString(utils.TranslatableString.NoLabel);
     var enumOptions;
     if (Array.isArray(schema.oneOf)) {
       enumOptions = utils.optionsList({
         oneOf: schema.oneOf.map(function (option) {
           if (isObject__default["default"](option)) {
             return _extends({}, option, {
-              title: option.title || (option["const"] === true ? "Yes" : "No")
+              title: option.title || (option["const"] === true ? yes : no)
             });
           }
           return undefined;
@@ -892,14 +902,14 @@
       var schemaWithEnumNames = schema;
       var enums = (_schema$enum = schema["enum"]) != null ? _schema$enum : [true, false];
       if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(function (v) {
-        return typeof v === "boolean";
+        return typeof v === 'boolean';
       })) {
         enumOptions = [{
           value: enums[0],
-          label: enums[0] ? "Yes" : "No"
+          label: enums[0] ? yes : no
         }, {
           value: enums[1],
-          label: enums[1] ? "Yes" : "No"
+          label: enums[1] ? yes : no
         }];
       } else {
         enumOptions = utils.optionsList({
@@ -909,13 +919,14 @@
         });
       }
     }
-    return /*#__PURE__*/React__default["default"].createElement(Widget, {
+    return jsxRuntime.jsx(Widget, {
       options: _extends({}, options, {
         enumOptions: enumOptions
       }),
       schema: schema,
       uiSchema: uiSchema,
       id: idSchema.$id,
+      name: name,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -932,9 +943,6 @@
   }
 
   var _excluded$7 = ["widget", "placeholder", "autofocus", "autocomplete", "title"];
-  /** The prefix used when a oneOf option does not have a title
-   */
-  var UNKNOWN_OPTION_PREFIX = "Option";
   /** 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`.
    *
@@ -968,7 +976,7 @@
         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");
+          newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren');
         }
         onChange(newFormData, undefined, _this.getFieldId());
         _this.setState({
@@ -1055,12 +1063,13 @@
       var _this$props4 = this.props,
         idSchema = _this$props4.idSchema,
         schema = _this$props4.schema;
-      return "" + idSchema.$id + (schema.oneOf ? "__oneof_select" : "__anyof_select");
+      return "" + idSchema.$id + (schema.oneOf ? '__oneof_select' : '__anyof_select');
     }
     /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
      */;
     _proto.render = function render() {
       var _this$props5 = this.props,
+        name = _this$props5.name,
         baseType = _this$props5.baseType,
         _this$props5$disabled = _this$props5.disabled,
         disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
@@ -1073,14 +1082,15 @@
         schema = _this$props5.schema,
         uiSchema = _this$props5.uiSchema;
       var widgets = registry.widgets,
-        fields = registry.fields;
+        fields = registry.fields,
+        translateString = registry.translateString;
       var _SchemaField = fields.SchemaField;
       var _this$state2 = this.state,
         selectedOption = _this$state2.selectedOption,
         retrievedOptions = _this$state2.retrievedOptions;
       var _getUiOptions = utils.getUiOptions(uiSchema),
         _getUiOptions$widget = _getUiOptions.widget,
-        widget = _getUiOptions$widget === void 0 ? "select" : _getUiOptions$widget,
+        widget = _getUiOptions$widget === void 0 ? 'select' : _getUiOptions$widget,
         placeholder = _getUiOptions.placeholder,
         autofocus = _getUiOptions.autofocus,
         autocomplete = _getUiOptions.autocomplete,
@@ -1088,7 +1098,7 @@
         title = _getUiOptions$title === void 0 ? schema.title : _getUiOptions$title,
         uiOptions = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$7);
       var Widget = utils.getWidget({
-        type: "number"
+        type: 'number'
       }, widget, widgets);
       var rawErrors = get__default["default"](errorSchema, utils.ERRORS_KEY, []);
       var fieldErrorSchema = omit__default["default"](errorSchema, [utils.ERRORS_KEY]);
@@ -1101,46 +1111,50 @@
           type: baseType
         });
       }
-      var optionLabel = title ? title + " " + UNKNOWN_OPTION_PREFIX.toLowerCase() : UNKNOWN_OPTION_PREFIX;
+      var translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
+      var translateParams = title ? [title] : [];
       var enumOptions = retrievedOptions.map(function (opt, index) {
         return {
-          label: opt.title || optionLabel + " " + (index + 1),
+          label: opt.title || translateString(translateEnum, translateParams.concat(String(index + 1))),
           value: index
         };
       });
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "panel panel-default panel-body"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/React__default["default"].createElement(Widget, {
-        id: this.getFieldId(),
-        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: _extends({
-          enumOptions: enumOptions
-        }, uiOptions),
-        registry: registry,
-        formContext: formContext,
-        placeholder: placeholder,
-        autocomplete: autocomplete,
-        autofocus: autofocus,
-        label: ""
-      })), option !== null && /*#__PURE__*/React__default["default"].createElement(_SchemaField, _extends({}, this.props, {
-        schema: optionSchema
-      })));
+      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: _extends({
+              enumOptions: enumOptions
+            }, uiOptions),
+            registry: registry,
+            formContext: formContext,
+            placeholder: placeholder,
+            autocomplete: autocomplete,
+            autofocus: autofocus,
+            label: ''
+          })
+        }), option !== null && jsxRuntime.jsx(_SchemaField, _extends({}, this.props, {
+          schema: optionSchema
+        }))]
+      });
     };
     return AnyOfField;
-  }(React.Component);
+  }(react.Component);
 
   // 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.
@@ -1174,7 +1188,7 @@
       onChange = props.onChange,
       formData = props.formData,
       initialValue = props.value;
-    var _useState = React.useState(initialValue),
+    var _useState = react.useState(initialValue),
       lastValue = _useState[0],
       setLastValue = _useState[1];
     var StringField = registry.fields.StringField;
@@ -1183,32 +1197,32 @@
      *
      * @param value - The current value for the change occurring
      */
-    var handleChange = React.useCallback(function (value) {
+    var handleChange = react.useCallback(function (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) === ".") {
+      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
-      var processed = typeof value === "string" && value.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value.replace(trailingCharMatcher, "")) : utils.asNumber(value);
+      var 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") {
+    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
-      var re = new RegExp(("" + value).replace(".", "\\.") + "\\.?0*$");
+      var 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 /*#__PURE__*/React__default["default"].createElement(StringField, _extends({}, props, {
+    return jsxRuntime.jsx(StringField, _extends({}, props, {
       formData: value,
       onChange: handleChange
     }));
@@ -1249,7 +1263,7 @@
             // 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 = "";
+            value = '';
           }
           var newFormData = _extends({}, formData, (_extends2 = {}, _extends2[name] = value, _extends2));
           onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends3 = {}, _extends3[name] = newErrorSchema, _extends3)), id);
@@ -1270,7 +1284,7 @@
         var uiSchema = _this.props.uiSchema;
         var _getUiOptions = utils.getUiOptions(uiSchema),
           _getUiOptions$duplica = _getUiOptions.duplicateKeySuffixSeparator,
-          duplicateKeySuffixSeparator = _getUiOptions$duplica === void 0 ? "-" : _getUiOptions$duplica;
+          duplicateKeySuffixSeparator = _getUiOptions$duplica === void 0 ? '-' : _getUiOptions$duplica;
         var index = 0;
         var newKey = preferredKey;
         while (has__default["default"](formData, newKey)) {
@@ -1325,10 +1339,10 @@
               type = apSchema.type;
             }
             if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
-              type = "object";
+              type = 'object';
             }
           }
-          var newKey = _this.getAvailableKey("newKey", newFormData);
+          var newKey = _this.getAvailableKey('newKey', newFormData);
           // Cast this to make the `set` work properly
           set__default["default"](newFormData, newKey, _this.getDefaultValue(type));
           onChange(newFormData);
@@ -1359,22 +1373,22 @@
      * @param type - The type of the new additional schema property
      */
     _proto.getDefaultValue = function getDefaultValue(type) {
+      var translateString = this.props.registry.translateString;
       switch (type) {
-        case "string":
-          return "New Value";
-        case "array":
+        case 'array':
           return [];
-        case "boolean":
+        case 'boolean':
           return false;
-        case "null":
+        case 'null':
           return null;
-        case "number":
+        case 'number':
           return 0;
-        case "object":
+        case 'object':
           return {};
+        case 'string':
         default:
           // We don't have a datatype for some reason (perhaps additionalProperties was true)
-          return "New Value";
+          return translateString(utils.TranslatableString.NewStringDefault);
       }
     }
     /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
@@ -1421,25 +1435,31 @@
         var properties = Object.keys(schemaProperties);
         orderedProperties = utils.orderProperties(properties, uiOptions.order);
       } catch (err) {
-        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
-          className: "config-error",
-          style: {
-            color: "red"
-          }
-        }, "Invalid ", name || "root", " object field configuration:", /*#__PURE__*/React__default["default"].createElement("em", null, err.message), "."), /*#__PURE__*/React__default["default"].createElement("pre", null, JSON.stringify(schema)));
+        return jsxRuntime.jsxs("div", {
+          children: [jsxRuntime.jsxs("p", {
+            className: 'config-error',
+            style: {
+              color: 'red'
+            },
+            children: ["Invalid ", name || 'root', " object field configuration:", jsxRuntime.jsx("em", {
+              children: err.message
+            }), "."]
+          }), jsxRuntime.jsx("pre", {
+            children: JSON.stringify(schema)
+          })]
+        });
       }
-      var Template = utils.getTemplate("ObjectFieldTemplate", registry, uiOptions);
+      var Template = utils.getTemplate('ObjectFieldTemplate', registry, uiOptions);
       var templateProps = {
         title: uiOptions.title || title,
         description: description,
         properties: orderedProperties.map(function (name) {
           var addedByAdditionalProperties = has__default["default"](schema, [utils.PROPERTIES_KEY, name, utils.ADDITIONAL_PROPERTY_FLAG]);
           var fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
-          var hidden = utils.getUiOptions(fieldUiSchema).widget === "hidden";
+          var hidden = utils.getUiOptions(fieldUiSchema).widget === 'hidden';
           var fieldIdSchema = get__default["default"](idSchema, [name], {});
           return {
-            content: /*#__PURE__*/React__default["default"].createElement(SchemaField, {
-              key: name,
+            content: jsxRuntime.jsx(SchemaField, {
               name: name,
               required: _this2.isRequired(name),
               schema: get__default["default"](schema, [utils.PROPERTIES_KEY, name], {}),
@@ -1460,7 +1480,7 @@
               readonly: readonly,
               hideError: hideError,
               onDropPropertyClick: _this2.onDropPropertyClick
-            }),
+            }, name),
             name: name,
             readonly: readonly,
             disabled: disabled,
@@ -1478,23 +1498,23 @@
         formContext: formContext,
         registry: registry
       };
-      return /*#__PURE__*/React__default["default"].createElement(Template, _extends({}, templateProps, {
+      return jsxRuntime.jsx(Template, _extends({}, templateProps, {
         onAddClick: this.handleAddClick
       }));
     };
     return ObjectField;
-  }(React.Component);
+  }(react.Component);
 
   var _excluded$6 = ["__errors"];
   /** The map of component type to FieldName */
   var COMPONENT_TYPES = {
-    array: "ArrayField",
-    "boolean": "BooleanField",
-    integer: "NumberField",
-    number: "NumberField",
-    object: "ObjectField",
-    string: "StringField",
-    "null": "NullField"
+    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
@@ -1508,15 +1528,16 @@
    */
   function getFieldComponent(schema, uiOptions, idSchema, registry) {
     var field = uiOptions.field;
-    var fields = registry.fields;
-    if (typeof field === "function") {
+    var fields = registry.fields,
+      translateString = registry.translateString;
+    if (typeof field === 'function') {
       return field;
     }
-    if (typeof field === "string" && field in fields) {
+    if (typeof field === 'string' && field in fields) {
       return fields[field];
     }
     var schemaType = utils.getSchemaType(schema);
-    var type = Array.isArray(schemaType) ? schemaType[0] : schemaType || "";
+    var type = Array.isArray(schemaType) ? schemaType[0] : schemaType || '';
     var componentName = COMPONENT_TYPES[type];
     // 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
@@ -1526,11 +1547,11 @@
       };
     }
     return componentName in fields ? fields[componentName] : function () {
-      var UnsupportedFieldTemplate = utils.getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
-      return /*#__PURE__*/React__default["default"].createElement(UnsupportedFieldTemplate, {
+      var UnsupportedFieldTemplate = utils.getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
+      return jsxRuntime.jsx(UnsupportedFieldTemplate, {
         schema: schema,
         idSchema: idSchema,
-        reason: "Unknown field type " + schema.type,
+        reason: translateString(utils.TranslatableString.UnknownFieldType, [String(schema.type)]),
         registry: registry
       });
     };
@@ -1560,17 +1581,17 @@
     var formContext = registry.formContext,
       schemaUtils = registry.schemaUtils;
     var uiOptions = utils.getUiOptions(uiSchema);
-    var FieldTemplate = utils.getTemplate("FieldTemplate", registry, uiOptions);
-    var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
-    var FieldHelpTemplate = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
-    var FieldErrorTemplate = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
+    var FieldTemplate = utils.getTemplate('FieldTemplate', registry, uiOptions);
+    var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+    var FieldHelpTemplate = utils.getTemplate('FieldHelpTemplate', registry, uiOptions);
+    var FieldErrorTemplate = utils.getTemplate('FieldErrorTemplate', registry, uiOptions);
     var schema = schemaUtils.retrieveSchema(_schema, formData);
     var fieldId = _idSchema[utils.ID_KEY];
     var 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
      */
-    var handleFieldComponentChange = React__default["default"].useCallback(function (formData, newErrorSchema, id) {
+    var handleFieldComponentChange = react.useCallback(function (formData, newErrorSchema, id) {
       var theId = id || fieldId;
       return onChange(formData, newErrorSchema, theId);
     }, [fieldId, onChange]);
@@ -1589,11 +1610,11 @@
       __errors = _ref.__errors,
       fieldErrorSchema = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     // See #439: uiSchema: Don't pass consumed class names or style to child components
-    var fieldUiSchema = omit__default["default"](uiSchema, ["ui:classNames", "classNames", "ui:style"]);
+    var 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"]);
+      fieldUiSchema[utils.UI_OPTIONS_KEY] = omit__default["default"](fieldUiSchema[utils.UI_OPTIONS_KEY], ['classNames', 'style']);
     }
-    var field = /*#__PURE__*/React__default["default"].createElement(FieldComponent, _extends({}, props, {
+    var field = jsxRuntime.jsx(FieldComponent, _extends({}, props, {
       onChange: handleFieldComponentChange,
       idSchema: idSchema,
       schema: schema,
@@ -1614,12 +1635,12 @@
     } else {
       label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
     }
-    var description = uiOptions.description || props.schema.description || schema.description || "";
+    var description = uiOptions.description || props.schema.description || schema.description || '';
     var help = uiOptions.help;
-    var hidden = uiOptions.widget === "hidden";
-    var classNames = ["form-group", "field", "field-" + schema.type];
+    var hidden = uiOptions.widget === 'hidden';
+    var classNames = ['form-group', 'field', "field-" + schema.type];
     if (!hideError && __errors && __errors.length > 0) {
-      classNames.push("field-error has-error has-danger");
+      classNames.push('field-error has-error has-danger');
     }
     if (uiSchema !== null && uiSchema !== void 0 && uiSchema.classNames) {
       {
@@ -1630,7 +1651,7 @@
     if (uiOptions.classNames) {
       classNames.push(uiOptions.classNames);
     }
-    var helpComponent = /*#__PURE__*/React__default["default"].createElement(FieldHelpTemplate, {
+    var helpComponent = jsxRuntime.jsx(FieldHelpTemplate, {
       help: help,
       idSchema: idSchema,
       schema: schema,
@@ -1638,7 +1659,7 @@
       hasErrors: !hideError && __errors && __errors.length > 0,
       registry: registry
     });
-    var errorsComponent = hideError ? undefined : /*#__PURE__*/React__default["default"].createElement(FieldErrorTemplate, {
+    var errorsComponent = hideError ? undefined : jsxRuntime.jsx(FieldErrorTemplate, {
       errors: __errors,
       errorSchema: errorSchema,
       idSchema: idSchema,
@@ -1647,7 +1668,7 @@
       registry: registry
     });
     var fieldProps = {
-      description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+      description: jsxRuntime.jsx(DescriptionFieldTemplate, {
         id: utils.descriptionId(id),
         description: description,
         schema: schema,
@@ -1656,7 +1677,7 @@
       }),
       rawDescription: description,
       help: helpComponent,
-      rawHelp: typeof help === "string" ? help : undefined,
+      rawHelp: typeof help === 'string' ? help : undefined,
       errors: errorsComponent,
       rawErrors: hideError ? undefined : __errors,
       id: id,
@@ -1670,7 +1691,7 @@
       readonly: readonly,
       hideError: hideError,
       displayLabel: displayLabel,
-      classNames: classNames.join(" ").trim(),
+      classNames: classNames.join(' ').trim(),
       style: uiOptions.style,
       formContext: formContext,
       formData: formData,
@@ -1680,68 +1701,72 @@
     };
     var _AnyOfField = registry.fields.AnyOfField;
     var _OneOfField = registry.fields.OneOfField;
-    var isReplacingAnyOrOneOf = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:field"]) && (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:fieldReplacesAnyOrOneOf"]) === true;
-    return /*#__PURE__*/React__default["default"].createElement(FieldTemplate, _extends({}, fieldProps), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_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(function (_schema) {
-        return schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData);
-      }),
-      baseType: schema.type,
-      registry: registry,
-      schema: schema,
-      uiSchema: uiSchema
-    }), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_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(function (_schema) {
-        return schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData);
-      }),
-      baseType: schema.type,
-      registry: registry,
-      schema: schema,
-      uiSchema: uiSchema
-    })));
+    var 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, _extends({}, 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(function (_schema) {
+            return schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData);
+          }),
+          baseType: schema.type,
+          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(function (_schema) {
+            return schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData);
+          }),
+          baseType: schema.type,
+          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.
    */
-  var SchemaField = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose(SchemaField, _React$Component);
+  var SchemaField = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(SchemaField, _Component);
     function SchemaField() {
-      return _React$Component.apply(this, arguments) || this;
+      return _Component.apply(this, arguments) || this;
     }
     var _proto = SchemaField.prototype;
     _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
       return !utils.deepEquals(this.props, nextProps);
     };
     _proto.render = function render() {
-      return /*#__PURE__*/React__default["default"].createElement(SchemaFieldRender, _extends({}, this.props));
+      return jsxRuntime.jsx(SchemaFieldRender, _extends({}, this.props));
     };
     return SchemaField;
-  }(React__default["default"].Component);
+  }(react.Component);
 
   var _excluded$5 = ["widget", "placeholder"];
   /** The `StringField` component is used to render a schema field that represents a string type
@@ -1772,7 +1797,7 @@
       formContext = registry.formContext,
       schemaUtils = registry.schemaUtils;
     var enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema) : undefined;
-    var defaultWidget = enumOptions ? "select" : "text";
+    var defaultWidget = enumOptions ? 'select' : 'text';
     if (format && utils.hasWidget(schema, format, widgets)) {
       defaultWidget = format;
     }
@@ -1780,16 +1805,17 @@
       _getUiOptions$widget = _getUiOptions.widget,
       widget = _getUiOptions$widget === void 0 ? defaultWidget : _getUiOptions$widget,
       _getUiOptions$placeho = _getUiOptions.placeholder,
-      placeholder = _getUiOptions$placeho === void 0 ? "" : _getUiOptions$placeho,
+      placeholder = _getUiOptions$placeho === void 0 ? '' : _getUiOptions$placeho,
       options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$5);
     var Widget = utils.getWidget(schema, widget, widgets);
-    return /*#__PURE__*/React__default["default"].createElement(Widget, {
+    return jsxRuntime.jsx(Widget, {
       options: _extends({}, options, {
         enumOptions: enumOptions
       }),
       schema: schema,
       uiSchema: uiSchema,
       id: idSchema.$id,
+      name: name,
       label: title === undefined ? name : title,
       value: formData,
       onChange: onChange,
@@ -1814,7 +1840,7 @@
   function NullField(props) {
     var formData = props.formData,
       onChange = props.onChange;
-    React.useEffect(function () {
+    react.useEffect(function () {
       if (formData === undefined) {
         onChange(null);
       }
@@ -1854,8 +1880,8 @@
     if (!description || !displayLabel) {
       return null;
     }
-    var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+    var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
+    return jsxRuntime.jsx(DescriptionFieldTemplate, {
       id: utils.descriptionId(idSchema),
       description: description,
       schema: schema,
@@ -1890,39 +1916,43 @@
       flex: 1,
       paddingLeft: 6,
       paddingRight: 6,
-      fontWeight: "bold"
+      fontWeight: 'bold'
     };
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: className
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: hasToolbar ? "col-xs-9" : "col-xs-12"
-    }, children), hasToolbar && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "col-xs-3 array-item-toolbox"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "btn-group",
-      style: {
-        display: "flex",
-        justifyContent: "space-around"
-      }
-    }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
-      style: btnStyle,
-      disabled: disabled || readonly || !hasMoveUp,
-      onClick: onReorderClick(index, index - 1),
-      uiSchema: uiSchema,
-      registry: registry
-    }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
-      style: btnStyle,
-      disabled: disabled || readonly || !hasMoveDown,
-      onClick: onReorderClick(index, index + 1),
-      uiSchema: uiSchema,
-      registry: registry
-    }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-      style: btnStyle,
-      disabled: disabled || readonly,
-      onClick: onDropIndexClick(index),
-      uiSchema: uiSchema,
-      registry: registry
-    }))));
+    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
+          }), hasRemove && jsxRuntime.jsx(RemoveButton, {
+            style: btnStyle,
+            disabled: disabled || readonly,
+            onClick: onDropIndexClick(index),
+            uiSchema: uiSchema,
+            registry: registry
+          })]
+        })
+      })]
+    });
   }
 
   var _excluded$4 = ["key"];
@@ -1944,42 +1974,42 @@
       schema = props.schema,
       title = props.title;
     var uiOptions = utils.getUiOptions(uiSchema);
-    var ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-    var ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-    var ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+    var ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+    var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+    var ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
     // Button templates are not overridden in the uiSchema
     var AddButton = registry.templates.ButtonTemplates.AddButton;
-    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+    return jsxRuntime.jsxs("fieldset", {
       className: className,
-      id: idSchema.$id
-    }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
-      idSchema: idSchema,
-      title: uiOptions.title || title,
-      required: required,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
-      idSchema: idSchema,
-      description: uiOptions.description || schema.description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "row array-item-list"
-    }, items && items.map(function (_ref) {
-      var key = _ref.key,
-        itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-      return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
-        key: key
-      }, itemProps));
-    })), canAdd && /*#__PURE__*/React__default["default"].createElement(AddButton, {
-      className: "array-item-add",
-      onClick: onAddClick,
-      disabled: disabled || readonly,
-      uiSchema: uiSchema,
-      registry: registry
-    }));
+      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(function (_ref) {
+          var key = _ref.key,
+            itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+          return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, 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
@@ -2000,8 +2030,8 @@
     if (!title || !displayLabel) {
       return null;
     }
-    var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
+    var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
+    return jsxRuntime.jsx(TitleFieldTemplate, {
       id: utils.titleId(idSchema),
       title: title,
       required: required,
@@ -2011,7 +2041,7 @@
     });
   }
 
-  var _excluded$3 = ["id", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
+  var _excluded$3 = ["id", "name", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "onChangeOverride", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
   /** 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.
@@ -2027,6 +2057,7 @@
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       onChange = props.onChange,
+      onChangeOverride = props.onChangeOverride,
       options = props.options,
       schema = props.schema,
       type = props.type,
@@ -2034,51 +2065,52 @@
     // 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);
+      console.log('No id for', props);
       throw new Error("no id for props " + JSON.stringify(props));
     }
     var inputProps = _extends({}, rest, utils.getInputProps(schema, type, options));
     var inputValue;
-    if (inputProps.type === "number" || inputProps.type === "integer") {
-      inputValue = value || value === 0 ? value : "";
+    if (inputProps.type === 'number' || inputProps.type === 'integer') {
+      inputValue = value || value === 0 ? value : '';
     } else {
-      inputValue = value == null ? "" : value;
+      inputValue = value == null ? '' : value;
     }
-    var _onChange = React.useCallback(function (_ref) {
+    var _onChange = react.useCallback(function (_ref) {
       var value = _ref.target.value;
-      return onChange(value === "" ? options.emptyValue : value);
+      return onChange(value === '' ? options.emptyValue : value);
     }, [onChange, options]);
-    var _onBlur = React.useCallback(function (_ref2) {
+    var _onBlur = react.useCallback(function (_ref2) {
       var value = _ref2.target.value;
       return onBlur(id, value);
     }, [onBlur, id]);
-    var _onFocus = React.useCallback(function (_ref3) {
+    var _onFocus = react.useCallback(function (_ref3) {
       var value = _ref3.target.value;
       return onFocus(id, value);
     }, [onFocus, id]);
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _extends({
-      id: id,
-      name: id,
-      className: "form-control",
-      readOnly: readonly,
-      disabled: disabled,
-      autoFocus: autofocus,
-      value: inputValue
-    }, inputProps, {
-      list: schema.examples ? utils.examplesId(id) : undefined,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
-    })), Array.isArray(schema.examples) && /*#__PURE__*/React__default["default"].createElement("datalist", {
-      key: "datalist_" + id,
-      id: utils.examplesId(id)
-    }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
-      return /*#__PURE__*/React__default["default"].createElement("option", {
-        key: example,
-        value: example
-      });
-    })));
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("input", _extends({
+        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(function (example) {
+          return jsxRuntime.jsx("option", {
+            value: example
+          }, example);
+        })
+      }, "datalist_" + id)]
+    });
   }
 
   /** The `SubmitButton` renders a button that represent the `Submit` action on a form
@@ -2093,50 +2125,58 @@
     if (norender) {
       return null;
     }
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", _extends({
-      type: "submit"
-    }, submitButtonProps, {
-      className: "btn btn-info " + submitButtonProps.className
-    }), submitText));
+    return jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx("button", _extends({
+        type: 'submit'
+      }, submitButtonProps, {
+        className: "btn btn-info " + submitButtonProps.className,
+        children: submitText
+      }))
+    });
   }
 
   var _excluded$2 = ["iconType", "icon", "className", "uiSchema", "registry"];
   function IconButton(props) {
     var _props$iconType = props.iconType,
-      iconType = _props$iconType === void 0 ? "default" : _props$iconType,
+      iconType = _props$iconType === void 0 ? 'default' : _props$iconType,
       icon = props.icon,
       className = props.className,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
-    return /*#__PURE__*/React__default["default"].createElement("button", _extends({
-      type: "button",
+    return jsxRuntime.jsx("button", _extends({
+      type: 'button',
       className: "btn btn-" + iconType + " " + className
-    }, otherProps), /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "glyphicon glyphicon-" + icon
+    }, otherProps, {
+      children: jsxRuntime.jsx("i", {
+        className: "glyphicon glyphicon-" + icon
+      })
     }));
   }
   function MoveDownButton(props) {
-    return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
-      title: "Move down",
-      className: "array-item-move-down"
+    var translateString = props.registry.translateString;
+    return jsxRuntime.jsx(IconButton, _extends({
+      title: translateString(utils.TranslatableString.MoveDownButton),
+      className: 'array-item-move-down'
     }, props, {
-      icon: "arrow-down"
+      icon: 'arrow-down'
     }));
   }
   function MoveUpButton(props) {
-    return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
-      title: "Move up",
-      className: "array-item-move-up"
+    var translateString = props.registry.translateString;
+    return jsxRuntime.jsx(IconButton, _extends({
+      title: translateString(utils.TranslatableString.MoveUpButton),
+      className: 'array-item-move-up'
     }, props, {
-      icon: "arrow-up"
+      icon: 'arrow-up'
     }));
   }
   function RemoveButton(props) {
-    return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
-      title: "Remove",
-      className: "array-item-remove"
+    var translateString = props.registry.translateString;
+    return jsxRuntime.jsx(IconButton, _extends({
+      title: translateString(utils.TranslatableString.RemoveButton),
+      className: 'array-item-remove'
     }, props, {
-      iconType: "danger",
-      icon: "remove"
+      iconType: 'danger',
+      icon: 'remove'
     }));
   }
 
@@ -2147,19 +2187,22 @@
       onClick = _ref.onClick,
       disabled = _ref.disabled,
       registry = _ref.registry;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "row"
-    }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "col-xs-3 col-xs-offset-9 text-right " + className
-    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
-      iconType: "info",
-      icon: "plus",
-      className: "btn-add col-xs-12",
-      title: "Add",
-      onClick: onClick,
-      disabled: disabled,
-      registry: registry
-    })));
+    var translateString = registry.translateString;
+    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() {
@@ -2182,16 +2225,18 @@
     if (!description) {
       return null;
     }
-    if (typeof description === "string") {
-      return /*#__PURE__*/React__default["default"].createElement("p", {
+    if (typeof description === 'string') {
+      return jsxRuntime.jsx("p", {
         id: id,
-        className: "field-description"
-      }, description);
+        className: 'field-description',
+        children: description
+      });
     } else {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
+      return jsxRuntime.jsx("div", {
         id: id,
-        className: "field-description"
-      }, description);
+        className: 'field-description',
+        children: description
+      });
     }
   }
 
@@ -2200,24 +2245,30 @@
    * @param props - The `ErrorListProps` for this component
    */
   function ErrorList(_ref) {
-    var errors = _ref.errors;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "panel panel-danger errors"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "panel-heading"
-    }, /*#__PURE__*/React__default["default"].createElement("h3", {
-      className: "panel-title"
-    }, "Errors")), /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: "list-group"
-    }, errors.map(function (error, i) {
-      return /*#__PURE__*/React__default["default"].createElement("li", {
-        key: i,
-        className: "list-group-item text-danger"
-      }, error.stack);
-    })));
+    var errors = _ref.errors,
+      registry = _ref.registry;
+    var translateString = registry.translateString;
+    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(function (error, i) {
+          return jsxRuntime.jsx("li", {
+            className: 'list-group-item text-danger',
+            children: error.stack
+          }, i);
+        })
+      })]
+    });
   }
 
-  var REQUIRED_FIELD_SYMBOL$1 = "*";
+  var REQUIRED_FIELD_SYMBOL$1 = '*';
   /** Renders a label for a field
    *
    * @param props - The `LabelProps` for this component
@@ -2229,12 +2280,14 @@
     if (!label) {
       return null;
     }
-    return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: "control-label",
-      htmlFor: id
-    }, label, required && /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "required"
-    }, REQUIRED_FIELD_SYMBOL$1));
+    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
@@ -2255,17 +2308,20 @@
       registry = props.registry,
       uiSchema = props.uiSchema;
     var uiOptions = utils.getUiOptions(uiSchema);
-    var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+    var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
     if (hidden) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "hidden"
-      }, children);
+      return jsxRuntime.jsx("div", {
+        className: 'hidden',
+        children: children
+      });
     }
-    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, _extends({}, props), displayLabel && /*#__PURE__*/React__default["default"].createElement(Label, {
-      label: label,
-      required: required,
-      id: id
-    }), displayLabel && description ? description : null, children, errors, help);
+    return jsxRuntime.jsxs(WrapIfAdditionalTemplate, _extends({}, 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
@@ -2280,17 +2336,20 @@
       return null;
     }
     var id = utils.errorId(idSchema);
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
-      id: id,
-      className: "error-detail bs-callout bs-callout-info"
-    }, errors.filter(function (elem) {
-      return !!elem;
-    }).map(function (error, index) {
-      return /*#__PURE__*/React__default["default"].createElement("li", {
-        className: "text-danger",
-        key: index
-      }, error);
-    })));
+    return jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx("ul", {
+        id: id,
+        className: 'error-detail bs-callout bs-callout-info',
+        children: errors.filter(function (elem) {
+          return !!elem;
+        }).map(function (error, index) {
+          return jsxRuntime.jsx("li", {
+            className: 'text-danger',
+            children: error
+          }, index);
+        })
+      })
+    });
   }
 
   /** The `FieldHelpTemplate` component renders any help desired for a field
@@ -2304,16 +2363,18 @@
       return null;
     }
     var id = utils.helpId(idSchema);
-    if (typeof help === "string") {
-      return /*#__PURE__*/React__default["default"].createElement("p", {
+    if (typeof help === 'string') {
+      return jsxRuntime.jsx("p", {
         id: id,
-        className: "help-block"
-      }, help);
+        className: 'help-block',
+        children: help
+      });
     }
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return jsxRuntime.jsx("div", {
       id: id,
-      className: "help-block"
-    }, help);
+      className: 'help-block',
+      children: help
+    });
   }
 
   /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -2336,37 +2397,38 @@
       title = props.title,
       uiSchema = props.uiSchema;
     var options = utils.getUiOptions(uiSchema);
-    var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
-    var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
+    var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
+    var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
     // Button templates are not overridden in the uiSchema
     var AddButton = registry.templates.ButtonTemplates.AddButton;
-    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
-      id: idSchema.$id
-    }, (options.title || title) && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-      id: utils.titleId(idSchema),
-      title: options.title || title,
-      required: required,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), (options.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: utils.descriptionId(idSchema),
-      description: options.description || description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), properties.map(function (prop) {
-      return prop.content;
-    }), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(AddButton, {
-      className: "object-property-expand",
-      onClick: onAddClick(schema),
-      disabled: disabled || readonly,
-      uiSchema: uiSchema,
-      registry: registry
-    }));
+    return jsxRuntime.jsxs("fieldset", {
+      id: idSchema.$id,
+      children: [(options.title || title) && jsxRuntime.jsx(TitleFieldTemplate, {
+        id: utils.titleId(idSchema),
+        title: options.title || title,
+        required: required,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      }), (options.description || description) && jsxRuntime.jsx(DescriptionFieldTemplate, {
+        id: utils.descriptionId(idSchema),
+        description: options.description || description,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      }), properties.map(function (prop) {
+        return prop.content;
+      }), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(AddButton, {
+        className: 'object-property-expand',
+        onClick: onAddClick(schema),
+        disabled: disabled || readonly,
+        uiSchema: uiSchema,
+        registry: registry
+      })]
+    });
   }
 
-  var REQUIRED_FIELD_SYMBOL = "*";
+  var REQUIRED_FIELD_SYMBOL = '*';
   /** The `TitleField` is the template to use to render the title of a field
    *
    * @param props - The `TitleFieldProps` for this component
@@ -2375,11 +2437,13 @@
     var id = props.id,
       title = props.title,
       required = props.required;
-    return /*#__PURE__*/React__default["default"].createElement("legend", {
-      id: id
-    }, title, required && /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "required"
-    }, REQUIRED_FIELD_SYMBOL));
+    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
@@ -2390,10 +2454,29 @@
   function UnsupportedField(props) {
     var schema = props.schema,
       idSchema = props.idSchema,
-      reason = props.reason;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "unsupported-field"
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, "Unsupported field schema", idSchema && idSchema.$id && /*#__PURE__*/React__default["default"].createElement("span", null, " for", " field ", /*#__PURE__*/React__default["default"].createElement("code", null, idSchema.$id)), reason && /*#__PURE__*/React__default["default"].createElement("em", null, ": ", reason), "."), schema && /*#__PURE__*/React__default["default"].createElement("pre", null, JSON.stringify(schema, null, 2)));
+      reason = props.reason,
+      registry = props.registry;
+    var translateString = registry.translateString;
+    var translateEnum = utils.TranslatableString.UnsupportedField;
+    var 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
@@ -2415,51 +2498,60 @@
       children = props.children,
       uiSchema = props.uiSchema,
       registry = props.registry;
+    var templates = registry.templates,
+      translateString = registry.translateString;
     // Button templates are not overridden in the uiSchema
-    var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
-    var keyLabel = label + " Key"; // i18n ?
+    var RemoveButton = templates.ButtonTemplates.RemoveButton;
+    var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
     if (!additional) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
+      return jsxRuntime.jsx("div", {
         className: classNames,
-        style: style
-      }, children);
+        style: style,
+        children: children
+      });
     }
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return jsxRuntime.jsx("div", {
       className: classNames,
-      style: style
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "row"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "col-xs-5 form-additional"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "form-group"
-    }, /*#__PURE__*/React__default["default"].createElement(Label, {
-      label: keyLabel,
-      required: required,
-      id: id + "-key"
-    }), /*#__PURE__*/React__default["default"].createElement("input", {
-      className: "form-control",
-      type: "text",
-      id: id + "-key",
-      onBlur: function onBlur(event) {
-        return onKeyChange(event.target.value);
-      },
-      defaultValue: label
-    }))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "form-additional form-group col-xs-5"
-    }, children), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "col-xs-2"
-    }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-      className: "array-item-remove btn-block",
-      style: {
-        border: "0"
-      },
-      disabled: disabled || readonly,
-      onClick: onDropPropertyClick(label),
-      uiSchema: uiSchema,
-      registry: registry
-    }))));
+      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: function onBlur(event) {
+                return 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() {
@@ -2508,29 +2600,29 @@
       minute = state.minute,
       second = state.second;
     var data = [{
-      type: "year",
+      type: 'year',
       range: yearsRange,
       value: year
     }, {
-      type: "month",
+      type: 'month',
       range: [1, 12],
       value: month
     }, {
-      type: "day",
+      type: 'day',
       range: [1, 31],
       value: day
     }];
     if (time) {
       data.push({
-        type: "hour",
+        type: 'hour',
         range: [0, 23],
         value: hour
       }, {
-        type: "minute",
+        type: 'minute',
         range: [0, 59],
         value: minute
       }, {
-        type: "second",
+        type: 'second',
         range: [0, 59],
         value: second
       });
@@ -2543,20 +2635,22 @@
       value = _ref.value,
       select = _ref.select,
       rootId = _ref.rootId,
+      name = _ref.name,
       disabled = _ref.disabled,
       readonly = _ref.readonly,
       autofocus = _ref.autofocus,
       registry = _ref.registry,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;
-    var id = rootId + "_" + type;
+    var id = rootId + '_' + type;
     var SelectWidget = registry.widgets.SelectWidget;
-    return /*#__PURE__*/React__default["default"].createElement(SelectWidget, {
+    return jsxRuntime.jsx(SelectWidget, {
       schema: {
-        type: "integer"
+        type: 'integer'
       },
       id: id,
-      className: "form-control",
+      name: name,
+      className: 'form-control',
       options: {
         enumOptions: rangeOptions(range[0], range[1])
       },
@@ -2571,7 +2665,7 @@
       onBlur: onBlur,
       onFocus: onFocus,
       registry: registry,
-      label: "",
+      label: '',
       "aria-describedby": utils.ariaDescribedByIds(rootId)
     });
   }
@@ -2589,32 +2683,34 @@
       autofocus = _ref2$autofocus === void 0 ? false : _ref2$autofocus,
       options = _ref2.options,
       id = _ref2.id,
+      name = _ref2.name,
       registry = _ref2.registry,
       onBlur = _ref2.onBlur,
       onFocus = _ref2.onFocus,
       onChange = _ref2.onChange,
       value = _ref2.value;
-    var _useReducer = React.useReducer(function (state, action) {
+    var translateString = registry.translateString;
+    var _useReducer = react.useReducer(function (state, action) {
         return _extends({}, state, action);
       }, utils.parseDateString(value, time)),
       state = _useReducer[0],
       setState = _useReducer[1];
-    React.useEffect(function () {
+    react.useEffect(function () {
       if (value && value !== utils.toDateString(state, time)) {
         setState(utils.parseDateString(value, time));
       }
     }, [value, state, time]);
-    React.useEffect(function () {
+    react.useEffect(function () {
       if (readyForChange(state)) {
         // Only propagate to parent state if we have a complete date{time}
         onChange(utils.toDateString(state, time));
       }
     }, [state, time, onChange]);
-    var handleChange = React.useCallback(function (property, value) {
+    var handleChange = react.useCallback(function (property, value) {
       var _setState;
       setState((_setState = {}, _setState[property] = value, _setState));
     }, []);
-    var handleSetNow = React.useCallback(function (event) {
+    var handleSetNow = react.useCallback(function (event) {
       event.preventDefault();
       if (disabled || readonly) {
         return;
@@ -2622,44 +2718,50 @@
       var nowDateObj = utils.parseDateString(new Date().toJSON(), time);
       setState(nowDateObj);
     }, [disabled, readonly, time]);
-    var handleClear = React.useCallback(function (event) {
+    var handleClear = react.useCallback(function (event) {
       event.preventDefault();
       if (disabled || readonly) {
         return;
       }
-      setState(utils.parseDateString("", time));
+      setState(utils.parseDateString('', time));
       onChange(undefined);
     }, [disabled, readonly, time, onChange]);
-    return /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: "list-inline"
-    }, dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
-      return /*#__PURE__*/React__default["default"].createElement("li", {
-        className: "list-inline-item",
-        key: i
-      }, /*#__PURE__*/React__default["default"].createElement(DateElement, _extends({
-        rootId: id,
-        select: handleChange
-      }, elemProps, {
-        disabled: disabled,
-        readonly: readonly,
-        registry: registry,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        autofocus: autofocus && i === 0
-      })));
-    }), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "list-inline-item"
-    }, /*#__PURE__*/React__default["default"].createElement("a", {
-      href: "#",
-      className: "btn btn-info btn-now",
-      onClick: handleSetNow
-    }, "Now")), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "list-inline-item"
-    }, /*#__PURE__*/React__default["default"].createElement("a", {
-      href: "#",
-      className: "btn btn-warning btn-clear",
-      onClick: handleClear
-    }, "Clear")));
+    return jsxRuntime.jsxs("ul", {
+      className: 'list-inline',
+      children: [dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
+        return jsxRuntime.jsx("li", {
+          className: 'list-inline-item',
+          children: jsxRuntime.jsx(DateElement, _extends({
+            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)
+        })
+      })]
+    });
   }
 
   var _excluded$1 = ["time"];
@@ -2673,7 +2775,7 @@
       time = _ref$time === void 0 ? true : _ref$time,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     var AltDateWidget = props.registry.widgets.AltDateWidget;
-    return /*#__PURE__*/React__default["default"].createElement(AltDateWidget, _extends({
+    return jsxRuntime.jsx(AltDateWidget, _extends({
       time: time
     }, props));
   }
@@ -2698,41 +2800,46 @@
       onFocus = _ref.onFocus,
       onChange = _ref.onChange,
       registry = _ref.registry;
-    var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
+    var 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
     var required = utils.schemaRequiresTrueValue(schema);
-    var handleChange = React.useCallback(function (event) {
+    var handleChange = react.useCallback(function (event) {
       return onChange(event.target.checked);
     }, [onChange]);
-    var handleBlur = React.useCallback(function (event) {
+    var handleBlur = react.useCallback(function (event) {
       return onBlur(id, event.target.checked);
     }, [onBlur, id]);
-    var handleFocus = React.useCallback(function (event) {
+    var handleFocus = react.useCallback(function (event) {
       return onFocus(id, event.target.checked);
     }, [onFocus, id]);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "checkbox " + (disabled || readonly ? "disabled" : "")
-    }, schema.description && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: utils.descriptionId(id),
-      description: schema.description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement("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)
-    }), /*#__PURE__*/React__default["default"].createElement("span", null, label)));
+    return jsxRuntime.jsxs("div", {
+      className: "checkbox " + (disabled || readonly ? 'disabled' : ''),
+      children: [schema.description && jsxRuntime.jsx(DescriptionFieldTemplate, {
+        id: utils.descriptionId(id),
+        description: schema.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)
+        }), jsxRuntime.jsx("span", {
+          children: label
+        })]
+      })]
+    });
   }
 
   /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
@@ -2757,49 +2864,56 @@
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;
     var checkboxesValues = Array.isArray(value) ? value : [value];
-    var handleBlur = React.useCallback(function (_ref2) {
+    var handleBlur = react.useCallback(function (_ref2) {
       var value = _ref2.target.value;
       return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
     }, [onBlur, id]);
-    var handleFocus = React.useCallback(function (_ref3) {
+    var handleFocus = react.useCallback(function (_ref3) {
       var value = _ref3.target.value;
       return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
     }, [onFocus, id]);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "checkboxes",
-      id: id
-    }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-      var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
-      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-      var handleChange = function handleChange(event) {
-        if (event.target.checked) {
-          onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
-        } else {
-          onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
-        }
-      };
-      var checkbox = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("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)
-      }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
-      return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
-        key: index,
-        className: "checkbox-inline " + disabledCls
-      }, checkbox) : /*#__PURE__*/React__default["default"].createElement("div", {
-        key: index,
-        className: "checkbox " + disabledCls
-      }, /*#__PURE__*/React__default["default"].createElement("label", null, checkbox));
-    }));
+    return jsxRuntime.jsx("div", {
+      className: 'checkboxes',
+      id: id,
+      children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+        var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
+        var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        var disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
+        var handleChange = function handleChange(event) {
+          if (event.target.checked) {
+            onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+          } else {
+            onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+          }
+        };
+        var 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
@@ -2812,9 +2926,9 @@
       readonly = props.readonly,
       options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "color"
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'color'
     }, props, {
       disabled: disabled || readonly
     }));
@@ -2829,12 +2943,12 @@
     var onChange = props.onChange,
       options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    var handleChange = React.useCallback(function (value) {
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    var handleChange = react.useCallback(function (value) {
       return onChange(value || undefined);
     }, [onChange]);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "date"
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'date'
     }, props, {
       onChange: handleChange
     }));
@@ -2850,9 +2964,9 @@
       value = props.value,
       options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "datetime-local"
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'datetime-local'
     }, props, {
       value: utils.utcToLocal(value),
       onChange: function onChange(value) {
@@ -2868,9 +2982,9 @@
   function EmailWidget(props) {
     var options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "email"
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'email'
     }, props));
   }
 
@@ -2878,7 +2992,7 @@
     if (dataURL === null) {
       return null;
     }
-    return dataURL.replace(";base64", ";name=" + encodeURIComponent(name) + ";base64");
+    return dataURL.replace(';base64', ";name=" + encodeURIComponent(name) + ";base64");
   }
   function processFile(file) {
     var name = file.name,
@@ -2889,7 +3003,7 @@
       reader.onerror = reject;
       reader.onload = function (event) {
         var _event$target;
-        if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === "string") {
+        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: name,
@@ -2912,24 +3026,29 @@
     return Promise.all(Array.from(files).map(processFile));
   }
   function FilesInfo(_ref) {
-    var filesInfo = _ref.filesInfo;
+    var filesInfo = _ref.filesInfo,
+      registry = _ref.registry;
     if (filesInfo.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: "file-info"
-    }, filesInfo.map(function (fileInfo, key) {
-      var name = fileInfo.name,
-        size = fileInfo.size,
-        type = fileInfo.type;
-      return /*#__PURE__*/React__default["default"].createElement("li", {
-        key: key
-      }, /*#__PURE__*/React__default["default"].createElement("strong", null, name), " (", type, ", ", size, " bytes)");
-    }));
+    var translateString = registry.translateString;
+    return jsxRuntime.jsx("ul", {
+      className: 'file-info',
+      children: filesInfo.map(function (fileInfo, key) {
+        var name = fileInfo.name,
+          size = fileInfo.size,
+          type = fileInfo.type;
+        return jsxRuntime.jsx("li", {
+          children: jsxRuntime.jsx(Markdown__default["default"], {
+            children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)])
+          })
+        }, key);
+      })
+    });
   }
   function extractFileInfo(dataURLs) {
     return dataURLs.filter(function (dataURL) {
-      return typeof dataURL !== "undefined";
+      return dataURL;
     }).map(function (dataURL) {
       var _dataURItoBlob = utils.dataURItoBlob(dataURL),
         blob = _dataURItoBlob.blob,
@@ -2945,23 +3064,22 @@
    *  The `FileWidget` is a widget for rendering file upload fields.
    *  It is typically used with a string property with data-url format.
    */
-  function FileWidget(_ref2) {
-    var multiple = _ref2.multiple,
-      id = _ref2.id,
-      readonly = _ref2.readonly,
-      disabled = _ref2.disabled,
-      onChange = _ref2.onChange,
-      value = _ref2.value,
-      _ref2$autofocus = _ref2.autofocus,
-      autofocus = _ref2$autofocus === void 0 ? false : _ref2$autofocus,
-      options = _ref2.options;
-    var extractedFilesInfo = React.useMemo(function () {
+  function FileWidget(props) {
+    var disabled = props.disabled,
+      readonly = props.readonly,
+      multiple = props.multiple,
+      onChange = props.onChange,
+      value = props.value,
+      options = props.options,
+      registry = props.registry;
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    var extractedFilesInfo = react.useMemo(function () {
       return Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]);
     }, [value]);
-    var _useState = React.useState(extractedFilesInfo),
+    var _useState = react.useState(extractedFilesInfo),
       filesInfo = _useState[0],
       setFilesInfo = _useState[1];
-    var handleChange = React.useCallback(function (event) {
+    var handleChange = react.useCallback(function (event) {
       if (!event.target.files) {
         return;
       }
@@ -2977,20 +3095,18 @@
         }
       });
     }, [multiple, onChange]);
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", null, /*#__PURE__*/React__default["default"].createElement("input", {
-      id: id,
-      name: id,
-      type: "file",
-      disabled: readonly || disabled,
-      onChange: handleChange,
-      defaultValue: "",
-      autoFocus: autofocus,
-      multiple: multiple,
-      accept: options.accept ? String(options.accept) : undefined,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    })), /*#__PURE__*/React__default["default"].createElement(FilesInfo, {
-      filesInfo: filesInfo
-    }));
+    return jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsx(BaseInputTemplate, _extends({}, props, {
+        disabled: disabled || readonly,
+        type: 'file',
+        onChangeOverride: handleChange,
+        value: '',
+        accept: options.accept ? String(options.accept) : undefined
+      })), jsxRuntime.jsx(FilesInfo, {
+        filesInfo: filesInfo,
+        registry: registry
+      })]
+    });
   }
 
   /** The `HiddenWidget` is a widget for rendering a hidden input field.
@@ -3001,11 +3117,11 @@
   function HiddenWidget(_ref) {
     var id = _ref.id,
       value = _ref.value;
-    return /*#__PURE__*/React__default["default"].createElement("input", {
-      type: "hidden",
+    return jsxRuntime.jsx("input", {
+      type: 'hidden',
       id: id,
       name: id,
-      value: typeof value === "undefined" ? "" : value
+      value: typeof value === 'undefined' ? '' : value
     });
   }
 
@@ -3016,9 +3132,9 @@
   function PasswordWidget(props) {
     var options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "password"
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'password'
     }, props));
   }
 
@@ -3045,46 +3161,53 @@
       enumDisabled = options.enumDisabled,
       inline = options.inline,
       emptyValue = options.emptyValue;
-    var handleBlur = React.useCallback(function (_ref2) {
+    var handleBlur = react.useCallback(function (_ref2) {
       var value = _ref2.target.value;
       return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
     }, [onBlur, id]);
-    var handleFocus = React.useCallback(function (_ref3) {
+    var handleFocus = react.useCallback(function (_ref3) {
       var value = _ref3.target.value;
       return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
     }, [onFocus, id]);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "field-radio-group",
-      id: id
-    }, Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
-      var checked = utils.enumOptionsIsSelected(option.value, value);
-      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-      var handleChange = function handleChange() {
-        return onChange(option.value);
-      };
-      var radio = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
-        type: "radio",
-        id: utils.optionId(id, i),
-        checked: checked,
-        name: name,
-        required: required,
-        value: String(i),
-        disabled: disabled || itemDisabled || readonly,
-        autoFocus: autofocus && i === 0,
-        onChange: handleChange,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        "aria-describedby": utils.ariaDescribedByIds(id)
-      }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
-      return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
-        key: i,
-        className: "radio-inline " + disabledCls
-      }, radio) : /*#__PURE__*/React__default["default"].createElement("div", {
-        key: i,
-        className: "radio " + disabledCls
-      }, /*#__PURE__*/React__default["default"].createElement("label", null, radio));
-    }));
+    return jsxRuntime.jsx("div", {
+      className: 'field-radio-group',
+      id: id,
+      children: Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
+        var checked = utils.enumOptionsIsSelected(option.value, value);
+        var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        var disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
+        var handleChange = function handleChange() {
+          return onChange(option.value);
+        };
+        var radio = jsxRuntime.jsxs("span", {
+          children: [jsxRuntime.jsx("input", {
+            type: 'radio',
+            id: utils.optionId(id, i),
+            checked: checked,
+            name: name,
+            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
@@ -3095,13 +3218,15 @@
   function RangeWidget(props) {
     var value = props.value,
       BaseInputTemplate = props.registry.templates.BaseInputTemplate;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "field-range-wrapper"
-    }, /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "range"
-    }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "range-view"
-    }, value));
+    return jsxRuntime.jsxs("div", {
+      className: 'field-range-wrapper',
+      children: [jsxRuntime.jsx(BaseInputTemplate, _extends({
+        type: 'range'
+      }, props)), jsxRuntime.jsx("span", {
+        className: 'range-view',
+        children: value
+      })]
+    });
   }
 
   function getValue(event, multiple) {
@@ -3138,45 +3263,47 @@
     var enumOptions = options.enumOptions,
       enumDisabled = options.enumDisabled,
       optEmptyVal = options.emptyValue;
-    var emptyValue = multiple ? [] : "";
-    var handleFocus = React.useCallback(function (event) {
+    var emptyValue = multiple ? [] : '';
+    var handleFocus = react.useCallback(function (event) {
       var newValue = getValue(event, multiple);
       return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
     }, [onFocus, id, schema, multiple, options]);
-    var handleBlur = React.useCallback(function (event) {
+    var handleBlur = react.useCallback(function (event) {
       var newValue = getValue(event, multiple);
       return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
     }, [onBlur, id, schema, multiple, options]);
-    var handleChange = React.useCallback(function (event) {
+    var handleChange = react.useCallback(function (event) {
       var newValue = getValue(event, multiple);
       return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
     }, [onChange, schema, multiple, options]);
     var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
-    return /*#__PURE__*/React__default["default"].createElement("select", {
+    return jsxRuntime.jsxs("select", {
       id: id,
       name: id,
       multiple: multiple,
-      className: "form-control",
-      value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+      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)
-    }, !multiple && schema["default"] === undefined && /*#__PURE__*/React__default["default"].createElement("option", {
-      value: ""
-    }, placeholder), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, i) {
-      var value = _ref2.value,
-        label = _ref2.label;
-      var disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
-      return /*#__PURE__*/React__default["default"].createElement("option", {
-        key: i,
-        value: String(i),
-        disabled: disabled
-      }, label);
-    }));
+      "aria-describedby": utils.ariaDescribedByIds(id),
+      children: [!multiple && schema["default"] === undefined && jsxRuntime.jsx("option", {
+        value: '',
+        children: placeholder
+      }), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, i) {
+        var value = _ref2.value,
+          label = _ref2.label;
+        var 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.
@@ -3197,23 +3324,23 @@
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;
-    var handleChange = React.useCallback(function (_ref2) {
+    var handleChange = react.useCallback(function (_ref2) {
       var value = _ref2.target.value;
-      return onChange(value === "" ? options.emptyValue : value);
+      return onChange(value === '' ? options.emptyValue : value);
     }, [onChange, options.emptyValue]);
-    var handleBlur = React.useCallback(function (_ref3) {
+    var handleBlur = react.useCallback(function (_ref3) {
       var value = _ref3.target.value;
       return onBlur(id, value);
     }, [onBlur, id]);
-    var handleFocus = React.useCallback(function (_ref4) {
+    var handleFocus = react.useCallback(function (_ref4) {
       var value = _ref4.target.value;
       return onFocus(id, value);
     }, [id, onFocus]);
-    return /*#__PURE__*/React__default["default"].createElement("textarea", {
+    return jsxRuntime.jsx("textarea", {
       id: id,
       name: id,
-      className: "form-control",
-      value: value ? value : "",
+      className: 'form-control',
+      value: value ? value : '',
       placeholder: placeholder,
       required: required,
       disabled: disabled,
@@ -3238,8 +3365,8 @@
   function TextWidget(props) {
     var options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({}, props));
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({}, props));
   }
 
   /** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
@@ -3249,9 +3376,9 @@
   function URLWidget(props) {
     var options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "url"
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'url'
     }, props));
   }
 
@@ -3262,9 +3389,9 @@
   function UpDownWidget(props) {
     var options = props.options,
       registry = props.registry;
-    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-      type: "number"
+    var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
+    return jsxRuntime.jsx(BaseInputTemplate, _extends({
+      type: 'number'
     }, props));
   }
 
@@ -3301,7 +3428,8 @@
       templates: templates(),
       widgets: widgets(),
       rootSchema: {},
-      formContext: {}
+      formContext: {},
+      translateString: utils.englishStringTranslator
     };
   }
 
@@ -3324,7 +3452,7 @@
       _this.formElement = void 0;
       _this.getUsedFormData = function (formData, fields) {
         // For the case of a single input form
-        if (fields.length === 0 && typeof formData !== "object") {
+        if (fields.length === 0 && typeof formData !== 'object') {
           return formData;
         }
         // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
@@ -3345,22 +3473,22 @@
             paths = [[]];
           }
           Object.keys(_obj).forEach(function (key) {
-            if (typeof _obj[key] === "object") {
+            if (typeof _obj[key] === 'object') {
               var newPaths = paths.map(function (path) {
                 return [].concat(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] !== "") {
+              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] !== "") {
+            } else if (key === utils.NAME_KEY && _obj[key] !== '') {
               paths.forEach(function (path) {
                 var 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)) {
+                if (typeof formValue !== 'object' || isEmpty__default["default"](formValue)) {
                   acc.push(path);
                 }
               });
@@ -3393,7 +3521,7 @@
         var newFormData = formData;
         if (omitExtraData === true && liveOmit === true) {
           var retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-          var pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+          var pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
           var fieldNames = _this.getFieldNames(pathSchema, formData);
           newFormData = _this.getUsedFormData(formData, fieldNames);
           state = {
@@ -3419,7 +3547,7 @@
             schemaValidationErrorSchema: schemaValidationErrorSchema
           };
         } else if (!noValidate && newErrorSchema) {
-          var _errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+          var _errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates') : newErrorSchema;
           state = {
             formData: newFormData,
             errorSchema: _errorSchema,
@@ -3459,7 +3587,7 @@
           schemaUtils = _this$state2.schemaUtils;
         if (omitExtraData === true) {
           var retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-          var pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
+          var pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', newFormData);
           var fieldNames = _this.getFieldNames(pathSchema, newFormData);
           newFormData = _this.getUsedFormData(newFormData, fieldNames);
         }
@@ -3478,20 +3606,20 @@
             if (onSubmit) {
               onSubmit(_extends({}, _this.state, {
                 formData: newFormData,
-                status: "submitted"
+                status: 'submitted'
               }), event);
             }
           });
         }
       };
       if (!props.validator) {
-        throw new Error("A validator is required for Form functionality to work");
+        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__default["default"].createRef();
+      _this.formElement = /*#__PURE__*/react.createRef();
       return _this;
     }
     /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
@@ -3518,10 +3646,10 @@
      */;
     _proto.getStateFromProps = function getStateFromProps(props, inputFormData) {
       var state = this.state || {};
-      var schema = "schema" in props ? props.schema : this.props.schema;
-      var uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
-      var edit = typeof inputFormData !== "undefined";
-      var liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
+      var schema = 'schema' in props ? props.schema : this.props.schema;
+      var uiSchema = ('uiSchema' in props ? props.uiSchema : this.props.uiSchema) || {};
+      var edit = typeof inputFormData !== 'undefined';
+      var liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
       var mustValidate = edit && !props.noValidate && liveValidate;
       var rootSchema = schema;
       var schemaUtils = state.schemaUtils;
@@ -3570,7 +3698,7 @@
         errorSchema = merged.errorSchema;
         errors = merged.errors;
       }
-      var idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema["ui:rootFieldId"], formData, props.idPrefix, props.idSeparator);
+      var idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema['ui:rootFieldId'], formData, props.idPrefix, props.idSeparator);
       var nextState = {
         schemaUtils: schemaUtils,
         schema: schema,
@@ -3622,14 +3750,15 @@
         uiSchema = _this$state3.uiSchema;
       var formContext = this.props.formContext;
       var options = utils.getUiOptions(uiSchema);
-      var ErrorListTemplate = utils.getTemplate("ErrorListTemplate", registry, options);
+      var ErrorListTemplate = utils.getTemplate('ErrorListTemplate', registry, options);
       if (errors && errors.length) {
-        return /*#__PURE__*/React__default["default"].createElement(ErrorListTemplate, {
+        return jsxRuntime.jsx(ErrorListTemplate, {
           errors: errors,
           errorSchema: errorSchema || {},
           schema: schema,
           uiSchema: uiSchema,
-          formContext: formContext
+          formContext: formContext,
+          registry: registry
         });
       }
       return null;
@@ -3642,12 +3771,14 @@
     /** Returns the registry for the form */
     _proto.getRegistry = function getRegistry() {
       var _this$props$templates;
+      var customTranslateString = this.props.translateString;
       var schemaUtils = this.state.schemaUtils;
       var _getDefaultRegistry = getDefaultRegistry(),
         fields = _getDefaultRegistry.fields,
         templates = _getDefaultRegistry.templates,
         widgets = _getDefaultRegistry.widgets,
-        formContext = _getDefaultRegistry.formContext;
+        formContext = _getDefaultRegistry.formContext,
+        translateString = _getDefaultRegistry.translateString;
       return {
         fields: _extends({}, fields, this.props.fields),
         templates: _extends({}, templates, this.props.templates, {
@@ -3656,13 +3787,14 @@
         widgets: _extends({}, widgets, this.props.widgets),
         rootSchema: this.props.schema,
         formContext: this.props.formContext || formContext,
-        schemaUtils: schemaUtils
+        schemaUtils: schemaUtils,
+        translateString: customTranslateString || translateString
       };
     }
     /** Provides a function that can be used to programmatically submit the `Form` */;
     _proto.submit = function submit() {
       if (this.formElement.current) {
-        this.formElement.current.dispatchEvent(new CustomEvent("submit", {
+        this.formElement.current.dispatchEvent(new CustomEvent('submit', {
           cancelable: true
         }));
         this.formElement.current.requestSubmit();
@@ -3677,12 +3809,12 @@
     _proto.focusOnError = function focusOnError(error) {
       var _this$props4 = this.props,
         _this$props4$idPrefix = _this$props4.idPrefix,
-        idPrefix = _this$props4$idPrefix === void 0 ? "root" : _this$props4$idPrefix,
+        idPrefix = _this$props4$idPrefix === void 0 ? 'root' : _this$props4$idPrefix,
         _this$props4$idSepara = _this$props4.idSeparator,
-        idSeparator = _this$props4$idSepara === void 0 ? "_" : _this$props4$idSepara;
+        idSeparator = _this$props4$idSepara === void 0 ? '_' : _this$props4$idSepara;
       var property = error.property;
       var path = _toPath__default["default"](property);
-      if (path[0] === "") {
+      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 {
@@ -3734,7 +3866,7 @@
           if (onError) {
             onError(errors);
           } else {
-            console.error("Form validation failed", errors);
+            console.error('Form validation failed', errors);
           }
         });
         return false;
@@ -3751,7 +3883,7 @@
         idPrefix = _this$props6.idPrefix,
         idSeparator = _this$props6.idSeparator,
         _this$props6$classNam = _this$props6.className,
-        className = _this$props6$classNam === void 0 ? "" : _this$props6$classNam,
+        className = _this$props6$classNam === void 0 ? '' : _this$props6$classNam,
         tagName = _this$props6.tagName,
         name = _this$props6.name,
         method = _this$props6.method,
@@ -3768,7 +3900,7 @@
         readonly = _this$props6$readonly === void 0 ? false : _this$props6$readonly,
         formContext = _this$props6.formContext,
         _this$props6$showErro = _this$props6.showErrorList,
-        showErrorList = _this$props6$showErro === void 0 ? "top" : _this$props6$showErro,
+        showErrorList = _this$props6$showErro === void 0 ? 'top' : _this$props6$showErro,
         _internalFormWrapper = _this$props6._internalFormWrapper;
       var _this$state4 = this.state,
         schema = _this$state4.schema,
@@ -3783,9 +3915,9 @@
       // 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
       var as = _internalFormWrapper ? tagName : undefined;
-      var FormTag = _internalFormWrapper || tagName || "form";
-      return /*#__PURE__*/React__default["default"].createElement(FormTag, {
-        className: className ? className : "rjsf",
+      var FormTag = _internalFormWrapper || tagName || 'form';
+      return jsxRuntime.jsxs(FormTag, {
+        className: className ? className : 'rjsf',
         id: id,
         name: name,
         method: method,
@@ -3797,35 +3929,36 @@
         noValidate: noHtml5Validate,
         onSubmit: this.onSubmit,
         as: as,
-        ref: this.formElement
-      }, showErrorList === "top" && this.renderErrors(registry), /*#__PURE__*/React__default["default"].createElement(_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 : /*#__PURE__*/React__default["default"].createElement(SubmitButton, {
-        uiSchema: uiSchema,
-        registry: registry
-      }), showErrorList === "bottom" && this.renderErrors(registry));
+        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: uiSchema,
+          registry: registry
+        }), showErrorList === 'bottom' && this.renderErrors(registry)]
+      });
     };
     return Form;
-  }(React.Component);
+  }(react.Component);
 
   var _excluded = ["fields", "widgets", "templates"];
   /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
   function withTheme(themeProps) {
-    return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    return /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       var _themeProps$templates, _templates;
       var fields = _ref.fields,
         widgets = _ref.widgets,
@@ -3836,7 +3969,7 @@
       templates = _extends({}, themeProps === null || themeProps === void 0 ? void 0 : themeProps.templates, templates, {
         ButtonTemplates: _extends({}, 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 /*#__PURE__*/React__default["default"].createElement(Form, _extends({}, themeProps, directProps, {
+      return jsxRuntime.jsx(Form, _extends({}, themeProps, directProps, {
         fields: fields,
         widgets: widgets,
         templates: templates,