@rjsf/chakra-ui 5.1.0 → 5.2.1

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

@@ -3,37 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@rjsf/core');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@rjsf/utils');
 var react = require('@chakra-ui/react');
 var icons = require('@chakra-ui/icons');
-var utils = require('@rjsf/utils');
+var react$1 = require('react');
 var chakraReactSelect = require('chakra-react-select');
-var react$1 = require('@emotion/react');
+var react$2 = require('@emotion/react');
 var createCache = require('@emotion/cache');
 var weakMemoize = require('@emotion/weak-memoize');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return n;
-}
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache);
 var weakMemoize__default = /*#__PURE__*/_interopDefaultLegacy(weakMemoize);
 
@@ -66,10 +47,14 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var _excluded$2 = ["uiSchema", "registry"];
 function AddButton(_ref) {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return React__default["default"].createElement(react.Button, _extends({
-    leftIcon: React__default["default"].createElement(icons.AddIcon, null)
-  }, props), "Add Item");
+  var registry = _ref.registry,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var translateString = registry.translateString;
+  return jsxRuntime.jsx(react.Button, _extends({
+    leftIcon: jsxRuntime.jsx(icons.AddIcon, {})
+  }, props, {
+    children: translateString(utils.TranslatableString.AddItemButton)
+  }));
 }
 
 function ArrayFieldItemTemplate(props) {
@@ -89,39 +74,44 @@ function ArrayFieldItemTemplate(props) {
     MoveDownButton = _registry$templates$B.MoveDownButton,
     MoveUpButton = _registry$templates$B.MoveUpButton,
     RemoveButton = _registry$templates$B.RemoveButton;
-  var onRemoveClick = React.useMemo(function () {
+  var onRemoveClick = react$1.useMemo(function () {
     return onDropIndexClick(index);
   }, [index, onDropIndexClick]);
-  var onArrowUpClick = React.useMemo(function () {
+  var onArrowUpClick = react$1.useMemo(function () {
     return onReorderClick(index, index - 1);
   }, [index, onReorderClick]);
-  var onArrowDownClick = React.useMemo(function () {
+  var onArrowDownClick = react$1.useMemo(function () {
     return onReorderClick(index, index + 1);
   }, [index, onReorderClick]);
-  return React__default["default"].createElement(react.HStack, {
-    alignItems: "flex-end",
-    py: 1
-  }, React__default["default"].createElement(react.Box, {
-    w: "100%"
-  }, children), hasToolbar && React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.ButtonGroup, {
-    isAttached: true,
-    mb: 1
-  }, (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveUpButton, {
-    disabled: disabled || readonly || !hasMoveUp,
-    onClick: onArrowUpClick,
-    uiSchema: uiSchema,
-    registry: registry
-  }), (hasMoveUp || hasMoveDown) && React__default["default"].createElement(MoveDownButton, {
-    disabled: disabled || readonly || !hasMoveDown,
-    onClick: onArrowDownClick,
-    uiSchema: uiSchema,
-    registry: registry
-  }), hasRemove && React__default["default"].createElement(RemoveButton, {
-    disabled: disabled || readonly,
-    onClick: onRemoveClick,
-    uiSchema: uiSchema,
-    registry: registry
-  }))));
+  return jsxRuntime.jsxs(react.HStack, {
+    alignItems: 'flex-end',
+    py: 1,
+    children: [jsxRuntime.jsx(react.Box, {
+      w: '100%',
+      children: children
+    }), hasToolbar && jsxRuntime.jsx(react.Box, {
+      children: jsxRuntime.jsxs(react.ButtonGroup, {
+        isAttached: true,
+        mb: 1,
+        children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
+          disabled: disabled || readonly || !hasMoveUp,
+          onClick: onArrowUpClick,
+          uiSchema: uiSchema,
+          registry: registry
+        }), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
+          disabled: disabled || readonly || !hasMoveDown,
+          onClick: onArrowDownClick,
+          uiSchema: uiSchema,
+          registry: registry
+        }), hasRemove && jsxRuntime.jsx(RemoveButton, {
+          disabled: disabled || readonly,
+          onClick: onRemoveClick,
+          uiSchema: uiSchema,
+          registry: registry
+        })]
+      })
+    })]
+  });
 }
 
 var _excluded$1 = ["key"];
@@ -138,49 +128,53 @@ function ArrayFieldTemplate(props) {
     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);
