@rjsf/chakra-ui 5.0.0-beta.8 → 5.0.0

package/dist/chakra-ui.cjs.development.js

@@ -41,56 +41,54 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
-var AddButton = function AddButton(props) {
+var _excluded$2 = ["uiSchema", "registry"];
+function AddButton(_ref) {
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return React__default["default"].createElement(react.Button, _extends({
     leftIcon: React__default["default"].createElement(icons.AddIcon, null)
   }, props), "Add Item");
-};
+}
 
-var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
+function ArrayFieldItemTemplate(props) {
   var children = props.children,
-      disabled = props.disabled,
-      hasToolbar = props.hasToolbar,
-      hasMoveDown = props.hasMoveDown,
-      hasMoveUp = props.hasMoveUp,
-      hasRemove = props.hasRemove,
-      index = props.index,
-      onDropIndexClick = props.onDropIndexClick,
-      onReorderClick = props.onReorderClick,
-      readonly = props.readonly,
-      registry = props.registry;
+    disabled = props.disabled,
+    hasToolbar = props.hasToolbar,
+    hasMoveDown = props.hasMoveDown,
+    hasMoveUp = props.hasMoveUp,
+    hasRemove = props.hasRemove,
+    index = props.index,
+    onDropIndexClick = props.onDropIndexClick,
+    onReorderClick = props.onReorderClick,
+    readonly = props.readonly,
+    uiSchema = props.uiSchema,
+    registry = props.registry;
   var _registry$templates$B = registry.templates.ButtonTemplates,
-      MoveDownButton = _registry$templates$B.MoveDownButton,
-      MoveUpButton = _registry$templates$B.MoveUpButton,
-      RemoveButton = _registry$templates$B.RemoveButton;
+    MoveDownButton = _registry$templates$B.MoveDownButton,
+    MoveUpButton = _registry$templates$B.MoveUpButton,
+    RemoveButton = _registry$templates$B.RemoveButton;
   var onRemoveClick = React.useMemo(function () {
     return onDropIndexClick(index);
   }, [index, onDropIndexClick]);
@@ -110,53 +108,59 @@ var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
     mb: 1
   }, (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveUpButton, {
     disabled: disabled || readonly || !hasMoveUp,
-    onClick: onArrowUpClick
+    onClick: onArrowUpClick,
+    uiSchema: uiSchema,
+    registry: registry
   }), (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveDownButton, {
     disabled: disabled || readonly || !hasMoveDown,
-    onClick: onArrowDownClick
+    onClick: onArrowDownClick,
+    uiSchema: uiSchema,
+    registry: registry
   }), hasRemove && React__default["default"].createElement(RemoveButton, {
     disabled: disabled || readonly,
-    onClick: onRemoveClick
+    onClick: onRemoveClick,
+    uiSchema: uiSchema,
+    registry: registry
   }))));
-};
+}
 
 var _excluded$1 = ["key"];
-
-var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
+function ArrayFieldTemplate(props) {
   var canAdd = props.canAdd,
-      disabled = props.disabled,
-      idSchema = props.idSchema,
-      uiSchema = props.uiSchema,
-      items = props.items,
-      onAddClick = props.onAddClick,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      schema = props.schema,
-      title = props.title;
+    disabled = props.disabled,
+    idSchema = props.idSchema,
+    uiSchema = props.uiSchema,
+    items = props.items,
+    onAddClick = props.onAddClick,
+    readonly = props.readonly,
+    registry = props.registry,
+    required = props.required,
+    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); // Button templates are not overridden in the uiSchema
-
+  var ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(ArrayFieldTitleTemplate, {
     idSchema: idSchema,
     title: uiOptions.title || title,
+    schema: schema,
     uiSchema: uiSchema,
     required: required,
     registry: registry
-  }), (uiOptions.description || schema.description) && React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+  }), React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
     idSchema: idSchema,
     description: uiOptions.description || schema.description,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), React__default["default"].createElement(react.Grid, {
     key: "array-item-list-" + idSchema.$id
   }, React__default["default"].createElement(react.GridItem, null, items.length > 0 && items.map(function (_ref) {
     var key = _ref.key,
-        itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     return React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
       key: key
     }, itemProps));
@@ -167,13 +171,15 @@ var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
   }, React__default["default"].createElement(AddButton, {
     className: "array-item-add",
     onClick: onAddClick,
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema,
+    registry: registry
   })))));
