How to use the grommet.Box function in grommet

setActive(over ? 60 : 0);
        setLabel(over ? 'in use' : undefined);
      }
    }, {
      value: 30,
      onHover: function onHover(over) {
        setActive(over ? 30 : 0);
        setLabel(over ? 'available' : undefined);
      }
    }],
    max: 100,
    size: "small",
    thickness: "medium"
  }), _react["default"].createElement(_grommet.Box, {
    align: "center"
  }, _react["default"].createElement(_grommet.Box, {
    direction: "row",
    align: "center",
    pad: {
      bottom: 'xsmall'
    }
  }, _react["default"].createElement(_grommet.Text, {
    size: "xxlarge",
    weight: "bold"
  }, active || total), _react["default"].createElement(_grommet.Text, null, "GB")), _react["default"].createElement(_grommet.Text, null, label || 'total')))));
};

}
  };

  var onCheck = function onCheck(event, value) {
    if (event.target.checked) {
      setChecked([].concat(checked, [value]));
    } else {
      setChecked(checked.filter(function (item) {
        return item !== value;
      }));
    }
  };

  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",
    gap: "medium"
  }, _react["default"].createElement(_grommet.CheckBox, {
    checked: checked.length === 3,
    indeterminate: checked.length > 0 && checked.length < 3,
    label: "All",
    onChange: onCheckAll
  }), checkboxes.map(function (item) {
    return _react["default"].createElement(_grommet.CheckBox, {
      key: item,
      checked: checked.includes(item),
      label: item,
      onChange: function onChange(e) {

var IconPlain = function IconPlain() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Text, {
    margin: "small"
  }, " plain=true (no padding, no border) "), _react["default"].createElement(_grommet.Box, {
    direction: "row"
  }, _react["default"].createElement(_grommet.Button, {
    plain: true,
    icon: _react["default"].createElement(_grommetIcons.Close, null),
    onClick: function onClick() {},
    primary: true
  }), _react["default"].createElement(_grommet.Button, {
    plain: true,
    icon: _react["default"].createElement(_grommetIcons.Send, null),
    onClick: function onClick() {}
  }), _react["default"].createElement(_grommet.Button, {
    plain: true,
    icon: _react["default"].createElement(_grommetIcons.User, null),
    onClick: function onClick() {}
  }))), _react["default"].createElement(_grommet.Box, {
    align: "center",

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

  var _onChange = function onChange(e) {
    setValue(e.value);
  };

  var onClickClearOptions = function onClickClearOptions() {
    setValue('');
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    pad: "medium",
    direction: "row",
    align: "center",
    justify: "center",
    gap: "small"
  }, _react["default"].createElement(_grommet.Select, {
    options: optionList,
    onChange: function onChange(e) {
      return _onChange(e);
    },
    value: value,
    placeholder: "Select multiple options",
    multiple: true
  }), _react["default"].createElement(_grommet.Button, {
    onClick: onClickClearOptions,
    disabled: !value,

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({
    disabled: true,
    label: "Disabled",
    onClick: function onClick() {}
  }, props))), _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "medium"
  }, _react["default"].createElement(_grommet.Button, _extends({
    primary: true,
    label: "Primary",
    onClick: function onClick() {}
  }, props))));
};

rest = _objectWithoutPropertiesLoose(_ref, ["theme"]);

  var options = ['one', 'two'];

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

  var _useState2 = (0, _react.useState)(false),
      open = _useState2[0],
      setOpen = _useState2[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: theme || _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large",
    gap: "small"
  }, _react["default"].createElement(_grommet.Button, {
    onClick: function onClick() {
      return setOpen(!open);
    },
    label: "Control the select"
  }), _react["default"].createElement(_grommet.Select, _extends({
    id: "select",
    name: "select",
    placeholder: "Select",
    open: open,
    value: value,

var CustomDefaultProps = function CustomDefaultProps() {
  return _react["default"].createElement(_grommet.Box, {
    background: "brand",
    pad: "small"
  }, "Hello");
};

var SimpleMultiSelect = function SimpleMultiSelect() {
  var _useState = (0, _react.useState)(defaultOptions),
      options = _useState[0],
      setOptions = _useState[1];

  var _useState2 = (0, _react.useState)(''),
      value = _useState2[0],
      setValue = _useState2[1];

  return _react["default"].createElement(_grommet.Grommet, {
    full: true,
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, _react["default"].createElement(_grommet.Select, {
    size: "medium",
    placeholder: "Select",
    multiple: true,
    value: value,
    options: options,
    onChange: function onChange(_ref) {
      var nextValue = _ref.value;
      return setValue(nextValue);
    },
    onClose: function onClose() {
      return setOptions(defaultOptions);

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 SimpleRadioButtonGroup = function SimpleRadioButtonGroup(_ref) {
  var initialValue = _ref.value,
      props = _objectWithoutPropertiesLoose(_ref, ["value"]);

  var _useState = (0, _react.useState)(initialValue),
      value = _useState[0],
      setValue = _useState[1];

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.RadioButtonGroup, _extends({
    name: "radio",
    options: [{
      label: 'Choice 1',
      value: 'c1'
    }, {
      label: 'Choice 2',
      value: 'c2'
    }, {
      label: 'Choice 3',
      value: 'c3'
    }],
    value: value,
    onChange: function onChange(event) {