+  var ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+  var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+  var ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
-  return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(ArrayFieldTitleTemplate, {
-    idSchema: idSchema,
-    title: uiOptions.title || title,
-    schema: schema,
-    uiSchema: uiSchema,
-    required: required,
-    registry: registry
-  }), React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
-    idSchema: idSchema,
-    description: uiOptions.description || schema.description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), React__default["default"].createElement(react.Grid, {
-    key: "array-item-list-" + idSchema.$id
-  }, React__default["default"].createElement(react.GridItem, null, items.length > 0 && items.map(function (_ref) {
-    var key = _ref.key,
-      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    return React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
-      key: key
-    }, itemProps));
-  })), canAdd && React__default["default"].createElement(react.GridItem, {
-    justifySelf: "flex-end"
-  }, React__default["default"].createElement(react.Box, {
-    mt: 2
-  }, React__default["default"].createElement(AddButton, {
-    className: "array-item-add",
-    onClick: onAddClick,
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  })))));
+  return jsxRuntime.jsxs(react.Box, {
+    children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
+      idSchema: idSchema,
+      title: uiOptions.title || title,
+      schema: schema,
+      uiSchema: uiSchema,
+      required: required,
+      registry: registry
+    }), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
+      idSchema: idSchema,
+      description: uiOptions.description || schema.description,
+      schema: schema,
+      uiSchema: uiSchema,
+      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);
+        })
+      }), canAdd && jsxRuntime.jsx(react.GridItem, {
+        justifySelf: 'flex-end',
+        children: jsxRuntime.jsx(react.Box, {
+          mt: 2,
+          children: jsxRuntime.jsx(AddButton, {
+            className: 'array-item-add',
+            onClick: onAddClick,
+            disabled: disabled || readonly,
+            uiSchema: uiSchema,
+            registry: registry
+          })
+        })
+      })]
+    }, "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 || {};
+  var chakraProps = uiSchema['ui:options'] && uiSchema['ui:options'].chakra || {};
   Object.keys(chakraProps).forEach(function (key) {
     /**
      * Leveraging `shouldForwardProp` to remove props
@@ -204,6 +198,7 @@ function BaseInputTemplate(props) {
     schema = props.schema,
     uiSchema = props.uiSchema,
     onChange = props.onChange,
+    onChangeOverride = props.onChangeOverride,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     options = props.options,
@@ -221,7 +216,7 @@ function BaseInputTemplate(props) {
   var schemaUtils = registry.schemaUtils;
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
+    return onChange(value === '' ? options.emptyValue : value);
   };
   var _onBlur = function _onBlur(_ref2) {
     var value = _ref2.target.value;
@@ -232,36 +227,38 @@ function BaseInputTemplate(props) {
     return onFocus(id, value);
   };
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
-  return React__namespace.createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }), displayLabel ? React__namespace.createElement(react.FormLabel, {
-    htmlFor: id,
-    id: id + "-label"
-  }, label || schema.title) : null, React__namespace.createElement(react.Input, _extends({
-    id: id,
-    name: id,
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    autoFocus: autofocus,
-    placeholder: placeholder
-  }, inputProps, {
-    list: schema.examples ? utils.examplesId(id) : undefined,
-    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
-  })), Array.isArray(schema.examples) ? React__namespace.createElement("datalist", {
-    id: utils.examplesId(id)
-  }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
-    return React__namespace.createElement("option", {
-      key: example,
-      value: example
-    });
-  })) : null);
+    isInvalid: rawErrors && rawErrors.length > 0,
+    children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label",
+      children: label || schema.title
+    }) : null, jsxRuntime.jsx(react.Input, _extends({
+      id: id,
+      name: id,
+      value: value || value === 0 ? value : '',
+      onChange: onChangeOverride || _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      autoFocus: autofocus,
+      placeholder: placeholder
+    }, inputProps, {
+      list: schema.examples ? utils.examplesId(id) : undefined,
+      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+    })), 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) {
+        return jsxRuntime.jsx("option", {
+          value: example
+        }, example);
+      })
+    }) : null]
+  }));
 }
 
 function DescriptionField(_ref) {
@@ -270,65 +267,78 @@ function DescriptionField(_ref) {
   if (!description) {
     return null;
   }
-  if (typeof description === "string") {
-    return React__default["default"].createElement(react.Text, {
+  if (typeof description === 'string') {
+    return jsxRuntime.jsx(react.Text, {
       id: id,
       mt: 2,
-      mb: 4
-    }, description);
+      mb: 4,
+      children: description
+    });
   }
-  return React__default["default"].createElement(React__default["default"].Fragment, null, description);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: description
+  });
 }
 
 function ErrorList(_ref) {
-  var errors = _ref.errors;
-  return React__default["default"].createElement(react.Alert, {
-    flexDirection: "column",
-    alignItems: "flex-start",
+  var errors = _ref.errors,
+    registry = _ref.registry;
+  var translateString = registry.translateString;
+  return jsxRuntime.jsxs(react.Alert, {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
     gap: 3,
-    status: "error"
-  }, React__default["default"].createElement(react.AlertTitle, null, "Errors"), React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
-    return React__default["default"].createElement(react.ListItem, {
-      key: i
-    }, React__default["default"].createElement(react.ListIcon, {
-      as: icons.WarningIcon,
-      color: "red.500"
-    }), error.stack);
-  })));
+    status: 'error',
+    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);
+      })
+    })]
+  });
 }
 
 var _excluded = ["icon", "iconType", "uiSchema", "registry"];
 function ChakraIconButton(props) {
   var icon = props.icon,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  return React__default["default"].createElement(react.IconButton, _extends({
+  return jsxRuntime.jsx(react.IconButton, _extends({
     "aria-label": props.title
   }, otherProps, {
     icon: icon
   }));
 }
-ChakraIconButton.displayName = "ChakraIconButton";
-var ChakraIconButton$1 = /*#__PURE__*/React__default["default"].memo(ChakraIconButton);
+ChakraIconButton.displayName = 'ChakraIconButton';
+var ChakraIconButton$1 = /*#__PURE__*/react$1.memo(ChakraIconButton);
 
 function MoveDownButton(props) {
-  return React__default["default"].createElement(ChakraIconButton$1, _extends({
-    title: "Move down"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(ChakraIconButton$1, _extends({
+    title: translateString(utils.TranslatableString.MoveDownButton)
   }, props, {
-    icon: React__default["default"].createElement(icons.ArrowDownIcon, null)
+    icon: jsxRuntime.jsx(icons.ArrowDownIcon, {})
   }));
 }
 function MoveUpButton(props) {
-  return React__default["default"].createElement(ChakraIconButton$1, _extends({
-    title: "Move up"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(ChakraIconButton$1, _extends({
+    title: translateString(utils.TranslatableString.MoveUpButton)
   }, props, {
-    icon: React__default["default"].createElement(icons.ArrowUpIcon, null)
+    icon: jsxRuntime.jsx(icons.ArrowUpIcon, {})
   }));
 }
 function RemoveButton(props) {
-  return React__default["default"].createElement(ChakraIconButton$1, _extends({
-    title: "Remove"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(ChakraIconButton$1, _extends({
+    title: translateString(utils.TranslatableString.RemoveButton)
   }, props, {
-    icon: React__default["default"].createElement(icons.DeleteIcon, null)
+    icon: jsxRuntime.jsx(icons.DeleteIcon, {})
   }));
 }
 
@@ -344,13 +354,16 @@ function FieldErrorTemplate(props) {
     return null;
   }
   var id = utils.errorId(idSchema);
-  return React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
-    return React__default["default"].createElement(react.ListItem, {
-      key: i
-    }, React__default["default"].createElement(react.FormErrorMessage, {
-      id: id
-    }, error));
-  }));
+  return jsxRuntime.jsx(react.List, {
+    children: errors.map(function (error, i) {
+      return jsxRuntime.jsx(react.ListItem, {
+        children: jsxRuntime.jsx(react.FormErrorMessage, {
+          id: id,
+          children: error
+        })
+      }, i);
+    })
+  });
 }
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
@@ -364,9 +377,10 @@ function FieldHelpTemplate(props) {
     return null;
   }
   var id = utils.helpId(idSchema);
-  return React__default["default"].createElement(react.FormHelperText, {
-    id: id
-  }, help);
+  return jsxRuntime.jsx(react.FormHelperText, {
+    id: id,
+    children: help
+  });
 }
 
 function FieldTemplate(props) {
@@ -391,15 +405,16 @@ function FieldTemplate(props) {
     schema = props.schema,
     uiSchema = props.uiSchema;
   var uiOptions = utils.getUiOptions(uiSchema);
-  var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+  var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
-    return React__default["default"].createElement("div", {
+    return jsxRuntime.jsx("div", {
       style: {
-        display: "none"
-      }
-    }, children);
+        display: 'none'
+      },
+      children: children
+    });
   }
-  return React__default["default"].createElement(WrapIfAdditionalTemplate, {
+  return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
     classNames: classNames,
     style: style,
     disabled: disabled,
@@ -411,13 +426,16 @@ function FieldTemplate(props) {
     required: required,
     schema: schema,
     uiSchema: uiSchema,
-    registry: registry
-  }, React__default["default"].createElement(react.FormControl, {
-    isRequired: required,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }, children, displayLabel && rawDescription ? React__default["default"].createElement(react.Text, {
-    mt: 2
-  }, rawDescription) : null, errors, help));
+    registry: registry,
+    children: jsxRuntime.jsxs(react.FormControl, {
+      isRequired: required,
+      isInvalid: rawErrors && rawErrors.length > 0,
+      children: [children, displayLabel && rawDescription ? jsxRuntime.jsx(react.Text, {
+        mt: 2,
+        children: rawDescription
+      }) : null, errors, help]
+    })
+  });
 }
 
 function ObjectFieldTemplate(props) {
@@ -434,39 +452,43 @@ function ObjectFieldTemplate(props) {
     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);
+  var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
+  var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
-  return React__default["default"].createElement(React__default["default"].Fragment, null, (uiOptions.title || title) && React__default["default"].createElement(TitleFieldTemplate, {
-    id: utils.titleId(idSchema),
-    title: uiOptions.title || title,
-    required: required,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), (uiOptions.description || description) && React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: utils.descriptionId(idSchema),
-    description: uiOptions.description || description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), React__default["default"].createElement(react.Grid, {
-    gap: description ? 2 : 6,
-    mb: 4
-  }, properties.map(function (element, index) {
-    return element.hidden ? element.content : React__default["default"].createElement(react.GridItem, {
-      key: idSchema.$id + "-" + element.name + "-" + index
-    }, element.content);
-  }), utils.canExpand(schema, uiSchema, formData) && React__default["default"].createElement(react.GridItem, {
-    justifySelf: "flex-end"
-  }, React__default["default"].createElement(AddButton, {
-    className: "object-property-expand",
-    onClick: onAddClick(schema),
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  }))));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [(uiOptions.title || title) && jsxRuntime.jsx(TitleFieldTemplate, {
+      id: utils.titleId(idSchema),
+      title: uiOptions.title || title,
+      required: required,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), (uiOptions.description || description) && jsxRuntime.jsx(DescriptionFieldTemplate, {
+      id: utils.descriptionId(idSchema),
+      description: uiOptions.description || description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), 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, {
+        justifySelf: 'flex-end',
+        children: jsxRuntime.jsx(AddButton, {
+          className: 'object-property-expand',
+          onClick: onAddClick(schema),
+          disabled: disabled || readonly,
+          uiSchema: uiSchema,
+          registry: registry
+        })
+      })]
+    })]
+  });
 }
 
 function SubmitButton(_ref) {
@@ -478,24 +500,29 @@ function SubmitButton(_ref) {
   if (norender) {
     return null;
   }
-  return React__default["default"].createElement(react.Box, {
-    marginTop: 3
-  }, React__default["default"].createElement(react.Button, _extends({
-    type: "submit",
-    variant: "solid"
-  }, submitButtonProps), submitText));
+  return jsxRuntime.jsx(react.Box, {
+    marginTop: 3,
+    children: jsxRuntime.jsx(react.Button, _extends({
+      type: 'submit',
+      variant: 'solid'
+    }, submitButtonProps, {
+      children: submitText
+    }))
+  });
 }
 
 function TitleField(_ref) {
   var id = _ref.id,
     title = _ref.title;
-  return React__default["default"].createElement(react.Box, {
+  return jsxRuntime.jsxs(react.Box, {
     id: id,
     mt: 1,
-    mb: 4
-  }, React__default["default"].createElement(react.Heading, {
-    as: "h5"
-  }, title), React__default["default"].createElement(react.Divider, null));
+    mb: 4,
+    children: [jsxRuntime.jsx(react.Heading, {
+      as: 'h5',
+      children: title
+    }), jsxRuntime.jsx(react.Divider, {})]
+  });
 }
 
 function WrapIfAdditionalTemplate(props) {
@@ -512,45 +539,56 @@ function WrapIfAdditionalTemplate(props) {
     required = props.required,
     schema = props.schema,
     uiSchema = props.uiSchema;
+  var templates = registry.templates,
+    translateString = registry.translateString;
   // Button templates are not overridden in the uiSchema
-  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+  var RemoveButton = templates.ButtonTemplates.RemoveButton;
+  var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
-    return React__default["default"].createElement("div", {
+    return jsxRuntime.jsx("div", {
       className: classNames,
-      style: style
-    }, children);
+      style: style,
+      children: children
+    });
   }
-  var keyLabel = label + " Key";
   var handleBlur = function handleBlur(_ref) {
     var target = _ref.target;
     return onKeyChange(target.value);
   };
-  return React__default["default"].createElement(react.Grid, {
-    key: id + "-key",
+  return jsxRuntime.jsxs(react.Grid, {
     className: classNames,
     style: style,
-    alignItems: "center",
-    gap: 2
-  }, React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(react.FormControl, {
-    isRequired: required
-  }, React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id + "-key",
-    id: id + "-key-label"
-  }, keyLabel), React__default["default"].createElement(react.Input, {
-    defaultValue: label,
-    disabled: disabled || readonly,
-    id: id + "-key",
-    name: id + "-key",
-    onBlur: !readonly ? handleBlur : undefined,
-    type: "text",
-    mb: 1
-  }))), React__default["default"].createElement(react.GridItem, null, children), React__default["default"].createElement(react.GridItem, null, React__default["default"].createElement(RemoveButton, {
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema,
-    registry: registry
-  })));
+    alignItems: 'center',
+    gap: 2,
+    children: [jsxRuntime.jsx(react.GridItem, {
+      children: jsxRuntime.jsxs(react.FormControl, {
+        isRequired: required,
+        children: [jsxRuntime.jsx(react.FormLabel, {
+          htmlFor: id + "-key",
+          id: id + "-key-label",
+          children: keyLabel
+        }), jsxRuntime.jsx(react.Input, {
+          defaultValue: label,
+          disabled: disabled || readonly,
+          id: id + "-key",
+          name: id + "-key",
+          onBlur: !readonly ? handleBlur : undefined,
+          type: 'text',
+          mb: 1
+        })]
+      })
+    }), jsxRuntime.jsx(react.GridItem, {
+      children: children
+    }), jsxRuntime.jsx(react.GridItem, {
+      children: jsxRuntime.jsx(RemoveButton, {
+        disabled: disabled || readonly,
+        onClick: onDropPropertyClick(label),
+        uiSchema: uiSchema,
+        registry: registry
+      })
+    })]
+  }, id + "-key");
 }
 
 function generateTemplates() {
@@ -590,9 +628,9 @@ var rangeOptions = function rangeOptions(start, stop) {
 function DateElement(props) {
   var SelectWidget = props.registry.widgets.SelectWidget;
   var value = props.value ? props.value : undefined;
-  return React__default["default"].createElement(SelectWidget, _extends({}, props, {
-    label: "",
-    className: "form-control",
+  return jsxRuntime.jsx(SelectWidget, _extends({}, props, {
+    label: '',
+    className: 'form-control',
     onChange: function onChange(elemValue) {
       return props.select(props.type, elemValue);
     },
@@ -601,7 +639,7 @@ function DateElement(props) {
     },
     placeholder: props.type,
     schema: {
-      type: "integer"
+      type: 'integer'
     },
     value: value,
     "aria-describedby": utils.ariaDescribedByIds(props.name)
@@ -609,7 +647,7 @@ function DateElement(props) {
 }
 var readyForChange = function readyForChange(state) {
   return Object.keys(state).every(function (key) {
-    return typeof state[key] !== "undefined" && state[key] !== -1;
+    return typeof state[key] !== 'undefined' && state[key] !== -1;
   });
 };
 function AltDateWidget(props) {
@@ -624,15 +662,16 @@ function AltDateWidget(props) {
     registry = props.registry,
     showTime = props.showTime,
     value = props.value;
-  var _useState = React.useState(utils.parseDateString(value, showTime)),
+  var translateString = registry.translateString;
+  var _useState = react$1.useState(utils.parseDateString(value, showTime)),
     state = _useState[0],
     setState = _useState[1];
-  React.useEffect(function () {
+  react$1.useEffect(function () {
     setState(utils.parseDateString(value, showTime));
   }, [showTime, value]);
   var handleChange = function handleChange(property, nextValue) {
     var _extends2;
-    var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === "undefined" ? -1 : nextValue, _extends2));
+    var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === 'undefined' ? -1 : nextValue, _extends2));
     if (readyForChange(nextState)) {
       onChange(utils.toDateString(nextState, showTime));
     } else {
@@ -662,70 +701,76 @@ function AltDateWidget(props) {
       minute = state.minute,
       second = state.second;
     var data = [{
-      type: "year",
+      type: 'year',
       range: options.yearsRange,
       value: year
     }, {
-      type: "month",
+      type: 'month',
       range: [1, 12],
       value: month
     }, {
-      type: "day",
+      type: 'day',
       range: [1, 31],
       value: day
     }];
     if (showTime) {
       data.push({
-        type: "hour",
+        type: 'hour',
         range: [0, 23],
         value: hour
       }, {
-        type: "minute",
+        type: 'minute',
         range: [0, 59],
         value: minute
       }, {
-        type: "second",
+        type: 'second',
         range: [0, 59],
         value: second
       });
     }
     return data;
   };
-  return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.Box, {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    justify: "center"
-  }, dateElementProps().map(function (elemProps, i) {
-    var elemId = id + "_" + elemProps.type;
-    return React__default["default"].createElement(react.Box, {
-      key: elemId,
-      mr: "2",
-      mb: "2"
-    }, React__default["default"].createElement(DateElement, _extends({}, props, elemProps, {
-      autofocus: autofocus && i === 0,
-      disabled: disabled,
-      id: elemId,
-      name: id,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      readonly: readonly,
-      registry: registry,
-      select: handleChange,
-      value: elemProps.value < 0 ? "" : elemProps.value
-    })));
-  })), React__default["default"].createElement(react.Box, {
-    display: "flex"
-  }, !options.hideNowButton && React__default["default"].createElement(react.Button, {
-    onClick: function onClick(e) {
-      return handleNow(e);
-    },
-    mr: "2"
-  }, "Now"), !options.hideClearButton && React__default["default"].createElement(react.Button, {
-    onClick: function onClick(e) {
-      return handleClear(e);
-    }
-  }, "Clear")));
+  return jsxRuntime.jsxs(react.Box, {
+    children: [jsxRuntime.jsx(react.Box, {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      justify: 'center',
+      children: dateElementProps().map(function (elemProps, i) {
+        var elemId = id + '_' + elemProps.type;
+        return jsxRuntime.jsx(react.Box, {
+          mr: '2',
+          mb: '2',
+          children: jsxRuntime.jsx(DateElement, _extends({}, props, elemProps, {
+            autofocus: autofocus && i === 0,
+            disabled: disabled,
+            id: elemId,
+            name: id,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            readonly: readonly,
+            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);
+        },
+        mr: '2',
+        children: translateString(utils.TranslatableString.NowLabel)
+      }), !options.hideClearButton && jsxRuntime.jsx(react.Button, {
+        onClick: function onClick(e) {
+          return handleClear(e);
+        },
+        children: translateString(utils.TranslatableString.ClearLabel)
+      })]
+    })]
+  });
 }
 AltDateWidget.defaultProps = {
   autofocus: false,
@@ -739,7 +784,7 @@ AltDateWidget.defaultProps = {
 
 function AltDateTimeWidget(props) {
   var AltDateWidget = props.registry.widgets.AltDateWidget;
-  return React__default["default"].createElement(AltDateWidget, _extends({}, props, {
+  return jsxRuntime.jsx(AltDateWidget, _extends({}, props, {
     showTime: true
   }));
 }
@@ -777,20 +822,24 @@ function CheckboxWidget(props) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsx(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
-    isRequired: required
-  }), React__default["default"].createElement(react.Checkbox, {
-    id: id,
-    name: id,
-    isChecked: typeof value === "undefined" ? false : value,
-    isDisabled: disabled || readonly,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }, label && React__default["default"].createElement(react.Text, null, label)));
+    isRequired: required,
+    children: jsxRuntime.jsx(react.Checkbox, {
+      id: id,
+      name: id,
+      isChecked: typeof value === 'undefined' ? false : value,
+      isDisabled: disabled || readonly,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id),
+      children: label && jsxRuntime.jsx(react.Text, {
+        children: label
+      })
+    })
+  }));
 }
 
 function CheckboxesWidget(props) {
@@ -825,38 +874,44 @@ function CheckboxesWidget(props) {
   };
   var row = options ? options.inline : false;
   var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }), React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id,
-    id: id + "-label"
-  }, label || schema.title), React__default["default"].createElement(react.CheckboxGroup, {
-    onChange: function onChange(option) {
-      return _onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue));
-    },
-    defaultValue: selectedIndexes,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }, React__default["default"].createElement(react.Stack, {
-    direction: row ? "row" : "column"
-  }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return React__default["default"].createElement(react.Checkbox, {
-      key: index,
-      id: utils.optionId(id, index),
-      name: id,
-      value: String(index),
-      isChecked: checked,
-      isDisabled: disabled || itemDisabled || readonly,
-      onBlur: _onBlur,
-      onFocus: _onFocus
-    }, option.label && React__default["default"].createElement(react.Text, null, option.label));
-  }))));
+    isInvalid: rawErrors && rawErrors.length > 0,
+    children: [jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label",
+      children: label || schema.title
+    }), jsxRuntime.jsx(react.CheckboxGroup, {
+      onChange: function onChange(option) {
+        return _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;
+          return jsxRuntime.jsx(react.Checkbox, {
+            id: utils.optionId(id, index),
+            name: id,
+            value: String(index),
+            isChecked: checked,
+            isDisabled: disabled || itemDisabled || readonly,
+            onBlur: _onBlur,
+            onFocus: _onFocus,
+            children: option.label && jsxRuntime.jsx(react.Text, {
+              children: option.label
+            })
+          }, index);
+        })
+      })
+    })]
+  }));
 }
 
 function RadioWidget(_ref) {
@@ -891,33 +946,37 @@ function RadioWidget(_ref) {
   };
   var row = options ? options.inline : false;
   var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions);
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
-    isReadOnly: readonly
-  }), React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id,
-    id: id + "-label"
-  }, label || schema.title), React__default["default"].createElement(react.RadioGroup, {
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    value: selectedIndex,
-    name: id,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }, React__default["default"].createElement(react.Stack, {
-    direction: row ? "row" : "column"
-  }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return React__default["default"].createElement(react.Radio, {
-      value: String(index),
-      key: index,
-      id: utils.optionId(id, index),
-      disabled: disabled || itemDisabled || readonly
-    }, option.label);
-  }))));
+    isReadOnly: readonly,
+    children: [jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label",
+      children: label || schema.title
+    }), jsxRuntime.jsx(react.RadioGroup, {
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      value: selectedIndex,
+      name: id,
+      "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;
+          return jsxRuntime.jsx(react.Radio, {
+            value: String(index),
+            id: utils.optionId(id, index),
+            disabled: disabled || itemDisabled || readonly,
+            children: option.label
+          }, index);
+        })
+      })
+    })]
+  }));
 }
 
 function RangeWidget(_ref) {
@@ -954,19 +1013,25 @@ function RangeWidget(_ref) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
-  }, chakraProps), displayLabel ? React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id
-  }, label || schema.title) : null, React__default["default"].createElement(react.Slider, _extends({}, sliderWidgetProps, {
-    id: id,
-    name: id,
-    isDisabled: disabled || readonly,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }), React__default["default"].createElement(react.SliderTrack, null, React__default["default"].createElement(react.SliderFilledTrack, null)), React__default["default"].createElement(react.SliderThumb, null)));
+  }, chakraProps, {
+    children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: id,
+      children: label || schema.title
+    }) : null, jsxRuntime.jsxs(react.Slider, _extends({}, sliderWidgetProps, {
+      id: id,
+      name: id,
+      isDisabled: disabled || readonly,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id),
+      children: [jsxRuntime.jsx(react.SliderTrack, {
+        children: jsxRuntime.jsx(react.SliderFilledTrack, {})
+      }), jsxRuntime.jsx(react.SliderThumb, {})]
+    }))]
+  }));
 }
 
 function SelectWidget(props) {
@@ -1020,7 +1085,7 @@ function SelectWidget(props) {
       isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
     };
   }) : [];