-};
+}
 
 function getChakra(_ref) {
   var _ref$uiSchema = _ref.uiSchema,
-      uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
+    uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
   var chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
   Object.keys(chakraProps).forEach(function (key) {
     /**
@@ -190,45 +196,41 @@ function getChakra(_ref) {
   return chakraProps;
 }
 
-var BaseInputTemplate = function BaseInputTemplate(props) {
+function BaseInputTemplate(props) {
   var id = props.id,
-      type = props.type,
-      value = props.value,
-      label = props.label,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      options = props.options,
-      required = props.required,
-      readonly = props.readonly,
-      rawErrors = props.rawErrors,
-      autofocus = props.autofocus,
-      placeholder = props.placeholder,
-      disabled = props.disabled,
-      registry = props.registry;
+    type = props.type,
+    value = props.value,
+    label = props.label,
+    schema = props.schema,
+    uiSchema = props.uiSchema,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    options = props.options,
+    required = props.required,
+    readonly = props.readonly,
+    rawErrors = props.rawErrors,
+    autofocus = props.autofocus,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    registry = props.registry;
   var inputProps = utils.getInputProps(schema, type, options);
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
   var schemaUtils = registry.schemaUtils;
-
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
     return onChange(value === "" ? options.emptyValue : value);
   };
-
   var _onBlur = function _onBlur(_ref2) {
     var value = _ref2.target.value;
     return onBlur(id, value);
   };
-
   var _onFocus = function _onFocus(_ref3) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   return React__namespace.createElement(react.FormControl, _extends({
     mb: 1
@@ -250,25 +252,24 @@ var BaseInputTemplate = function BaseInputTemplate(props) {
     autoFocus: autofocus,
     placeholder: placeholder
   }, inputProps, {
-    list: schema.examples ? "examples_" + id : undefined
-  })), schema.examples ? React__namespace.createElement("datalist", {
-    id: "examples_" + id
-  }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
+    list: schema.examples ? utils.examplesId(id) : undefined,
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+  })), Array.isArray(schema.examples) ? React__namespace.createElement("datalist", {
+    id: utils.examplesId(id)
+  }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
     return React__namespace.createElement("option", {
       key: example,
       value: example
     });
   })) : null);
-};
+}
 
-var DescriptionField = function DescriptionField(_ref) {
+function DescriptionField(_ref) {
   var description = _ref.description,
-      id = _ref.id;
-
+    id = _ref.id;
   if (!description) {
     return null;
   }
-
   if (typeof description === "string") {
     return React__default["default"].createElement(react.Text, {
       id: id,
@@ -276,11 +277,10 @@ var DescriptionField = function DescriptionField(_ref) {
       mb: 4
     }, description);
   }
-
   return React__default["default"].createElement(React__default["default"].Fragment, null, description);
-};
+}
 
-var ErrorList = function ErrorList(_ref) {
+function ErrorList(_ref) {
   var errors = _ref.errors;
   return React__default["default"].createElement(react.Alert, {
     flexDirection: "column",
@@ -295,41 +295,37 @@ var ErrorList = function ErrorList(_ref) {
       color: "red.500"
     }), error.stack);
   })));
-};
-
-var _excluded = ["icon", "iconType"];
-/**
- * props used in Template:
- * icon, tabIndex, disabled, onClick
- */
+}
 
-var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
+var _excluded = ["icon", "iconType", "uiSchema", "registry"];
+function ChakraIconButton(props) {
   var icon = props.icon,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return React__default["default"].createElement(react.IconButton, _extends({
     "aria-label": props.title
   }, otherProps, {
     icon: icon
   }));
-});
+}
 ChakraIconButton.displayName = "ChakraIconButton";
