How to use the grommet.Grommet 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();
    }
  })));

var SimpleCheckBox = function SimpleCheckBox(_ref) {
  var checkedProp = _ref.checked,
      rest = _objectWithoutPropertiesLoose(_ref, ["checked"]);

  var _useState = (0, _react.useState)(!!checkedProp),
      checked = _useState[0],
      setChecked = _useState[1];

  var onChange = function onChange(event) {
    return setChecked(event.target.checked);
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.CheckBox, _extends({}, rest, {
    checked: checked,
    onChange: onChange
  }))));
};

var CustomAccordion = function CustomAccordion(_ref) {
  var animate = _ref.animate,
      multiple = _ref.multiple,
      rest = _objectWithoutPropertiesLoose(_ref, ["animate", "multiple"]);

  return _react["default"].createElement(_grommet.Grommet, {
    theme: CustomAccordionTheme
  }, _react["default"].createElement(_grommet.Box, _extends({}, rest, {
    pad: "large",
    align: "center",
    justify: "center"
  }), _react["default"].createElement(_grommet.Accordion, {
    animate: animate,
    multiple: true
  }, _react["default"].createElement(_grommet.AccordionPanel, {
    label: _react["default"].createElement(_grommet.Text, {
      size: "large"
    }, "Panel 1 - uses large Text size")
  }, _react["default"].createElement(_grommet.Box, {
    background: "light-2",
    height: "small"
  }, "Important Info")), _react["default"].createElement(_grommet.AccordionPanel, {

var _useState4 = (0, _react.useState)(next),
      reference2 = _useState4[0],
      setReference2 = _useState4[1];

  var onSelect = function onSelect(arg) {
    if (Array.isArray(arg)) {
      setDate(undefined);
      setDates(arg);
    } else {
      setDate(arg);
      setDates(undefined);
    }
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    justify: "center",
    pad: "large",
    direction: "row",
    gap: "small"
  }, _react["default"].createElement(_grommet.Calendar, {
    animate: false,
    showAdjacentDays: false,
    range: true,
    date: date,
    dates: dates,
    onSelect: onSelect,
    reference: reference1.toISOString(),
    onReference: function onReference(reference) {
      var refDate = new Date(reference);

var PlainButton = function PlainButton(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Button, _extends({
    hoverIndicator: "light-1",
    onClick: function onClick() {}
  }, props), _react["default"].createElement(_grommet.Box, {
    pad: "small",
    direction: "row",
    align: "center",
    gap: "small"
  }, _react["default"].createElement(_grommetIcons.Add, null), _react["default"].createElement(_grommet.Text, null, "Add")))));
};

var TooltipDrop = function TooltipDrop() {
  var _useState = (0, _react.useState)(),
      over = _useState[0],
      setOver = _useState[1];

  var ref = (0, _react.useRef)();
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet,
    full: true
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "center"
  }, _react["default"].createElement(_grommet.Button, {
    label: "Button",
    ref: ref,
    onMouseOver: function onMouseOver() {
      return setOver(true);
    },
    onMouseOut: function onMouseOut() {
      return setOver(false);
    },
    onFocus: function onFocus() {},

var BackgroundBox = function BackgroundBox() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    pad: "small",
    gap: "small",
    align: "start"
  }, _react["default"].createElement(_grommet.Box, {
    pad: "small",
    background: {
      color: 'brand',
      opacity: true
    },
    elevation: "large"
  }, "brand opacity"), _react["default"].createElement(_grommet.Box, {
    pad: "small",
    background: "brand",
    elevation: "large"

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

_proto.render = function render() {
    var _this$state = this.state,
        bounds = _this$state.bounds,
        values = _this$state.values,
        yAxis = _this$state.yAxis,
        xAxis = _this$state.xAxis;
    var chartProps = {
      size: {
        width: 'medium',
        height: 'small'
      },
      bounds: bounds,
      values: values,
      overflow: true
    };
    return _react["default"].createElement(_grommet.Grommet, {
      theme: _themes.grommet
    }, _react["default"].createElement(_grommet.Box, {
      align: "center",
      pad: "large"
    }, _react["default"].createElement(_grommet.Box, {
      direction: "row",
      justify: "between",
      width: "medium",
      margin: {
        vertical: 'small'
      }
    }, xAxis.map(function (x) {
      return _react["default"].createElement(_grommet.Text, {
        key: x
      }, x);
    })), _react["default"].createElement(_grommet.Stack, {

var LabelledCharts = function LabelledCharts() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    pad: "large",
    direction: "row",
    gap: "medium"
  }, _react["default"].createElement(LabelledChart, {
    label: "Exported",
    value: 300
  }), _react["default"].createElement(LabelledChart, {
    label: "Usable",
    value: 200,
    color: "accent-2"
  }), _react["default"].createElement(LabelledChart, {
    label: "Used",
    value: 98.2,
    color: "accent-3"