-  var isMultiple = typeof multiple !== "undefined" && Boolean(enumOptions);
+  var isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
   var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
   var formValue = isMultiple ? (selectedIndex || []).map(function (i) {
     return {
@@ -1028,31 +1093,33 @@ function SelectWidget(props) {
       value: i
     };
   }) : {
-    label: _valueLabelMap[selectedIndex] || "",
+    label: _valueLabelMap[selectedIndex] || '',
     selectedIndex: selectedIndex
   };
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }), (label || schema.title) && React__default["default"].createElement(react.FormLabel, {
-    htmlFor: isMultiple ? undefined : id
-  }, label || schema.title), React__default["default"].createElement(chakraReactSelect.Select, {
-    inputId: id,
-    name: id,
-    isMulti: isMultiple,
-    options: displayEnumOptions,
-    placeholder: placeholder,
-    closeMenuOnSelect: !isMultiple,
-    onBlur: _onBlur,
-    onChange: isMultiple ? _onMultiChange : _onChange,
-    onFocus: _onFocus,
-    autoFocus: autofocus,
-    value: formValue,
-    "aria-describedby": utils.ariaDescribedByIds(id)
+    isInvalid: rawErrors && rawErrors.length > 0,
+    children: [(label || schema.title) && jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: isMultiple ? undefined : id,
+      children: label || schema.title
+    }), jsxRuntime.jsx(chakraReactSelect.Select, {
+      inputId: id,
+      name: id,
+      isMulti: isMultiple,
+      options: displayEnumOptions,
+      placeholder: placeholder,
+      closeMenuOnSelect: !isMultiple,
+      onBlur: _onBlur,
+      onChange: isMultiple ? _onMultiChange : _onChange,
+      onFocus: _onFocus,
+      autoFocus: autofocus,
+      value: formValue,
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    })]
   }));
 }
 
