@rjsf/chakra-ui 5.10.0 → 5.11.2

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

@@ -9,77 +9,48 @@
   var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache);
   var weakMemoize__default = /*#__PURE__*/_interopDefaultLegacy(weakMemoize);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-    return target;
-  }
-
-  var _excluded$2 = ["uiSchema", "registry"];
-  function AddButton(_ref) {
-    var registry = _ref.registry,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-    var translateString = registry.translateString;
-    return jsxRuntime.jsx(react.Button, _extends({
-      leftIcon: jsxRuntime.jsx(icons.AddIcon, {})
-    }, props, {
+  function AddButton({
+    uiSchema,
+    registry,
+    ...props
+  }) {
+    const {
+      translateString
+    } = registry;
+    return jsxRuntime.jsx(react.Button, {
+      leftIcon: jsxRuntime.jsx(icons.AddIcon, {}),
+      ...props,
       children: translateString(utils.TranslatableString.AddItemButton)
-    }));
+    });
   }
 
   function ArrayFieldItemTemplate(props) {
-    var children = props.children,
-      disabled = props.disabled,
-      hasToolbar = props.hasToolbar,
-      hasCopy = props.hasCopy,
-      hasMoveDown = props.hasMoveDown,
-      hasMoveUp = props.hasMoveUp,
-      hasRemove = props.hasRemove,
-      index = props.index,
-      onCopyIndexClick = props.onCopyIndexClick,
-      onDropIndexClick = props.onDropIndexClick,
-      onReorderClick = props.onReorderClick,
-      readonly = props.readonly,
-      uiSchema = props.uiSchema,
-      registry = props.registry;
-    var _registry$templates$B = registry.templates.ButtonTemplates,
-      CopyButton = _registry$templates$B.CopyButton,
-      MoveDownButton = _registry$templates$B.MoveDownButton,
-      MoveUpButton = _registry$templates$B.MoveUpButton,
-      RemoveButton = _registry$templates$B.RemoveButton;
-    var onCopyClick = react$1.useMemo(function () {
-      return onCopyIndexClick(index);
-    }, [index, onCopyIndexClick]);
-    var onRemoveClick = react$1.useMemo(function () {
-      return onDropIndexClick(index);
-    }, [index, onDropIndexClick]);
-    var onArrowUpClick = react$1.useMemo(function () {
-      return onReorderClick(index, index - 1);
-    }, [index, onReorderClick]);
-    var onArrowDownClick = react$1.useMemo(function () {
-      return onReorderClick(index, index + 1);
-    }, [index, onReorderClick]);
+    const {
+      children,
+      disabled,
+      hasToolbar,
+      hasCopy,
+      hasMoveDown,
+      hasMoveUp,
+      hasRemove,
+      index,
+      onCopyIndexClick,
+      onDropIndexClick,
+      onReorderClick,
+      readonly,
+      uiSchema,
+      registry
+    } = props;
+    const {
+      CopyButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton
+    } = registry.templates.ButtonTemplates;
+    const onCopyClick = react$1.useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+    const onRemoveClick = react$1.useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+    const onArrowUpClick = react$1.useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+    const onArrowDownClick = react$1.useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
     return jsxRuntime.jsxs(react.HStack, {
       alignItems: 'flex-end',
       py: 1,
@@ -116,25 +87,30 @@
     });
   }
 
-  var _excluded$1 = ["key"];
   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);
+    const {
+      canAdd,
+      disabled,
+      idSchema,
+      uiSchema,
+      items,
+      onAddClick,
+      readonly,
+      registry,
+      required,
+      schema,
+      title
+    } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+    const ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+    const ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
     // Button templates are not overridden in the uiSchema
-    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    const {
+      ButtonTemplates: {
+        AddButton
+      }
+    } = registry.templates;
     return jsxRuntime.jsxs(react.Box, {
       children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
         idSchema: idSchema,
@@ -151,11 +127,12 @@
         registry: registry
       }), jsxRuntime.jsxs(react.Grid, {
         children: [jsxRuntime.jsx(react.GridItem, {
-          children: items.length > 0 && items.map(function (_ref) {
-            var key = _ref.key,
-              itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-            return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
-          })
+          children: items.length > 0 && items.map(({
+            key,
+            ...itemProps
+          }) => jsxRuntime.jsx(ArrayFieldItemTemplate, {
+            ...itemProps
+          }, key))
         }), canAdd && jsxRuntime.jsx(react.GridItem, {
           justifySelf: 'flex-end',
           children: jsxRuntime.jsx(react.Box, {
@@ -169,15 +146,15 @@
             })
           })
         })]
-      }, "array-item-list-" + idSchema.$id)]
+      }, `array-item-list-${idSchema.$id}`)]
     });
   }
 
