How to use the grommet.FormField function in grommet

}, _react["default"].createElement(_grommet.Form, {
    onReset: function onReset(event) {
      return console.log(event);
    },
    onSubmit: function onSubmit(_ref) {
      var value = _ref.value;
      return console.log('Submit', value);
    }
  }, _react["default"].createElement(_grommet.FormField, {
    label: "Name",
    name: "name",
    required: true,
    validate: {
      regexp: /^[a-z]/i
    }
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Email",
    name: "email",
    type: "email",
    required: true
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Employee ID",
    name: "employeeId",
    required: true,
    validate: {
      regexp: /^[0-9]{4,6}$/,
      message: '4-6 digits'
    }
  }), _react["default"].createElement(_grommet.FormField, {
    name: "subscribe",
    component: _grommet.CheckBox,
    pad: true,

theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "center"
  }, _react["default"].createElement(_grommet.Box, {
    width: "medium"
  }, _react["default"].createElement(_grommet.Form, {
    onReset: function onReset(event) {
      return console.log(event);
    },
    onSubmit: function onSubmit(_ref) {
      var value = _ref.value;
      return console.log('Submit', value);
    }
  }, _react["default"].createElement(_grommet.FormField, {
    label: "Name",
    name: "name",
    required: true,
    validate: {
      regexp: /^[a-z]/i
    }
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Email",
    name: "email",
    type: "email",
    required: true
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Employee ID",
    name: "employeeId",
    required: true,
    validate: {

theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "center"
  }, _react["default"].createElement(_grommet.Box, {
    width: "medium"
  }, _react["default"].createElement(_grommet.Form, {
    onReset: function onReset(event) {
      return console.log(event);
    },
    onSubmit: function onSubmit(_ref) {
      var value = _ref.value;
      return console.log('Submit', value);
    }
  }, _react["default"].createElement(_grommet.FormField, {
    label: "Name",
    name: "name",
    required: true,
    validate: {
      regexp: /^[a-z]/i
    }
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Email",
    name: "email",
    type: "email",
    required: true
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Employee ID",
    name: "employeeId",
    required: true,
    validate: {

pad: true,
    label: "Subscribe?"
  }), _react["default"].createElement(_grommet.FormField, {
    name: "ampm",
    component: _grommet.RadioButtonGroup,
    pad: true,
    options: ['morning', 'evening']
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Size",
    name: "size",
    component: _grommet.Select,
    onChange: function onChange(event) {
      return console.log(event);
    },
    options: ['small', 'medium', 'large', 'xlarge']
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Comments",
    name: "comments",
    component: _grommet.TextArea
  }), _react["default"].createElement(_grommet.FormField, {
    label: "Age",
    name: "age",
    component: _grommet.RangeInput,
    pad: true,
    min: 15,
    max: 75
  }), _react["default"].createElement(_grommet.Box, {
    direction: "row",
    justify: "between",
    margin: {
      top: 'medium'
    }

var FormFieldSelect = function FormFieldSelect(props) {
  var _useState = (0, _react.useState)(''),
      value = _useState[0],
      setValue = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, _extends({
    label: "Label",
    htmlFor: "select"
  }, props), _react["default"].createElement(_grommet.Select, {
    id: "select",
    placeholder: "placeholder",
    options: _data.allOptions,
    value: value,
    onChange: function onChange(_ref) {
      var option = _ref.option;
      return setValue(option);
    }
  }))));
};

var FormFieldHelpError = function FormFieldHelpError(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, _extends({
    label: "Label",
    htmlFor: "text-input"
  }, props, {
    help: "Text to help the user know what is possible",
    error: "Text to call attention to an issue with this field"
  }), _react["default"].createElement(_grommet.TextInput, {
    id: "text-input",
    placeholder: "placeholder",
    value: "Value",
    onChange: function onChange() {}
  }))));
};

var FormFieldCheckBox = function FormFieldCheckBox(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, _extends({
    label: "Label",
    htmlFor: "check-box"
  }, props), _react["default"].createElement(_grommet.Box, {
    pad: {
      horizontal: 'small',
      vertical: 'xsmall'
    }
  }, _react["default"].createElement(_grommet.CheckBox, {
    id: "check-box",
    label: "CheckBox"
  })))));
};

var FormFieldLabel = function FormFieldLabel(props) {
  var required = props.required,
      label = props.label,
      rest = _objectWithoutPropertiesLoose(props, ["required", "label"]);

  return _react["default"].createElement(_grommet.FormField, _extends({
    label: required ? _react["default"].createElement(_grommet.Box, {
      direction: "row"
    }, _react["default"].createElement(_grommet.Text, null, label), _react["default"].createElement(_grommet.Text, {
      color: "status-critical"
    }, "*")) : label,
    required: required
  }, rest));
};

var CustomFormField = function CustomFormField() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: (0, _utils.deepMerge)(_grommet.grommet, customFormFieldTheme)
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.FormField, {
    label: "Label",
    htmlFor: "text-area"
  }, _react["default"].createElement(_grommet.TextArea, {
    id: "text-area",
    placeholder: "placeholder"
  }))));
};

style: {
        fontFamily: 'monospace'
      }
    }, value));
  })), _react["default"].createElement(_grommet.RangeSelector, {
    direction: "horizontal",
    invert: false,
    min: 0,
    max: 3,
    size: "full",
    round: "small",
    values: rangeSelector,
    onChange: function onChange(values) {
      return setRangeSelector(values);
    }
  })), _react["default"].createElement(_grommet.FormField, {
    label: "FormField"
  }, _react["default"].createElement(_grommet.TextInput, {
    placeholder: "TextInput"
  }))), _react["default"].createElement(_grommet.Box, {
    key: "time",
    gap: "medium"
  }, _react["default"].createElement(_grommet.Calendar, {
    size: "small"
  }), _react["default"].createElement(_grommet.Clock, {
    type: "digital",
    className: "chromatic-ignore"
  }), _react["default"].createElement(_grommet.Clock, {
    className: "chromatic-ignore"
  })), _react["default"].createElement(_grommet.Box, {
    key: "measure",
    gap: "medium"