@@ -1080,7 +1147,7 @@ function TextareaWidget(_ref) {
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
+    return onChange(value === '' ? options.emptyValue : value);
   };
   var _onBlur = function _onBlur(_ref3) {
     var value = _ref3.target.value;
@@ -1090,25 +1157,27 @@ function TextareaWidget(_ref) {
     var value = _ref4.target.value;
     return onFocus(id, value);
   };
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }), displayLabel ? React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id
-  }, label || schema.title) : null, React__default["default"].createElement(react.Textarea, {
-    id: id,
-    name: id,
-    value: value != null ? value : "",
-    placeholder: placeholder,
-    autoFocus: autofocus,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id)
+    isInvalid: rawErrors && rawErrors.length > 0,
+    children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: id,
+      children: label || schema.title
+    }) : null, jsxRuntime.jsx(react.Textarea, {
+      id: id,
+      name: id,
+      value: value != null ? value : '',
+      placeholder: placeholder,
+      autoFocus: autofocus,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    })]
   }));
 }
 
@@ -1142,25 +1211,30 @@ function UpDownWidget(props) {
     var value = _ref2.target.value;
     return onFocus(id, value);
   };
-  return React__default["default"].createElement(react.FormControl, _extends({
+  return jsxRuntime.jsxs(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0
-  }), displayLabel ? React__default["default"].createElement(react.FormLabel, {
-    htmlFor: id
-  }, label || schema.title) : null, React__default["default"].createElement(react.NumberInput, {
-    value: value != null ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }, React__default["default"].createElement(react.NumberInputField, {
-    id: id,
-    name: id
-  }), React__default["default"].createElement(react.NumberInputStepper, null, React__default["default"].createElement(react.NumberIncrementStepper, null), React__default["default"].createElement(react.NumberDecrementStepper, null))));
+    isInvalid: rawErrors && rawErrors.length > 0,
+    children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
+      htmlFor: id,
+      children: label || schema.title
+    }) : null, jsxRuntime.jsxs(react.NumberInput, {
+      value: value != null ? value : '',
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id),
+      children: [jsxRuntime.jsx(react.NumberInputField, {
+        id: id,
+        name: id
+      }), jsxRuntime.jsxs(react.NumberInputStepper, {
+        children: [jsxRuntime.jsx(react.NumberIncrementStepper, {}), jsxRuntime.jsx(react.NumberDecrementStepper, {})]
+      })]
+    })]
+  }));
 }
 
 function generateWidgets() {
@@ -1213,7 +1287,7 @@ var Form = /*#__PURE__*/generateForm();
   It is located at the bottom of the styles string.
  */
 var CSSReset = function CSSReset() {
-  return React__namespace.createElement(react$1.Global, {
+  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    "
   });
 };
@@ -1235,22 +1309,25 @@ var CSSReset = function CSSReset() {
 var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
   var newCache = createCache__default["default"]({
     container: container,
-    key: "rjsf"
+    key: 'rjsf'
   });
   return newCache;
 });
 var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
   return function (_ref) {
     var document = _ref.document;
-    return React__namespace.createElement("div", {
+    return jsxRuntime.jsx("div", {
       style: {
         margin: 2
-      }
-    }, React__namespace.createElement(react$1.CacheProvider, {
-      value: memoizedCreateCacheWithContainer(document.head)
-    }, React__namespace.createElement(react.ChakraProvider, {
-      resetCSS: false
-    }, React__namespace.createElement(CSSReset, null), props.children)));
+      },
+      children: jsxRuntime.jsx(react$2.CacheProvider, {
+        value: memoizedCreateCacheWithContainer(document.head),
+        children: jsxRuntime.jsxs(react.ChakraProvider, {
+          resetCSS: false,
+          children: [jsxRuntime.jsx(CSSReset, {}), props.children]
+        })
+      })
+    });
   };
 };