+var ChakraIconButton$1 = /*#__PURE__*/React__default["default"].memo(ChakraIconButton);
+
 function MoveDownButton(props) {
-  return React__default["default"].createElement(ChakraIconButton, _extends({
+  return React__default["default"].createElement(ChakraIconButton$1, _extends({
     title: "Move down"
   }, props, {
     icon: React__default["default"].createElement(icons.ArrowDownIcon, null)
   }));
 }
 function MoveUpButton(props) {
-  return React__default["default"].createElement(ChakraIconButton, _extends({
+  return React__default["default"].createElement(ChakraIconButton$1, _extends({
     title: "Move up"
   }, props, {
     icon: React__default["default"].createElement(icons.ArrowUpIcon, null)
   }));
 }
 function RemoveButton(props) {
-  return React__default["default"].createElement(ChakraIconButton, _extends({
+  return React__default["default"].createElement(ChakraIconButton$1, _extends({
     title: "Remove"
   }, props, {
     icon: React__default["default"].createElement(icons.DeleteIcon, null)
@@ -340,17 +336,14 @@ function RemoveButton(props) {
  *
  * @param props - The `FieldErrorProps` for the errors being rendered
  */
-
 function FieldErrorTemplate(props) {
   var _props$errors = props.errors,
-      errors = _props$errors === void 0 ? [] : _props$errors,
-      idSchema = props.idSchema;
-
+    errors = _props$errors === void 0 ? [] : _props$errors,
+    idSchema = props.idSchema;
   if (errors.length === 0) {
     return null;
   }
-
-  var id = idSchema.$id + "__error";
+  var id = utils.errorId(idSchema);
   return React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
     return React__default["default"].createElement(react.ListItem, {
       key: i
@@ -364,93 +357,41 @@ function FieldErrorTemplate(props) {
  *
  * @param props - The `FieldHelpProps` to be rendered
  */
-
 function FieldHelpTemplate(props) {
   var idSchema = props.idSchema,
-      help = props.help;
-
+    help = props.help;
   if (!help) {
     return null;
   }
-
-  var id = idSchema.$id + "__help";
+  var id = utils.helpId(idSchema);
   return React__default["default"].createElement(react.FormHelperText, {
     id: id
   }, help);
 }
 
-var WrapIfAdditional = function WrapIfAdditional(props) {
-  var children = props.children,
-      classNames = props.classNames,
-      disabled = props.disabled,
-      id = props.id,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      schema = props.schema;
-  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
-  var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-
-  if (!additional) {
-    return React__default["default"].createElement("div", {
-      className: classNames
-    }, children);
-  }
-
-  var keyLabel = label + " Key";
-
-  var handleBlur = function handleBlur(_ref) {
-    var target = _ref.target;
-    return onKeyChange(target.value);
-  };
-
-  return React__default["default"].createElement(react.Grid, {
-    key: id + "-key",
-    className: classNames,
-    alignItems: "center",
-    gap: 2
-  }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
-    isRequired: required
-  }, React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id + "-key",
-    id: id + "-key-label"
-  }, keyLabel), React__default["default"].createElement(react.Input, {
-    defaultValue: label,
-    disabled: disabled || readonly,
-    id: id + "-key",
-    name: id + "-key",
-    onBlur: !readonly ? handleBlur : undefined,
-    type: "text",
-    mb: 1
-  }))), React__default["default"].createElement(react.GridItem, null, children), React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(RemoveButton, {
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label)
-  })));
-};
-
-var FieldTemplate = function FieldTemplate(props) {
+function FieldTemplate(props) {
   var id = props.id,
-      children = props.children,
-      classNames = props.classNames,
-      disabled = props.disabled,
-      displayLabel = props.displayLabel,
-      hidden = props.hidden,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      errors = props.errors,
-      help = props.help,
-      rawDescription = props.rawDescription,
-      schema = props.schema;
-
+    children = props.children,
+    classNames = props.classNames,
+    style = props.style,
+    disabled = props.disabled,
+    displayLabel = props.displayLabel,
+    hidden = props.hidden,
+    label = props.label,
+    onDropPropertyClick = props.onDropPropertyClick,
+    onKeyChange = props.onKeyChange,
+    readonly = props.readonly,
+    registry = props.registry,
+    required = props.required,
+    _props$rawErrors = props.rawErrors,
+    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+    errors = props.errors,
+    help = props.help,
+    rawDescription = props.rawDescription,
+    schema = props.schema,
+    uiSchema = props.uiSchema;
+  var uiOptions = utils.getUiOptions(uiSchema);
+  var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
   if (hidden) {
     return React__default["default"].createElement("div", {
       style: {
@@ -458,9 +399,9 @@ var FieldTemplate = function FieldTemplate(props) {
       }
     }, children);
   }
-
-  return React__default["default"].createElement(WrapIfAdditional, {
+  return React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
+    style: style,
     disabled: disabled,
     id: id,
     label: label,
@@ -469,6 +410,7 @@ var FieldTemplate = function FieldTemplate(props) {
     readonly: readonly,
     required: required,
     schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }, React__default["default"].createElement(react.FormControl, {
     isRequired: required,
@@ -476,35 +418,38 @@ var FieldTemplate = function FieldTemplate(props) {
   }, children, displayLabel && rawDescription ? React__default["default"].createElement(react.Text, {
     mt: 2
   }, rawDescription) : null, errors, help));
-};
+}
 
-var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
+function ObjectFieldTemplate(props) {
   var description = props.description,
-      title = props.title,
-      properties = props.properties,
-      required = props.required,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      uiSchema = props.uiSchema,
-      idSchema = props.idSchema,
-      schema = props.schema,
-      formData = props.formData,
-      onAddClick = props.onAddClick,
-      registry = props.registry;
+    title = props.title,
+    properties = props.properties,
+    required = props.required,
+    disabled = props.disabled,
+    readonly = props.readonly,
+    uiSchema = props.uiSchema,
+    idSchema = props.idSchema,
+    schema = props.schema,
+    formData = props.formData,
+    onAddClick = props.onAddClick,
+    registry = props.registry;
   var uiOptions = utils.getUiOptions(uiSchema);
   var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
-  var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
-
+  var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return React__default["default"].createElement(React__default["default"].Fragment, null, (uiOptions.title || title) && React__default["default"].createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "-title",
+    id: utils.titleId(idSchema),
     title: uiOptions.title || title,
     required: required,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (uiOptions.description || description) && React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "-description",
+    id: utils.descriptionId(idSchema),
     description: uiOptions.description || description,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }), React__default["default"].createElement(react.Grid, {
     gap: description ? 2 : 6,
@@ -518,33 +463,32 @@ var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
   }, React__default["default"].createElement(AddButton, {
     className: "object-property-expand",
     onClick: onAddClick(schema),
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema,
+    registry: registry
   }))));
-};
+}
 
-var SubmitButton = function SubmitButton(_ref) {
+function SubmitButton(_ref) {
   var uiSchema = _ref.uiSchema;
-
   var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
-      submitText = _getSubmitButtonOptio.submitText,
-      norender = _getSubmitButtonOptio.norender,
-      submitButtonProps = _getSubmitButtonOptio.props;
-
+    submitText = _getSubmitButtonOptio.submitText,
+    norender = _getSubmitButtonOptio.norender,
+    submitButtonProps = _getSubmitButtonOptio.props;
   if (norender) {
     return null;
   }
-
   return React__default["default"].createElement(react.Box, {
     marginTop: 3
   }, React__default["default"].createElement(react.Button, _extends({
     type: "submit",
     variant: "solid"
   }, submitButtonProps), submitText));
-};
+}
 
-var TitleField = function TitleField(_ref) {
+function TitleField(_ref) {
   var id = _ref.id,
-      title = _ref.title;
+    title = _ref.title;
   return React__default["default"].createElement(react.Box, {
     id: id,
     mt: 1,
@@ -552,109 +496,171 @@ var TitleField = function TitleField(_ref) {
   }, React__default["default"].createElement(react.Heading, {
     as: "h5"
   }, title), React__default["default"].createElement(react.Divider, null));
-};
+}
 
-var Templates = {
-  ArrayFieldItemTemplate: ArrayFieldItemTemplate,
-  ArrayFieldTemplate: ArrayFieldTemplate,
-  BaseInputTemplate: BaseInputTemplate,
-  ButtonTemplates: {
-    AddButton: AddButton,
-    MoveDownButton: MoveDownButton,
-    MoveUpButton: MoveUpButton,
-    RemoveButton: RemoveButton,
-    SubmitButton: SubmitButton
-  },
-  DescriptionFieldTemplate: DescriptionField,
-  ErrorListTemplate: ErrorList,
-  FieldErrorTemplate: FieldErrorTemplate,
-  FieldHelpTemplate: FieldHelpTemplate,
-  FieldTemplate: FieldTemplate,
-  ObjectFieldTemplate: ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField
-};
+function WrapIfAdditionalTemplate(props) {
+  var children = props.children,
+    classNames = props.classNames,
+    style = props.style,
+    disabled = props.disabled,
+    id = props.id,
+    label = props.label,
+    onDropPropertyClick = props.onDropPropertyClick,
+    onKeyChange = props.onKeyChange,
+    readonly = props.readonly,
+    registry = props.registry,
+    required = props.required,
+    schema = props.schema,
+    uiSchema = props.uiSchema;
+  // Button templates are not overridden in the uiSchema
+  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+  var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+  if (!additional) {
+    return React__default["default"].createElement("div", {
+      className: classNames,
+      style: style
+    }, children);
+  }
+  var keyLabel = label + " Key";
+  var handleBlur = function handleBlur(_ref) {
+    var target = _ref.target;
+    return onKeyChange(target.value);
+  };
+  return React__default["default"].createElement(react.Grid, {
+    key: id + "-key",
+    className: classNames,
+    style: style,
+    alignItems: "center",
+    gap: 2
+  }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
+    isRequired: required
+  }, React__default["default"].createElement(react.FormLabel, {
+    htmlFor: id + "-key",
+    id: id + "-key-label"
+  }, keyLabel), React__default["default"].createElement(react.Input, {
+    defaultValue: label,
+    disabled: disabled || readonly,
+    id: id + "-key",
+    name: id + "-key",
+    onBlur: !readonly ? handleBlur : undefined,
+    type: "text",
+    mb: 1
+  }))), React__default["default"].createElement(react.GridItem, null, children), React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(RemoveButton, {
+    disabled: disabled || readonly,
+    onClick: onDropPropertyClick(label),
+    uiSchema: uiSchema,
+    registry: registry
+  })));
+}
+
+function generateTemplates() {
+  return {
+    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+    ArrayFieldTemplate: ArrayFieldTemplate,
+    BaseInputTemplate: BaseInputTemplate,
+    ButtonTemplates: {
+      AddButton: AddButton,
+      MoveDownButton: MoveDownButton,
+      MoveUpButton: MoveUpButton,
+      RemoveButton: RemoveButton,
+      SubmitButton: SubmitButton
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate: FieldErrorTemplate,
+    FieldHelpTemplate: FieldHelpTemplate,
+    FieldTemplate: FieldTemplate,
+    ObjectFieldTemplate: ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+  };
+}
+var Templates = /*#__PURE__*/generateTemplates();
 
 var rangeOptions = function rangeOptions(start, stop) {
   var options = [];
-
   for (var i = start; i <= stop; i++) {
     options.push({
       value: i,
       label: utils.pad(i, 2)
     });
   }
-
   return options;
 };
-
+function DateElement(props) {
+  var SelectWidget = props.registry.widgets.SelectWidget;
+  var value = props.value ? props.value : undefined;
+  return React__default["default"].createElement(SelectWidget, _extends({}, props, {
+    label: "",
+    className: "form-control",
+    onChange: function onChange(elemValue) {
+      return props.select(props.type, elemValue);
+    },
+    options: {
+      enumOptions: rangeOptions(props.range[0], props.range[1])
+    },
+    placeholder: props.type,
+    schema: {
+      type: "integer"
+    },
+    value: value,
+    "aria-describedby": utils.ariaDescribedByIds(props.name)
+  }));
+}
 var readyForChange = function readyForChange(state) {
   return Object.keys(state).every(function (key) {
     return typeof state[key] !== "undefined" && state[key] !== -1;
   });
 };
-
-var AltDateWidget = function AltDateWidget(props) {
+function AltDateWidget(props) {
   var autofocus = props.autofocus,
-      disabled = props.disabled,
-      id = props.id,
-      onBlur = props.onBlur,
-      onChange = props.onChange,
-      onFocus = props.onFocus,
-      options = props.options,
-      readonly = props.readonly,
-      registry = props.registry,
-      showTime = props.showTime,
-      value = props.value;
-  var SelectWidget = registry.widgets.SelectWidget;
-
+    disabled = props.disabled,
+    id = props.id,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    options = props.options,
+    readonly = props.readonly,
+    registry = props.registry,
+    showTime = props.showTime,
+    value = props.value;
   var _useState = React.useState(utils.parseDateString(value, showTime)),
-      state = _useState[0],
-      setState = _useState[1];
-
+    state = _useState[0],
+    setState = _useState[1];
   React.useEffect(function () {
     setState(utils.parseDateString(value, showTime));
   }, [showTime, value]);
-
   var handleChange = function handleChange(property, nextValue) {
     var _extends2;
-
     var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === "undefined" ? -1 : nextValue, _extends2));
-
     if (readyForChange(nextState)) {
       onChange(utils.toDateString(nextState, showTime));
     } else {
       setState(nextState);
     }
   };
-
   var handleNow = function handleNow(event) {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     var nextState = utils.parseDateString(new Date().toJSON(), showTime);
     onChange(utils.toDateString(nextState, showTime));
   };
-
   var handleClear = function handleClear(event) {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     onChange(undefined);
   };
-
   var dateElementProps = function dateElementProps() {
     var year = state.year,
-        month = state.month,
-        day = state.day,
-        hour = state.hour,
-        minute = state.minute,
-        second = state.second;
+      month = state.month,
+      day = state.day,
+      hour = state.hour,
+      minute = state.minute,
+      second = state.second;
     var data = [{
       type: "year",
       range: options.yearsRange,
@@ -668,7 +674,6 @@ var AltDateWidget = function AltDateWidget(props) {
       range: [1, 31],
       value: day
     }];
-
     if (showTime) {
       data.push({
         type: "hour",
@@ -684,29 +689,8 @@ var AltDateWidget = function AltDateWidget(props) {
         value: second
       });
     }
-
     return data;
   };
-
-  var renderDateElement = function renderDateElement(elemProps) {
-    var value = elemProps.value ? elemProps.value : undefined;
-    return React__default["default"].createElement(SelectWidget, _extends({}, elemProps, {
-      label: undefined,
-      className: "form-control",
-      onChange: function onChange(elemValue) {
-        return elemProps.select(elemProps.type, elemValue);
-      },
-      options: {
-        enumOptions: rangeOptions(elemProps.range[0], elemProps.range[1])
-      },
-      placeholder: elemProps.type,
-      schema: {
-        type: "integer"
-      },
-      value: value
-    }));
-  };
-
   return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.Box, {
     display: "flex",
     flexWrap: "wrap",
@@ -718,10 +702,11 @@ var AltDateWidget = function AltDateWidget(props) {
       key: elemId,
       mr: "2",
       mb: "2"
-    }, renderDateElement(_extends({}, props, elemProps, {
+    }, React__default["default"].createElement(DateElement, _extends({}, props, elemProps, {
       autofocus: autofocus && i === 0,
       disabled: disabled,
       id: elemId,
+      name: id,
       onBlur: onBlur,
       onFocus: onFocus,
       readonly: readonly,
@@ -741,8 +726,7 @@ var AltDateWidget = function AltDateWidget(props) {
       return handleClear(e);
     }
   }, "Clear")));
-};
-
+}
 AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
@@ -753,47 +737,46 @@ AltDateWidget.defaultProps = {
   }
 };
 
-var AltDateTimeWidget = function AltDateTimeWidget(props) {
+function AltDateTimeWidget(props) {
   var AltDateWidget = props.registry.widgets.AltDateWidget;
   return React__default["default"].createElement(AltDateWidget, _extends({}, props, {
     showTime: true
   }));
-};
-
+}
 AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.defaultProps, {
   showTime: true
 });
 
-var CheckboxWidget = function CheckboxWidget(props) {
+function CheckboxWidget(props) {
   var id = props.id,
-      value = props.value,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      required = props.required,
-      label = props.label,
-      uiSchema = props.uiSchema;
+    value = props.value,
+    disabled = props.disabled,
+    readonly = props.readonly,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    label = props.label,
+    uiSchema = props.uiSchema,
+    schema = props.schema;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
+  // 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 _onChange = function _onChange(_ref) {
     var checked = _ref.target.checked;
     return onChange(checked);
   };
-
   var _onBlur = function _onBlur(_ref2) {
     var value = _ref2.target.value;
     return onBlur(id, value);
   };
-
   var _onFocus = function _onFocus(_ref3) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -805,59 +788,43 @@ var CheckboxWidget = function CheckboxWidget(props) {
     isDisabled: disabled || readonly,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, label && React__default["default"].createElement(react.Text, null, label)));
-};
-
-//   const at = all.indexOf(value);
-//   const updated = selected.slice(0, at).concat(value, selected.slice(at));
-//   // As inserting values at predefined index positions doesn't work with empty
-//   // arrays, we need to reorder the updated selection to match the initial order
-//   return updated.sort((a, b) => all.indexOf(a) > all.indexOf(b));
-// };
-// const deselectValue = (value, selected) => {
-//   return selected.filter((v) => v !== value);
-// };
+}
 
-var CheckboxesWidget = function CheckboxesWidget(props) {
+function CheckboxesWidget(props) {
   var id = props.id,
-      disabled = props.disabled,
-      options = props.options,
-      value = props.value,
-      readonly = props.readonly,
-      _onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      required = props.required,
-      label = props.label,
-      uiSchema = props.uiSchema,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      schema = props.schema;
+    disabled = props.disabled,
+    options = props.options,
+    value = props.value,
+    readonly = props.readonly,
+    _onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    required = props.required,
+    label = props.label,
+    uiSchema = props.uiSchema,
+    _props$rawErrors = props.rawErrors,
+    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+    schema = props.schema;
   var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
+    enumDisabled = options.enumDisabled,
+    emptyValue = options.emptyValue;
   var chakraProps = getChakra({
     uiSchema: uiSchema
-  }); // const _onChange = option => ({ target: { checked } }) => {
-  //   const all = enumOptions.map(({ value }) => value)
-  //   if (checked) {
-  //     onChange(selectValue(option.value, value, all))
-  //   } else {
-  //     onChange(deselectValue(option.value, value))
-  //   }
-  // }
-
+  });
+  var checkboxesValues = Array.isArray(value) ? value : [value];
   var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
-    return onBlur(id, value);
+    return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-
   var _onFocus = function _onFocus(_ref2) {
     var value = _ref2.target.value;
-    return onFocus(id, value);
+    return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-
   var row = options ? options.inline : false;
+  var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -870,56 +837,60 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
     id: id + "-label"
   }, label || schema.title), React__default["default"].createElement(react.CheckboxGroup, {
     onChange: function onChange(option) {
-      return _onChange(option);
+      return _onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue));
     },
-    defaultValue: value
+    defaultValue: selectedIndexes,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, React__default["default"].createElement(react.Stack, {
     direction: row ? "row" : "column"
-  }, enumOptions.map(function (option, index) {
-    var checked = value.indexOf(option.value) !== -1;
-    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+  }, 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;
     return React__default["default"].createElement(react.Checkbox, {
-      key: id + "_" + index,
-      id: id + "_" + index,
-      value: option.value,
+      key: index,
+      id: utils.optionId(id, index),
+      name: id,
+      value: String(index),
       isChecked: checked,
       isDisabled: disabled || itemDisabled || readonly,
       onBlur: _onBlur,
       onFocus: _onFocus
     }, option.label && React__default["default"].createElement(react.Text, null, option.label));
   }))));
-};
+}
 
