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

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

@@ -1,15 +1,36 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('@chakra-ui/react'), require('@chakra-ui/icons'), require('chakra-react-select'), require('@emotion/react'), require('@emotion/cache'), require('@emotion/weak-memoize')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', '@chakra-ui/react', '@chakra-ui/icons', 'chakra-react-select', '@emotion/react', '@emotion/cache', '@emotion/weak-memoize'], factory) :
-  (global = global || self, factory(global['@rjsf/chakra-ui'] = {}, global.core, global.React, global.react, global.icons, global.chakraReactSelect, global.react$1, global.createCache, global.weakMemoize));
-}(this, (function (exports, core, React, react, icons, chakraReactSelect, react$1, createCache, weakMemoize) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('@chakra-ui/react'), require('@chakra-ui/icons'), require('@rjsf/utils'), require('chakra-react-select'), require('@emotion/react'), require('@emotion/cache'), require('@emotion/weak-memoize')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', '@chakra-ui/react', '@chakra-ui/icons', '@rjsf/utils', 'chakra-react-select', '@emotion/react', '@emotion/cache', '@emotion/weak-memoize'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/chakra-ui"] = {}, global.core, global.React, global.react, global.icons, global.utils, global.chakraReactSelect, global.react$1, global.createCache, global.weakMemoize));
+})(this, (function (exports, core, React, react, icons, utils, chakraReactSelect, react$1, createCache, weakMemoize) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return n;
+  }
 
-  var React__default = 'default' in React ? React['default'] : React;
-  createCache = createCache && Object.prototype.hasOwnProperty.call(createCache, 'default') ? createCache['default'] : createCache;
-  weakMemoize = weakMemoize && Object.prototype.hasOwnProperty.call(weakMemoize, 'default') ? weakMemoize['default'] : weakMemoize;
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache);
+  var weakMemoize__default = /*#__PURE__*/_interopDefaultLegacy(weakMemoize);
 
   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];
 
@@ -22,7 +43,6 @@
 
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
 
