How to use the grommet.grommet function in grommet

return Math.floor(Math.random() * 1000000);
  })),
      results = _useState[0],
      setResults = _useState[1];

  var load = function load() {
    console.log("InfiniteScroll fires onMore after loading " + step + " items");
    setResults([].concat(results, Array.from({
      length: 50
    }, function () {
      return Math.floor(Math.random() * 1000000);
    })));
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    pad: "small",
    basis: "small"
  }, _react["default"].createElement(_grommet.Heading, {
    level: 3
  }, _react["default"].createElement(_grommet.Box, {
    gap: "small"
  }, _react["default"].createElement("strong", null, "InfiniteScroll embedded in a Table"), _react["default"].createElement(_grommet.Text, null, "Scroll down to load more data, open console to see loading info"))), _react["default"].createElement(_grommet.Table, null, _react["default"].createElement(_grommet.TableHeader, null, _react["default"].createElement(_grommet.TableRow, null, _react["default"].createElement(_grommet.TableCell, {
    scope: "col",
    border: "bottom"
  }, "Key"), _react["default"].createElement(_grommet.TableCell, {
    scope: "col",
    border: "bottom"
  }, "Cartoon"), _react["default"].createElement(_grommet.TableCell, {
    scope: "col",
    border: "bottom"

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

var FormFieldToggle = function FormFieldToggle(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",
    toggle: true
  })))));

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _grommet = require("grommet");

var _utils = require("../../../utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

var customButtonColor = (0, _utils.deepMerge)(_grommet.grommet, {
  button: {
    color: {
      light: 'white',
      dark: 'white'
    }
  }
});

var Colored = function Colored(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: customButtonColor
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large",
    gap: "small"
  }, _react["default"].createElement(_grommet.Button, {

var BasicButtons = function BasicButtons(props) {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "medium"
  }, _react["default"].createElement(_grommet.Button, _extends({
    label: "Default",
    onClick: function onClick() {}
  }, props))), _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "medium"
  }, _react["default"].createElement(_grommet.Button, {
    label: "Anchor",
    href: "#"
  })), _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "medium"
  }, _react["default"].createElement(_grommet.Button, _extends({

var GrommetVars = function GrommetVars() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet,
    cssVars: true
  }, _react["default"].createElement(_grommet.Box, {
    pad: "medium",
    background: "var(--accent-2)",
    gap: "medium"
  }, _react["default"].createElement(_grommet.Box, null, "Checkout Grommet variables, you can find them in the StyledGrommet DOM."), _react["default"].createElement(_grommet.Box, {
    "with": true
  }, "For example, the background color in this Box is using var(--accent-2)")));
};

var LabelFormField = function LabelFormField() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Form, null, _react["default"].createElement(FormFieldLabel, {
    name: "firstName",
    label: "FirstName",
    required: true
  }), _react["default"].createElement(FormFieldLabel, {
    name: "LastName",
    label: "LastName",
    required: true
  }), _react["default"].createElement(FormFieldLabel, {
    name: "email",
    label: "Email"
  }), _react["default"].createElement(_grommet.Button, {
    type: "submit",

var SidebarButtons = function SidebarButtons() {
  var _useState = (0, _react.useState)(),
      active = _useState[0],
      setActive = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _grommet.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    direction: "row"
  }, _react["default"].createElement(_grommet.Box, {
    background: "neutral-1"
  }, ['Dashboard', 'Devices', 'Settings'].map(function (label) {
    return _react["default"].createElement(SidebarButton, {
      key: label,
      label: label,
      active: label === active,
      onClick: function onClick() {
        return setActive(label);
      }
    });
  }))));
};

"use strict";

var _react = _interopRequireWildcard(require("react"));

var _react2 = require("@storybook/react");

var _utils = require("grommet/utils");

var _grommet = require("grommet");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var customHeading = (0, _utils.deepMerge)(_grommet.grommet, {
  calendar: {
    heading: {
      level: '3'
    }
  }
});

var CustomSizeCalendar = function CustomSizeCalendar() {
  var _useState = (0, _react.useState)(),
      date = _useState[0],
      setDate = _useState[1];

  var onSelect = function onSelect(nextDate) {
    setDate(nextDate !== date ? nextDate : undefined);
  };