@rjsf/chakra-ui 4.2.3 → 5.0.0-beta.1

package/dist/chakra-ui.esm.js

@@ -1,14 +1,16 @@
-import { utils, withTheme } from '@rjsf/core';
-import React__default, { memo, useMemo, createElement, Fragment, useState, useEffect } from 'react';
-import { Button, IconButton, Box, Grid, GridItem, HStack, ButtonGroup, Alert, AlertTitle, List, ListItem, ListIcon, Heading, Divider, Text, FormControl, FormLabel, Input, FormErrorMessage, FormHelperText, shouldForwardProp, Checkbox, CheckboxGroup, Stack, RadioGroup, Radio, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Select as Select$1, Textarea, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, ChakraProvider } from '@chakra-ui/react';
-import { AddIcon, DeleteIcon, ArrowUpIcon, ArrowDownIcon, WarningIcon } from '@chakra-ui/icons';
+import { withTheme } from '@rjsf/core';
+import * as React from 'react';
+import React__default, { useMemo, memo, useState, useEffect } from 'react';
+import { Button, HStack, Box, ButtonGroup, Grid, GridItem, shouldForwardProp, FormControl, FormLabel, Input, Text, Alert, AlertTitle, List, ListItem, ListIcon, IconButton, FormErrorMessage, FormHelperText, Heading, Divider, Checkbox, CheckboxGroup, Stack, RadioGroup, Radio, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Select as Select$1, Textarea, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, ChakraProvider } from '@chakra-ui/react';
+import { AddIcon, WarningIcon, ArrowDownIcon, ArrowUpIcon, DeleteIcon } from '@chakra-ui/icons';
+import { getUiOptions, getTemplate, getInputProps, ADDITIONAL_PROPERTY_FLAG, canExpand, getSubmitButtonOptions, parseDateString, toDateString, pad, rangeSpec, processSelectValue } from '@rjsf/utils';
 import { Select } from 'chakra-react-select';
 import { Global, CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import weakMemoize from '@emotion/weak-memoize';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -21,7 +23,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -41,97 +42,27 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 var AddButton = function AddButton(props) {
-  return React__default.createElement(Button, Object.assign({
+  return React__default.createElement(Button, _extends({
     leftIcon: React__default.createElement(AddIcon, null)
   }, props), "Add Item");
 };
 
-var _excluded = ["icon"];
-var mappings = {
-  remove: /*#__PURE__*/React__default.createElement(DeleteIcon, null),
-  plus: /*#__PURE__*/React__default.createElement(AddIcon, null),
-  "arrow-up": /*#__PURE__*/React__default.createElement(ArrowUpIcon, null),
-  "arrow-down": /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)
-};
-/**
- * props used in Template:
- * icon, tabIndex, disabled, onClick
- */
-
-var ChakraIconButton = /*#__PURE__*/memo(function (props) {
-  var icon = props.icon,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  return React__default.createElement(IconButton, Object.assign({}, otherProps, {
-    icon: mappings[icon],
-    "aria-label": icon
-  }));
-});
-ChakraIconButton.displayName = 'ChakraIconButton';
-
-var _excluded$1 = ["key"],
-    _excluded2 = ["key"];
-var isMultiSelect = utils.isMultiSelect,
-    getDefaultRegistry = utils.getDefaultRegistry;
-
-var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
-  var schema = props.schema,
-      _props$registry = props.registry,
-      registry = _props$registry === void 0 ? getDefaultRegistry() : _props$registry;
-
-  if (isMultiSelect(schema, registry.rootSchema)) {
-    return React__default.createElement(DefaultFixedArrayFieldTemplate, Object.assign({}, props));
-  } else {
-    return React__default.createElement(DefaultNormalArrayFieldTemplate, Object.assign({}, props));
-  }
-};
-
-var ArrayFieldTitle = function ArrayFieldTitle(_ref) {
-  var TitleField = _ref.TitleField,
-      idSchema = _ref.idSchema,
-      title = _ref.title,
-      required = _ref.required;
-
-  if (!title) {
-    return null;
-  }
-
-  var id = idSchema.$id + "__title";
-  return React__default.createElement(TitleField, {
-    id: id,
-    title: title,
-    required: required
-  });
-};
-
-var ArrayFieldDescription = function ArrayFieldDescription(_ref2) {
-  var DescriptionField = _ref2.DescriptionField,
-      idSchema = _ref2.idSchema,
-      description = _ref2.description;
-
-  if (!description) {
-    return null;
-  }
-
-  var id = idSchema.$id + "__description";
-  return React__default.createElement(DescriptionField, {
-    id: id,
-    description: description
-  });
-}; // Used in the two templates
-
-
-var DefaultArrayItem = function DefaultArrayItem(_ref3) {
-  var index = _ref3.index,
-      readonly = _ref3.readonly,
-      disabled = _ref3.disabled,
-      children = _ref3.children,
-      hasToolbar = _ref3.hasToolbar,
-      hasRemove = _ref3.hasRemove,
-      hasMoveUp = _ref3.hasMoveUp,
-      hasMoveDown = _ref3.hasMoveDown,
-      onReorderClick = _ref3.onReorderClick,
-      onDropIndexClick = _ref3.onDropIndexClick;
+var ArrayFieldItemTemplate = 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;
+  var _registry$templates$B = registry.templates.ButtonTemplates,
+      MoveDownButton = _registry$templates$B.MoveDownButton,
+      MoveUpButton = _registry$templates$B.MoveUpButton,
+      RemoveButton = _registry$templates$B.RemoveButton;
   var onRemoveClick = useMemo(function () {
     return onDropIndexClick(index);
   }, [index, onDropIndexClick]);
@@ -149,118 +80,166 @@ var DefaultArrayItem = function DefaultArrayItem(_ref3) {
   }, children), hasToolbar && React__default.createElement(Box, null, React__default.createElement(ButtonGroup, {
     isAttached: true,
     mb: 1
-  }, (hasMoveUp || hasMoveDown) && React__default.createElement(ChakraIconButton, {
-    icon: "arrow-up",
-    tabIndex: -1,
+  }, (hasMoveUp || hasMoveDown) && React__default.createElement(MoveUpButton, {
     disabled: disabled || readonly || !hasMoveUp,
     onClick: onArrowUpClick
-  }), (hasMoveUp || hasMoveDown) && React__default.createElement(ChakraIconButton, {
-    icon: "arrow-down",
-    tabIndex: -1,
+  }), (hasMoveUp || hasMoveDown) && React__default.createElement(MoveDownButton, {
     disabled: disabled || readonly || !hasMoveDown,
     onClick: onArrowDownClick
-  }), hasRemove && React__default.createElement(ChakraIconButton, {
-    icon: "remove",
-    tabIndex: -1,
+  }), hasRemove && React__default.createElement(RemoveButton, {
     disabled: disabled || readonly,
     onClick: onRemoveClick
   }))));
 };
 
-var DefaultFixedArrayFieldTemplate = function DefaultFixedArrayFieldTemplate(props) {
-  return React__default.createElement("fieldset", {
-    className: props.className
-  }, React__default.createElement(ArrayFieldTitle, {
-    key: "array-field-title-" + props.idSchema.$id,
-    TitleField: props.TitleField,
-    idSchema: props.idSchema,
-    title: props.uiSchema["ui:title"] || props.title,
-    required: props.required
-  }), (props.uiSchema["ui:description"] || props.schema.description) && // Use DescriptionField if possible
-  React__default.createElement("div", {
-    className: "field-description",
-    key: "field-description-" + props.idSchema.$id
-  }, props.uiSchema["ui:description"] || props.schema.description), React__default.createElement("div", {
-    className: "row array-item-list",
-    key: "array-item-list-" + props.idSchema.$id
-  }, props.items && props.items.map(function (p) {
-    var key = p.key,
-        itemProps = _objectWithoutPropertiesLoose(p, _excluded$1);
-
-    return React__default.createElement(DefaultArrayItem, Object.assign({
-      key: key
-    }, itemProps));
-  })), props.canAdd && React__default.createElement(AddButton, {
-    justifySelf: "flex-end",
-    className: "array-item-add",
-    onClick: props.onAddClick,
-    disabled: props.disabled || props.readonly
-  }));
-};
+var _excluded$1 = ["key"];
 
-var DefaultNormalArrayFieldTemplate = function DefaultNormalArrayFieldTemplate(props) {
-  return React__default.createElement(Box, null, React__default.createElement(ArrayFieldTitle, {
-    key: "array-field-title-" + props.idSchema.$id,
-    TitleField: props.TitleField,
-    idSchema: props.idSchema,
-    title: props.uiSchema["ui:title"] || props.title,
-    required: props.required
-  }), (props.uiSchema["ui:description"] || props.schema.description) && React__default.createElement(ArrayFieldDescription, {
-    key: "array-field-description-" + props.idSchema.$id,
-    DescriptionField: props.DescriptionField,
-    idSchema: props.idSchema,
-    description: props.uiSchema["ui:description"] || props.schema.description
+var ArrayFieldTemplate = 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;
+  var uiOptions = getUiOptions(uiSchema);
+  var ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  var ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
+  var ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
+
+  var AddButton = registry.templates.ButtonTemplates.AddButton;
+  return React__default.createElement(Box, null, React__default.createElement(ArrayFieldTitleTemplate, {
+    idSchema: idSchema,
+    title: uiOptions.title || title,
+    uiSchema: uiSchema,
+    required: required,
+    registry: registry
+  }), (uiOptions.description || schema.description) && React__default.createElement(ArrayFieldDescriptionTemplate, {
+    idSchema: idSchema,
+    description: uiOptions.description || schema.description,
+    uiSchema: uiSchema,
+    registry: registry
   }), React__default.createElement(Grid, {
-    key: "array-item-list-" + props.idSchema.$id
-  }, React__default.createElement(GridItem, null, props.items.length > 0 && props.items.map(function (p) {
-    var key = p.key,
-        itemProps = _objectWithoutPropertiesLoose(p, _excluded2);
+    key: "array-item-list-" + idSchema.$id
+  }, React__default.createElement(GridItem, null, items.length > 0 && items.map(function (_ref) {
+    var key = _ref.key,
+        itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-    return React__default.createElement(DefaultArrayItem, Object.assign({
+    return React__default.createElement(ArrayFieldItemTemplate, _extends({
       key: key
     }, itemProps));
-  })), props.canAdd && React__default.createElement(GridItem, {
+  })), canAdd && React__default.createElement(GridItem, {
     justifySelf: "flex-end"
   }, React__default.createElement(Box, {
     mt: 2
   }, React__default.createElement(AddButton, {
     className: "array-item-add",
-    onClick: props.onAddClick,
-    disabled: props.disabled || props.readonly
+    onClick: onAddClick,
+    disabled: disabled || readonly
   })))));
 };
 
-var ErrorList = function ErrorList(_ref) {
-  var errors = _ref.errors;
-  return React__default.createElement(Alert, {
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: 3,
-    status: "error"
-  }, React__default.createElement(AlertTitle, null, "Errors"), React__default.createElement(List, null, errors.map(function (error, i) {
-    return React__default.createElement(ListItem, {
-      key: i
-    }, React__default.createElement(ListIcon, {
-      as: WarningIcon,
-      color: "red.500"
-    }), error.stack);
-  })));
-};
+function getChakra(_ref) {
+  var _ref$uiSchema = _ref.uiSchema,
+      uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
+  var chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
+  Object.keys(chakraProps).forEach(function (key) {
+    /**
+     * Leveraging `shouldForwardProp` to remove props
+     *
+     * This is a utility function that's used in `@chakra-ui/react`'s factory function.
+     * Normally, it prevents ChakraProps from being passed to the DOM.
+     * In this case we just want to delete the unknown props. So we flip the boolean.
+     */
+    if (shouldForwardProp(key)) {
+      delete chakraProps[key];
+    }
+  });
+  return chakraProps;
+}
 
-var TitleField = function TitleField(_ref) {
-  var title = _ref.title;
-  return React__default.createElement(Box, {
-    mt: 1,
-    mb: 4
-  }, React__default.createElement(Heading, {
-    as: "h5"
-  }, title), React__default.createElement(Divider, null));
+var BaseInputTemplate = 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;
+  var inputProps = 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.createElement(FormControl, _extends({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }), displayLabel ? React.createElement(FormLabel, {
+    htmlFor: id,
+    id: id + "-label"
+  }, label || schema.title) : null, React.createElement(Input, _extends({
+    id: id,
+    name: id,
+    value: value || value === 0 ? value : "",
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    autoFocus: autofocus,
+    placeholder: placeholder
+  }, inputProps, {
+    list: schema.examples ? "examples_" + id : undefined
+  })), schema.examples ? React.createElement("datalist", {
+    id: "examples_" + id
+  }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
+    return React.createElement("option", {
+      key: example,
+      value: example
+    });
+  })) : null);
 };
 
 var DescriptionField = function DescriptionField(_ref) {
   var description = _ref.description,
       id = _ref.id;
-  if (!description) return null;
+
+  if (!description) {
+    return null;
+  }
 
   if (typeof description === "string") {
     return React__default.createElement(Text, {
@@ -273,27 +252,81 @@ var DescriptionField = function DescriptionField(_ref) {
   return React__default.createElement(React__default.Fragment, null, description);
 };
 
-var Fields = {
-  TitleField: TitleField,
-  DescriptionField: DescriptionField
+var ErrorList = function ErrorList(_ref) {
+  var errors = _ref.errors;
+  return React__default.createElement(Alert, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: 3,
+    status: "error"
+  }, React__default.createElement(AlertTitle, null, "Errors"), React__default.createElement(List, null, errors.map(function (error, i) {
+    return React__default.createElement(ListItem, {
+      key: i
+    }, React__default.createElement(ListIcon, {
+      as: WarningIcon,
+      color: "red.500"
+    }), error.stack);
+  })));
 };
 
-var ADDITIONAL_PROPERTY_FLAG = utils.ADDITIONAL_PROPERTY_FLAG;
+var _excluded = ["icon", "iconType"];
+/**
+ * props used in Template:
+ * icon, tabIndex, disabled, onClick
+ */
+
+var ChakraIconButton = /*#__PURE__*/memo(function (props) {
+  var icon = props.icon,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return React__default.createElement(IconButton, _extends({
+    "aria-label": props.title
+  }, otherProps, {
+    icon: icon
+  }));
+});
+ChakraIconButton.displayName = "ChakraIconButton";
+function MoveDownButton(props) {
+  return React__default.createElement(ChakraIconButton, _extends({
+    title: "Move down"
+  }, props, {
+    icon: React__default.createElement(ArrowDownIcon, null)
+  }));
+}
+function MoveUpButton(props) {
+  return React__default.createElement(ChakraIconButton, _extends({
+    title: "Move up"
+  }, props, {
+    icon: React__default.createElement(ArrowUpIcon, null)
+  }));
+}
+function RemoveButton(props) {
+  return React__default.createElement(ChakraIconButton, _extends({
+    title: "Remove"
+  }, props, {
+    icon: React__default.createElement(DeleteIcon, null)
+  }));
+}
 
 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 additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
+  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+  var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
 
   if (!additional) {
-    return createElement(Fragment, null, children);
+    return React__default.createElement("div", {
+      className: classNames
+    }, children);
   }
 
   var keyLabel = label + " Key";
@@ -303,15 +336,17 @@ var WrapIfAdditional = function WrapIfAdditional(props) {
     return onKeyChange(target.value);
   };
 
-  return createElement(Grid, {
+  return React__default.createElement(Grid, {
     key: id + "-key",
+    className: classNames,
     alignItems: "center",
     gap: 2
-  }, createElement(GridItem, null, createElement(FormControl, {
+  }, React__default.createElement(GridItem, null, React__default.createElement(FormControl, {
     isRequired: required
-  }, createElement(FormLabel, {
-    htmlFor: id + "-key"
-  }, keyLabel), createElement(Input, {
+  }, React__default.createElement(FormLabel, {
+    htmlFor: id + "-key",
+    id: id + "-key-label"
+  }, keyLabel), React__default.createElement(Input, {
     defaultValue: label,
     disabled: disabled || readonly,
     id: id + "-key",
@@ -319,9 +354,7 @@ var WrapIfAdditional = function WrapIfAdditional(props) {
     onBlur: !readonly ? handleBlur : undefined,
     type: "text",
     mb: 1
-  }))), createElement(GridItem, null, children), createElement(GridItem, null, createElement(ChakraIconButton, {
-    icon: "remove",
-    tabIndex: -1,
+  }))), React__default.createElement(GridItem, null, children), React__default.createElement(GridItem, null, React__default.createElement(RemoveButton, {
     disabled: disabled || readonly,
     onClick: onDropPropertyClick(label)
   })));
@@ -338,6 +371,7 @@ var FieldTemplate = function FieldTemplate(props) {
       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,
@@ -346,7 +380,11 @@ var FieldTemplate = function FieldTemplate(props) {
       schema = props.schema;
 
   if (hidden) {
-    return React__default.createElement(React__default.Fragment, null, children);
+    return React__default.createElement("div", {
+      style: {
+        display: "none"
+      }
+    }, children);
   }
 
   return React__default.createElement(WrapIfAdditional, {
@@ -358,7 +396,8 @@ var FieldTemplate = function FieldTemplate(props) {
     onKeyChange: onKeyChange,
     readonly: readonly,
     required: required,
-    schema: schema
+    schema: schema,
+    registry: registry
   }, React__default.createElement(FormControl, {
     isRequired: required,
     isInvalid: rawErrors && rawErrors.length > 0
@@ -375,12 +414,8 @@ var FieldTemplate = function FieldTemplate(props) {
   }, rawHelp)));
 };
 
-var canExpand = utils.canExpand;
-
 var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
-  var DescriptionField = props.DescriptionField,
-      description = props.description,
-      TitleField = props.TitleField,
+  var description = props.description,
       title = props.title,
       properties = props.properties,
       required = props.required,
@@ -390,33 +425,88 @@ var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
       idSchema = props.idSchema,
       schema = props.schema,
       formData = props.formData,
-      onAddClick = props.onAddClick;
-  return createElement(Fragment, null, (uiSchema["ui:title"] || title) && createElement(TitleField, {
+      onAddClick = props.onAddClick,
+      registry = props.registry;
+  var uiOptions = getUiOptions(uiSchema);
+  var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions);
+  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
+
+  var AddButton = registry.templates.ButtonTemplates.AddButton;
+  return React__default.createElement(React__default.Fragment, null, (uiOptions.title || title) && React__default.createElement(TitleFieldTemplate, {
     id: idSchema.$id + "-title",
-    title: title,
-    required: required
-  }), description && createElement(DescriptionField, {
+    title: uiOptions.title || title,
+    required: required,
+    uiSchema: uiSchema,
+    registry: registry
+  }), (uiOptions.description || description) && React__default.createElement(DescriptionFieldTemplate, {
     id: idSchema.$id + "-description",
-    description: description
-  }), createElement(Grid, {
+    description: uiOptions.description || description,
+    registry: registry
+  }), React__default.createElement(Grid, {
     gap: description ? 2 : 6,
     mb: 4
   }, properties.map(function (element, index) {
-    return element.hidden ? element.content : createElement(GridItem, {
+    return element.hidden ? element.content : React__default.createElement(GridItem, {
       key: idSchema.$id + "-" + element.name + "-" + index
     }, element.content);
-  }), canExpand(schema, uiSchema, formData) && createElement(GridItem, {
+  }), canExpand(schema, uiSchema, formData) && React__default.createElement(GridItem, {
     justifySelf: "flex-end"
-  }, createElement(AddButton, {
+  }, React__default.createElement(AddButton, {
     className: "object-property-expand",
     onClick: onAddClick(schema),
     disabled: disabled || readonly
   }))));
 };
 
-var pad = utils.pad,
-    parseDateString = utils.parseDateString,
-    toDateString = utils.toDateString;
+var SubmitButton = function SubmitButton(_ref) {
+  var uiSchema = _ref.uiSchema;
+
+  var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
+      submitText = _getSubmitButtonOptio.submitText,
+      norender = _getSubmitButtonOptio.norender,
+      submitButtonProps = _getSubmitButtonOptio.props;
+
+  if (norender) {
+    return null;
+  }
+
+  return React__default.createElement(Box, {
+    marginTop: 3
+  }, React__default.createElement(Button, _extends({
+    type: "submit",
+    variant: "solid"
+  }, submitButtonProps), submitText));
+};
+
+var TitleField = function TitleField(_ref) {
+  var id = _ref.id,
+      title = _ref.title;
+  return React__default.createElement(Box, {
+    id: id,
+    mt: 1,
+    mb: 4
+  }, React__default.createElement(Heading, {
+    as: "h5"
+  }, title), React__default.createElement(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,
+  FieldTemplate: FieldTemplate,
+  ObjectFieldTemplate: ObjectFieldTemplate,
+  TitleFieldTemplate: TitleField
+};
 
 var rangeOptions = function rangeOptions(start, stop) {
   var options = [];
@@ -533,8 +623,8 @@ var AltDateWidget = function AltDateWidget(props) {
   };
 
   var renderDateElement = function renderDateElement(elemProps) {
-    var value = Boolean(elemProps.value) ? elemProps.value : undefined;
-    return React__default.createElement(SelectWidget, Object.assign({}, elemProps, {
+    var value = elemProps.value ? elemProps.value : undefined;
+    return React__default.createElement(SelectWidget, _extends({}, elemProps, {
       label: undefined,
       className: "form-control",
       onChange: function onChange(elemValue) {
@@ -599,7 +689,7 @@ AltDateWidget.defaultProps = {
 
 var AltDateTimeWidget = function AltDateTimeWidget(props) {
   var AltDateWidget = props.registry.widgets.AltDateWidget;
-  return React__default.createElement(AltDateWidget, Object.assign({}, props, {
+  return React__default.createElement(AltDateWidget, _extends({}, props, {
     showTime: true
   }));
 };
@@ -608,26 +698,6 @@ AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.default
   showTime: true
 });
 
-function getChakra(_ref) {
-  var _ref$uiSchema = _ref.uiSchema,
-      uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
-  var chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
-  Object.keys(chakraProps).forEach(function (key) {
-    /**
-     * Leveraging `shouldForwardProp` to remove props
-     *
-     * This is a utility function that's used in `@chakra-ui/react`'s factory function.
-     * Normally, it prevents ChakraProps from being passed to the DOM.
-     * In this case we just want to delete the unknown props. So we flip the boolean.
-     */
-    if (shouldForwardProp(key)) {
-      // @ts-ignore - How to type this?!... 😬
-      delete chakraProps[key];
-    }
-  });
-  return chakraProps;
-}
-
 var CheckboxWidget = function CheckboxWidget(props) {
   var id = props.id,
       value = props.value,
@@ -658,7 +728,7 @@ var CheckboxWidget = function CheckboxWidget(props) {
     return onFocus(id, value);
   };
 
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isRequired: required
@@ -722,7 +792,7 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
   };
 
   var row = options ? options.inline : false;
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
@@ -730,7 +800,8 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0
   }), React__default.createElement(FormLabel, {
-    htmlFor: id
+    htmlFor: id,
+    id: id + "-label"
   }, label || schema.title), React__default.createElement(CheckboxGroup, {
     onChange: function onChange(option) {
       return _onChange(option);
@@ -753,58 +824,6 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
   }))));
 };
 
-var ColorWidget = function ColorWidget(props) {
-  var registry = props.registry;
-  var TextWidget = registry.widgets.TextWidget;
-  return React__default.createElement(TextWidget, Object.assign({
-    type: "color"
-  }, props));
-};
-
-var DateWidget = function DateWidget(props) {
-  var registry = props.registry;
-  var TextWidget = registry.widgets.TextWidget;
-  return React__default.createElement(TextWidget, Object.assign({}, props, {
-    type: "date"
-  }));
-};
-
-var localToUTC = utils.localToUTC,
-    utcToLocal = utils.utcToLocal;
-
-var DateTimeWidget = function DateTimeWidget(props) {
-  var registry = props.registry;
-  var TextWidget = registry.widgets.TextWidget;
-  var value = utcToLocal(props.value);
-
-  var onChange = function onChange(value) {
-    props.onChange(localToUTC(value));
-  };
-
-  return React__default.createElement(TextWidget, Object.assign({
-    type: "datetime-local"
-  }, props, {
-    value: value,
-    onChange: onChange
-  }));
-};
-
-var EmailWidget = function EmailWidget(props) {
-  var registry = props.registry;
-  var TextWidget = registry.widgets.TextWidget;
-  return React__default.createElement(TextWidget, Object.assign({}, props, {
-    type: "email"
-  }));
-};
-
-var PasswordWidget = function PasswordWidget(props) {
-  var registry = props.registry;
-  var TextWidget = registry.widgets.TextWidget;
-  return React__default.createElement(TextWidget, Object.assign({
-    type: "password"
-  }, props));
-};
-
 var RadioWidget = function RadioWidget(_ref) {
   var id = _ref.id,
       schema = _ref.schema,
@@ -835,14 +854,15 @@ var RadioWidget = function RadioWidget(_ref) {
   };
 
   var row = options ? options.inline : false;
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly
   }), React__default.createElement(FormLabel, {
-    htmlFor: id
+    htmlFor: id,
+    id: id + "-label"
   }, label || schema.title), React__default.createElement(RadioGroup, {
     onChange: onChange,
     onBlur: _onBlur,
@@ -856,14 +876,12 @@ var RadioWidget = function RadioWidget(_ref) {
     return React__default.createElement(Radio, {
       value: "" + option.value,
       key: i,
+      id: id + "-radio-" + option.value,
       disabled: disabled || itemDisabled || readonly
     }, "" + option.label);
   }))));
 };
 
-var rangeSpec = utils.rangeSpec,
-    getDisplayLabel = utils.getDisplayLabel;
-
 var RangeWidget = function RangeWidget(_ref) {
   var value = _ref.value,
       readonly = _ref.readonly,
@@ -875,7 +893,9 @@ var RangeWidget = function RangeWidget(_ref) {
       uiSchema = _ref.uiSchema,
       onChange = _ref.onChange,
       label = _ref.label,
-      id = _ref.id;
+      id = _ref.id,
+      registry = _ref.registry;
+  var schemaUtils = registry.schemaUtils;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
@@ -886,7 +906,7 @@ var RangeWidget = function RangeWidget(_ref) {
     id: id
   }, rangeSpec(schema));
 
-  var displayLabel = getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
+  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
 
   var _onChange = function _onChange(value) {
     return onChange(value === undefined ? options.emptyValue : value);
@@ -902,11 +922,11 @@ var RangeWidget = function RangeWidget(_ref) {
     return onFocus(id, value);
   };
 
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps), displayLabel ? React__default.createElement(FormLabel, {
     htmlFor: id
-  }, label || schema.title) : null, React__default.createElement(Slider, Object.assign({}, sliderWidgetProps, {
+  }, label || schema.title) : null, React__default.createElement(Slider, _extends({}, sliderWidgetProps, {
     id: id,
     name: id,
     isDisabled: disabled || readonly,
@@ -916,46 +936,6 @@ var RangeWidget = function RangeWidget(_ref) {
   }), React__default.createElement(SliderTrack, null, React__default.createElement(SliderFilledTrack, null)), React__default.createElement(SliderThumb, null)));
 };
 
-var asNumber = utils.asNumber,
-    guessType = utils.guessType;
-var nums = /*#__PURE__*/new Set(["number", "integer"]);
-/**
- * This is a silly limitation in the DOM where option change event values are
- * always retrieved as strings.
- */
-
-var processValue = function processValue(schema, value) {
-  // "enum" is a reserved word, so only "type" and "items" can be destructured
-  var type = schema.type,
-      items = schema.items;
-
-  if (value === "") {
-    return undefined;
-  } else if (type === "array" && items && nums.has(items.type)) {
-    return value.map(asNumber);
-  } else if (type === "boolean") {
-    return value === "true";
-  } else if (type === "number") {
-    return asNumber(value);
-  } // If type is undefined, but an enum is present, try and infer the type from
-  // the enum values
-
-
-  if (schema["enum"]) {
-    if (schema["enum"].every(function (x) {
-      return guessType(x) === "number";
-    })) {
-      return asNumber(value);
-    } else if (schema["enum"].every(function (x) {
-      return guessType(x) === "boolean";
-    })) {
-      return value === "true";
-    }
-  }
-
-  return value;
-};
-
 var SelectWidget = function SelectWidget(props) {
   var schema = props.schema,
       id = props.id,
@@ -984,27 +964,27 @@ var SelectWidget = function SelectWidget(props) {
   var emptyValue = "";
 
   var _onMultiChange = function _onMultiChange(e) {
-    return onChange(processValue(schema, e.map(function (v) {
+    return onChange(processSelectValue(schema, e.map(function (v) {
       return v.value;
-    })));
+    }), options));
   };
 
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
-    return onChange(processValue(schema, value));
+    return onChange(processSelectValue(schema, value, options));
   };
 
   var _onBlur = function _onBlur(_ref2) {
     var value = _ref2.target.value;
-    return onBlur(id, processValue(schema, value));
+    return onBlur(id, processSelectValue(schema, value, options));
   };
 
   var _onFocus = function _onFocus(_ref3) {
     var value = _ref3.target.value;
-    return onFocus(id, processValue(schema, value));
+    return onFocus(id, processSelectValue(schema, value, options));
   };
 
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
@@ -1048,8 +1028,6 @@ var SelectWidget = function SelectWidget(props) {
   })));
 };
 
-var getDisplayLabel$1 = utils.getDisplayLabel;
-
 var TextareaWidget = function TextareaWidget(_ref) {
   var id = _ref.id,
       placeholder = _ref.placeholder,
@@ -1065,11 +1043,13 @@ var TextareaWidget = function TextareaWidget(_ref) {
       schema = _ref.schema,
       uiSchema = _ref.uiSchema,
       required = _ref.required,
-      rawErrors = _ref.rawErrors;
+      rawErrors = _ref.rawErrors,
+      registry = _ref.registry;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-  var displayLabel = getDisplayLabel$1(schema, uiSchema) && (!!label || !!schema.title);
+  var schemaUtils = registry.schemaUtils;
+  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
 
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
@@ -1086,7 +1066,7 @@ var TextareaWidget = function TextareaWidget(_ref) {
     return onFocus(id, value);
   };
 
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
@@ -1107,79 +1087,6 @@ var TextareaWidget = function TextareaWidget(_ref) {
   }));
 };
 
-var getDisplayLabel$2 = utils.getDisplayLabel;
-
-var TextWidget = function TextWidget(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;
-  var chakraProps = getChakra({
-    uiSchema: uiSchema
-  });
-
-  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 = getDisplayLabel$2(schema, uiSchema) && (!!label || !!schema.title);
-  var inputType = (type || schema.type) === "string" ? "text" : "" + (type || schema.type);
-  return createElement(FormControl, Object.assign({
-    mb: 1
-  }, chakraProps, {
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }), displayLabel ? createElement(FormLabel, {
-    htmlFor: id,
-    id: id + "-label"
-  }, label || schema.title) : null, createElement(Input, {
-    id: id,
-    name: id,
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    autoFocus: autofocus,
-    placeholder: placeholder,
-    type: inputType,
-    list: schema.examples ? "examples_" + id : undefined
-  }), schema.examples ? createElement("datalist", {
-    id: "examples_" + id
-  }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
-    return createElement("option", {
-      key: example,
-      value: example
-    });
-  })) : null);
-};
-
-var getDisplayLabel$3 = utils.getDisplayLabel;
-
 var UpDownWidget = function UpDownWidget(props) {
   var id = props.id,
       schema = props.schema,
@@ -1192,8 +1099,10 @@ var UpDownWidget = function UpDownWidget(props) {
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       rawErrors = props.rawErrors,
-      required = props.required;
-  var displayLabel = getDisplayLabel$3(schema, uiSchema) && (!!label || !!schema.title);
+      required = props.required,
+      registry = props.registry;
+  var schemaUtils = registry.schemaUtils;
+  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
@@ -1212,7 +1121,7 @@ var UpDownWidget = function UpDownWidget(props) {
     return onFocus(id, value);
   };
 
-  return React__default.createElement(FormControl, Object.assign({
+  return React__default.createElement(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
@@ -1232,69 +1141,21 @@ var UpDownWidget = function UpDownWidget(props) {
   }), React__default.createElement(NumberInputStepper, null, React__default.createElement(NumberIncrementStepper, null), React__default.createElement(NumberDecrementStepper, null))));
 };
 
-var URLWidget = function URLWidget(props) {
-  var registry = props.registry;
-  var TextWidget = registry.widgets.TextWidget;
-  return React__default.createElement(TextWidget, Object.assign({
-    type: "url"
-  }, props));
-};
-
-var getSubmitButtonOptions = utils.getSubmitButtonOptions;
-
-var SubmitButton = function SubmitButton(_ref) {
-  var uiSchema = _ref.uiSchema;
-
-  var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
-      submitText = _getSubmitButtonOptio.submitText,
-      norender = _getSubmitButtonOptio.norender,
-      submitButtonProps = _getSubmitButtonOptio.props;
-
-  if (norender) {
-    return null;
-  }
-
-  return React__default.createElement(Box, {
-    marginTop: 3
-  }, React__default.createElement(Button, Object.assign({
-    type: "submit",
-    variant: "solid"
-  }, submitButtonProps), submitText));
-};
-
 var widgets = {
   AltDateTimeWidget: AltDateTimeWidget,
   AltDateWidget: AltDateWidget,
   CheckboxWidget: CheckboxWidget,
   CheckboxesWidget: CheckboxesWidget,
-  ColorWidget: ColorWidget,
-  DateWidget: DateWidget,
-  DateTimeWidget: DateTimeWidget,
-  EmailWidget: EmailWidget,
-  PasswordWidget: PasswordWidget,
   RadioWidget: RadioWidget,
   RangeWidget: RangeWidget,
   SelectWidget: SelectWidget,
   TextareaWidget: TextareaWidget,
-  TextWidget: TextWidget,
-  UpDownWidget: UpDownWidget,
-  URLWidget: URLWidget,
-  SubmitButton: SubmitButton
+  UpDownWidget: UpDownWidget
 };
 
-var getDefaultRegistry$1 = utils.getDefaultRegistry;
-
-var _getDefaultRegistry = /*#__PURE__*/getDefaultRegistry$1(),
-    fields = _getDefaultRegistry.fields,
-    widgets$1 = _getDefaultRegistry.widgets;
-
 var Theme = {
-  ArrayFieldTemplate: ArrayFieldTemplate,
-  FieldTemplate: FieldTemplate,
-  ObjectFieldTemplate: ObjectFieldTemplate,
-  ErrorList: ErrorList,
-  fields: /*#__PURE__*/_extends({}, fields, Fields),
-  widgets: /*#__PURE__*/_extends({}, widgets$1, widgets)
+  templates: Templates,
+  widgets: widgets
 };
 
 var Form = /*#__PURE__*/withTheme(Theme);
@@ -1322,7 +1183,7 @@ var Form = /*#__PURE__*/withTheme(Theme);
  */
 
 var CSSReset = function CSSReset() {
-  return createElement(Global, {
+  return React.createElement(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    "
   });
 };
@@ -1352,18 +1213,17 @@ var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize(function (contai
 var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
   return function (_ref) {
     var document = _ref.document;
-    return createElement("div", {
+    return React.createElement("div", {
       style: {
         margin: 2
       }
-    }, createElement(CacheProvider, {
+    }, React.createElement(CacheProvider, {
       value: memoizedCreateCacheWithContainer(document.head)
-    }, createElement(ChakraProvider, {
+    }, React.createElement(ChakraProvider, {
       resetCSS: false
-    }, createElement(CSSReset, null), props.children)));
+    }, React.createElement(CSSReset, null), props.children)));
   };
 };
 
-export default Form;
-export { ArrayFieldTemplate, FieldTemplate, Fields, Form, ObjectFieldTemplate, Theme, widgets as Widgets, __createChakraFrameProvider };
+export { Form, Templates, Theme, widgets as Widgets, __createChakraFrameProvider, Form as default };
 //# sourceMappingURL=chakra-ui.esm.js.map