-  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) {
+  function getChakra({
+    uiSchema = {}
+  }) {
+    const chakraProps = uiSchema['ui:options'] && uiSchema['ui:options'].chakra || {};
+    Object.keys(chakraProps).forEach(key => {
       /**
        * Leveraging `shouldForwardProp` to remove props
        *
@@ -193,52 +170,57 @@
   }
 
   function BaseInputTemplate(props) {
-    var id = props.id,
-      type = props.type,
-      value = props.value,
-      label = props.label,
-      hideLabel = props.hideLabel,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      onChange = props.onChange,
-      onChangeOverride = props.onChangeOverride,
-      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 inputProps = utils.getInputProps(schema, type, options);
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+    const {
+      id,
+      type,
+      value,
+      label,
+      hideLabel,
+      schema,
+      uiSchema,
+      onChange,
+      onChangeOverride,
+      onBlur,
+      onFocus,
+      options,
+      required,
+      readonly,
+      rawErrors,
+      autofocus,
+      placeholder,
+      disabled
+    } = props;
+    const inputProps = utils.getInputProps(schema, type, options);
+    const chakraProps = getChakra({
+      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);
-    };
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const _onChange = ({
+      target: {
+        value
+      }
+    }) => onChange(value === '' ? options.emptyValue : value);
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, value);
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, value);
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0,
       children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
         htmlFor: id,
-        id: id + "-label",
+        id: `${id}-label`,
         children: label
-      }), hideLabel || !label), jsxRuntime.jsx(react.Input, _extends({
+      }), hideLabel || !label), jsxRuntime.jsx(react.Input, {
         id: id,
         name: id,
         value: value || value === 0 ? value : '',
@@ -246,24 +228,25 @@
         onBlur: _onBlur,
         onFocus: _onFocus,
         autoFocus: autofocus,
-        placeholder: placeholder
-      }, inputProps, {
+        placeholder: placeholder,
+        ...inputProps,
         list: schema.examples ? utils.examplesId(id) : undefined,
         "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
-      })), Array.isArray(schema.examples) ? jsxRuntime.jsx("datalist", {
+      }), Array.isArray(schema.examples) ? jsxRuntime.jsx("datalist", {
         id: utils.examplesId(id),
-        children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
+        children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
           return jsxRuntime.jsx("option", {
             value: example
           }, example);
         })
       }) : null]
-    }));
+    });
   }
 
-  function DescriptionField(_ref) {
-    var description = _ref.description,
-      id = _ref.id;
+  function DescriptionField({
+    description,
+    id
+  }) {
     if (!description) {
       return null;
     }
@@ -280,10 +263,13 @@
     });
   }
 
-  function ErrorList(_ref) {
-    var errors = _ref.errors,
-      registry = _ref.registry;
-    var translateString = registry.translateString;
+  function ErrorList({
+    errors,
+    registry
+  }) {
+    const {
+      translateString
+    } = registry;
     return jsxRuntime.jsxs(react.Alert, {
       flexDirection: 'column',
       alignItems: 'flex-start',
@@ -292,62 +278,80 @@
       children: [jsxRuntime.jsx(react.AlertTitle, {
         children: translateString(utils.TranslatableString.ErrorsLabel)
       }), jsxRuntime.jsx(react.List, {
-        children: errors.map(function (error, i) {
-          return jsxRuntime.jsxs(react.ListItem, {
-            children: [jsxRuntime.jsx(react.ListIcon, {
-              as: icons.WarningIcon,
-              color: 'red.500'
-            }), error.stack]
-          }, i);
-        })
+        children: errors.map((error, i) => jsxRuntime.jsxs(react.ListItem, {
+          children: [jsxRuntime.jsx(react.ListIcon, {
+            as: icons.WarningIcon,
+            color: 'red.500'
+          }), error.stack]
+        }, i))
       })]
     });
   }
 
-  var _excluded = ["icon", "iconType", "uiSchema", "registry"];
   function ChakraIconButton(props) {
-    var icon = props.icon,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-    return jsxRuntime.jsx(react.IconButton, _extends({
-      "aria-label": props.title
-    }, otherProps, {
+    const {
+      icon,
+      iconType,
+      uiSchema,
+      registry,
+      ...otherProps
+    } = props;
+    return jsxRuntime.jsx(react.IconButton, {
+      "aria-label": props.title,
+      ...otherProps,
       icon: icon
-    }));
+    });
   }
   ChakraIconButton.displayName = 'ChakraIconButton';
   var ChakraIconButton$1 = /*#__PURE__*/react$1.memo(ChakraIconButton);
 
   function CopyButton(props) {
-    var translateString = props.registry.translateString;
-    return jsxRuntime.jsx(ChakraIconButton$1, _extends({
-      title: translateString(utils.TranslatableString.CopyButton)
-    }, props, {
+    const {
+      registry: {
+        translateString
+      }
+    } = props;
+    return jsxRuntime.jsx(ChakraIconButton$1, {
+      title: translateString(utils.TranslatableString.CopyButton),
+      ...props,
       icon: jsxRuntime.jsx(icons.CopyIcon, {})
-    }));
+    });
   }
   function MoveDownButton(props) {
-    var translateString = props.registry.translateString;
-    return jsxRuntime.jsx(ChakraIconButton$1, _extends({
-      title: translateString(utils.TranslatableString.MoveDownButton)
-    }, props, {
+    const {
+      registry: {
+        translateString
+      }
+    } = props;
+    return jsxRuntime.jsx(ChakraIconButton$1, {
+      title: translateString(utils.TranslatableString.MoveDownButton),
+      ...props,
       icon: jsxRuntime.jsx(icons.ArrowDownIcon, {})
-    }));
+    });
   }
   function MoveUpButton(props) {
-    var translateString = props.registry.translateString;
-    return jsxRuntime.jsx(ChakraIconButton$1, _extends({
-      title: translateString(utils.TranslatableString.MoveUpButton)
-    }, props, {
+    const {
+      registry: {
+        translateString
+      }
+    } = props;
+    return jsxRuntime.jsx(ChakraIconButton$1, {
+      title: translateString(utils.TranslatableString.MoveUpButton),
+      ...props,
       icon: jsxRuntime.jsx(icons.ArrowUpIcon, {})
-    }));
+    });
   }
   function RemoveButton(props) {
-    var translateString = props.registry.translateString;
-    return jsxRuntime.jsx(ChakraIconButton$1, _extends({
-      title: translateString(utils.TranslatableString.RemoveButton)
-    }, props, {
+    const {
+      registry: {
+        translateString
+      }
+    } = props;
+    return jsxRuntime.jsx(ChakraIconButton$1, {
+      title: translateString(utils.TranslatableString.RemoveButton),
+      ...props,
       icon: jsxRuntime.jsx(icons.DeleteIcon, {})
-    }));
+    });
   }
 
   /** The `FieldErrorTemplate` component renders the errors local to the particular field
@@ -355,15 +359,16 @@
    * @param props - The `FieldErrorProps` for the errors being rendered
    */
   function FieldErrorTemplate(props) {
-    var _props$errors = props.errors,
-      errors = _props$errors === void 0 ? [] : _props$errors,
-      idSchema = props.idSchema;
+    const {
+      errors = [],
+      idSchema
+    } = props;
     if (errors.length === 0) {
       return null;
     }
-    var id = utils.errorId(idSchema);
+    const id = utils.errorId(idSchema);
     return jsxRuntime.jsx(react.List, {
-      children: errors.map(function (error, i) {
+      children: errors.map((error, i) => {
         return jsxRuntime.jsx(react.ListItem, {
           children: jsxRuntime.jsx(react.FormErrorMessage, {
             id: id,
@@ -379,12 +384,14 @@
    * @param props - The `FieldHelpProps` to be rendered
    */
   function FieldHelpTemplate(props) {
-    var idSchema = props.idSchema,
-      help = props.help;
+    const {
+      idSchema,
+      help
+    } = props;
     if (!help) {
       return null;
     }
-    var id = utils.helpId(idSchema);
+    const id = utils.helpId(idSchema);
     return jsxRuntime.jsx(react.FormHelperText, {
       id: id,
       children: help
@@ -392,29 +399,30 @@
   }
 
   function FieldTemplate(props) {
-    var id = props.id,
-      children = props.children,
-      classNames = props.classNames,
-      style = props.style,
-      disabled = props.disabled,
-      displayLabel = props.displayLabel,
-      hidden = props.hidden,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      errors = props.errors,
-      help = props.help,
-      description = props.description,
-      rawDescription = props.rawDescription,
-      schema = props.schema,
-      uiSchema = props.uiSchema;
-    var uiOptions = utils.getUiOptions(uiSchema);
-    var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
+    const {
+      id,
+      children,
+      classNames,
+      style,
+      disabled,
+      displayLabel,
+      hidden,
+      label,
+      onDropPropertyClick,
+      onKeyChange,
+      readonly,
+      registry,
+      required,
+      rawErrors = [],
+      errors,
+      help,
+      description,
+      rawDescription,
+      schema,
+      uiSchema
+    } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
     if (hidden) {
       return jsxRuntime.jsx("div", {
         style: {
@@ -448,23 +456,29 @@
   }
 
   function ObjectFieldTemplate(props) {
-    var description = props.description,
-      title = props.title,
-      properties = props.properties,
-      required = props.required,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      uiSchema = props.uiSchema,
-      idSchema = props.idSchema,
-      schema = props.schema,
-      formData = props.formData,
-      onAddClick = props.onAddClick,
-      registry = props.registry;
-    var uiOptions = utils.getUiOptions(uiSchema);
-    var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
-    var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+    const {
+      description,
+      title,
+      properties,
+      required,
+      disabled,
+      readonly,
+      uiSchema,
+      idSchema,
+      schema,
+      formData,
+      onAddClick,
+      registry
+    } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
+    const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
     // Button templates are not overridden in the uiSchema
-    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    const {
+      ButtonTemplates: {
+        AddButton
+      }
+    } = registry.templates;
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
         id: utils.titleId(idSchema),
@@ -482,11 +496,9 @@
       }), jsxRuntime.jsxs(react.Grid, {
         gap: description ? 2 : 6,
         mb: 4,
-        children: [properties.map(function (element, index) {
-          return element.hidden ? element.content : jsxRuntime.jsx(react.GridItem, {
-            children: element.content
-          }, idSchema.$id + "-" + element.name + "-" + index);
-        }), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(react.GridItem, {
+        children: [properties.map((element, index) => element.hidden ? element.content : jsxRuntime.jsx(react.GridItem, {
+          children: element.content
+        }, `${idSchema.$id}-${element.name}-${index}`)), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(react.GridItem, {
           justifySelf: 'flex-end',
           children: jsxRuntime.jsx(AddButton, {
             className: 'object-property-expand',
@@ -500,29 +512,32 @@
     });
   }
 
-  function SubmitButton(_ref) {
-    var uiSchema = _ref.uiSchema;
-    var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
-      submitText = _getSubmitButtonOptio.submitText,
-      norender = _getSubmitButtonOptio.norender,
-      submitButtonProps = _getSubmitButtonOptio.props;
+  function SubmitButton({
+    uiSchema
+  }) {
+    const {
+      submitText,
+      norender,
+      props: submitButtonProps
+    } = utils.getSubmitButtonOptions(uiSchema);
     if (norender) {
       return null;
     }
     return jsxRuntime.jsx(react.Box, {
       marginTop: 3,
-      children: jsxRuntime.jsx(react.Button, _extends({
+      children: jsxRuntime.jsx(react.Button, {
         type: 'submit',
-        variant: 'solid'
-      }, submitButtonProps, {
+        variant: 'solid',
+        ...submitButtonProps,
         children: submitText
-      }))
+      })
     });
   }
 
-  function TitleField(_ref) {
-    var id = _ref.id,
-      title = _ref.title;
+  function TitleField({
+    id,
+    title
+  }) {
     return jsxRuntime.jsxs(react.Box, {
       id: id,
       mt: 1,
@@ -535,25 +550,31 @@
   }
 
   function WrapIfAdditionalTemplate(props) {
-    var children = props.children,
-      classNames = props.classNames,
-      style = props.style,
-      disabled = props.disabled,
-      id = props.id,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      schema = props.schema,
-      uiSchema = props.uiSchema;
-    var templates = registry.templates,
-      translateString = registry.translateString;
+    const {
+      children,
+      classNames,
+      style,
+      disabled,
+      id,
+      label,
+      onDropPropertyClick,
+      onKeyChange,
+      readonly,
+      registry,
+      required,
+      schema,
+      uiSchema
+    } = props;
+    const {
+      templates,
+      translateString
+    } = registry;
     // Button templates are not overridden in the uiSchema
-    var RemoveButton = templates.ButtonTemplates.RemoveButton;
-    var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
-    var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+    const {
+      RemoveButton
+    } = templates.ButtonTemplates;
+    const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
+    const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
     if (!additional) {
       return jsxRuntime.jsx("div", {
         className: classNames,
@@ -561,10 +582,9 @@
         children: children
       });
     }
-    var handleBlur = function handleBlur(_ref) {
-      var target = _ref.target;
-      return onKeyChange(target.value);
-    };
+    const handleBlur = ({
+      target
+    }) => onKeyChange(target.value);
     return jsxRuntime.jsxs(react.Grid, {
       className: classNames,
       style: style,
@@ -574,14 +594,14 @@
         children: jsxRuntime.jsxs(react.FormControl, {
           isRequired: required,
           children: [jsxRuntime.jsx(react.FormLabel, {
-            htmlFor: id + "-key",
-            id: id + "-key-label",
+            htmlFor: `${id}-key`,
+            id: `${id}-key-label`,
             children: keyLabel
           }), jsxRuntime.jsx(react.Input, {
             defaultValue: label,
             disabled: disabled || readonly,
-            id: id + "-key",
-            name: id + "-key",
+            id: `${id}-key`,
+            name: `${id}-key`,
             onBlur: !readonly ? handleBlur : undefined,
             type: 'text',
             mb: 1
@@ -597,37 +617,37 @@
           registry: registry
         })
       })]
-    }, id + "-key");
+    }, `${id}-key`);
   }
 
   function generateTemplates() {
     return {
-      ArrayFieldItemTemplate: ArrayFieldItemTemplate,
-      ArrayFieldTemplate: ArrayFieldTemplate,
-      BaseInputTemplate: BaseInputTemplate,
+      ArrayFieldItemTemplate,
+      ArrayFieldTemplate,
+      BaseInputTemplate,
       ButtonTemplates: {
-        CopyButton: CopyButton,
-        AddButton: AddButton,
-        MoveDownButton: MoveDownButton,
-        MoveUpButton: MoveUpButton,
-        RemoveButton: RemoveButton,
-        SubmitButton: SubmitButton
+        CopyButton,
+        AddButton,
+        MoveDownButton,
+        MoveUpButton,
+        RemoveButton,
+        SubmitButton
       },
       DescriptionFieldTemplate: DescriptionField,
       ErrorListTemplate: ErrorList,
-      FieldErrorTemplate: FieldErrorTemplate,
-      FieldHelpTemplate: FieldHelpTemplate,
-      FieldTemplate: FieldTemplate,
-      ObjectFieldTemplate: ObjectFieldTemplate,
+      FieldErrorTemplate,
+      FieldHelpTemplate,
+      FieldTemplate,
+      ObjectFieldTemplate,
       TitleFieldTemplate: TitleField,
-      WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+      WrapIfAdditionalTemplate
     };
   }
   var Templates = /*#__PURE__*/generateTemplates();
 
-  var rangeOptions = function rangeOptions(start, stop) {
-    var options = [];
-    for (var i = start; i <= stop; i++) {
+  const rangeOptions = (start, stop) => {
+    const options = [];
+    for (let i = start; i <= stop; i++) {
       options.push({
         value: i,
         label: utils.pad(i, 2)
@@ -636,14 +656,15 @@
     return options;
   };
   function DateElement(props) {
-    var SelectWidget = props.registry.widgets.SelectWidget;
-    var value = props.value ? props.value : undefined;
-    return jsxRuntime.jsx(SelectWidget, _extends({}, props, {
+    const {
+      SelectWidget
+    } = props.registry.widgets;
+    const value = props.value ? props.value : undefined;
+    return jsxRuntime.jsx(SelectWidget, {
+      ...props,
       label: '',
       className: 'form-control',
-      onChange: function onChange(elemValue) {
-        return props.select(props.type, elemValue);
-      },
+      onChange: elemValue => props.select(props.type, elemValue),
       options: {
         enumOptions: rangeOptions(props.range[0], props.range[1])
       },
@@ -653,64 +674,68 @@
       },
       value: value,
       "aria-describedby": utils.ariaDescribedByIds(props.name)
-    }));
-  }
-  var readyForChange = function readyForChange(state) {
-    return Object.keys(state).every(function (key) {
-      return typeof state[key] !== 'undefined' && state[key] !== -1;
     });
+  }
+  const readyForChange = state => {
+    return Object.keys(state).every(key => typeof state[key] !== 'undefined' && state[key] !== -1);
   };
   function AltDateWidget(props) {
-    var autofocus = props.autofocus,
-      disabled = props.disabled,
-      id = props.id,
-      onBlur = props.onBlur,
-      onChange = props.onChange,
-      onFocus = props.onFocus,
-      options = props.options,
-      readonly = props.readonly,
-      registry = props.registry,
-      showTime = props.showTime,
-      value = props.value;
-    var translateString = registry.translateString;
-    var _useState = react$1.useState(utils.parseDateString(value, showTime)),
-      state = _useState[0],
-      setState = _useState[1];
-    react$1.useEffect(function () {
+    const {
+      autofocus,
+      disabled,
+      id,
+      onBlur,
+      onChange,
+      onFocus,
+      options,
+      readonly,
+      registry,
+      showTime,
+      value
+    } = props;
+    const {
+      translateString
+    } = registry;
+    const [state, setState] = react$1.useState(utils.parseDateString(value, showTime));
+    react$1.useEffect(() => {
       setState(utils.parseDateString(value, showTime));
     }, [showTime, value]);
-    var handleChange = function handleChange(property, nextValue) {
-      var _extends2;
-      var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === 'undefined' ? -1 : nextValue, _extends2));
+    const handleChange = (property, nextValue) => {
+      const nextState = {
+        ...state,
+        [property]: typeof nextValue === 'undefined' ? -1 : nextValue
+      };
       if (readyForChange(nextState)) {
         onChange(utils.toDateString(nextState, showTime));
       } else {
         setState(nextState);
       }
     };
-    var handleNow = function handleNow(event) {
+    const handleNow = event => {
       event.preventDefault();
       if (disabled || readonly) {
         return;
       }
-      var nextState = utils.parseDateString(new Date().toJSON(), showTime);
+      const nextState = utils.parseDateString(new Date().toJSON(), showTime);
       onChange(utils.toDateString(nextState, showTime));
     };
-    var handleClear = function handleClear(event) {
+    const handleClear = event => {
       event.preventDefault();
       if (disabled || readonly) {
         return;
       }
       onChange(undefined);
     };
-    var dateElementProps = function dateElementProps() {
-      var year = state.year,
-        month = state.month,
-        day = state.day,
-        hour = state.hour,
-        minute = state.minute,
-        second = state.second;
-      var data = [{
+    const dateElementProps = () => {
+      const {
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second
+      } = state;
+      const data = [{
         type: 'year',
         range: options.yearsRange,
         value: year
@@ -745,12 +770,14 @@
         display: 'flex',
         flexWrap: 'wrap',
         alignItems: 'center',
-        children: dateElementProps().map(function (elemProps, i) {
-          var elemId = id + '_' + elemProps.type;
+        children: dateElementProps().map((elemProps, i) => {
+          const elemId = id + '_' + elemProps.type;
           return jsxRuntime.jsx(react.Box, {
             mr: '2',
             mb: '2',
-            children: jsxRuntime.jsx(DateElement, _extends({}, props, elemProps, {
+            children: jsxRuntime.jsx(DateElement, {
+              ...props,
+              ...elemProps,
               autofocus: autofocus && i === 0,
               disabled: disabled,
               id: elemId,
@@ -761,21 +788,17 @@
               registry: registry,
               select: handleChange,
               value: elemProps.value < 0 ? '' : elemProps.value
-            }))
+            })
           }, elemId);
         })
       }), jsxRuntime.jsxs(react.Box, {
         display: 'flex',
         children: [!options.hideNowButton && jsxRuntime.jsx(react.Button, {
-          onClick: function onClick(e) {
-            return handleNow(e);
-          },
+          onClick: e => handleNow(e),
           mr: '2',
           children: translateString(utils.TranslatableString.NowLabel)
         }), !options.hideClearButton && jsxRuntime.jsx(react.Button, {
-          onClick: function onClick(e) {
-            return handleClear(e);
-          },
+          onClick: e => handleClear(e),
           children: translateString(utils.TranslatableString.ClearLabel)
         })]
       })]
@@ -792,53 +815,62 @@
   };
 
   function AltDateTimeWidget(props) {
-    var AltDateWidget = props.registry.widgets.AltDateWidget;
-    return jsxRuntime.jsx(AltDateWidget, _extends({}, props, {
+    const {
+      AltDateWidget
+    } = props.registry.widgets;
+    return jsxRuntime.jsx(AltDateWidget, {
+      ...props,
       showTime: true
-    }));
+    });
   }
-  AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.defaultProps, {
+  AltDateTimeWidget.defaultProps = {
+    ...AltDateWidget.defaultProps,
     showTime: true
-  });
+  };
 
   function CheckboxWidget(props) {
-    var id = props.id,
-      value = props.value,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      label = props.label,
-      hideLabel = props.hideLabel,
-      registry = props.registry,
-      options = props.options,
-      uiSchema = props.uiSchema,
-      schema = props.schema;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+    const {
+      id,
+      value,
+      disabled,
+      readonly,
+      onChange,
+      onBlur,
+      onFocus,
+      label,
+      hideLabel,
+      registry,
+      options,
+      uiSchema,
+      schema
+    } = props;
+    const chakraProps = getChakra({
+      uiSchema
     });
     // Because an unchecked checkbox will cause html5 validation to fail, only add
     // the "required" attribute if the field value must be "true", due to the
     // "const" or "enum" keywords
-    var required = utils.schemaRequiresTrueValue(schema);
-    var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
-    var description = options.description || schema.description;
-    var _onChange = function _onChange(_ref) {
-      var checked = _ref.target.checked;
-      return onChange(checked);
-    };
-    var _onBlur = function _onBlur(_ref2) {
-      var value = _ref2.target.value;
-      return onBlur(id, value);
-    };
-    var _onFocus = function _onFocus(_ref3) {
-      var value = _ref3.target.value;
-      return onFocus(id, value);
-    };
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const required = utils.schemaRequiresTrueValue(schema);
+    const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
+    const description = options.description || schema.description;
+    const _onChange = ({
+      target: {
+        checked
+      }
+    }) => onChange(checked);
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, value);
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, value);
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isRequired: required,
       children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
         id: utils.descriptionId(id),
@@ -859,63 +891,66 @@
           children: label
         }), hideLabel || !label)
       })]
-    }));
+    });
   }
 
   function CheckboxesWidget(props) {
-    var id = props.id,
-      disabled = props.disabled,
-      options = props.options,
-      value = props.value,
-      readonly = props.readonly,
-      _onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      required = props.required,
-      label = props.label,
-      hideLabel = props.hideLabel,
-      uiSchema = props.uiSchema,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
-    var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled,
-      emptyValue = options.emptyValue;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+    const {
+      id,
+      disabled,
+      options,
+      value,
+      readonly,
+      onChange,
+      onBlur,
+      onFocus,
+      required,
+      label,
+      hideLabel,
+      uiSchema,
+      rawErrors = []
+    } = props;
+    const {
+      enumOptions,
+      enumDisabled,
+      emptyValue
+    } = options;
+    const chakraProps = getChakra({
+      uiSchema
     });
-    var checkboxesValues = Array.isArray(value) ? value : [value];
-    var _onBlur = function _onBlur(_ref) {
-      var value = _ref.target.value;
-      return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-    };
-    var _onFocus = function _onFocus(_ref2) {
-      var value = _ref2.target.value;
-      return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-    };
-    var row = options ? options.inline : false;
-    var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const checkboxesValues = Array.isArray(value) ? value : [value];
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
+    const row = options ? options.inline : false;
+    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0,
       children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
         htmlFor: id,
-        id: id + "-label",
+        id: `${id}-label`,
         children: label
       }), hideLabel || !label), jsxRuntime.jsx(react.CheckboxGroup, {
-        onChange: function onChange(option) {
-          return _onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue));
-        },
+        onChange: option => onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue)),
         defaultValue: selectedIndexes,
         "aria-describedby": utils.ariaDescribedByIds(id),
         children: jsxRuntime.jsx(react.Stack, {
           direction: row ? 'row' : 'column',
-          children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-            var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
-            var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+            const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
             return jsxRuntime.jsx(react.Checkbox, {
               id: utils.optionId(id, index),
               name: id,
@@ -931,51 +966,53 @@
           })
         })
       })]
-    }));
+    });
   }
 
-  function RadioWidget(_ref) {
-    var _enumOptionsIndexForV;
-    var id = _ref.id,
-      options = _ref.options,
-      value = _ref.value,
-      required = _ref.required,
-      disabled = _ref.disabled,
-      readonly = _ref.readonly,
-      label = _ref.label,
-      hideLabel = _ref.hideLabel,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      uiSchema = _ref.uiSchema;
-    var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled,
-      emptyValue = options.emptyValue;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+  function RadioWidget({
+    id,
+    options,
+    value,
+    required,
+    disabled,
+    readonly,
+    label,
+    hideLabel,
+    onChange,
+    onBlur,
+    onFocus,
+    uiSchema
+  }) {
+    const {
+      enumOptions,
+      enumDisabled,
+      emptyValue
+    } = options;
+    const chakraProps = getChakra({
+      uiSchema
     });
-    var _onChange = function _onChange(nextValue) {
-      return onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
-    };
-    var _onBlur = function _onBlur(_ref2) {
-      var value = _ref2.target.value;
-      return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-    };
-    var _onFocus = function _onFocus(_ref3) {
-      var value = _ref3.target.value;
-      return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-    };
-    var row = options ? options.inline : false;
-    var selectedIndex = (_enumOptionsIndexForV = utils.enumOptionsIndexForValue(value, enumOptions)) != null ? _enumOptionsIndexForV : null;
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const _onChange = nextValue => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
+    const row = options ? options.inline : false;
+    const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? null;
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
         htmlFor: id,
-        id: id + "-label",
+        id: `${id}-label`,
         children: label
       }), hideLabel || !label), jsxRuntime.jsx(react.RadioGroup, {
         onChange: _onChange,
@@ -986,8 +1023,8 @@
         "aria-describedby": utils.ariaDescribedByIds(id),
         children: jsxRuntime.jsx(react.Stack, {
           direction: row ? 'row' : 'column',
-          children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-            var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
             return jsxRuntime.jsx(react.Radio, {
               value: String(index),
               id: utils.optionId(id, index),
@@ -997,48 +1034,51 @@
           })
         })
       })]
-    }));
+    });
   }
 
-  function RangeWidget(_ref) {
-    var value = _ref.value,
-      readonly = _ref.readonly,
-      disabled = _ref.disabled,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      options = _ref.options,
-      schema = _ref.schema,
-      uiSchema = _ref.uiSchema,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+  function RangeWidget({
+    value,
+    readonly,
+    disabled,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    uiSchema,
+    onChange,
+    label,
+    hideLabel,
+    id
+  }) {
+    const chakraProps = getChakra({
+      uiSchema
     });
-    var sliderWidgetProps = _extends({
-      value: value,
-      label: label,
-      id: id
-    }, utils.rangeSpec(schema));
-    var _onChange = function _onChange(value) {
-      return onChange(value === undefined ? options.emptyValue : value);
-    };
-    var _onBlur = function _onBlur(_ref2) {
-      var value = _ref2.target.value;
-      return onBlur(id, value);
+    const sliderWidgetProps = {
+      value,
+      label,
+      id,
+      ...utils.rangeSpec(schema)
     };
-    var _onFocus = function _onFocus(_ref3) {
-      var value = _ref3.target.value;
-      return onFocus(id, value);
-    };
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const _onChange = value => onChange(value === undefined ? options.emptyValue : value);
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, value);
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, value);
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
         htmlFor: id,
         children: label
-      }), hideLabel || !label), jsxRuntime.jsxs(react.Slider, _extends({}, sliderWidgetProps, {
+      }), hideLabel || !label), jsxRuntime.jsxs(react.Slider, {
+        ...sliderWidgetProps,
         id: id,
         name: id,
         isDisabled: disabled || readonly,
@@ -1049,82 +1089,89 @@
         children: [jsxRuntime.jsx(react.SliderTrack, {
           children: jsxRuntime.jsx(react.SliderFilledTrack, {})
         }), jsxRuntime.jsx(react.SliderThumb, {})]
-      }))]
-    }));
+      })]
+    });
   }
 
   function SelectWidget(props) {
-    var id = props.id,
-      options = props.options,
-      label = props.label,
-      hideLabel = props.hideLabel,
-      placeholder = props.placeholder,
-      multiple = props.multiple,
-      required = props.required,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      value = props.value,
-      autofocus = props.autofocus,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      uiSchema = props.uiSchema;
-    var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled,
-      emptyValue = options.emptyValue;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+    const {
+      id,
+      options,
+      label,
+      hideLabel,
+      placeholder,
+      multiple,
+      required,
+      disabled,
+      readonly,
+      value,
+      autofocus,
+      onChange,
+      onBlur,
+      onFocus,
+      rawErrors = [],
+      uiSchema
+    } = props;
+    const {
+      enumOptions,
+      enumDisabled,
+      emptyValue
+    } = options;
+    const chakraProps = getChakra({
+      uiSchema
     });
-    var _onMultiChange = function _onMultiChange(e) {
-      return onChange(utils.enumOptionsValueForIndex(e.map(function (v) {
+    const _onMultiChange = e => {
+      return onChange(utils.enumOptionsValueForIndex(e.map(v => {
         return v.value;
       }), enumOptions, emptyValue));
     };
-    var _onChange = function _onChange(e) {
+    const _onChange = e => {
       return onChange(utils.enumOptionsValueForIndex(e.value, enumOptions, emptyValue));
     };
-    var _onBlur = function _onBlur(_ref) {
-      var value = _ref.target.value;
-      return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-    };
-    var _onFocus = function _onFocus(_ref2) {
-      var value = _ref2.target.value;
-      return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-    };
-    var _valueLabelMap = {};
-    var displayEnumOptions = Array.isArray(enumOptions) ? enumOptions.map(function (option, index) {
-      var value = option.value,
-        label = option.label;
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
+    const _valueLabelMap = {};
+    const displayEnumOptions = Array.isArray(enumOptions) ? enumOptions.map((option, index) => {
+      const {
+        value,
+        label
+      } = option;
       _valueLabelMap[index] = label || String(value);
       return {
-        label: label,
+        label,
         value: String(index),
         isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
       };
     }) : [];
-    var isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
-    var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
-    var formValue = isMultiple ? (selectedIndex || []).map(function (i) {
+    const isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
+    const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
+    const formValue = isMultiple ? (selectedIndex || []).map(i => {
       return {
         label: _valueLabelMap[i],
         value: i
       };
     }) : {
       label: _valueLabelMap[selectedIndex] || '',
-      selectedIndex: selectedIndex
+      selectedIndex
     };
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
       isInvalid: rawErrors && rawErrors.length > 0,
       children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
         htmlFor: id,
-        id: id + "-label",
+        id: `${id}-label`,
         children: label
       }), hideLabel || !label), jsxRuntime.jsx(chakraReactSelect.Select, {
         inputId: id,
@@ -1140,43 +1187,47 @@
         value: formValue,
         "aria-describedby": utils.ariaDescribedByIds(id)
       })]
-    }));
+    });
   }
 
-  function TextareaWidget(_ref) {
-    var id = _ref.id,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
-      label = _ref.label,
-      hideLabel = _ref.hideLabel,
-      disabled = _ref.disabled,
-      autofocus = _ref.autofocus,
-      readonly = _ref.readonly,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onChange = _ref.onChange,
-      options = _ref.options,
-      uiSchema = _ref.uiSchema,
-      required = _ref.required,
-      rawErrors = _ref.rawErrors;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+  function TextareaWidget({
+    id,
+    placeholder,
+    value,
+    label,
+    hideLabel,
+    disabled,
+    autofocus,
+    readonly,
+    onBlur,
+    onFocus,
+    onChange,
+    options,
+    uiSchema,
+    required,
+    rawErrors
+  }) {
+    const chakraProps = getChakra({
+      uiSchema
     });
-    var _onChange = function _onChange(_ref2) {
-      var value = _ref2.target.value;
-      return onChange(value === '' ? options.emptyValue : value);
-    };
-    var _onBlur = function _onBlur(_ref3) {
-      var value = _ref3.target.value;
-      return onBlur(id, value);
-    };
-    var _onFocus = function _onFocus(_ref4) {
-      var value = _ref4.target.value;
-      return onFocus(id, value);
-    };
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const _onChange = ({
+      target: {
+        value
+      }
+    }) => onChange(value === '' ? options.emptyValue : value);
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, value);
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, value);
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
@@ -1187,7 +1238,7 @@
       }), hideLabel || !label), jsxRuntime.jsx(react.Textarea, {
         id: id,
         name: id,
-        value: value != null ? value : '',
+        value: value ?? '',
         placeholder: placeholder,
         autoFocus: autofocus,
         onChange: _onChange,
@@ -1195,39 +1246,41 @@
         onFocus: _onFocus,
         "aria-describedby": utils.ariaDescribedByIds(id)
       })]
