@rjsf/chakra-ui 4.0.0

package/dist/chakra-ui.esm.js

@@ -0,0 +1,1323 @@
+import { utils, withTheme } from '@rjsf/core';
+import React__default, { createElement, Fragment, useState, useEffect } from 'react';
+import { Button, IconButton, Box, Grid, GridItem, HStack, ButtonGroup, Alert, AlertTitle, List, ListItem, ListIcon, Heading, Divider, Text, FormControl, FormLabel, Input, FormErrorMessage, FormHelperText, shouldForwardProp, Checkbox, CheckboxGroup, Stack, RadioGroup, Radio, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Select as Select$1, Textarea, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, ChakraProvider } from '@chakra-ui/react';
+import { AddIcon, DeleteIcon, ArrowUpIcon, ArrowDownIcon, WarningIcon } from '@chakra-ui/icons';
+import { Select } from 'chakra-react-select';
+import { Global, CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import weakMemoize from '@emotion/weak-memoize';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    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 AddButton = function AddButton(props) {
+  return React__default.createElement(Button, Object.assign({
+    leftIcon: React__default.createElement(AddIcon, null)
+  }, props), "Add Item");
+};
+
+var _excluded = ["icon"];
+var mappings = {
+  remove: /*#__PURE__*/React__default.createElement(DeleteIcon, null),
+  plus: /*#__PURE__*/React__default.createElement(AddIcon, null),
+  "arrow-up": /*#__PURE__*/React__default.createElement(ArrowUpIcon, null),
+  "arrow-down": /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)
+};
+/**
+ * props used in Template:
+ * icon, tabIndex, disabled, onClick
+ */
+
+var ChakraIconButton = function ChakraIconButton(props) {
+  var icon = props.icon,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return React__default.createElement(IconButton, Object.assign({}, otherProps, {
+    icon: mappings[icon],
+    "aria-label": icon
+  }));
+};
+
+var isMultiSelect = utils.isMultiSelect,
+    getDefaultRegistry = utils.getDefaultRegistry;
+
+var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
+  var schema = props.schema,
+      _props$registry = props.registry,
+      registry = _props$registry === void 0 ? getDefaultRegistry() : _props$registry;
+
+  if (isMultiSelect(schema, registry.rootSchema)) {
+    return React__default.createElement(DefaultFixedArrayFieldTemplate, Object.assign({}, props));
+  } else {
+    return React__default.createElement(DefaultNormalArrayFieldTemplate, Object.assign({}, props));
+  }
+};
+
+var ArrayFieldTitle = function ArrayFieldTitle(_ref) {
+  var TitleField = _ref.TitleField,
+      idSchema = _ref.idSchema,
+      title = _ref.title,
+      required = _ref.required;
+
+  if (!title) {
+    return null;
+  }
+
+  var id = idSchema.$id + "__title";
+  return React__default.createElement(TitleField, {
+    id: id,
+    title: title,
+    required: required
+  });
+};
+
+var ArrayFieldDescription = function ArrayFieldDescription(_ref2) {
+  var DescriptionField = _ref2.DescriptionField,
+      idSchema = _ref2.idSchema,
+      description = _ref2.description;
+
+  if (!description) {
+    return null;
+  }
+
+  var id = idSchema.$id + "__description";
+  return React__default.createElement(DescriptionField, {
+    id: id,
+    description: description
+  });
+}; // Used in the two templates
+
+
+var DefaultArrayItem = function DefaultArrayItem(props) {
+  return React__default.createElement(HStack, {
+    key: props.key,
+    alignItems: "flex-end",
+    py: 1
+  }, React__default.createElement(Box, {
+    w: "100%"
+  }, props.children), props.hasToolbar && React__default.createElement(Box, null, React__default.createElement(ButtonGroup, {
+    isAttached: true,
+    mb: 1
+  }, (props.hasMoveUp || props.hasMoveDown) && React__default.createElement(ChakraIconButton, {
+    icon: "arrow-up",
+    tabIndex: -1,
+    disabled: props.disabled || props.readonly || !props.hasMoveUp,
+    onClick: props.onReorderClick(props.index, props.index - 1)
+  }), (props.hasMoveUp || props.hasMoveDown) && React__default.createElement(ChakraIconButton, {
+    icon: "arrow-down",
+    tabIndex: -1,
+    disabled: props.disabled || props.readonly || !props.hasMoveDown,
+    onClick: props.onReorderClick(props.index, props.index + 1)
+  }), props.hasRemove && React__default.createElement(ChakraIconButton, {
+    icon: "remove",
+    tabIndex: -1,
+    disabled: props.disabled || props.readonly,
+    onClick: props.onDropIndexClick(props.index)
+  }))));
+};
+
+var DefaultFixedArrayFieldTemplate = function DefaultFixedArrayFieldTemplate(props) {
+  return React__default.createElement("fieldset", {
+    className: props.className
+  }, React__default.createElement(ArrayFieldTitle, {
+    key: "array-field-title-" + props.idSchema.$id,
+    TitleField: props.TitleField,
+    idSchema: props.idSchema,
+    title: props.uiSchema["ui:title"] || props.title,
+    required: props.required
+  }), (props.uiSchema["ui:description"] || props.schema.description) && // Use DescriptionField if possible
+  React__default.createElement("div", {
+    className: "field-description",
+    key: "field-description-" + props.idSchema.$id
+  }, props.uiSchema["ui:description"] || props.schema.description), React__default.createElement("div", {
+    className: "row array-item-list",
+    key: "array-item-list-" + props.idSchema.$id
+  }, props.items && props.items.map(DefaultArrayItem)), props.canAdd && React__default.createElement(AddButton, {
+    justifySelf: "flex-end",
+    className: "array-item-add",
+    onClick: props.onAddClick,
+    disabled: props.disabled || props.readonly
+  }));
+};
+
+var DefaultNormalArrayFieldTemplate = function DefaultNormalArrayFieldTemplate(props) {
+  return React__default.createElement(Box, null, React__default.createElement(ArrayFieldTitle, {
+    key: "array-field-title-" + props.idSchema.$id,
+    TitleField: props.TitleField,
+    idSchema: props.idSchema,
+    title: props.uiSchema["ui:title"] || props.title,
+    required: props.required
+  }), (props.uiSchema["ui:description"] || props.schema.description) && React__default.createElement(ArrayFieldDescription, {
+    key: "array-field-description-" + props.idSchema.$id,
+    DescriptionField: props.DescriptionField,
+    idSchema: props.idSchema,
+    description: props.uiSchema["ui:description"] || props.schema.description
+  }), React__default.createElement(Grid, {
+    key: "array-item-list-" + props.idSchema.$id
+  }, React__default.createElement(GridItem, null, props.items.length > 0 && props.items.map(function (p) {
+    return DefaultArrayItem(p);
+  })), props.canAdd && React__default.createElement(GridItem, {
+    justifySelf: "flex-end"
+  }, React__default.createElement(Box, {
+    mt: 2
+  }, React__default.createElement(AddButton, {
+    className: "array-item-add",
+    onClick: props.onAddClick,
+    disabled: props.disabled || props.readonly
+  })))));
+};
+
+var ErrorList = function ErrorList(_ref) {
+  var errors = _ref.errors;
+  return React__default.createElement(Alert, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: 3,
+    status: "error"
+  }, React__default.createElement(AlertTitle, null, "Errors"), React__default.createElement(List, null, errors.map(function (error, i) {
+    return React__default.createElement(ListItem, {
+      key: i
+    }, React__default.createElement(ListIcon, {
+      as: WarningIcon,
+      color: "red.500"
+    }), error.stack);
+  })));
+};
+
+var TitleField = function TitleField(_ref) {
+  var title = _ref.title;
+  return React__default.createElement(Box, {
+    mt: 1,
+    mb: 4
+  }, React__default.createElement(Heading, {
+    as: "h5"
+  }, title), React__default.createElement(Divider, null));
+};
+
+var DescriptionField = function DescriptionField(_ref) {
+  var description = _ref.description,
+      id = _ref.id;
+  if (!description) return null;
+
+  if (typeof description === "string") {
+    return React__default.createElement(Text, {
+      id: id,
+      mt: 2,
+      mb: 4
+    }, description);
+  }
+
+  return React__default.createElement(React__default.Fragment, null, description);
+};
+
+var Fields = {
+  TitleField: TitleField,
+  DescriptionField: DescriptionField
+};
+
+var ADDITIONAL_PROPERTY_FLAG = utils.ADDITIONAL_PROPERTY_FLAG;
+
+var WrapIfAdditional = function WrapIfAdditional(props) {
+  var children = props.children,
+      disabled = props.disabled,
+      id = props.id,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      readonly = props.readonly,
+      required = props.required,
+      schema = props.schema;
+  var additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
+
+  if (!additional) {
+    return createElement(Fragment, null, children);
+  }
+
+  var keyLabel = label + " Key";
+
+  var handleBlur = function handleBlur(_ref) {
+    var target = _ref.target;
+    return onKeyChange(target.value);
+  };
+
+  return createElement(Grid, {
+    key: id + "-key",
+    alignItems: "center",
+    gap: 2
+  }, createElement(GridItem, null, createElement(FormControl, {
+    isRequired: required
+  }, createElement(FormLabel, {
+    htmlFor: id + "-key"
+  }, keyLabel), createElement(Input, {
+    defaultValue: label,
+    disabled: disabled || readonly,
+    id: id + "-key",
+    name: id + "-key",
+    onBlur: !readonly ? handleBlur : undefined,
+    type: "text",
+    mb: 1
+  }))), createElement(GridItem, null, children), createElement(GridItem, null, createElement(ChakraIconButton, {
+    icon: "remove",
+    tabIndex: -1,
+    disabled: disabled || readonly,
+    onClick: onDropPropertyClick(label)
+  })));
+};
+
+var FieldTemplate = function FieldTemplate(props) {
+  var id = props.id,
+      children = props.children,
+      classNames = props.classNames,
+      disabled = props.disabled,
+      displayLabel = props.displayLabel,
+      hidden = props.hidden,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      readonly = props.readonly,
+      required = props.required,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+      rawHelp = props.rawHelp,
+      rawDescription = props.rawDescription,
+      schema = props.schema;
+
+  if (hidden) {
+    return React__default.createElement(React__default.Fragment, null, children);
+  }
+
+  return React__default.createElement(WrapIfAdditional, {
+    classNames: classNames,
+    disabled: disabled,
+    id: id,
+    label: label,
+    onDropPropertyClick: onDropPropertyClick,
+    onKeyChange: onKeyChange,
+    readonly: readonly,
+    required: required,
+    schema: schema
+  }, React__default.createElement(FormControl, {
+    isRequired: required,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }, children, displayLabel && rawDescription ? React__default.createElement(Text, {
+    mt: 2
+  }, rawDescription) : null, rawErrors && rawErrors.length > 0 && React__default.createElement(List, null, rawErrors.map(function (error, i) {
+    return React__default.createElement(ListItem, {
+      key: i
+    }, React__default.createElement(FormErrorMessage, {
+      id: id
+    }, error));
+  })), rawHelp && React__default.createElement(FormHelperText, {
+    id: id
+  }, rawHelp)));
+};
+
+var canExpand = utils.canExpand;
+
+var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
+  var DescriptionField = props.DescriptionField,
+      description = props.description,
+      TitleField = props.TitleField,
+      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;
+  return createElement(Fragment, null, (uiSchema["ui:title"] || title) && createElement(TitleField, {
+    id: idSchema.$id + "-title",
+    title: title,
+    required: required
+  }), description && createElement(DescriptionField, {
+    id: idSchema.$id + "-description",
+    description: description
+  }), createElement(Grid, {
+    gap: description ? 2 : 6,
+    mb: 4
+  }, properties.map(function (element, index) {
+    return element.hidden ? element.content : createElement(GridItem, {
+      key: idSchema.$id + "-" + element.name + "-" + index
+    }, element.content);
+  }), canExpand(schema, uiSchema, formData) && createElement(GridItem, {
+    justifySelf: "flex-end"
+  }, createElement(AddButton, {
+    className: "object-property-expand",
+    onClick: onAddClick(schema),
+    disabled: disabled || readonly
+  }))));
+};
+
+var pad = utils.pad,
+    parseDateString = utils.parseDateString,
+    toDateString = utils.toDateString;
+
+var rangeOptions = function rangeOptions(start, stop) {
+  var options = [];
+
+  for (var i = start; i <= stop; i++) {
+    options.push({
+      value: i,
+      label: pad(i, 2)
+    });
+  }
+
+  return options;
+};
+
+var readyForChange = function readyForChange(state) {
+  return Object.keys(state).every(function (key) {
+    return typeof state[key] !== "undefined" && state[key] !== -1;
+  });
+};
+
+var AltDateWidget = 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 SelectWidget = registry.widgets.SelectWidget;
+
+  var _useState = useState(parseDateString(value, showTime)),
+      state = _useState[0],
+      setState = _useState[1];
+
+  useEffect(function () {
+    setState(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));
+
+    if (readyForChange(nextState)) {
+      onChange(toDateString(nextState, showTime));
+    } else {
+      setState(nextState);
+    }
+  };
+
+  var handleNow = function handleNow(event) {
+    event.preventDefault();
+
+    if (disabled || readonly) {
+      return;
+    }
+
+    var nextState = parseDateString(new Date().toJSON(), showTime);
+    onChange(toDateString(nextState, showTime));
+  };
+
+  var handleClear = function 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 = [{
+      type: "year",
+      range: options.yearsRange,
+      value: year
+    }, {
+      type: "month",
+      range: [1, 12],
+      value: month
+    }, {
+      type: "day",
+      range: [1, 31],
+      value: day
+    }];
+
+    if (showTime) {
+      data.push({
+        type: "hour",
+        range: [0, 23],
+        value: hour
+      }, {
+        type: "minute",
+        range: [0, 59],
+        value: minute
+      }, {
+        type: "second",
+        range: [0, 59],
+        value: second
+      });
+    }
+
+    return data;
+  };
+
+  var renderDateElement = function renderDateElement(elemProps) {
+    var value = Boolean(elemProps.value) ? elemProps.value : undefined;
+    return React__default.createElement(SelectWidget, Object.assign({}, elemProps, {
+      label: undefined,
+      className: "form-control",
+      onChange: function onChange(elemValue) {
+        return elemProps.select(elemProps.type, elemValue);
+      },
+      options: {
+        enumOptions: rangeOptions(elemProps.range[0], elemProps.range[1])
+      },
+      placeholder: elemProps.type,
+      schema: {
+        type: "integer"
+      },
+      value: value
+    }));
+  };
+
+  return React__default.createElement(Box, null, React__default.createElement(Box, {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justify: "center"
+  }, dateElementProps().map(function (elemProps, i) {
+    var elemId = id + "_" + elemProps.type;
+    return React__default.createElement(Box, {
+      key: elemId,
+      mr: "2",
+      mb: "2"
+    }, renderDateElement(_extends({}, props, elemProps, {
+      autofocus: autofocus && i === 0,
+      disabled: disabled,
+      id: elemId,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      readonly: readonly,
+      registry: registry,
+      select: handleChange,
+      value: elemProps.value < 0 ? "" : elemProps.value
+    })));
+  })), React__default.createElement(Box, {
+    display: "flex"
+  }, !options.hideNowButton && React__default.createElement(Button, {
+    onClick: function onClick(e) {
+      return handleNow(e);
+    },
+    mr: "2"
+  }, "Now"), !options.hideClearButton && React__default.createElement(Button, {
+    onClick: function onClick(e) {
+      return handleClear(e);
+    }
+  }, "Clear")));
+};
+
+AltDateWidget.defaultProps = {
+  autofocus: false,
+  disabled: false,
+  readonly: false,
+  showTime: false,
+  options: {
+    yearsRange: [1900, /*#__PURE__*/new Date().getFullYear() + 2]
+  }
+};
+
+var AltDateTimeWidget = function AltDateTimeWidget(props) {
+  var AltDateWidget = props.registry.widgets.AltDateWidget;
+  return React__default.createElement(AltDateWidget, Object.assign({}, props, {
+    showTime: true
+  }));
+};
+
+AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.defaultProps, {
+  showTime: true
+});
+
+function getChakra(_ref) {
+  var _ref$uiSchema = _ref.uiSchema,
+      uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
+  var chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
+  Object.keys(chakraProps).forEach(function (key) {
+    /**
+     * Leveraging `shouldForwardProp` to remove props
+     *
+     * This is a utility function that's used in `@chakra-ui/react`'s factory function.
+     * Normally, it prevents ChakraProps from being passed to the DOM.
+     * In this case we just want to delete the unknown props. So we flip the boolean.
+     */
+    if (shouldForwardProp(key)) {
+      // @ts-ignore - How to type this?!... 😬
+      delete chakraProps[key];
+    }
+  });
+  return chakraProps;
+}
+
+var CheckboxWidget = function CheckboxWidget(props) {
+  var id = props.id,
+      value = props.value,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      required = props.required,
+      label = props.label,
+      uiSchema = props.uiSchema;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  });
+
+  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 React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isRequired: required
+  }), React__default.createElement(Checkbox, {
+    id: id,
+    name: id,
+    isChecked: typeof value === "undefined" ? false : value,
+    isDisabled: disabled || readonly,
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus
+  }, label && React__default.createElement(Text, null, label)));
+};
+
+//   const at = all.indexOf(value);
+//   const updated = selected.slice(0, at).concat(value, selected.slice(at));
+//   // As inserting values at predefined index positions doesn't work with empty
+//   // arrays, we need to reorder the updated selection to match the initial order
+//   return updated.sort((a, b) => all.indexOf(a) > all.indexOf(b));
+// };
+// const deselectValue = (value, selected) => {
+//   return selected.filter((v) => v !== value);
+// };
+
+var CheckboxesWidget = 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,
+      uiSchema = props.uiSchema,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+      schema = props.schema;
+  var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  }); // const _onChange = option => ({ target: { checked } }) => {
+  //   const all = enumOptions.map(({ value }) => value)
+  //   if (checked) {
+  //     onChange(selectValue(option.value, value, all))
+  //   } else {
+  //     onChange(deselectValue(option.value, 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);
+  };
+
+  var row = options ? options.inline : false;
+  return React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }), React__default.createElement(FormLabel, {
+    htmlFor: id
+  }, label || schema.title), React__default.createElement(CheckboxGroup, {
+    onChange: function onChange(option) {
+      return _onChange(option);
+    },
+    defaultValue: value
+  }, React__default.createElement(Stack, {
+    direction: row ? "row" : "column"
+  }, enumOptions.map(function (option, index) {
+    var checked = value.indexOf(option.value) !== -1;
+    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+    return React__default.createElement(Checkbox, {
+      key: id + "_" + index,
+      id: id + "_" + index,
+      value: option.value,
+      isChecked: checked,
+      isDisabled: disabled || itemDisabled || readonly,
+      onBlur: _onBlur,
+      onFocus: _onFocus
+    }, option.label && React__default.createElement(Text, null, option.label));
+  }))));
+};
+
+var ColorWidget = function ColorWidget(props) {
+  var registry = props.registry;
+  var TextWidget = registry.widgets.TextWidget;
+  return React__default.createElement(TextWidget, Object.assign({
+    type: "color"
+  }, props));
+};
+
+var DateWidget = function DateWidget(props) {
+  var registry = props.registry;
+  var TextWidget = registry.widgets.TextWidget;
+  return React__default.createElement(TextWidget, Object.assign({}, props, {
+    type: "date"
+  }));
+};
+
+var localToUTC = utils.localToUTC,
+    utcToLocal = utils.utcToLocal;
+
+var DateTimeWidget = function DateTimeWidget(props) {
+  var registry = props.registry;
+  var TextWidget = registry.widgets.TextWidget;
+  var value = utcToLocal(props.value);
+
+  var onChange = function onChange(value) {
+    props.onChange(localToUTC(value));
+  };
+
+  return React__default.createElement(TextWidget, Object.assign({
+    type: "datetime-local"
+  }, props, {
+    value: value,
+    onChange: onChange
+  }));
+};
+
+var EmailWidget = function EmailWidget(props) {
+  var registry = props.registry;
+  var TextWidget = registry.widgets.TextWidget;
+  return React__default.createElement(TextWidget, Object.assign({}, props, {
+    type: "email"
+  }));
+};
+
+var PasswordWidget = function PasswordWidget(props) {
+  var registry = props.registry;
+  var TextWidget = registry.widgets.TextWidget;
+  return React__default.createElement(TextWidget, Object.assign({
+    type: "password"
+  }, props));
+};
+
+var RadioWidget = function RadioWidget(_ref) {
+  var id = _ref.id,
+      schema = _ref.schema,
+      options = _ref.options,
+      value = _ref.value,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      readonly = _ref.readonly,
+      label = _ref.label,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      uiSchema = _ref.uiSchema;
+  var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  });
+
+  var _onBlur = function _onBlur(_ref2) {
+    var value = _ref2.target.value;
+    return onBlur(id, value);
+  };
+
+  var _onFocus = function _onFocus(_ref3) {
+    var value = _ref3.target.value;
+    return onFocus(id, value);
+  };
+
+  var row = options ? options.inline : false;
+  return React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly
+  }), React__default.createElement(FormLabel, {
+    htmlFor: id
+  }, label || schema.title), React__default.createElement(RadioGroup, {
+    onChange: onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    value: "" + value,
+    name: id
+  }, React__default.createElement(Stack, {
+    direction: row ? "row" : "column"
+  }, enumOptions.map(function (option, i) {
+    var itemDisabled = Boolean(enumDisabled && enumDisabled.indexOf(option.value) != -1);
+    return React__default.createElement(Radio, {
+      value: "" + option.value,
+      key: i,
+      disabled: disabled || itemDisabled || readonly
+    }, "" + option.label);
+  }))));
+};
+
+var rangeSpec = utils.rangeSpec,
+    getDisplayLabel = utils.getDisplayLabel;
+
+var RangeWidget = function RangeWidget(_ref) {
+  var value = _ref.value,
+      readonly = _ref.readonly,
+      disabled = _ref.disabled,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      options = _ref.options,
+      schema = _ref.schema,
+      uiSchema = _ref.uiSchema,
+      onChange = _ref.onChange,
+      label = _ref.label,
+      id = _ref.id;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  });
+
+  var sliderWidgetProps = _extends({
+    value: value,
+    label: label,
+    id: id
+  }, rangeSpec(schema));
+
+  var displayLabel = getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
+
+  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);
+  };
+
+  return React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps), displayLabel ? React__default.createElement(FormLabel, {
+    htmlFor: id
+  }, label || schema.title) : null, React__default.createElement(Slider, Object.assign({}, sliderWidgetProps, {
+    id: id,
+    name: id,
+    isDisabled: disabled || readonly,
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus
+  }), React__default.createElement(SliderTrack, null, React__default.createElement(SliderFilledTrack, null)), React__default.createElement(SliderThumb, null)));
+};
+
+var asNumber = utils.asNumber,
+    guessType = utils.guessType;
+var nums = /*#__PURE__*/new Set(["number", "integer"]);
+/**
+ * This is a silly limitation in the DOM where option change event values are
+ * always retrieved as strings.
+ */
+
+var processValue = function processValue(schema, value) {
+  // "enum" is a reserved word, so only "type" and "items" can be destructured
+  var type = schema.type,
+      items = schema.items;
+
+  if (value === "") {
+    return undefined;
+  } else if (type === "array" && items && nums.has(items.type)) {
+    return value.map(asNumber);
+  } else if (type === "boolean") {
+    return value === "true";
+  } else if (type === "number") {
+    return asNumber(value);
+  } // If type is undefined, but an enum is present, try and infer the type from
+  // the enum values
+
+
+  if (schema["enum"]) {
+    if (schema["enum"].every(function (x) {
+      return guessType(x) === "number";
+    })) {
+      return asNumber(value);
+    } else if (schema["enum"].every(function (x) {
+      return guessType(x) === "boolean";
+    })) {
+      return value === "true";
+    }
+  }
+
+  return value;
+};
+
+var SelectWidget = function SelectWidget(props) {
+  var schema = props.schema,
+      id = props.id,
+      options = props.options,
+      label = props.label,
+      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;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  }); // TODO: Default emptyValue should be string when multi select is implemented
+  // const emptyValue = multiple ? [] : "";
+
+  var emptyValue = "";
+
+  var _onMultiChange = function _onMultiChange(e) {
+    return onChange(processValue(schema, e.map(function (v) {
+      return v.value;
+    })));
+  };
+
+  var _onChange = function _onChange(_ref) {
+    var value = _ref.target.value;
+    return onChange(processValue(schema, value));
+  };
+
+  var _onBlur = function _onBlur(_ref2) {
+    var value = _ref2.target.value;
+    return onBlur(id, processValue(schema, value));
+  };
+
+  var _onFocus = function _onFocus(_ref3) {
+    var value = _ref3.target.value;
+    return onFocus(id, processValue(schema, value));
+  };
+
+  return React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }), (label || schema.title) && React__default.createElement(FormLabel, {
+    htmlFor: typeof multiple !== "undefined" && enumOptions ? undefined : id
+  }, label || schema.title), typeof multiple !== "undefined" && enumOptions ? React__default.createElement(Select, {
+    inputId: id,
+    name: id,
+    isMulti: true,
+    options: enumOptions,
+    placeholder: placeholder,
+    closeMenuOnSelect: false,
+    onChange: _onMultiChange,
+    value: value.map(function (v) {
+      return {
+        label: v,
+        value: v
+      };
+    })
+  }) : React__default.createElement(Select$1, {
+    id: id,
+    name: id,
+    placeholder: placeholder !== "" ? placeholder : " ",
+    value: typeof value === "undefined" ? emptyValue : value.toString(),
+    autoFocus: autofocus,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    onFocus: _onFocus
+  }, enumOptions.map(function (_ref4, i) {
+    var value = _ref4.value,
+        label = _ref4.label;
+    var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
+    return React__default.createElement("option", {
+      key: i,
+      value: value,
+      disabled: disabled
+    }, label);
+  })));
+};
+
+var getDisplayLabel$1 = utils.getDisplayLabel;
+
+var TextareaWidget = function TextareaWidget(_ref) {
+  var id = _ref.id,
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      label = _ref.label,
+      disabled = _ref.disabled,
+      autofocus = _ref.autofocus,
+      readonly = _ref.readonly,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onChange = _ref.onChange,
+      options = _ref.options,
+      schema = _ref.schema,
+      uiSchema = _ref.uiSchema,
+      required = _ref.required,
+      rawErrors = _ref.rawErrors;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  });
+  var displayLabel = getDisplayLabel$1(schema, uiSchema) && (!!label || !!schema.title);
+
+  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 React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }), displayLabel ? React__default.createElement(FormLabel, {
+    htmlFor: id
+  }, label || schema.title) : null, React__default.createElement(Textarea, {
+    id: id,
+    name: id,
+    value: value != null ? value : "",
+    placeholder: placeholder,
+    autoFocus: autofocus,
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus
+  }));
+};
+
+var getDisplayLabel$2 = utils.getDisplayLabel;
+
+var TextWidget = function TextWidget(props) {
+  var id = props.id,
+      type = props.type,
+      value = props.value,
+      label = props.label,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      options = props.options,
+      required = props.required,
+      readonly = props.readonly,
+      rawErrors = props.rawErrors,
+      autofocus = props.autofocus,
+      placeholder = props.placeholder,
+      disabled = props.disabled;
+  var chakraProps = getChakra({
+    uiSchema: uiSchema
+  });
+
+  var _onChange = function _onChange(_ref) {
+    var value = _ref.target.value;
+    return onChange(value === "" ? options.emptyValue : value);
+  };
+
+  var _onBlur = function _onBlur(_ref2) {
+    var value = _ref2.target.value;
+    return onBlur(id, value);
+  };
+
+  var _onFocus = function _onFocus(_ref3) {
+    var value = _ref3.target.value;
+    return onFocus(id, value);
+  };
+
+  var displayLabel = getDisplayLabel$2(schema, uiSchema) && (!!label || !!schema.title);
+  var inputType = (type || schema.type) === "string" ? "text" : "" + (type || schema.type);
+  return createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }), displayLabel ? createElement(FormLabel, {
+    htmlFor: id,
+    id: id + "-label"
+  }, label || schema.title) : null, createElement(Input, {
+    id: id,
+    name: id,
+    value: value || value === 0 ? value : "",
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    autoFocus: autofocus,
+    placeholder: placeholder,
+    type: inputType,
+    list: schema.examples ? "examples_" + id : undefined
+  }), schema.examples ? createElement("datalist", {
+    id: "examples_" + id
+  }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
+    return createElement("option", {
+      key: example,
+      value: example
+    });
+  })) : null);
+};
+
+var getDisplayLabel$3 = utils.getDisplayLabel;
+
+var UpDownWidget = function UpDownWidget(props) {
+  var id = props.id,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      readonly = props.readonly,
+      disabled = props.disabled,
+      label = props.label,
+      value = props.value,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      rawErrors = props.rawErrors,
+      required = props.required;
+  var displayLabel = getDisplayLabel$3(schema, uiSchema) && (!!label || !!schema.title);
+  var chakraProps = getChakra({
+    uiSchema: 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 React__default.createElement(FormControl, Object.assign({
+    mb: 1
+  }, chakraProps, {
+    isDisabled: disabled || readonly,
+    isRequired: required,
+    isReadOnly: readonly,
+    isInvalid: rawErrors && rawErrors.length > 0
+  }), displayLabel ? React__default.createElement(FormLabel, {
+    htmlFor: id
+  }, label || schema.title) : null, React__default.createElement(NumberInput, {
+    value: value != null ? value : "",
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus
+  }, React__default.createElement(NumberInputField, {
+    id: id,
+    name: id
+  }), React__default.createElement(NumberInputStepper, null, React__default.createElement(NumberIncrementStepper, null), React__default.createElement(NumberDecrementStepper, null))));
+};
+
+var URLWidget = function URLWidget(props) {
+  var registry = props.registry;
+  var TextWidget = registry.widgets.TextWidget;
+  return React__default.createElement(TextWidget, Object.assign({
+    type: "url"
+  }, props));
+};
+
+var widgets = {
+  AltDateTimeWidget: AltDateTimeWidget,
+  AltDateWidget: AltDateWidget,
+  CheckboxWidget: CheckboxWidget,
+  CheckboxesWidget: CheckboxesWidget,
+  ColorWidget: ColorWidget,
+  DateWidget: DateWidget,
+  DateTimeWidget: DateTimeWidget,
+  EmailWidget: EmailWidget,
+  PasswordWidget: PasswordWidget,
+  RadioWidget: RadioWidget,
+  RangeWidget: RangeWidget,
+  SelectWidget: SelectWidget,
+  TextareaWidget: TextareaWidget,
+  TextWidget: TextWidget,
+  UpDownWidget: UpDownWidget,
+  URLWidget: URLWidget
+};
+
+var getDefaultRegistry$1 = utils.getDefaultRegistry;
+
+var _getDefaultRegistry = /*#__PURE__*/getDefaultRegistry$1(),
+    fields = _getDefaultRegistry.fields,
+    widgets$1 = _getDefaultRegistry.widgets;
+
+var SubmitButton = function SubmitButton() {
+  return React__default.createElement(Box, {
+    marginTop: 3
+  }, React__default.createElement(Button, {
+    type: "submit",
+    variant: "solid"
+  }, "Submit"));
+};
+
+var Theme = {
+  children: /*#__PURE__*/React__default.createElement(SubmitButton, null),
+  ArrayFieldTemplate: ArrayFieldTemplate,
+  FieldTemplate: FieldTemplate,
+  ObjectFieldTemplate: ObjectFieldTemplate,
+  ErrorList: ErrorList,
+  fields: /*#__PURE__*/_extends({}, fields, Fields),
+  widgets: /*#__PURE__*/_extends({}, widgets$1, widgets)
+};
+
+var Form = /*#__PURE__*/withTheme(Theme);
+
+/**
+ *
+ * The reason we need this is for ChakraProvider styling in Playground.
+ * The User Developer would be responsible for styling with ChakraProvider in their app.
+ *
+ * Exact duplicate of `@chakra-ui/react`'s `CSSReset` component. Except for the following:
+ *
+  ```css
+    input {
+      border-width: revert;
+      border-color: revert;
+      border-style: revert;
+    }
+    .array-item > hr {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  ```
+
+  It is located at the bottom of the styles string.
+ */
+
+var CSSReset = function CSSReset() {
+  return createElement(Global, {
+    styles: "\n      html {\n        line-height: 1.5;\n        -webkit-text-size-adjust: 100%;\n        font-family: system-ui, sans-serif;\n        -webkit-font-smoothing: antialiased;\n        text-rendering: optimizeLegibility;\n        -moz-osx-font-smoothing: grayscale;\n        touch-action: manipulation;\n      }\n      body {\n        position: relative;\n        min-height: 100%;\n        font-feature-settings: 'kern';\n      }\n      *,\n      *::before,\n      *::after {\n        border-width: 0;\n        border-style: solid;\n        box-sizing: border-box;\n      }\n      main {\n        display: block;\n      }\n      hr {\n        border-top-width: 1px;\n        box-sizing: content-box;\n        height: 0;\n        overflow: visible;\n      }\n      pre,\n      code,\n      kbd,\n      samp {\n        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;\n        font-size: 1em;\n      }\n      a {\n        background-color: transparent;\n        color: inherit;\n        text-decoration: inherit;\n      }\n      abbr[title] {\n        border-bottom: none;\n        text-decoration: underline;\n        -webkit-text-decoration: underline dotted;\n        text-decoration: underline dotted;\n      }\n      b,\n      strong {\n        font-weight: bold;\n      }\n      small {\n        font-size: 80%;\n      }\n      sub,\n      sup {\n        font-size: 75%;\n        line-height: 0;\n        position: relative;\n        vertical-align: baseline;\n      }\n      sub {\n        bottom: -0.25em;\n      }\n      sup {\n        top: -0.5em;\n      }\n      img {\n        border-style: none;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        font-family: inherit;\n        font-size: 100%;\n        line-height: 1.15;\n        margin: 0;\n      }\n      button,\n      input {\n        overflow: visible;\n      }\n      button,\n      select {\n        text-transform: none;\n      }\n      button::-moz-focus-inner,\n      [type=\"button\"]::-moz-focus-inner,\n      [type=\"reset\"]::-moz-focus-inner,\n      [type=\"submit\"]::-moz-focus-inner {\n        border-style: none;\n        padding: 0;\n      }\n      fieldset {\n        padding: 0.35em 0.75em 0.625em;\n      }\n      legend {\n        box-sizing: border-box;\n        color: inherit;\n        display: table;\n        max-width: 100%;\n        padding: 0;\n        white-space: normal;\n      }\n      progress {\n        vertical-align: baseline;\n      }\n      textarea {\n        overflow: auto;\n      }\n      [type=\"checkbox\"],\n      [type=\"radio\"] {\n        box-sizing: border-box;\n        padding: 0;\n      }\n      [type=\"number\"]::-webkit-inner-spin-button,\n      [type=\"number\"]::-webkit-outer-spin-button {\n        -webkit-appearance: none !important;\n      }\n      input[type=\"number\"] {\n        -moz-appearance: textfield;\n      }\n      [type=\"search\"] {\n        -webkit-appearance: textfield;\n        outline-offset: -2px;\n      }\n      [type=\"search\"]::-webkit-search-decoration {\n        -webkit-appearance: none !important;\n      }\n      ::-webkit-file-upload-button {\n        -webkit-appearance: button;\n        font: inherit;\n      }\n      details {\n        display: block;\n      }\n      summary {\n        display: list-item;\n      }\n      template {\n        display: none;\n      }\n      [hidden] {\n        display: none !important;\n      }\n      body,\n      blockquote,\n      dl,\n      dd,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      hr,\n      figure,\n      p,\n      pre {\n        margin: 0;\n      }\n      button {\n        background: transparent;\n        padding: 0;\n      }\n      fieldset {\n        margin: 0;\n        padding: 0;\n      }\n      ol,\n      ul {\n        margin: 0;\n        padding: 0;\n      }\n      textarea {\n        resize: vertical;\n      }\n      button,\n      [role=\"button\"] {\n        cursor: pointer;\n      }\n      button::-moz-focus-inner {\n        border: 0 !important;\n      }\n      table {\n        border-collapse: collapse;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-size: inherit;\n        font-weight: inherit;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        padding: 0;\n        line-height: inherit;\n        color: inherit;\n      }\n      img,\n      svg,\n      video,\n      canvas,\n      audio,\n      iframe,\n      embed,\n      object {\n        display: block;\n      }\n      img,\n      video {\n        max-width: 100%;\n        height: auto;\n      }\n      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {\n        outline: none;\n        box-shadow: none;\n      }\n      select::-ms-expand {\n        display: none;\n      }\n      input {\n        border-width: revert;\n        border-color: revert;\n        border-style: revert;\n      }\n      .array-item > hr {\n        margin-top: 16px;\n        margin-bottom: 16px;\n      }\n    "
+  });
+};
+
+/**
+ * __createChakraFrameProvider is used to ensure that <Global> emotion components
+ * can be rendered within an iframe without changing the styles of the parent page.
+ * Required for using Chakra UI in the playground.
+ *
+ * We have to define ChakraFrameProvider in this library, as opposed to the playground,
+ * in order to avoid conflicting versions of emotion, which breaks the styling.
+ *
+ * NOTE: This is an internal component only used by @rjsf/playground (no
+ * backwards compatibility guarantees!)
+ *
+ * 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(function (container) {
+  var newCache = createCache({
+    container: container,
+    key: "rjsf"
+  });
+  return newCache;
+});
+var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
+  return function (_ref) {
+    var document = _ref.document;
+    return createElement("div", {
+      style: {
+        margin: 2
+      }
+    }, createElement(CacheProvider, {
+      value: memoizedCreateCacheWithContainer(document.head)
+    }, createElement(ChakraProvider, {
+      resetCSS: false
+    }, createElement(CSSReset, null), props.children)));
+  };
+};
+
+export default Form;
+export { ArrayFieldTemplate, FieldTemplate, Fields, Form, ObjectFieldTemplate, Theme, widgets as Widgets, __createChakraFrameProvider };
+//# sourceMappingURL=chakra-ui.esm.js.map