-var RadioWidget = function RadioWidget(_ref) {
+function RadioWidget(_ref) {
   var id = _ref.id,
-      schema = _ref.schema,
-      options = _ref.options,
-      value = _ref.value,
-      required = _ref.required,
-      disabled = _ref.disabled,
-      readonly = _ref.readonly,
-      label = _ref.label,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      uiSchema = _ref.uiSchema;
+    schema = _ref.schema,
+    options = _ref.options,
+    value = _ref.value,
+    required = _ref.required,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    uiSchema = _ref.uiSchema;
   var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
+    enumDisabled = options.enumDisabled,
+    emptyValue = options.emptyValue;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
+  var _onChange = function _onChange(nextValue) {
+    return onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
+  };
   var _onBlur = function _onBlur(_ref2) {
     var value = _ref2.target.value;
-    return onBlur(id, value);
+    return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-
   var _onFocus = function _onFocus(_ref3) {
     var value = _ref3.target.value;
-    return onFocus(id, value);
+    return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-
   var row = options ? options.inline : false;
+  var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions);
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -930,64 +901,59 @@ var RadioWidget = function RadioWidget(_ref) {
     htmlFor: id,
     id: id + "-label"
   }, label || schema.title), React__default["default"].createElement(react.RadioGroup, {
-    onChange: onChange,
+    onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
-    value: "" + value,
-    name: id
+    value: selectedIndex,
+    name: id,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, React__default["default"].createElement(react.Stack, {
     direction: row ? "row" : "column"
-  }, enumOptions.map(function (option, i) {
-    var itemDisabled = Boolean(enumDisabled && enumDisabled.indexOf(option.value) != -1);
+  }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return React__default["default"].createElement(react.Radio, {
-      value: "" + option.value,
-      key: i,
-      id: id + "-radio-" + option.value,
+      value: String(index),
+      key: index,
+      id: utils.optionId(id, index),
       disabled: disabled || itemDisabled || readonly
-    }, "" + option.label);
+    }, option.label);
   }))));