-    }));
+    });
   }
 
   function UpDownWidget(props) {
-    var id = props.id,
-      uiSchema = props.uiSchema,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      label = props.label,
-      hideLabel = props.hideLabel,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      rawErrors = props.rawErrors,
-      required = props.required;
-    var chakraProps = getChakra({
-      uiSchema: uiSchema
+    const {
+      id,
+      uiSchema,
+      readonly,
+      disabled,
+      label,
+      hideLabel,
+      value,
+      onChange,
+      onBlur,
+      onFocus,
+      rawErrors,
+      required
+    } = props;
+    const chakraProps = getChakra({
+      uiSchema
     });
-    var _onChange = function _onChange(value) {
-      return onChange(value);
-    };
-    var _onBlur = function _onBlur(_ref) {
-      var value = _ref.target.value;
-      return onBlur(id, value);
-    };
-    var _onFocus = function _onFocus(_ref2) {
-      var value = _ref2.target.value;
-      return onFocus(id, value);
-    };
-    return jsxRuntime.jsxs(react.FormControl, _extends({
-      mb: 1
-    }, chakraProps, {
+    const _onChange = value => onChange(value);
+    const _onBlur = ({
+      target: {
+        value
+      }
+    }) => onBlur(id, value);
+    const _onFocus = ({
+      target: {
+        value
+      }
+    }) => onFocus(id, value);
+    return jsxRuntime.jsxs(react.FormControl, {
+      mb: 1,
+      ...chakraProps,
       isDisabled: disabled || readonly,
       isRequired: required,
       isReadOnly: readonly,
@@ -1236,7 +1289,7 @@
         htmlFor: id,
         children: label
       }), hideLabel || !label), jsxRuntime.jsxs(react.NumberInput, {
-        value: value != null ? value : '',
+        value: value ?? '',
         onChange: _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
@@ -1248,20 +1301,20 @@
           children: [jsxRuntime.jsx(react.NumberIncrementStepper, {}), jsxRuntime.jsx(react.NumberDecrementStepper, {})]
         })]
       })]
-    }));
+    });
   }
 
   function generateWidgets() {
     return {
-      AltDateTimeWidget: AltDateTimeWidget,
-      AltDateWidget: AltDateWidget,
-      CheckboxWidget: CheckboxWidget,
-      CheckboxesWidget: CheckboxesWidget,
-      RadioWidget: RadioWidget,
-      RangeWidget: RangeWidget,
-      SelectWidget: SelectWidget,
-      TextareaWidget: TextareaWidget,
-      UpDownWidget: UpDownWidget
+      AltDateTimeWidget,
+      AltDateWidget,
+      CheckboxWidget,
+      CheckboxesWidget,
+      RadioWidget,
+      RangeWidget,
+      SelectWidget,
+      TextareaWidget,
+      UpDownWidget
     };
   }
   var Widgets = /*#__PURE__*/generateWidgets();
