How to use the grommet.Text function in grommet

},
      onFocus: function onFocus(event) {
        return event.stopPropagation();
      }
    }, _react["default"].createElement(_grommet.Box, {
      align: "center",
      direction: "row",
      gap: "xsmall",
      pad: {
        vertical: 'xsmall',
        horizontal: 'small'
      },
      margin: "xsmall",
      background: "accent-1",
      round: "large"
    }, _react["default"].createElement(_grommet.Text, {
      size: "small",
      color: "white"
    }, season), _react["default"].createElement(_grommet.Box, {
      background: "white",
      round: "full",
      margin: {
        left: 'xsmall'
      }
    }, _react["default"].createElement(_grommetIcons.FormClose, {
      color: "accent-1",
      size: "small",
      style: {
        width: '12px',
        height: '12px'
      }
    }))));

}, _data.columns.map(function (c) {
      return _react["default"].createElement(_grommet.TableCell, {
        key: c.property,
        scope: c.dataScope,
        align: c.align
      }, _react["default"].createElement(_grommet.Text, null, c.format ? c.format(datum) : datum[c.property]));
    }));
  })), _react["default"].createElement(_grommet.TableFooter, null, _react["default"].createElement(_grommet.TableRow, null, _data.columns.map(function (c) {

var RouteButton = function RouteButton() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Text, {
    margin: "medium",
    size: "small"
  }, "Note: RoutedButton will soon be deprecated"), _react["default"].createElement(_grommet.RoutedButton, {
    label: "Go",
    path: "/"
  })));
};

}, _react["default"].createElement(_grommet.Box, {
      animation: {
        type: 'fadeIn',
        duration: 100
      },
      pad: "medium",
      background: {
        color: 'white',
        opacity: 'strong'
      },
      border: {
        color: 'accent-2'
      },
      round: true,
      className: "chromatic-ignore"
    }, _react["default"].createElement(_grommet.Text, {
      size: "large",
      weight: "bold"
    }, hover.value[1]), _react["default"].createElement(_grommet.Text, null, new Date(hover.value[0]).toLocaleDateString())))), _react["default"].createElement(_grommet.Stack, null, _react["default"].createElement(_grommet.Chart, {
      type: "line",
      bounds: outerBounds,
      values: outerValues,
      size: {
        width: 'full',
        height: 'xxsmall'
      },
      thickness: "xxsmall"
    }), _react["default"].createElement(_grommet.RangeSelector, {
      min: 0,
      max: data.length,
      size: "full",
      values: range,

var margin = undefined;
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    pad: "medium"
  }, _react["default"].createElement("div", null, _react["default"].createElement(_grommet.Heading, {
    margin: margin
  }, "Heading 1 - Medium"), _react["default"].createElement(_grommet.Text, {
    size: "xlarge"
  }, "Text XLarge"), _react["default"].createElement(_grommet.Paragraph, {
    size: "large",
    margin: margin
  }, "Paragraph - Large", paragraphFiller), _react["default"].createElement(_grommet.Heading, {
    level: 2,
    margin: margin
  }, "Heading 2 - Medium"), _react["default"].createElement(_grommet.Text, {
    size: "large"
  }, "Text Large"), _react["default"].createElement(_grommet.Paragraph, {
    margin: margin
  }, "Paragraph - Medium", paragraphFiller), _react["default"].createElement(_grommet.Heading, {
    level: 3,
    margin: margin
  }, "Heading 3 - Medium"), _react["default"].createElement(_grommet.Text, null, "Text Medium"), _react["default"].createElement(_grommet.Paragraph, {
    margin: margin
  }, "Paragraph - Medium", paragraphFiller), _react["default"].createElement(_grommet.Heading, {
    level: 4,
    margin: margin
  }, "Heading 4 - Medium"), _react["default"].createElement(_grommet.Text, {
    size: "small"
  }, "Text Small"), _react["default"].createElement(_grommet.Paragraph, {
    size: "small",
    margin: margin

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));
};

plain: false,
    icon: _react["default"].createElement(_grommetIcons.Close, null),
    onClick: function onClick() {},
    primary: true
  }), _react["default"].createElement(_grommet.Button, {
    plain: false,
    icon: _react["default"].createElement(_grommetIcons.Send, null),
    onClick: function onClick() {}
  }), _react["default"].createElement(_grommet.Button, {
    plain: false,
    icon: _react["default"].createElement(_grommetIcons.User, null),
    onClick: function onClick() {}
  }))), _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Text, {
    margin: "small"
  }, " plain=undefined (with padding, no border) "), _react["default"].createElement(_grommet.Box, {
    direction: "row"
  }, _react["default"].createElement(_grommet.Button, {
    icon: _react["default"].createElement(_grommetIcons.Close, null),
    onClick: function onClick() {},
    primary: true
  }), _react["default"].createElement(_grommet.Button, {
    icon: _react["default"].createElement(_grommetIcons.Send, null),
    onClick: function onClick() {}
  }), _react["default"].createElement(_grommet.Button, {
    icon: _react["default"].createElement(_grommetIcons.User, null),
    onClick: function onClick() {}
  }))));
};

header: function header(_ref) {
      var currentDate = _ref.date,
          locale = _ref.locale,
          onPreviousMonth = _ref.onPreviousMonth,
          onNextMonth = _ref.onNextMonth,
          previousInBound = _ref.previousInBound,
          nextInBound = _ref.nextInBound;
      return _react["default"].createElement(_grommet.Box, {
        direction: "row",
        align: "center",
        justify: "between"
      }, _react["default"].createElement(_grommet.Button, {
        disabled: !previousInBound,
        onClick: onPreviousMonth
      }, _react["default"].createElement(_grommet.Box, null, _react["default"].createElement(_grommetIcons.FormPreviousLink, null))), _react["default"].createElement(_grommet.Text, {
        size: "small"
      }, _react["default"].createElement("strong", null, currentDate.toLocaleDateString(locale, {
        month: 'long',
        year: 'numeric'
      }))), _react["default"].createElement(_grommet.Button, {
        disabled: !nextInBound,
        onClick: onNextMonth
      }, _react["default"].createElement(_grommet.Box, null, _react["default"].createElement(_grommetIcons.FormNextLink, null))));
    }
  })));

}, xAxis.map(function (x) {
      return _react["default"].createElement(_grommet.Text, {
        key: x
      }, x);
    })), _react["default"].createElement(_grommet.Stack, {
      guidingChild: "last"