-};
+}
 
-var RangeWidget = function RangeWidget(_ref) {
+function RangeWidget(_ref) {
   var value = _ref.value,
-      readonly = _ref.readonly,
-      disabled = _ref.disabled,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      options = _ref.options,
-      schema = _ref.schema,
-      uiSchema = _ref.uiSchema,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      id = _ref.id,
-      registry = _ref.registry;
+    readonly = _ref.readonly,
+    disabled = _ref.disabled,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    options = _ref.options,
+    schema = _ref.schema,
+    uiSchema = _ref.uiSchema,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    id = _ref.id,
+    registry = _ref.registry;
   var schemaUtils = registry.schemaUtils;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   var sliderWidgetProps = _extends({
     value: value,
     label: label,
     id: id
   }, utils.rangeSpec(schema));
-
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
-
   var _onChange = function _onChange(value) {
     return onChange(value === undefined ? options.emptyValue : value);
   };
-
   var _onBlur = function _onBlur(_ref2) {
     var value = _ref2.target.value;
     return onBlur(id, value);
   };
-
   var _onFocus = function _onFocus(_ref3) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps), displayLabel ? React__default["default"].createElement(react.FormLabel, {
@@ -998,58 +964,72 @@ var RangeWidget = function RangeWidget(_ref) {
     isDisabled: disabled || readonly,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }), React__default["default"].createElement(react.SliderTrack, null, React__default["default"].createElement(react.SliderFilledTrack, null)), React__default["default"].createElement(react.SliderThumb, null)));