@@ -1300,11 +1353,249 @@
 
     It is located at the bottom of the styles string.
    */
-  var CSSReset = function CSSReset() {
-    return jsxRuntime.jsx(react$2.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    "
-    });
-  };
+  const CSSReset = () => jsxRuntime.jsx(react$2.Global, {
+    styles: `
+      html {
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        font-family: system-ui, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        touch-action: manipulation;
+      }
+      body {
+        position: relative;
+        min-height: 100%;
+        font-feature-settings: 'kern';
+      }
+      *,
+      *::before,
+      *::after {
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+      }
+      main {
+        display: block;
+      }
+      hr {
+        border-top-width: 1px;
+        box-sizing: content-box;
+        height: 0;
+        overflow: visible;
+      }
+      pre,
+      code,
+      kbd,
+      samp {
+        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;
+        font-size: 1em;
+      }
+      a {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: inherit;
+      }
+      abbr[title] {
+        border-bottom: none;
+        text-decoration: underline;
+        -webkit-text-decoration: underline dotted;
+        text-decoration: underline dotted;
+      }
+      b,
+      strong {
+        font-weight: bold;
+      }
+      small {
+        font-size: 80%;
+      }
+      sub,
+      sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+      sub {
+        bottom: -0.25em;
+      }
+      sup {
+        top: -0.5em;
+      }
+      img {
+        border-style: none;
+      }
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: inherit;
+        font-size: 100%;
+        line-height: 1.15;
+        margin: 0;
+      }
+      button,
+      input {
+        overflow: visible;
+      }
+      button,
+      select {
+        text-transform: none;
+      }
+      button::-moz-focus-inner,
+      [type="button"]::-moz-focus-inner,
+      [type="reset"]::-moz-focus-inner,
+      [type="submit"]::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+      }
+      fieldset {
+        padding: 0.35em 0.75em 0.625em;
+      }
+      legend {
+        box-sizing: border-box;
+        color: inherit;
+        display: table;
+        max-width: 100%;
+        padding: 0;
+        white-space: normal;
+      }
+      progress {
+        vertical-align: baseline;
+      }
+      textarea {
+        overflow: auto;
+      }
+      [type="checkbox"],
+      [type="radio"] {
+        box-sizing: border-box;
+        padding: 0;
+      }
+      [type="number"]::-webkit-inner-spin-button,
+      [type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none !important;
+      }
+      input[type="number"] {
+        -moz-appearance: textfield;
+      }
+      [type="search"] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+      [type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none !important;
+      }
+      ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+      }
+      details {
+        display: block;
+      }
+      summary {
+        display: list-item;
+      }
+      template {
+        display: none;
+      }
+      [hidden] {
+        display: none !important;
+      }
+      body,
+      blockquote,
+      dl,
+      dd,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      hr,
+      figure,
+      p,
+      pre {
+        margin: 0;
+      }
+      button {
+        background: transparent;
+        padding: 0;
+      }
+      fieldset {
+        margin: 0;
+        padding: 0;
+      }
+      ol,
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+      textarea {
+        resize: vertical;
+      }
+      button,
+      [role="button"] {
+        cursor: pointer;
+      }
+      button::-moz-focus-inner {
+        border: 0 !important;
+      }
+      table {
+        border-collapse: collapse;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: inherit;
+        font-weight: inherit;
+      }
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        padding: 0;
+        line-height: inherit;
+        color: inherit;
+      }
+      img,
+      svg,
+      video,
+      canvas,
+      audio,
+      iframe,
+      embed,
+      object {
+        display: block;
+      }
+      img,
+      video {
+        max-width: 100%;
+        height: auto;
+      }
+      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {
+        outline: none;
+        box-shadow: none;
+      }
+      select::-ms-expand {
+        display: none;
+      }
+      input {
+        border-width: revert;
+        border-color: revert;
+        border-style: revert;
+      }
+      .array-item > hr {
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+    `
+  });
 
   /**
    * __createChakraFrameProvider is used to ensure that <Global> emotion components
@@ -1320,29 +1611,28 @@
    * From: https://codesandbox.io/s/p98y9o7jz0?file=/src/frame-provider.js:0-650
    * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
    */
-  var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
-    var newCache = createCache__default["default"]({
-      container: container,
+  const memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](container => {
+    const newCache = createCache__default["default"]({
+      container,
       key: 'rjsf'
     });
     return newCache;
   });
-  var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
-    return function (_ref) {
-      var document = _ref.document;
-      return jsxRuntime.jsx("div", {
-        style: {
-          margin: 2
-        },
-        children: jsxRuntime.jsx(react$2.CacheProvider, {
-          value: memoizedCreateCacheWithContainer(document.head),
-          children: jsxRuntime.jsxs(react.ChakraProvider, {
-            resetCSS: false,
-            children: [jsxRuntime.jsx(CSSReset, {}), props.children]
-          })
+  const __createChakraFrameProvider = props => ({
+    document
+  }) => {
+    return jsxRuntime.jsx("div", {
+      style: {
+        margin: 2
+      },
+      children: jsxRuntime.jsx(react$2.CacheProvider, {
+        value: memoizedCreateCacheWithContainer(document.head),
+        children: jsxRuntime.jsxs(react.ChakraProvider, {
+          resetCSS: false,
+          children: [jsxRuntime.jsx(CSSReset, {}), props.children]
         })
-      });
-    };
+      })
+    });
   };
 
   exports.Form = Form;