@@ -42,97 +62,27 @@
   }
 
   var AddButton = function AddButton(props) {
-    return React__default.createElement(react.Button, Object.assign({
-      leftIcon: React__default.createElement(icons.AddIcon, null)
+    return React__default["default"].createElement(react.Button, _extends({
+      leftIcon: React__default["default"].createElement(icons.AddIcon, null)
     }, props), "Add Item");
   };
 
-  var _excluded = ["icon"];
-  var mappings = {
-    remove: /*#__PURE__*/React__default.createElement(icons.DeleteIcon, null),
-    plus: /*#__PURE__*/React__default.createElement(icons.AddIcon, null),
-    "arrow-up": /*#__PURE__*/React__default.createElement(icons.ArrowUpIcon, null),
-    "arrow-down": /*#__PURE__*/React__default.createElement(icons.ArrowDownIcon, null)
-  };
-  /**
-   * props used in Template:
-   * icon, tabIndex, disabled, onClick
-   */
-
-  var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
-    var icon = props.icon,
-        otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-    return React__default.createElement(react.IconButton, Object.assign({}, otherProps, {
-      icon: mappings[icon],
-      "aria-label": icon
-    }));
-  });
-  ChakraIconButton.displayName = 'ChakraIconButton';
-
-  var _excluded$1 = ["key"],
-      _excluded2 = ["key"];
-  var isMultiSelect = core.utils.isMultiSelect,
-      getDefaultRegistry = core.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 = React.useMemo(function () {
       return onDropIndexClick(index);
     }, [index, onDropIndexClick]);
@@ -142,159 +92,261 @@
     var onArrowDownClick = React.useMemo(function () {
       return onReorderClick(index, index + 1);
     }, [index, onReorderClick]);
-    return React__default.createElement(react.HStack, {
+    return React__default["default"].createElement(react.HStack, {
       alignItems: "flex-end",
       py: 1
-    }, React__default.createElement(react.Box, {
+    }, React__default["default"].createElement(react.Box, {
       w: "100%"
-    }, children), hasToolbar && React__default.createElement(react.Box, null, React__default.createElement(react.ButtonGroup, {
+    }, children), hasToolbar && React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.ButtonGroup, {
       isAttached: true,
       mb: 1
-    }, (hasMoveUp || hasMoveDown) && React__default.createElement(ChakraIconButton, {
-      icon: "arrow-up",
-      tabIndex: -1,
+    }, (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveUpButton, {
       disabled: disabled || readonly || !hasMoveUp,
       onClick: onArrowUpClick
-    }), (hasMoveUp || hasMoveDown) && React__default.createElement(ChakraIconButton, {
-      icon: "arrow-down",
-      tabIndex: -1,
+    }), (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveDownButton, {
       disabled: disabled || readonly || !hasMoveDown,
       onClick: onArrowDownClick
-    }), hasRemove && React__default.createElement(ChakraIconButton, {
-      icon: "remove",
-      tabIndex: -1,
+    }), hasRemove && React__default["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(react.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
-    }), React__default.createElement(react.Grid, {
-      key: "array-item-list-" + props.idSchema.$id
-    }, React__default.createElement(react.GridItem, null, props.items.length > 0 && props.items.map(function (p) {
-      var key = p.key,
-          itemProps = _objectWithoutPropertiesLoose(p, _excluded2);
-
-      return React__default.createElement(DefaultArrayItem, Object.assign({
+  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 = 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 AddButton = registry.templates.ButtonTemplates.AddButton;
+    return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(ArrayFieldTitleTemplate, {
+      idSchema: idSchema,
+      title: uiOptions.title || title,
+      uiSchema: uiSchema,
+      required: required,
+      registry: registry
+    }), (uiOptions.description || schema.description) && React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+      idSchema: idSchema,
+      description: uiOptions.description || schema.description,
+      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);
+
+      return React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
         key: key
       }, itemProps));
-    })), props.canAdd && React__default.createElement(react.GridItem, {
+    })), canAdd && React__default["default"].createElement(react.GridItem, {
       justifySelf: "flex-end"
-    }, React__default.createElement(react.Box, {
+    }, React__default["default"].createElement(react.Box, {
       mt: 2
-    }, React__default.createElement(AddButton, {
+    }, React__default["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(react.Alert, {
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: 3,
-      status: "error"
-    }, React__default.createElement(react.AlertTitle, null, "Errors"), React__default.createElement(react.List, null, errors.map(function (error, i) {
-      return React__default.createElement(react.ListItem, {
-        key: i
-      }, React__default.createElement(react.ListIcon, {
-        as: icons.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 (react.shouldForwardProp(key)) {
+        delete chakraProps[key];
+      }
+    });
+    return chakraProps;
+  }
 
-  var TitleField = function TitleField(_ref) {
-    var title = _ref.title;
-    return React__default.createElement(react.Box, {
-      mt: 1,
-      mb: 4
-    }, React__default.createElement(react.Heading, {
-      as: "h5"
-    }, title), React__default.createElement(react.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 = 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
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }), displayLabel ? React__namespace.createElement(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label"
+    }, label || schema.title) : null, React__namespace.createElement(react.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__namespace.createElement("datalist", {
+      id: "examples_" + id
+    }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
+      return React__namespace.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(react.Text, {
+      return React__default["default"].createElement(react.Text, {
         id: id,
         mt: 2,
         mb: 4
       }, description);
     }
 
-    return React__default.createElement(React__default.Fragment, null, description);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, description);
   };
 
-  var Fields = {
-    TitleField: TitleField,
-    DescriptionField: DescriptionField
+  var ErrorList = function ErrorList(_ref) {
+    var errors = _ref.errors;
+    return React__default["default"].createElement(react.Alert, {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 3,
+      status: "error"
+    }, React__default["default"].createElement(react.AlertTitle, null, "Errors"), React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
+      return React__default["default"].createElement(react.ListItem, {
+        key: i
+      }, React__default["default"].createElement(react.ListIcon, {
+        as: icons.WarningIcon,
+        color: "red.500"
+      }), error.stack);
+    })));
   };
 
-  var ADDITIONAL_PROPERTY_FLAG = core.utils.ADDITIONAL_PROPERTY_FLAG;
+  var _excluded = ["icon", "iconType"];
+  /**
+   * props used in Template:
+   * icon, tabIndex, disabled, onClick
+   */
+
+  var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
+    var icon = props.icon,
+        otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+    return React__default["default"].createElement(react.IconButton, _extends({
+      "aria-label": props.title
+    }, otherProps, {
+      icon: icon
+    }));
+  });
+  ChakraIconButton.displayName = "ChakraIconButton";
+  function MoveDownButton(props) {
+    return React__default["default"].createElement(ChakraIconButton, _extends({
+      title: "Move down"
+    }, props, {
+      icon: React__default["default"].createElement(icons.ArrowDownIcon, null)
+    }));
+  }
+  function MoveUpButton(props) {
+    return React__default["default"].createElement(ChakraIconButton, _extends({
+      title: "Move up"
+    }, props, {
+      icon: React__default["default"].createElement(icons.ArrowUpIcon, null)
+    }));
+  }
+  function RemoveButton(props) {
+    return React__default["default"].createElement(ChakraIconButton, _extends({
+      title: "Remove"
+    }, props, {
+      icon: React__default["default"].createElement(icons.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 = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
 
     if (!additional) {
-      return React.createElement(React.Fragment, null, children);
+      return React__default["default"].createElement("div", {
+        className: classNames
+      }, children);
     }
 
     var keyLabel = label + " Key";
@@ -304,15 +356,17 @@
       return onKeyChange(target.value);
     };
 
-    return React.createElement(react.Grid, {
+    return React__default["default"].createElement(react.Grid, {
       key: id + "-key",
+      className: classNames,
       alignItems: "center",
       gap: 2
-    }, React.createElement(react.GridItem, null, React.createElement(react.FormControl, {
+    }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
       isRequired: required
-    }, React.createElement(react.FormLabel, {
-      htmlFor: id + "-key"
-    }, keyLabel), React.createElement(react.Input, {
+    }, 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",
@@ -320,9 +374,7 @@
       onBlur: !readonly ? handleBlur : undefined,
       type: "text",
       mb: 1
-    }))), React.createElement(react.GridItem, null, children), React.createElement(react.GridItem, null, React.createElement(ChakraIconButton, {
-      icon: "remove",
-      tabIndex: -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)
     })));
@@ -339,6 +391,7 @@
         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,
@@ -347,10 +400,14 @@
         schema = props.schema;
 
     if (hidden) {
-      return React__default.createElement(React__default.Fragment, null, children);
+      return React__default["default"].createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, children);
     }
 
-    return React__default.createElement(WrapIfAdditional, {
+    return React__default["default"].createElement(WrapIfAdditional, {
       classNames: classNames,
       disabled: disabled,
       id: id,
@@ -359,29 +416,26 @@
       onKeyChange: onKeyChange,
       readonly: readonly,
       required: required,
-      schema: schema
-    }, React__default.createElement(react.FormControl, {
+      schema: schema,
+      registry: registry
+    }, React__default["default"].createElement(react.FormControl, {
       isRequired: required,
       isInvalid: rawErrors && rawErrors.length > 0
-    }, children, displayLabel && rawDescription ? React__default.createElement(react.Text, {
+    }, children, displayLabel && rawDescription ? React__default["default"].createElement(react.Text, {
       mt: 2
-    }, rawDescription) : null, rawErrors && rawErrors.length > 0 && React__default.createElement(react.List, null, rawErrors.map(function (error, i) {
-      return React__default.createElement(react.ListItem, {
+    }, rawDescription) : null, rawErrors && rawErrors.length > 0 && React__default["default"].createElement(react.List, null, rawErrors.map(function (error, i) {
+      return React__default["default"].createElement(react.ListItem, {
         key: i
-      }, React__default.createElement(react.FormErrorMessage, {
+      }, React__default["default"].createElement(react.FormErrorMessage, {
         id: id
       }, error));
-    })), rawHelp && React__default.createElement(react.FormHelperText, {
+    })), rawHelp && React__default["default"].createElement(react.FormHelperText, {
       id: id
     }, rawHelp)));
   };
 
-  var canExpand = core.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,
@@ -391,33 +445,88 @@
         idSchema = props.idSchema,
         schema = props.schema,
         formData = props.formData,
-        onAddClick = props.onAddClick;
-    return React.createElement(React.Fragment, null, (uiSchema["ui:title"] || title) && React.createElement(TitleField, {
+        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 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",
-      title: title,
-      required: required
-    }), description && React.createElement(DescriptionField, {
+      title: uiOptions.title || title,
+      required: required,
+      uiSchema: uiSchema,
+      registry: registry
+    }), (uiOptions.description || description) && React__default["default"].createElement(DescriptionFieldTemplate, {
       id: idSchema.$id + "-description",
-      description: description
-    }), React.createElement(react.Grid, {
+      description: uiOptions.description || description,
+      registry: registry
+    }), React__default["default"].createElement(react.Grid, {
       gap: description ? 2 : 6,
       mb: 4
     }, properties.map(function (element, index) {
-      return element.hidden ? element.content : React.createElement(react.GridItem, {
+      return element.hidden ? element.content : React__default["default"].createElement(react.GridItem, {
         key: idSchema.$id + "-" + element.name + "-" + index
       }, element.content);
-    }), canExpand(schema, uiSchema, formData) && React.createElement(react.GridItem, {
+    }), utils.canExpand(schema, uiSchema, formData) && React__default["default"].createElement(react.GridItem, {
       justifySelf: "flex-end"
-    }, React.createElement(AddButton, {
+    }, React__default["default"].createElement(AddButton, {
       className: "object-property-expand",
       onClick: onAddClick(schema),
       disabled: disabled || readonly
     }))));
   };
 
-  var pad = core.utils.pad,
-      parseDateString = core.utils.parseDateString,
-      toDateString = core.utils.toDateString;
+  var SubmitButton = function SubmitButton(_ref) {
+    var uiSchema = _ref.uiSchema;
+
+    var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
+        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) {
+    var id = _ref.id,
+        title = _ref.title;
+    return React__default["default"].createElement(react.Box, {
+      id: id,
+      mt: 1,
+      mb: 4
+    }, 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,
+    FieldTemplate: FieldTemplate,
+    ObjectFieldTemplate: ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField
+  };
 
   var rangeOptions = function rangeOptions(start, stop) {
     var options = [];
@@ -425,7 +534,7 @@
     for (var i = start; i <= stop; i++) {
       options.push({
         value: i,
-        label: pad(i, 2)
+        label: utils.pad(i, 2)
       });
     }
 
@@ -452,12 +561,12 @@
         value = props.value;
     var SelectWidget = registry.widgets.SelectWidget;
 
-    var _useState = React.useState(parseDateString(value, showTime)),
+    var _useState = React.useState(utils.parseDateString(value, showTime)),
         state = _useState[0],
         setState = _useState[1];
 
     React.useEffect(function () {
-      setState(parseDateString(value, showTime));
+      setState(utils.parseDateString(value, showTime));
     }, [showTime, value]);
 
     var handleChange = function handleChange(property, nextValue) {
@@ -466,7 +575,7 @@
       var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === "undefined" ? -1 : nextValue, _extends2));
 
       if (readyForChange(nextState)) {
-        onChange(toDateString(nextState, showTime));
+        onChange(utils.toDateString(nextState, showTime));
       } else {
         setState(nextState);
       }
@@ -479,8 +588,8 @@
         return;
       }
 
-      var nextState = parseDateString(new Date().toJSON(), showTime);
-      onChange(toDateString(nextState, showTime));
+      var nextState = utils.parseDateString(new Date().toJSON(), showTime);
+      onChange(utils.toDateString(nextState, showTime));
     };
 
     var handleClear = function handleClear(event) {
@@ -534,8 +643,8 @@
     };
 
     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["default"].createElement(SelectWidget, _extends({}, elemProps, {
         label: undefined,
         className: "form-control",
         onChange: function onChange(elemValue) {
@@ -552,14 +661,14 @@
       }));
     };
 
-    return React__default.createElement(react.Box, null, React__default.createElement(react.Box, {
+    return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.Box, {
       display: "flex",
       flexWrap: "wrap",
       alignItems: "center",
       justify: "center"
     }, dateElementProps().map(function (elemProps, i) {
       var elemId = id + "_" + elemProps.type;
-      return React__default.createElement(react.Box, {
+      return React__default["default"].createElement(react.Box, {
         key: elemId,
         mr: "2",
         mb: "2"
@@ -574,14 +683,14 @@
         select: handleChange,
         value: elemProps.value < 0 ? "" : elemProps.value
       })));
-    })), React__default.createElement(react.Box, {
+    })), React__default["default"].createElement(react.Box, {
       display: "flex"
-    }, !options.hideNowButton && React__default.createElement(react.Button, {
+    }, !options.hideNowButton && React__default["default"].createElement(react.Button, {
       onClick: function onClick(e) {
         return handleNow(e);
       },
       mr: "2"
-    }, "Now"), !options.hideClearButton && React__default.createElement(react.Button, {
+    }, "Now"), !options.hideClearButton && React__default["default"].createElement(react.Button, {
       onClick: function onClick(e) {
         return handleClear(e);
       }
@@ -600,7 +709,7 @@
 
   var AltDateTimeWidget = function AltDateTimeWidget(props) {
     var AltDateWidget = props.registry.widgets.AltDateWidget;
-    return React__default.createElement(AltDateWidget, Object.assign({}, props, {
+    return React__default["default"].createElement(AltDateWidget, _extends({}, props, {
       showTime: true
     }));
   };
@@ -609,26 +718,6 @@
     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 (react.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,
@@ -659,11 +748,11 @@
       return onFocus(id, value);
     };
 
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
     }, chakraProps, {
       isRequired: required
-    }), React__default.createElement(react.Checkbox, {
+    }), React__default["default"].createElement(react.Checkbox, {
       id: id,
       name: id,
       isChecked: typeof value === "undefined" ? false : value,
@@ -671,7 +760,7 @@
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus
-    }, label && React__default.createElement(react.Text, null, label)));
+    }, label && React__default["default"].createElement(react.Text, null, label)));
   };
 
   //   const at = all.indexOf(value);
@@ -723,26 +812,27 @@
     };
 
     var row = options ? options.inline : false;
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
     }, chakraProps, {
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0
-    }), React__default.createElement(react.FormLabel, {
-      htmlFor: id
-    }, label || schema.title), React__default.createElement(react.CheckboxGroup, {
+    }), React__default["default"].createElement(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label"
+    }, label || schema.title), React__default["default"].createElement(react.CheckboxGroup, {
       onChange: function onChange(option) {
         return _onChange(option);
       },
       defaultValue: value
-    }, React__default.createElement(react.Stack, {
+    }, 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;
-      return React__default.createElement(react.Checkbox, {
+      return React__default["default"].createElement(react.Checkbox, {
         key: id + "_" + index,
         id: id + "_" + index,
         value: option.value,
@@ -750,62 +840,10 @@
         isDisabled: disabled || itemDisabled || readonly,
         onBlur: _onBlur,
         onFocus: _onFocus
-      }, option.label && React__default.createElement(react.Text, null, option.label));
+      }, option.label && React__default["default"].createElement(react.Text, null, option.label));
     }))));
   };
 
-  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 = core.utils.localToUTC,
-      utcToLocal = core.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,
@@ -836,35 +874,34 @@
     };
 
     var row = options ? options.inline : false;
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
     }, chakraProps, {
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly
-    }), React__default.createElement(react.FormLabel, {
-      htmlFor: id
-    }, label || schema.title), React__default.createElement(react.RadioGroup, {
+    }), React__default["default"].createElement(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label"
+    }, label || schema.title), React__default["default"].createElement(react.RadioGroup, {
       onChange: onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
       value: "" + value,
       name: id
-    }, React__default.createElement(react.Stack, {
+    }, React__default["default"].createElement(react.Stack, {
       direction: row ? "row" : "column"
     }, enumOptions.map(function (option, i) {
       var itemDisabled = Boolean(enumDisabled && enumDisabled.indexOf(option.value) != -1);
-      return React__default.createElement(react.Radio, {
+      return React__default["default"].createElement(react.Radio, {
         value: "" + option.value,
         key: i,
+        id: id + "-radio-" + option.value,
         disabled: disabled || itemDisabled || readonly
       }, "" + option.label);
     }))));
   };
 
-  var rangeSpec = core.utils.rangeSpec,
-      getDisplayLabel = core.utils.getDisplayLabel;
-
   var RangeWidget = function RangeWidget(_ref) {
     var value = _ref.value,
         readonly = _ref.readonly,
@@ -876,7 +913,9 @@
         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
     });
@@ -885,9 +924,9 @@
       value: value,
       label: label,
       id: id
-    }, rangeSpec(schema));
+    }, utils.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);
@@ -903,58 +942,18 @@
       return onFocus(id, value);
     };
 
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
-    }, chakraProps), displayLabel ? React__default.createElement(react.FormLabel, {
+    }, chakraProps), displayLabel ? React__default["default"].createElement(react.FormLabel, {
       htmlFor: id
-    }, label || schema.title) : null, React__default.createElement(react.Slider, Object.assign({}, sliderWidgetProps, {
+    }, label || schema.title) : null, React__default["default"].createElement(react.Slider, _extends({}, sliderWidgetProps, {
       id: id,
       name: id,
       isDisabled: disabled || readonly,
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus
-    }), React__default.createElement(react.SliderTrack, null, React__default.createElement(react.SliderFilledTrack, null)), React__default.createElement(react.SliderThumb, null)));
-  };
-
-  var asNumber = core.utils.asNumber,
-      guessType = core.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;
+    }), 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) {
@@ -985,36 +984,36 @@
     var emptyValue = "";
 
     var _onMultiChange = function _onMultiChange(e) {
-      return onChange(processValue(schema, e.map(function (v) {
+      return onChange(utils.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(utils.processSelectValue(schema, value, options));
     };
 
     var _onBlur = function _onBlur(_ref2) {
       var value = _ref2.target.value;
-      return onBlur(id, processValue(schema, value));
+      return onBlur(id, utils.processSelectValue(schema, value, options));
     };
 
     var _onFocus = function _onFocus(_ref3) {
       var value = _ref3.target.value;
-      return onFocus(id, processValue(schema, value));
+      return onFocus(id, utils.processSelectValue(schema, value, options));
     };
 
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
     }, chakraProps, {
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0
-    }), (label || schema.title) && React__default.createElement(react.FormLabel, {
+    }), (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.createElement(chakraReactSelect.Select, {
+    }, label || schema.title), typeof multiple !== "undefined" && enumOptions ? React__default["default"].createElement(chakraReactSelect.Select, {
       inputId: id,
       name: id,
       isMulti: true,
@@ -1028,7 +1027,7 @@
           value: v
         };
       })
-    }) : React__default.createElement(react.Select, {
+    }) : React__default["default"].createElement(react.Select, {
       id: id,
       name: id,
       placeholder: placeholder !== "" ? placeholder : " ",
@@ -1041,7 +1040,7 @@
       var value = _ref4.value,
           label = _ref4.label;
       var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
-      return React__default.createElement("option", {
+      return React__default["default"].createElement("option", {
         key: i,
         value: value,
         disabled: disabled
@@ -1049,8 +1048,6 @@
     })));
   };
 
-  var getDisplayLabel$1 = core.utils.getDisplayLabel;
-
   var TextareaWidget = function TextareaWidget(_ref) {
     var id = _ref.id,
         placeholder = _ref.placeholder,
@@ -1066,11 +1063,13 @@
         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;
@@ -1087,16 +1086,16 @@
       return onFocus(id, value);
     };
 
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
     }, chakraProps, {
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0
-    }), displayLabel ? React__default.createElement(react.FormLabel, {
+    }), displayLabel ? React__default["default"].createElement(react.FormLabel, {
       htmlFor: id
-    }, label || schema.title) : null, React__default.createElement(react.Textarea, {
+    }, label || schema.title) : null, React__default["default"].createElement(react.Textarea, {
       id: id,
       name: id,
       value: value != null ? value : "",
@@ -1108,79 +1107,6 @@
     }));
   };
 