-};
+}
 
-var SelectWidget = function SelectWidget(props) {
+function SelectWidget(props) {
   var schema = props.schema,
-      id = props.id,
-      options = props.options,
-      label = props.label,
-      placeholder = props.placeholder,
-      multiple = props.multiple,
-      required = props.required,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      value = props.value,
-      autofocus = props.autofocus,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      uiSchema = props.uiSchema;
+    id = props.id,
+    options = props.options,
+    label = props.label,
+    placeholder = props.placeholder,
+    multiple = props.multiple,
+    required = props.required,
+    disabled = props.disabled,
+    readonly = props.readonly,
+    value = props.value,
+    autofocus = props.autofocus,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    _props$rawErrors = props.rawErrors,
+    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+    uiSchema = props.uiSchema;
   var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
+    enumDisabled = options.enumDisabled,
+    emptyValue = options.emptyValue;
   var chakraProps = getChakra({
     uiSchema: uiSchema
-  }); // TODO: Default emptyValue should be string when multi select is implemented
-  // const emptyValue = multiple ? [] : "";
-
-  var emptyValue = "";
-
+  });
   var _onMultiChange = function _onMultiChange(e) {
-    return onChange(utils.processSelectValue(schema, e.map(function (v) {
+    return onChange(utils.enumOptionsValueForIndex(e.map(function (v) {
       return v.value;
-    }), options));
+    }), enumOptions, emptyValue));
   };
