@rjsf/chakra-ui 5.9.0 → 5.11.1

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

@@ -18,77 +18,48 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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,
@@ -125,25 +96,30 @@ function ArrayFieldItemTemplate(props) {
   });
 }
 
-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,
@@ -160,11 +136,12 @@ function ArrayFieldTemplate(props) {
       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, {
@@ -178,15 +155,15 @@ function ArrayFieldTemplate(props) {
           })
         })
       })]
-    }, "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
      *
@@ -202,52 +179,57 @@ function getChakra(_ref) {
 }
 
 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 : '',
@@ -255,24 +237,25 @@ function BaseInputTemplate(props) {
       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;
   }
@@ -289,10 +272,13 @@ function DescriptionField(_ref) {
   });
 }
 
-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',
@@ -301,62 +287,80 @@ function ErrorList(_ref) {
     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
@@ -364,15 +368,16 @@ function RemoveButton(props) {
  * @param props - The `FieldErrorProps` for the errors being rendered
  */
 function FieldErrorTemplate(props) {
-  var _props$errors = props.errors,
-    errors = _props$errors === void 0 ? [] : _props$errors,
-    idSchema = props.idSchema;
+  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,
@@ -388,12 +393,14 @@ function FieldErrorTemplate(props) {
  * @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
@@ -401,29 +408,30 @@ function FieldHelpTemplate(props) {
 }
 
 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: {
@@ -457,23 +465,29 @@ function FieldTemplate(props) {
 }
 
 function ObjectFieldTemplate(props) {
-  var description = props.description,
-    title = props.title,
-    properties = props.properties,
-    required = props.required,
-    disabled = props.disabled,
-    readonly = props.readonly,
-    uiSchema = props.uiSchema,
-    idSchema = props.idSchema,
-    schema = props.schema,
-    formData = props.formData,
-    onAddClick = props.onAddClick,
-    registry = props.registry;
-  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),
@@ -491,11 +505,9 @@ function ObjectFieldTemplate(props) {
     }), 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',
@@ -509,29 +521,32 @@ function ObjectFieldTemplate(props) {
   });
 }
 
-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,
@@ -544,25 +559,31 @@ function TitleField(_ref) {
 }
 
 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,
@@ -570,10 +591,9 @@ function WrapIfAdditionalTemplate(props) {
       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,
@@ -583,14 +603,14 @@ function WrapIfAdditionalTemplate(props) {
       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
@@ -606,37 +626,37 @@ function WrapIfAdditionalTemplate(props) {
         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)
@@ -645,14 +665,15 @@ var rangeOptions = function rangeOptions(start, stop) {
   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])
     },
@@ -662,64 +683,68 @@ function DateElement(props) {
     },
     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
@@ -754,12 +779,14 @@ function AltDateWidget(props) {
       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,
@@ -770,21 +797,17 @@ function AltDateWidget(props) {
             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)
       })]
     })]
@@ -801,53 +824,62 @@ AltDateWidget.defaultProps = {
 };
 
 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),
@@ -868,63 +900,66 @@ function CheckboxWidget(props) {
         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,
@@ -940,51 +975,53 @@ function CheckboxesWidget(props) {
         })
       })
     })]
-  }));
+  });
 }
 
-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,
@@ -995,8 +1032,8 @@ function RadioWidget(_ref) {
       "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),
@@ -1006,48 +1043,51 @@ function RadioWidget(_ref) {
         })
       })
     })]
-  }));
+  });
 }
 
-function RangeWidget(_ref) {
-  var value = _ref.value,
-    readonly = _ref.readonly,
-    disabled = _ref.disabled,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    options = _ref.options,
-    schema = _ref.schema,
-    uiSchema = _ref.uiSchema,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    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);
-  };
-  var _onFocus = function _onFocus(_ref3) {
-    var value = _ref3.target.value;
-    return onFocus(id, value);
+  const sliderWidgetProps = {
+    value,
+    label,
+    id,
+    ...utils.rangeSpec(schema)
   };
-  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,
@@ -1058,82 +1098,89 @@ function RangeWidget(_ref) {
       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,
@@ -1149,43 +1196,47 @@ function SelectWidget(props) {
       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,
@@ -1196,7 +1247,7 @@ function TextareaWidget(_ref) {
     }), hideLabel || !label), jsxRuntime.jsx(react.Textarea, {
       id: id,
       name: id,
-      value: value != null ? value : '',
+      value: value ?? '',
       placeholder: placeholder,
       autoFocus: autofocus,
       onChange: _onChange,
@@ -1204,39 +1255,41 @@ function TextareaWidget(_ref) {
       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,
@@ -1245,7 +1298,7 @@ function UpDownWidget(props) {
       htmlFor: id,
       children: label
     }), hideLabel || !label), jsxRuntime.jsxs(react.NumberInput, {
-      value: value != null ? value : '',
+      value: value ?? '',
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
@@ -1257,20 +1310,20 @@ function UpDownWidget(props) {
         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();
@@ -1309,11 +1362,249 @@ var Form = /*#__PURE__*/generateForm();
 
   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
@@ -1329,29 +1620,28 @@ var CSSReset = function CSSReset() {
  * From: https://codesandbox.io/s/p98y9o7jz0?file=/src/frame-provider.js:0-650
  * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
  */
-var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
-  var newCache = createCache__default["default"]({
-    container: container,
+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;