-  var getDisplayLabel$2 = core.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 React.createElement(react.FormControl, Object.assign({
-      mb: 1
-    }, chakraProps, {
-      isDisabled: disabled || readonly,
-      isRequired: required,
-      isReadOnly: readonly,
-      isInvalid: rawErrors && rawErrors.length > 0
-    }), displayLabel ? React.createElement(react.FormLabel, {
-      htmlFor: id,
-      id: id + "-label"
-    }, label || schema.title) : null, React.createElement(react.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 ? 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 getDisplayLabel$3 = core.utils.getDisplayLabel;
-
   var UpDownWidget = function UpDownWidget(props) {
     var id = props.id,
         schema = props.schema,
@@ -1193,8 +1119,10 @@
         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
     });
@@ -1213,54 +1141,24 @@
       return onFocus(id, value);
     };
 
-    return React__default.createElement(react.FormControl, Object.assign({
+    return React__default["default"].createElement(react.FormControl, _extends({
       mb: 1
     }, chakraProps, {
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0
-    }), displayLabel ? React__default.createElement(react.FormLabel, {
+    }), displayLabel ? React__default["default"].createElement(react.FormLabel, {
       htmlFor: id
-    }, label || schema.title) : null, React__default.createElement(react.NumberInput, {
+    }, label || schema.title) : null, React__default["default"].createElement(react.NumberInput, {
       value: value != null ? value : "",
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus
-    }, React__default.createElement(react.NumberInputField, {
+    }, React__default["default"].createElement(react.NumberInputField, {
       id: id,
       name: id
-    }), React__default.createElement(react.NumberInputStepper, null, React__default.createElement(react.NumberIncrementStepper, null), React__default.createElement(react.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 = core.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(react.Box, {
-      marginTop: 3
-    }, React__default.createElement(react.Button, Object.assign({
-      type: "submit",
-      variant: "solid"
-    }, submitButtonProps), submitText));
+    }), React__default["default"].createElement(react.NumberInputStepper, null, React__default["default"].createElement(react.NumberIncrementStepper, null), React__default["default"].createElement(react.NumberDecrementStepper, null))));
   };
 
   var widgets = {
@@ -1268,34 +1166,16 @@
     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 = core.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__*/core.withTheme(Theme);
@@ -1323,7 +1203,7 @@
    */
 
   var CSSReset = function CSSReset() {
-    return React.createElement(react$1.Global, {
+    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    "
     });
   };
@@ -1343,8 +1223,8 @@
    * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
    */
 
-  var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize(function (container) {
-    var newCache = createCache({
+  var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
+    var newCache = createCache__default["default"]({
       container: container,
       key: "rjsf"
     });
@@ -1353,29 +1233,26 @@
   var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
     return function (_ref) {
       var document = _ref.document;
-      return React.createElement("div", {
+      return React__namespace.createElement("div", {
         style: {
           margin: 2
         }
-      }, React.createElement(react$1.CacheProvider, {
+      }, React__namespace.createElement(react$1.CacheProvider, {
         value: memoizedCreateCacheWithContainer(document.head)
-      }, React.createElement(react.ChakraProvider, {
+      }, React__namespace.createElement(react.ChakraProvider, {
         resetCSS: false
-      }, React.createElement(CSSReset, null), props.children)));
+      }, React__namespace.createElement(CSSReset, null), props.children)));
     };
   };
 
-  exports.ArrayFieldTemplate = ArrayFieldTemplate;
-  exports.FieldTemplate = FieldTemplate;
-  exports.Fields = Fields;
   exports.Form = Form;
-  exports.ObjectFieldTemplate = ObjectFieldTemplate;
+  exports.Templates = Templates;
   exports.Theme = Theme;
   exports.Widgets = widgets;
   exports.__createChakraFrameProvider = __createChakraFrameProvider;
-  exports.default = Form;
+  exports["default"] = Form;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=chakra-ui.umd.development.js.map