-
-  var _onChange = function _onChange(_ref) {
+  var _onChange = function _onChange(e) {
+    return onChange(utils.enumOptionsValueForIndex(e.value, enumOptions, emptyValue));
+  };
+  var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
-    return onChange(utils.processSelectValue(schema, value, options));
+    return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-
-  var _onBlur = function _onBlur(_ref2) {
+  var _onFocus = function _onFocus(_ref2) {
     var value = _ref2.target.value;
-    return onBlur(id, utils.processSelectValue(schema, value, options));
+    return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-
-  var _onFocus = function _onFocus(_ref3) {
-    var value = _ref3.target.value;
-    return onFocus(id, utils.processSelectValue(schema, value, options));
+  var _valueLabelMap = {};
+  var displayEnumOptions = Array.isArray(enumOptions) ? enumOptions.map(function (option, index) {
+    var value = option.value,
+      label = option.label;
+    _valueLabelMap[index] = label;
+    return {
+      label: label,
+      value: String(index),
+      isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
+    };
+  }) : [];
+  var isMultiple = typeof multiple !== "undefined" && Boolean(enumOptions);
+  var formValue = isMultiple ? (value || []).map(function (v, index) {
+    return {
+      label: _valueLabelMap[index] || v,
+      value: index
+    };
+  }) : {
+    label: _valueLabelMap[0] || value || "",
+    value: 0
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -1058,80 +1038,57 @@ var SelectWidget = function SelectWidget(props) {
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0
   }), (label || schema.title) && React__default["default"].createElement(react.FormLabel, {
-    htmlFor: typeof multiple !== "undefined" && enumOptions ? undefined : id
-  }, label || schema.title), typeof multiple !== "undefined" && enumOptions ? React__default["default"].createElement(chakraReactSelect.Select, {
+    htmlFor: isMultiple ? undefined : id
+  }, label || schema.title), React__default["default"].createElement(chakraReactSelect.Select, {
     inputId: id,
     name: id,
-    isMulti: true,
-    options: enumOptions,
+    isMulti: isMultiple,
+    options: displayEnumOptions,
     placeholder: placeholder,
-    closeMenuOnSelect: false,
-    onChange: _onMultiChange,
-    value: value.map(function (v) {
-      return {
-        label: v,
-        value: v
-      };
-    })
-  }) : React__default["default"].createElement(react.Select, {
-    id: id,
-    name: id,
-    placeholder: placeholder !== "" ? placeholder : " ",
-    value: typeof value === "undefined" ? emptyValue : value.toString(),
-    autoFocus: autofocus,
+    closeMenuOnSelect: !isMultiple,
     onBlur: _onBlur,
-    onChange: _onChange,
-    onFocus: _onFocus
-  }, enumOptions.map(function (_ref4, i) {
-    var value = _ref4.value,
-        label = _ref4.label;
-    var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
-    return React__default["default"].createElement("option", {
-      key: i,
-      value: value,
-      disabled: disabled
-    }, label);
-  })));
-};
+    onChange: isMultiple ? _onMultiChange : _onChange,
+    onFocus: _onFocus,
+    autoFocus: autofocus,
+    value: formValue,
+    "aria-describedby": utils.ariaDescribedByIds(id)
+  }));
+}
 
-var TextareaWidget = function TextareaWidget(_ref) {
+function TextareaWidget(_ref) {
   var id = _ref.id,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
-      label = _ref.label,
-      disabled = _ref.disabled,
-      autofocus = _ref.autofocus,
-      readonly = _ref.readonly,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onChange = _ref.onChange,
-      options = _ref.options,
-      schema = _ref.schema,
-      uiSchema = _ref.uiSchema,
-      required = _ref.required,
-      rawErrors = _ref.rawErrors,
-      registry = _ref.registry;
+    placeholder = _ref.placeholder,
+    value = _ref.value,
+    label = _ref.label,
+    disabled = _ref.disabled,
+    autofocus = _ref.autofocus,
+    readonly = _ref.readonly,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    schema = _ref.schema,
+    uiSchema = _ref.uiSchema,
+    required = _ref.required,
+    rawErrors = _ref.rawErrors,
+    registry = _ref.registry;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
   var schemaUtils = registry.schemaUtils;
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
-
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
     return onChange(value === "" ? options.emptyValue : value);
   };
-
   var _onBlur = function _onBlur(_ref3) {
     var value = _ref3.target.value;
     return onBlur(id, value);
   };
-
   var _onFocus = function _onFocus(_ref4) {
     var value = _ref4.target.value;
     return onFocus(id, value);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -1149,44 +1106,41 @@ var TextareaWidget = function TextareaWidget(_ref) {
     autoFocus: autofocus,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }));
-};
+}
 
-var UpDownWidget = function UpDownWidget(props) {
+function UpDownWidget(props) {
   var id = props.id,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      label = props.label,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      rawErrors = props.rawErrors,
-      required = props.required,
-      registry = props.registry;
+    schema = props.schema,
+    uiSchema = props.uiSchema,
+    readonly = props.readonly,
+    disabled = props.disabled,
+    label = props.label,
+    value = props.value,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    rawErrors = props.rawErrors,
+    required = props.required,
+    registry = props.registry;
   var schemaUtils = registry.schemaUtils;
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   var _onChange = function _onChange(value) {
     return onChange(value);
   };
-
   var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
     return onBlur(id, value);
   };
-
   var _onFocus = function _onFocus(_ref2) {
     var value = _ref2.target.value;
     return onFocus(id, value);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -1200,31 +1154,41 @@ var UpDownWidget = function UpDownWidget(props) {
     value: value != null ? value : "",
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, React__default["default"].createElement(react.NumberInputField, {
     id: id,
     name: id
   }), React__default["default"].createElement(react.NumberInputStepper, null, React__default["default"].createElement(react.NumberIncrementStepper, null), React__default["default"].createElement(react.NumberDecrementStepper, null))));
-};
+}
 
-var widgets = {
-  AltDateTimeWidget: AltDateTimeWidget,
-  AltDateWidget: AltDateWidget,
-  CheckboxWidget: CheckboxWidget,
-  CheckboxesWidget: CheckboxesWidget,
-  RadioWidget: RadioWidget,
-  RangeWidget: RangeWidget,
-  SelectWidget: SelectWidget,
-  TextareaWidget: TextareaWidget,
-  UpDownWidget: UpDownWidget
-};
+function generateWidgets() {
+  return {
+    AltDateTimeWidget: AltDateTimeWidget,
+    AltDateWidget: AltDateWidget,
+    CheckboxWidget: CheckboxWidget,
+    CheckboxesWidget: CheckboxesWidget,
+    RadioWidget: RadioWidget,
+    RangeWidget: RangeWidget,
+    SelectWidget: SelectWidget,
+    TextareaWidget: TextareaWidget,
+    UpDownWidget: UpDownWidget
+  };
+}
+var Widgets = /*#__PURE__*/generateWidgets();
 
-var Theme = {
-  templates: Templates,
-  widgets: widgets
-};
+function generateTheme() {
+  return {
+    templates: generateTemplates(),
+    widgets: generateWidgets()
+  };
+}
+var Theme = /*#__PURE__*/generateTheme();
 
