@rjsf/chakra-ui 4.2.0 → 4.2.3

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

@@ -0,0 +1,1381 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('@chakra-ui/react'), require('@chakra-ui/icons'), require('chakra-react-select'), require('@emotion/react'), require('@emotion/cache'), require('@emotion/weak-memoize')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', '@chakra-ui/react', '@chakra-ui/icons', 'chakra-react-select', '@emotion/react', '@emotion/cache', '@emotion/weak-memoize'], factory) :
+  (global = global || self, factory(global['@rjsf/chakra-ui'] = {}, global.core, global.React, global.react, global.icons, global.chakraReactSelect, global.react$1, global.createCache, global.weakMemoize));
+}(this, (function (exports, core, React, react, icons, chakraReactSelect, react$1, createCache, weakMemoize) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+  createCache = createCache && Object.prototype.hasOwnProperty.call(createCache, 'default') ? createCache['default'] : createCache;
+  weakMemoize = weakMemoize && Object.prototype.hasOwnProperty.call(weakMemoize, 'default') ? weakMemoize['default'] : weakMemoize;
+
+  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(react.Button, Object.assign({
+      leftIcon: React__default.createElement(icons.AddIcon, null)
+    }, props), "Add Item");
+  };
+
+  var _excluded = ["icon"];
+  var mappings = {
+    remove: /*#__PURE__*/React__default.createElement(icons.DeleteIcon, null),
+    plus: /*#__PURE__*/React__default.createElement(icons.AddIcon, null),
+    "arrow-up": /*#__PURE__*/React__default.createElement(icons.ArrowUpIcon, null),
+    "arrow-down": /*#__PURE__*/React__default.createElement(icons.ArrowDownIcon, null)
+  };
+  /**
+   * props used in Template:
+   * icon, tabIndex, disabled, onClick
+   */
+
+  var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
+    var icon = props.icon,
+        otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+    return React__default.createElement(react.IconButton, Object.assign({}, otherProps, {
+      icon: mappings[icon],
+      "aria-label": icon
+    }));
+  });
+  ChakraIconButton.displayName = 'ChakraIconButton';
+
+  var _excluded$1 = ["key"],
+      _excluded2 = ["key"];
+  var isMultiSelect = core.utils.isMultiSelect,
+      getDefaultRegistry = core.utils.getDefaultRegistry;
+
+  var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
+    var schema = props.schema,
+        _props$registry = props.registry,
+        registry = _props$registry === void 0 ? getDefaultRegistry() : _props$registry;
+
+    if (isMultiSelect(schema, registry.rootSchema)) {
+      return React__default.createElement(DefaultFixedArrayFieldTemplate, Object.assign({}, props));
+    } else {
+      return React__default.createElement(DefaultNormalArrayFieldTemplate, Object.assign({}, props));
+    }
+  };
+
+  var ArrayFieldTitle = function ArrayFieldTitle(_ref) {
+    var TitleField = _ref.TitleField,
+        idSchema = _ref.idSchema,
+        title = _ref.title,
+        required = _ref.required;
+
+    if (!title) {
+      return null;
+    }
+
+    var id = idSchema.$id + "__title";
+    return React__default.createElement(TitleField, {
+      id: id,
+      title: title,
+      required: required
+    });
+  };
+
+  var ArrayFieldDescription = function ArrayFieldDescription(_ref2) {
+    var DescriptionField = _ref2.DescriptionField,
+        idSchema = _ref2.idSchema,
+        description = _ref2.description;
+
+    if (!description) {
+      return null;
+    }
+
+    var id = idSchema.$id + "__description";
+    return React__default.createElement(DescriptionField, {
+      id: id,
+      description: description
+    });
+  }; // Used in the two templates
+
+
+  var DefaultArrayItem = function DefaultArrayItem(_ref3) {
+    var index = _ref3.index,
+        readonly = _ref3.readonly,
+        disabled = _ref3.disabled,
+        children = _ref3.children,
+        hasToolbar = _ref3.hasToolbar,
+        hasRemove = _ref3.hasRemove,
+        hasMoveUp = _ref3.hasMoveUp,
+        hasMoveDown = _ref3.hasMoveDown,
+        onReorderClick = _ref3.onReorderClick,
+        onDropIndexClick = _ref3.onDropIndexClick;
+    var onRemoveClick = React.useMemo(function () {
+      return onDropIndexClick(index);
+    }, [index, onDropIndexClick]);
+    var onArrowUpClick = React.useMemo(function () {
+      return onReorderClick(index, index - 1);
+    }, [index, onReorderClick]);
+    var onArrowDownClick = React.useMemo(function () {
+      return onReorderClick(index, index + 1);
+    }, [index, onReorderClick]);
+    return React__default.createElement(react.HStack, {
+      alignItems: "flex-end",
+      py: 1
+    }, React__default.createElement(react.Box, {
+      w: "100%"
+    }, children), hasToolbar && React__default.createElement(react.Box, null, React__default.createElement(react.ButtonGroup, {
+      isAttached: true,
+      mb: 1
+    }, (hasMoveUp || hasMoveDown) && React__default.createElement(ChakraIconButton, {
+      icon: "arrow-up",
+      tabIndex: -1,
+      disabled: disabled || readonly || !hasMoveUp,
+      onClick: onArrowUpClick
+    }), (hasMoveUp || hasMoveDown) && React__default.createElement(ChakraIconButton, {
+      icon: "arrow-down",
+      tabIndex: -1,
+      disabled: disabled || readonly || !hasMoveDown,
+      onClick: onArrowDownClick
+    }), hasRemove && React__default.createElement(ChakraIconButton, {
+      icon: "remove",
+      tabIndex: -1,
+      disabled: disabled || readonly,
+      onClick: onRemoveClick
+    }))));
+  };
+
+  var DefaultFixedArrayFieldTemplate = function DefaultFixedArrayFieldTemplate(props) {
+    return React__default.createElement("fieldset", {
+      className: props.className
+    }, React__default.createElement(ArrayFieldTitle, {
+      key: "array-field-title-" + props.idSchema.$id,
+      TitleField: props.TitleField,
+      idSchema: props.idSchema,
+      title: props.uiSchema["ui:title"] || props.title,
+      required: props.required
+    }), (props.uiSchema["ui:description"] || props.schema.description) && // Use DescriptionField if possible
+    React__default.createElement("div", {
+      className: "field-description",
+      key: "field-description-" + props.idSchema.$id
+    }, props.uiSchema["ui:description"] || props.schema.description), React__default.createElement("div", {
+      className: "row array-item-list",
+      key: "array-item-list-" + props.idSchema.$id
+    }, props.items && props.items.map(function (p) {
+      var key = p.key,
+          itemProps = _objectWithoutPropertiesLoose(p, _excluded$1);
+
+      return React__default.createElement(DefaultArrayItem, Object.assign({
+        key: key
+      }, itemProps));
+    })), props.canAdd && React__default.createElement(AddButton, {
+      justifySelf: "flex-end",
+      className: "array-item-add",
+      onClick: props.onAddClick,
+      disabled: props.disabled || props.readonly
+    }));
+  };
+
+  var DefaultNormalArrayFieldTemplate = function DefaultNormalArrayFieldTemplate(props) {
+    return React__default.createElement(react.Box, null, React__default.createElement(ArrayFieldTitle, {
+      key: "array-field-title-" + props.idSchema.$id,
+      TitleField: props.TitleField,
+      idSchema: props.idSchema,
+      title: props.uiSchema["ui:title"] || props.title,
+      required: props.required
+    }), (props.uiSchema["ui:description"] || props.schema.description) && React__default.createElement(ArrayFieldDescription, {
+      key: "array-field-description-" + props.idSchema.$id,
+      DescriptionField: props.DescriptionField,
+      idSchema: props.idSchema,
+      description: props.uiSchema["ui:description"] || props.schema.description
+    }), React__default.createElement(react.Grid, {
+      key: "array-item-list-" + props.idSchema.$id
+    }, React__default.createElement(react.GridItem, null, props.items.length > 0 && props.items.map(function (p) {
+      var key = p.key,
+          itemProps = _objectWithoutPropertiesLoose(p, _excluded2);
+
+      return React__default.createElement(DefaultArrayItem, Object.assign({
+        key: key
+      }, itemProps));
+    })), props.canAdd && React__default.createElement(react.GridItem, {
+      justifySelf: "flex-end"
+    }, React__default.createElement(react.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(react.Alert, {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 3,
+      status: "error"
+    }, React__default.createElement(react.AlertTitle, null, "Errors"), React__default.createElement(react.List, null, errors.map(function (error, i) {
+      return React__default.createElement(react.ListItem, {
+        key: i
+      }, React__default.createElement(react.ListIcon, {
+        as: icons.WarningIcon,
+        color: "red.500"
+      }), error.stack);
+    })));
+  };
+
+  var TitleField = function TitleField(_ref) {
+    var title = _ref.title;
+    return React__default.createElement(react.Box, {
+      mt: 1,
+      mb: 4
+    }, React__default.createElement(react.Heading, {
+      as: "h5"
+    }, title), React__default.createElement(react.Divider, null));
+  };
+
+  var DescriptionField = function DescriptionField(_ref) {
+    var description = _ref.description,
+        id = _ref.id;
+    if (!description) return null;
+
+    if (typeof description === "string") {
+      return React__default.createElement(react.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 = core.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 React.createElement(React.Fragment, null, children);
+    }
+
+    var keyLabel = label + " Key";
+
+    var handleBlur = function handleBlur(_ref) {
+      var target = _ref.target;
+      return onKeyChange(target.value);
+    };
+
+    return React.createElement(react.Grid, {
+      key: id + "-key",
+      alignItems: "center",
+      gap: 2
+    }, React.createElement(react.GridItem, null, React.createElement(react.FormControl, {
+      isRequired: required
+    }, React.createElement(react.FormLabel, {
+      htmlFor: id + "-key"
+    }, keyLabel), React.createElement(react.Input, {
+      defaultValue: label,
+      disabled: disabled || readonly,
+      id: id + "-key",
+      name: id + "-key",
+      onBlur: !readonly ? handleBlur : undefined,
+      type: "text",
+      mb: 1
+    }))), React.createElement(react.GridItem, null, children), React.createElement(react.GridItem, null, React.createElement(ChakraIconButton, {
+      icon: "remove",
+      tabIndex: -1,
+      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(react.FormControl, {
+      isRequired: required,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }, children, displayLabel && rawDescription ? React__default.createElement(react.Text, {
+      mt: 2
+    }, rawDescription) : null, rawErrors && rawErrors.length > 0 && React__default.createElement(react.List, null, rawErrors.map(function (error, i) {
+      return React__default.createElement(react.ListItem, {
+        key: i
+      }, React__default.createElement(react.FormErrorMessage, {
+        id: id
+      }, error));
+    })), rawHelp && React__default.createElement(react.FormHelperText, {
+      id: id
+    }, rawHelp)));
+  };
+
+  var canExpand = core.utils.canExpand;
+
+  var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
+    var DescriptionField = props.DescriptionField,
+        description = props.description,
+        TitleField = props.TitleField,
+        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 React.createElement(React.Fragment, null, (uiSchema["ui:title"] || title) && React.createElement(TitleField, {
+      id: idSchema.$id + "-title",
+      title: title,
+      required: required
+    }), description && React.createElement(DescriptionField, {
+      id: idSchema.$id + "-description",
+      description: description
+    }), React.createElement(react.Grid, {
+      gap: description ? 2 : 6,
+      mb: 4
+    }, properties.map(function (element, index) {
+      return element.hidden ? element.content : React.createElement(react.GridItem, {
+        key: idSchema.$id + "-" + element.name + "-" + index
+      }, element.content);
+    }), canExpand(schema, uiSchema, formData) && React.createElement(react.GridItem, {
+      justifySelf: "flex-end"
+    }, React.createElement(AddButton, {
+      className: "object-property-expand",
+      onClick: onAddClick(schema),
+      disabled: disabled || readonly
+    }))));
+  };
+
+  var pad = core.utils.pad,
+      parseDateString = core.utils.parseDateString,
+      toDateString = core.utils.toDateString;
+
+  var 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 = React.useState(parseDateString(value, showTime)),
+        state = _useState[0],
+        setState = _useState[1];
+
+    React.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(react.Box, null, React__default.createElement(react.Box, {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justify: "center"
+    }, dateElementProps().map(function (elemProps, i) {
+      var elemId = id + "_" + elemProps.type;
+      return React__default.createElement(react.Box, {
+        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(react.Box, {
+      display: "flex"
+    }, !options.hideNowButton && React__default.createElement(react.Button, {
+      onClick: function onClick(e) {
+        return handleNow(e);
+      },
+      mr: "2"
+    }, "Now"), !options.hideClearButton && React__default.createElement(react.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 (react.shouldForwardProp(key)) {
+        // @ts-ignore - How to type this?!... 😬
+        delete chakraProps[key];
+      }
+    });
+    return chakraProps;
+  }
+
+  var CheckboxWidget = function CheckboxWidget(props) {
+    var id = props.id,
+        value = props.value,
+        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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isRequired: required
+    }), React__default.createElement(react.Checkbox, {
+      id: id,
+      name: id,
+      isChecked: typeof value === "undefined" ? false : value,
+      isDisabled: disabled || readonly,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus
+    }, label && React__default.createElement(react.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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }), React__default.createElement(react.FormLabel, {
+      htmlFor: id
+    }, label || schema.title), React__default.createElement(react.CheckboxGroup, {
+      onChange: function onChange(option) {
+        return _onChange(option);
+      },
+      defaultValue: value
+    }, React__default.createElement(react.Stack, {
+      direction: row ? "row" : "column"
+    }, enumOptions.map(function (option, index) {
+      var checked = value.indexOf(option.value) !== -1;
+      var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+      return React__default.createElement(react.Checkbox, {
+        key: id + "_" + index,
+        id: id + "_" + index,
+        value: option.value,
+        isChecked: checked,
+        isDisabled: disabled || itemDisabled || readonly,
+        onBlur: _onBlur,
+        onFocus: _onFocus
+      }, option.label && React__default.createElement(react.Text, null, option.label));
+    }))));
+  };
+
+  var ColorWidget = function ColorWidget(props) {
+    var registry = props.registry;
+    var TextWidget = registry.widgets.TextWidget;
+    return React__default.createElement(TextWidget, Object.assign({
+      type: "color"
+    }, props));
+  };
+
+  var DateWidget = function DateWidget(props) {
+    var registry = props.registry;
+    var TextWidget = registry.widgets.TextWidget;
+    return React__default.createElement(TextWidget, Object.assign({}, props, {
+      type: "date"
+    }));
+  };
+
+  var localToUTC = core.utils.localToUTC,
+      utcToLocal = core.utils.utcToLocal;
+
+  var DateTimeWidget = function DateTimeWidget(props) {
+    var registry = props.registry;
+    var TextWidget = registry.widgets.TextWidget;
+    var value = utcToLocal(props.value);
+
+    var onChange = function onChange(value) {
+      props.onChange(localToUTC(value));
+    };
+
+    return React__default.createElement(TextWidget, Object.assign({
+      type: "datetime-local"
+    }, props, {
+      value: value,
+      onChange: onChange
+    }));
+  };
+
+  var EmailWidget = function EmailWidget(props) {
+    var registry = props.registry;
+    var TextWidget = registry.widgets.TextWidget;
+    return React__default.createElement(TextWidget, Object.assign({}, props, {
+      type: "email"
+    }));
+  };
+
+  var PasswordWidget = function PasswordWidget(props) {
+    var registry = props.registry;
+    var TextWidget = registry.widgets.TextWidget;
+    return React__default.createElement(TextWidget, Object.assign({
+      type: "password"
+    }, props));
+  };
+
+  var RadioWidget = function RadioWidget(_ref) {
+    var id = _ref.id,
+        schema = _ref.schema,
+        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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly
+    }), React__default.createElement(react.FormLabel, {
+      htmlFor: id
+    }, label || schema.title), React__default.createElement(react.RadioGroup, {
+      onChange: onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      value: "" + value,
+      name: id
+    }, React__default.createElement(react.Stack, {
+      direction: row ? "row" : "column"
+    }, enumOptions.map(function (option, i) {
+      var itemDisabled = Boolean(enumDisabled && enumDisabled.indexOf(option.value) != -1);
+      return React__default.createElement(react.Radio, {
+        value: "" + option.value,
+        key: i,
+        disabled: disabled || itemDisabled || readonly
+      }, "" + option.label);
+    }))));
+  };
+
+  var rangeSpec = core.utils.rangeSpec,
+      getDisplayLabel = core.utils.getDisplayLabel;
+
+  var RangeWidget = function RangeWidget(_ref) {
+    var value = _ref.value,
+        readonly = _ref.readonly,
+        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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps), displayLabel ? React__default.createElement(react.FormLabel, {
+      htmlFor: id
+    }, label || schema.title) : null, React__default.createElement(react.Slider, Object.assign({}, sliderWidgetProps, {
+      id: id,
+      name: id,
+      isDisabled: disabled || readonly,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus
+    }), React__default.createElement(react.SliderTrack, null, React__default.createElement(react.SliderFilledTrack, null)), React__default.createElement(react.SliderThumb, null)));
+  };
+
+  var asNumber = core.utils.asNumber,
+      guessType = core.utils.guessType;
+  var nums = /*#__PURE__*/new Set(["number", "integer"]);
+  /**
+   * This is a silly limitation in the DOM where option change event values are
+   * always retrieved as strings.
+   */
+
+  var processValue = function processValue(schema, value) {
+    // "enum" is a reserved word, so only "type" and "items" can be destructured
+    var type = schema.type,
+        items = schema.items;
+
+    if (value === "") {
+      return undefined;
+    } else if (type === "array" && items && nums.has(items.type)) {
+      return value.map(asNumber);
+    } else if (type === "boolean") {
+      return value === "true";
+    } else if (type === "number") {
+      return asNumber(value);
+    } // If type is undefined, but an enum is present, try and infer the type from
+    // the enum values
+
+
+    if (schema["enum"]) {
+      if (schema["enum"].every(function (x) {
+        return guessType(x) === "number";
+      })) {
+        return asNumber(value);
+      } else if (schema["enum"].every(function (x) {
+        return guessType(x) === "boolean";
+      })) {
+        return value === "true";
+      }
+    }
+
+    return value;
+  };
+
+  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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }), (label || schema.title) && React__default.createElement(react.FormLabel, {
+      htmlFor: typeof multiple !== "undefined" && enumOptions ? undefined : id
+    }, label || schema.title), typeof multiple !== "undefined" && enumOptions ? React__default.createElement(chakraReactSelect.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(react.Select, {
+      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 = core.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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }), displayLabel ? React__default.createElement(react.FormLabel, {
+      htmlFor: id
+    }, label || schema.title) : null, React__default.createElement(react.Textarea, {
+      id: id,
+      name: id,
+      value: value != null ? value : "",
+      placeholder: placeholder,
+      autoFocus: autofocus,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus
+    }));
+  };
+
+  var getDisplayLabel$2 = core.utils.getDisplayLabel;
+
+  var TextWidget = function TextWidget(props) {
+    var id = props.id,
+        type = props.type,
+        value = props.value,
+        label = props.label,
+        schema = props.schema,
+        uiSchema = props.uiSchema,
+        onChange = props.onChange,
+        onBlur = props.onBlur,
+        onFocus = props.onFocus,
+        options = props.options,
+        required = props.required,
+        readonly = props.readonly,
+        rawErrors = props.rawErrors,
+        autofocus = props.autofocus,
+        placeholder = props.placeholder,
+        disabled = props.disabled;
+    var chakraProps = getChakra({
+      uiSchema: uiSchema
+    });
+
+    var _onChange = function _onChange(_ref) {
+      var value = _ref.target.value;
+      return onChange(value === "" ? options.emptyValue : value);
+    };
+
+    var _onBlur = function _onBlur(_ref2) {
+      var value = _ref2.target.value;
+      return onBlur(id, value);
+    };
+
+    var _onFocus = function _onFocus(_ref3) {
+      var value = _ref3.target.value;
+      return onFocus(id, value);
+    };
+
+    var displayLabel = getDisplayLabel$2(schema, uiSchema) && (!!label || !!schema.title);
+    var inputType = (type || schema.type) === "string" ? "text" : "" + (type || schema.type);
+    return React.createElement(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }), displayLabel ? React.createElement(react.FormLabel, {
+      htmlFor: id,
+      id: id + "-label"
+    }, label || schema.title) : null, React.createElement(react.Input, {
+      id: id,
+      name: id,
+      value: value || value === 0 ? value : "",
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      autoFocus: autofocus,
+      placeholder: placeholder,
+      type: inputType,
+      list: schema.examples ? "examples_" + id : undefined
+    }), schema.examples ? React.createElement("datalist", {
+      id: "examples_" + id
+    }, schema.examples.concat(schema["default"] ? [schema["default"]] : []).map(function (example) {
+      return React.createElement("option", {
+        key: example,
+        value: example
+      });
+    })) : null);
+  };
+
+  var getDisplayLabel$3 = core.utils.getDisplayLabel;
+
+  var UpDownWidget = function UpDownWidget(props) {
+    var id = props.id,
+        schema = props.schema,
+        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(react.FormControl, Object.assign({
+      mb: 1
+    }, chakraProps, {
+      isDisabled: disabled || readonly,
+      isRequired: required,
+      isReadOnly: readonly,
+      isInvalid: rawErrors && rawErrors.length > 0
+    }), displayLabel ? React__default.createElement(react.FormLabel, {
+      htmlFor: id
+    }, label || schema.title) : null, React__default.createElement(react.NumberInput, {
+      value: value != null ? value : "",
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus
+    }, React__default.createElement(react.NumberInputField, {
+      id: id,
+      name: id
+    }), React__default.createElement(react.NumberInputStepper, null, React__default.createElement(react.NumberIncrementStepper, null), React__default.createElement(react.NumberDecrementStepper, null))));
+  };
+
+  var URLWidget = function URLWidget(props) {
+    var registry = props.registry;
+    var TextWidget = registry.widgets.TextWidget;
+    return React__default.createElement(TextWidget, Object.assign({
+      type: "url"
+    }, props));
+  };
+
+  var getSubmitButtonOptions = core.utils.getSubmitButtonOptions;
+
+  var SubmitButton = function SubmitButton(_ref) {
+    var uiSchema = _ref.uiSchema;
+
+    var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
+        submitText = _getSubmitButtonOptio.submitText,
+        norender = _getSubmitButtonOptio.norender,
+        submitButtonProps = _getSubmitButtonOptio.props;
+
+    if (norender) {
+      return null;
+    }
+
+    return React__default.createElement(react.Box, {
+      marginTop: 3
+    }, React__default.createElement(react.Button, Object.assign({
+      type: "submit",
+      variant: "solid"
+    }, submitButtonProps), submitText));
+  };
+
+  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,
+    SubmitButton: SubmitButton
+  };
+
+  var getDefaultRegistry$1 = core.utils.getDefaultRegistry;
+
+  var _getDefaultRegistry = /*#__PURE__*/getDefaultRegistry$1(),
+      fields = _getDefaultRegistry.fields,
+      widgets$1 = _getDefaultRegistry.widgets;
+
+  var Theme = {
+    ArrayFieldTemplate: ArrayFieldTemplate,
+    FieldTemplate: FieldTemplate,
+    ObjectFieldTemplate: ObjectFieldTemplate,
+    ErrorList: ErrorList,
+    fields: /*#__PURE__*/_extends({}, fields, Fields),
+    widgets: /*#__PURE__*/_extends({}, widgets$1, widgets)
+  };
+
+  var Form = /*#__PURE__*/core.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 React.createElement(react$1.Global, {
+      styles: "\n      html {\n        line-height: 1.5;\n        -webkit-text-size-adjust: 100%;\n        font-family: system-ui, sans-serif;\n        -webkit-font-smoothing: antialiased;\n        text-rendering: optimizeLegibility;\n        -moz-osx-font-smoothing: grayscale;\n        touch-action: manipulation;\n      }\n      body {\n        position: relative;\n        min-height: 100%;\n        font-feature-settings: 'kern';\n      }\n      *,\n      *::before,\n      *::after {\n        border-width: 0;\n        border-style: solid;\n        box-sizing: border-box;\n      }\n      main {\n        display: block;\n      }\n      hr {\n        border-top-width: 1px;\n        box-sizing: content-box;\n        height: 0;\n        overflow: visible;\n      }\n      pre,\n      code,\n      kbd,\n      samp {\n        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;\n        font-size: 1em;\n      }\n      a {\n        background-color: transparent;\n        color: inherit;\n        text-decoration: inherit;\n      }\n      abbr[title] {\n        border-bottom: none;\n        text-decoration: underline;\n        -webkit-text-decoration: underline dotted;\n        text-decoration: underline dotted;\n      }\n      b,\n      strong {\n        font-weight: bold;\n      }\n      small {\n        font-size: 80%;\n      }\n      sub,\n      sup {\n        font-size: 75%;\n        line-height: 0;\n        position: relative;\n        vertical-align: baseline;\n      }\n      sub {\n        bottom: -0.25em;\n      }\n      sup {\n        top: -0.5em;\n      }\n      img {\n        border-style: none;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        font-family: inherit;\n        font-size: 100%;\n        line-height: 1.15;\n        margin: 0;\n      }\n      button,\n      input {\n        overflow: visible;\n      }\n      button,\n      select {\n        text-transform: none;\n      }\n      button::-moz-focus-inner,\n      [type=\"button\"]::-moz-focus-inner,\n      [type=\"reset\"]::-moz-focus-inner,\n      [type=\"submit\"]::-moz-focus-inner {\n        border-style: none;\n        padding: 0;\n      }\n      fieldset {\n        padding: 0.35em 0.75em 0.625em;\n      }\n      legend {\n        box-sizing: border-box;\n        color: inherit;\n        display: table;\n        max-width: 100%;\n        padding: 0;\n        white-space: normal;\n      }\n      progress {\n        vertical-align: baseline;\n      }\n      textarea {\n        overflow: auto;\n      }\n      [type=\"checkbox\"],\n      [type=\"radio\"] {\n        box-sizing: border-box;\n        padding: 0;\n      }\n      [type=\"number\"]::-webkit-inner-spin-button,\n      [type=\"number\"]::-webkit-outer-spin-button {\n        -webkit-appearance: none !important;\n      }\n      input[type=\"number\"] {\n        -moz-appearance: textfield;\n      }\n      [type=\"search\"] {\n        -webkit-appearance: textfield;\n        outline-offset: -2px;\n      }\n      [type=\"search\"]::-webkit-search-decoration {\n        -webkit-appearance: none !important;\n      }\n      ::-webkit-file-upload-button {\n        -webkit-appearance: button;\n        font: inherit;\n      }\n      details {\n        display: block;\n      }\n      summary {\n        display: list-item;\n      }\n      template {\n        display: none;\n      }\n      [hidden] {\n        display: none !important;\n      }\n      body,\n      blockquote,\n      dl,\n      dd,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      hr,\n      figure,\n      p,\n      pre {\n        margin: 0;\n      }\n      button {\n        background: transparent;\n        padding: 0;\n      }\n      fieldset {\n        margin: 0;\n        padding: 0;\n      }\n      ol,\n      ul {\n        margin: 0;\n        padding: 0;\n      }\n      textarea {\n        resize: vertical;\n      }\n      button,\n      [role=\"button\"] {\n        cursor: pointer;\n      }\n      button::-moz-focus-inner {\n        border: 0 !important;\n      }\n      table {\n        border-collapse: collapse;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-size: inherit;\n        font-weight: inherit;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        padding: 0;\n        line-height: inherit;\n        color: inherit;\n      }\n      img,\n      svg,\n      video,\n      canvas,\n      audio,\n      iframe,\n      embed,\n      object {\n        display: block;\n      }\n      img,\n      video {\n        max-width: 100%;\n        height: auto;\n      }\n      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {\n        outline: none;\n        box-shadow: none;\n      }\n      select::-ms-expand {\n        display: none;\n      }\n      input {\n        border-width: revert;\n        border-color: revert;\n        border-style: revert;\n      }\n      .array-item > hr {\n        margin-top: 16px;\n        margin-bottom: 16px;\n      }\n    "
+    });
+  };
+
+  /**
+   * __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 React.createElement("div", {
+        style: {
+          margin: 2
+        }
+      }, React.createElement(react$1.CacheProvider, {
+        value: memoizedCreateCacheWithContainer(document.head)
+      }, React.createElement(react.ChakraProvider, {
+        resetCSS: false
+      }, React.createElement(CSSReset, null), props.children)));
+    };
+  };
+
+  exports.ArrayFieldTemplate = ArrayFieldTemplate;
+  exports.FieldTemplate = FieldTemplate;
+  exports.Fields = Fields;
+  exports.Form = Form;
+  exports.ObjectFieldTemplate = ObjectFieldTemplate;
+  exports.Theme = Theme;
+  exports.Widgets = widgets;
+  exports.__createChakraFrameProvider = __createChakraFrameProvider;
+  exports.default = Form;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=chakra-ui.umd.development.js.map