How to use the grommet.Heading function in grommet

var InfiniteScrollDataTable = function InfiniteScrollDataTable() {
  var step = 10;

  var load = function load() {
    console.log("InfiniteScroll fires onMore after loading " + step + " items");
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Heading, {
    level: 3
  }, _react["default"].createElement(_grommet.Box, {
    gap: "small"
  }, _react["default"].createElement("strong", null, "InfiniteScroll embedded in DataTable"), _react["default"].createElement(_grommet.Text, null, "Scroll down to load more data, open console to see loading info"))), _react["default"].createElement(_grommet.DataTable, {
    columns: columns,
    data: DATA,
    step: step,
    onMore: function onMore() {
      return load();
    }
  })));
};

fill: true
  }, _react["default"].createElement(_grommet.Box, {
    as: "header",
    direction: "row",
    align: "center",
    pad: {
      vertical: 'small',
      horizontal: 'medium'
    },
    justify: "between",
    background: "neutral-3",
    elevation: "large",
    style: {
      zIndex: '1000'
    }
  }, _react["default"].createElement(_grommet.Heading, {
    level: 3,
    margin: "none",
    color: "white"
  }, _react["default"].createElement("strong", null, "My App")), _react["default"].createElement(_grommet.Button, {
    onClick: function onClick() {
      return setOpenNotification(!openNotification);
    },
    icon: _react["default"].createElement(_grommetIcons.Notification, {
      color: "white"
    })
  })), _react["default"].createElement(_grommet.Box, {
    flex: true,
    direction: "row"
  }, _react["default"].createElement(_grommet.Box, {
    flex: true,
    align: "center",

var ResponsiveGrid = function ResponsiveGrid() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: customBreakpoints
  }, _react["default"].createElement(_grommet.Box, null, _react["default"].createElement(_grommet.Heading, {
    level: 2
  }, "Resize me."), _react["default"].createElement(Responsive, {
    rows: rows,
    columns: columns,
    gap: "small",
    areas: fixedGridAreas,
    margin: "medium"
  }, _react["default"].createElement(_grommet.Box, {
    gridArea: "header",
    background: "neutral-2",
    justify: "center",
    align: "center"
  }, _react["default"].createElement("strong", null, "Box 1")), _react["default"].createElement(_grommet.Box, {
    gridArea: "test",
    background: "neutral-3",
    justify: "center",

var AnnounceContextComponent = function AnnounceContextComponent(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet,
    full: true
  }, _react["default"].createElement(_grommet.Box, {
    justify: "center",
    align: "center",
    background: "brand",
    fill: true
  }, _react["default"].createElement(_grommet.Heading, null, "Welcome to announcement section"), _react["default"].createElement(_grommet.AnnounceContext.Consumer, null, function (announce) {
    return _react["default"].createElement(Announcer, _extends({
      announce: announce
    }, props));
  })));
};

header: function header(_ref) {
      var currentDate = _ref.date,
          locale = _ref.locale,
          onPreviousMonth = _ref.onPreviousMonth,
          previousInBound = _ref.previousInBound;
      return _react["default"].createElement(_grommet.Box, {
        direction: "row",
        align: "center",
        justify: "between"
      }, _react["default"].createElement(_grommet.Button, {
        disabled: !previousInBound,
        icon: _react["default"].createElement(_grommetIcons.Previous, null),
        onClick: onPreviousMonth
      }), _react["default"].createElement(_grommet.Heading, {
        level: 3,
        margin: "none"
      }, currentDate.toLocaleDateString(locale, {
        month: 'long',
        year: 'numeric'
      })), _react["default"].createElement(_grommetIcons.Blank, null));
    }
  }), _react["default"].createElement(_grommet.Calendar, {

setBackground = _useState7[1];

  var _useState8 = (0, _react.useState)(0),
      tabIndex = _useState8[0],
      setTabIndex = _useState8[1];

  var theme = (0, _react.useMemo)(function () {
    return (0, _utils.deepMerge)((0, _base.generate)(baseSize), themes[themeName]);
  }, [baseSize, themeName]);
  var themeCanMode = (0, _react.useMemo)(function () {
    return theme && theme.global.colors.background && theme.global.colors.background.dark;
  }, [theme]);
  var content = [_react["default"].createElement(_grommet.Box, {
    key: "type",
    align: "start"
  }, _react["default"].createElement(_grommet.Heading, {
    margin: {
      top: 'none'
    }
  }, "Heading"), _react["default"].createElement(_grommet.Paragraph, null, "Paragraph"), _react["default"].createElement(_grommet.Text, null, "Text"), _react["default"].createElement(_grommet.Anchor, {
    href: ""
  }, "Anchor"), _react["default"].createElement(_grommet.Menu, {
    label: "Menu",
    items: [{
      label: 'One',
      onClick: function onClick() {}
    }, {
      label: 'Two'
    }]
  }), _react["default"].createElement(_grommet.Button, {
    label: "Button",
    onClick: function onClick() {}

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

}, _react["default"].createElement(_grommet.ResponsiveContext.Consumer, null, function (size) {
    return _react["default"].createElement(_grommet.Box, {
      fill: true,
      background: "brand"
    }, _react["default"].createElement(_grommet.Heading, null, "Hi, I'm " + size + ", resize me!"));
  }));
}).add('Responsive Grid', function () {

header: function header(_ref2) {
      var currentDate = _ref2.date,
          locale = _ref2.locale,
          onNextMonth = _ref2.onNextMonth,
          nextInBound = _ref2.nextInBound;
      return _react["default"].createElement(_grommet.Box, {
        direction: "row",
        align: "center",
        justify: "between"
      }, _react["default"].createElement(_grommetIcons.Blank, null), _react["default"].createElement(_grommet.Heading, {
        level: 3,
        margin: "none"
      }, currentDate.toLocaleDateString(locale, {
        month: 'long',
        year: 'numeric'
      })), _react["default"].createElement(_grommet.Button, {
        disabled: !nextInBound,
        icon: _react["default"].createElement(_grommetIcons.Next, null),
        onClick: onNextMonth
      }));
    }
  })));

var listAnimalsBoxes = animals.map(function (animalName) {
  return _react["default"].createElement(_grommet.Box, {
    elevation: "large",
    key: animalName,
    background: "light-3",
    flex: false,
    justify: "center",
    align: "center"
  }, _react["default"].createElement(_grommet.Heading, {
    level: 2
  }, animalName));
});