-var Form = /*#__PURE__*/core.withTheme(Theme);
+function generateForm() {
+  return core.withTheme(generateTheme());
+}
+var Form = /*#__PURE__*/generateForm();
 
 /**
  *
@@ -1247,7 +1211,6 @@ var Form = /*#__PURE__*/core.withTheme(Theme);
 
   It is located at the bottom of the styles string.
  */
-
 var CSSReset = function CSSReset() {
   return React__namespace.createElement(react$1.Global, {
     styles: "\n      html {\n        line-height: 1.5;\n        -webkit-text-size-adjust: 100%;\n        font-family: system-ui, sans-serif;\n        -webkit-font-smoothing: antialiased;\n        text-rendering: optimizeLegibility;\n        -moz-osx-font-smoothing: grayscale;\n        touch-action: manipulation;\n      }\n      body {\n        position: relative;\n        min-height: 100%;\n        font-feature-settings: 'kern';\n      }\n      *,\n      *::before,\n      *::after {\n        border-width: 0;\n        border-style: solid;\n        box-sizing: border-box;\n      }\n      main {\n        display: block;\n      }\n      hr {\n        border-top-width: 1px;\n        box-sizing: content-box;\n        height: 0;\n        overflow: visible;\n      }\n      pre,\n      code,\n      kbd,\n      samp {\n        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;\n        font-size: 1em;\n      }\n      a {\n        background-color: transparent;\n        color: inherit;\n        text-decoration: inherit;\n      }\n      abbr[title] {\n        border-bottom: none;\n        text-decoration: underline;\n        -webkit-text-decoration: underline dotted;\n        text-decoration: underline dotted;\n      }\n      b,\n      strong {\n        font-weight: bold;\n      }\n      small {\n        font-size: 80%;\n      }\n      sub,\n      sup {\n        font-size: 75%;\n        line-height: 0;\n        position: relative;\n        vertical-align: baseline;\n      }\n      sub {\n        bottom: -0.25em;\n      }\n      sup {\n        top: -0.5em;\n      }\n      img {\n        border-style: none;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        font-family: inherit;\n        font-size: 100%;\n        line-height: 1.15;\n        margin: 0;\n      }\n      button,\n      input {\n        overflow: visible;\n      }\n      button,\n      select {\n        text-transform: none;\n      }\n      button::-moz-focus-inner,\n      [type=\"button\"]::-moz-focus-inner,\n      [type=\"reset\"]::-moz-focus-inner,\n      [type=\"submit\"]::-moz-focus-inner {\n        border-style: none;\n        padding: 0;\n      }\n      fieldset {\n        padding: 0.35em 0.75em 0.625em;\n      }\n      legend {\n        box-sizing: border-box;\n        color: inherit;\n        display: table;\n        max-width: 100%;\n        padding: 0;\n        white-space: normal;\n      }\n      progress {\n        vertical-align: baseline;\n      }\n      textarea {\n        overflow: auto;\n      }\n      [type=\"checkbox\"],\n      [type=\"radio\"] {\n        box-sizing: border-box;\n        padding: 0;\n      }\n      [type=\"number\"]::-webkit-inner-spin-button,\n      [type=\"number\"]::-webkit-outer-spin-button {\n        -webkit-appearance: none !important;\n      }\n      input[type=\"number\"] {\n        -moz-appearance: textfield;\n      }\n      [type=\"search\"] {\n        -webkit-appearance: textfield;\n        outline-offset: -2px;\n      }\n      [type=\"search\"]::-webkit-search-decoration {\n        -webkit-appearance: none !important;\n      }\n      ::-webkit-file-upload-button {\n        -webkit-appearance: button;\n        font: inherit;\n      }\n      details {\n        display: block;\n      }\n      summary {\n        display: list-item;\n      }\n      template {\n        display: none;\n      }\n      [hidden] {\n        display: none !important;\n      }\n      body,\n      blockquote,\n      dl,\n      dd,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      hr,\n      figure,\n      p,\n      pre {\n        margin: 0;\n      }\n      button {\n        background: transparent;\n        padding: 0;\n      }\n      fieldset {\n        margin: 0;\n        padding: 0;\n      }\n      ol,\n      ul {\n        margin: 0;\n        padding: 0;\n      }\n      textarea {\n        resize: vertical;\n      }\n      button,\n      [role=\"button\"] {\n        cursor: pointer;\n      }\n      button::-moz-focus-inner {\n        border: 0 !important;\n      }\n      table {\n        border-collapse: collapse;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-size: inherit;\n        font-weight: inherit;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        padding: 0;\n        line-height: inherit;\n        color: inherit;\n      }\n      img,\n      svg,\n      video,\n      canvas,\n      audio,\n      iframe,\n      embed,\n      object {\n        display: block;\n      }\n      img,\n      video {\n        max-width: 100%;\n        height: auto;\n      }\n      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {\n        outline: none;\n        box-shadow: none;\n      }\n      select::-ms-expand {\n        display: none;\n      }\n      input {\n        border-width: revert;\n        border-color: revert;\n        border-style: revert;\n      }\n      .array-item > hr {\n        margin-top: 16px;\n        margin-bottom: 16px;\n      }\n    "
@@ -1268,7 +1231,6 @@ var CSSReset = function CSSReset() {
  * From: https://codesandbox.io/s/p98y9o7jz0?file=/src/frame-provider.js:0-650
  * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
  */
-
 var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
   var newCache = createCache__default["default"]({
     container: container,
@@ -1294,7 +1256,11 @@ var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
 exports.Form = Form;
 exports.Templates = Templates;
 exports.Theme = Theme;
-exports.Widgets = widgets;
+exports.Widgets = Widgets;
 exports.__createChakraFrameProvider = __createChakraFrameProvider;
 exports["default"] = Form;
+exports.generateForm = generateForm;
+exports.generateTemplates = generateTemplates;
+exports.generateTheme = generateTheme;
+exports.generateWidgets = generateWidgets;
 //# sourceMappingURL=chakra-ui.cjs.development.js.map