How to use the grommet.Stack function in grommet

var total = 100;

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

  var _useState2 = (0, _react.useState)(),
      label = _useState2[0],
      setLabel = _useState2[1];

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Stack, {
    anchor: "center"
  }, _react["default"].createElement(_grommet.Meter, {
    type: "circle",
    background: "light-2",
    values: [{
      value: 60,
      onHover: function onHover(over) {
        setActive(over ? 60 : 0);
        setLabel(over ? 'in use' : undefined);
      }
    }, {
      value: 30,
      onHover: function onHover(over) {
        setActive(over ? 30 : 0);
        setLabel(over ? 'available' : undefined);
      }

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,
      onChange: this.onChange,
      color: "accent-2",
      style: {

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, {
      guidingChild: "last"
    }, _react["default"].createElement(_grommet.Box, {
      fill: true,
      justify: "between"
    }, yAxis.map(function (y, index) {
      var first = index === 0;
      var last = index === yAxis.length - 1 && !first;
      var align;

      if (first) {
        align = 'start';
      } else if (last) {
        align = 'end';
      } else {
        align = 'center';
      }

}
  }), _react["default"].createElement(_grommet.RadioButtonGroup, {
    name: "radio",
    options: ['RadioButton 1', 'RadioButton 2'],
    value: radioButton,
    onChange: function onChange(event) {
      return setRadioButton(event.target.value);
    }
  }), _react["default"].createElement(_grommet.TextInput, {
    placeholder: "TextInput"
  }), _react["default"].createElement(_grommet.TextArea, {
    placeholder: "TextArea"
  }), _react["default"].createElement(_grommet.RangeInput, {
    value: 24,
    onChange: function onChange() {}
  }), _react["default"].createElement(_grommet.Stack, null, _react["default"].createElement(_grommet.Box, {
    direction: "row",
    justify: "between"
  }, [0, 1, 2, 3].map(function (value) {
    return _react["default"].createElement(_grommet.Box, {
      key: value,
      pad: "small"
    }, _react["default"].createElement(_grommet.Text, {
      style: {
        fontFamily: 'monospace'
      }
    }, value));
  })), _react["default"].createElement(_grommet.RangeSelector, {
    direction: "horizontal",
    invert: false,
    min: 0,
    max: 3,

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

  var _useState = (0, _react.useState)([12, 16]),
      range = _useState[0],
      setRange = _useState[1];

  var onChange = function onChange(values) {
    setRange(values);
  };

  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Stack, null, _react["default"].createElement(_grommet.Box, {
    direction: direction === 'vertical' ? 'column' : 'row',
    justify: "between"
  }, [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map(function (value) {
    return _react["default"].createElement(_grommet.Box, {
      key: value,
      width: "xxsmall",
      height: "xxsmall",
      align: "center",
      pad: "small",
      border: false
    }, _react["default"].createElement(_grommet.Text, {
      style: {
        fontFamily: 'monospace'
      }
    }, value));
  })), _react["default"].createElement(_grommet.RangeSelector, _extends({

direction: "row",
      justify: "end"
    }, Object.keys(intervalDays).map(function (_int) {
      return _react["default"].createElement(_grommet.Button, {
        key: _int,
        onClick: function onClick() {
          return _this2.setState({
            interval: _int
          });
        }
      }, _react["default"].createElement(_grommet.Box, {
        pad: "small"
      }, _react["default"].createElement(_grommet.Text, {
        color: interval === _int ? 'black' : 'brand'
      }, _int)));
    })), _react["default"].createElement(_grommet.Stack, {
      guidingChild: "first"
    }, _react["default"].createElement(_grommet.Box, {
      pad: {
        horizontal: thickness
      }
    }, _react["default"].createElement(_grommet.Chart, {
      type: "bar",
      overflow: true,
      bounds: bounds,
      values: values,
      thickness: thickness,
      size: {
        width: 'full',
        height: 'small'
      }
    })), _react["default"].createElement(_grommet.Box, {

}, values.map(function (v, i) {
      return _react["default"].createElement(_grommet.Box, {
        flex: false,
        key: v[0]
      }, _react["default"].createElement(_grommet.Stack, {
        fill: true,
        anchor: "center",
        interactiveChild: "first"
      }, _react["default"].createElement(_grommet.Box, {
        fill: true,
        pad: pad,
        ref: function ref(_ref) {
          _this2.valueRefs[i] = _ref;
        },
        background: active === i ? {
          color: 'dark-5',
          opacity: 'medium'
        } : undefined,
        onMouseOver: function onMouseOver() {
          return _this2.setState({
            active: i

}
    }, _react["default"].createElement(_grommet.Text, null, axis[1][0]))), _react["default"].createElement(_grommet.Box, {
      border: "bottom",
      align: "end"
    }, _react["default"].createElement(_grommet.Box, {
      pad: "xsmall",
      background: {
        color: 'white',
        opacity: 'medium'
      }
    }, _react["default"].createElement(_grommet.Text, null, axis[1][1])))), _react["default"].createElement(_grommet.Box, {
      height: "xxsmall",
      flex: false
    })), _react["default"].createElement(_grommet.Box, {
      width: "large"
    }, _react["default"].createElement(_grommet.Stack, {
      guidingChild: "first"
    }, _react["default"].createElement(_grommet.Box, {
      pad: {
        horizontal: pad
      }
    }, _react["default"].createElement(_grommet.Chart, {
      type: "bar",
      overflow: true,
      bounds: bounds,
      values: values,
      thickness: thickness,
      size: {
        width: 'full',
        height: 'small'
      }
    })), _react["default"].createElement(_grommet.Box, {

outerValues = _this$state.outerValues,
        range = _this$state.range,
        thickness = _this$state.thickness;
    return _react["default"].createElement(_grommet.Grommet, {
      theme: _themes.grommet
    }, _react["default"].createElement(_grommet.Box, {
      pad: "large"
    }, _react["default"].createElement(_grommet.Box, {
      direction: "row",
      justify: "between",
      className: "chromatic-ignore"
    }, innerAxis[0].reverse().map(function (t) {
      return _react["default"].createElement(_grommet.Text, {
        key: t
      }, new Date(t).toLocaleDateString());
    })), _react["default"].createElement(_grommet.Stack, {
      guidingChild: "first",
      interactiveChild: "first"
    }, _react["default"].createElement(_grommet.Box, {
      pad: {
        horizontal: thickness
      }
    }, _react["default"].createElement(_grommet.Chart, {
      type: "bar",
      color: "accent-2",
      overflow: true,
      bounds: innerBounds,
      values: innerValues.map(function (v) {
        return _extends({}, v, {
          onHover: _this2.onHover(v)
        });
      }),

function Thin(_ref) {
  var _ref$initialRange = _ref.initialRange,
      initialRange = _ref$initialRange === void 0 ? [0, 100] : _ref$initialRange,
      label = _ref.label;

  var _useState = (0, _react.useState)(initialRange),
      range = _useState[0],
      setRange = _useState[1];

  return _react["default"].createElement(_grommet.Box, {
    gap: "small",
    pad: "xlarge"
  }, label ? _react["default"].createElement(_grommet.Text, null, label) : null, _react["default"].createElement(_grommet.Stack, null, _react["default"].createElement(_grommet.Box, {
    background: "light-4",
    height: "6px",
    direction: "row"
  }), _react["default"].createElement(_grommet.RangeSelector, {
    direction: "horizontal",
    min: RANGE_MIN,
    max: RANGE_MAX,
    step: 1,
    values: range,
    onChange: function onChange(nextRange) {
      setRange(nextRange);
    }
  })), _react["default"].createElement(_grommet.Box, {
    align: "center"
  }, _react["default"].createElement(_grommet.Text, {
    size: "small"