How to use the ink.Box function in ink

bold: true,
          dim: isDisabled(config, id),
          hex: disabledColor || normalColor
        }, `${isActive ? '⌛  ' : emoji ? `${emoji}  ` : ''}${title}`), _react.default.createElement(_ink.Color, {
          bold: false,
          hex: _palette.hexMuted,
          dim: isDisabled(config, id)
        }, description ? `: ${description}` : ''));
      },
      // Remove the indicator
      indicatorComponent: _ => ''
    };
    const showOptions = !isFlaggedStart && !removeOptions;
    return _react.default.createElement(_ink.Box, {
      flexDirection: "column"
    }, showOptions ? _react.default.createElement(_ink.Box, {
      marginBottom: 1
    }, _react.default.createElement(_ink.Color, {
      dim: isTaskRunning(messages)
    }, _react.default.createElement(_templates.OptionsTemplate, {
      selectProps: OptionsSelectProps
    }))) : null, !(0, _utils.isEmpty)(messages) && _react.default.createElement(_templates.MessageTemplate, {
      messages: messages,
      isFlaggedStart: isFlaggedStart
    }));
  }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var React = require('react');

var _require = require('ink'),
    render = _require.render,
    Color = _require.Color,
    Box = _require.Box;

var Welcome = require('import-jsx')("./Components/Welcome");

var Rules = require('import-jsx')("./Components/Rules");

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

var commit = utils.commit,
    getConfig = utils.getConfig,
    isValidCommit = utils.isValidCommit;

var _getConfig = getConfig(),
    title = _getConfig.title,
    rules = _getConfig.rules;

var _process$argv = _toArray(process.argv),

}, !(0, _utils.isEmpty)(messages) && messages.map(({
  text,
  type
}, i) => _react.default.createElement(_ink.Box, {
  key: `msg${i}`
}, type === 'heading' && !isFlaggedStart && _react.default.createElement(_ink.Box, {
  marginBottom: 1
}, _react.default.createElement(_ink.Text, {
  bold: true
}, `—— ${text} ——`)), type === 'heading' && isFlaggedStart && _react.default.createElement(_ink.Text, {
  bold: true
}, `${text}\n`), _react.default.createElement(_ink.Color, {
  dim: messages.length - 1 !== i
}, type === 'error' && `💩  ${text}`, type === 'success' && `👌  ${text}`, type === 'message' && `💁‍  ${text}`, type === 'working' && (messages.length - 1 === i ? _react.default.createElement(_inkSpinner.default, {
  type: "runner"
}) : `🏃 `), type === 'working' && ` ${text}`))));

function Cli({
  devMode,
  buildStatus,
  logs
}) {
  return _react.default.createElement(_ink.Box, {
    flexDirection: "column",
    alignItems: "center"
  }, _react.default.createElement(_ink.Box, null, "startd-server \uD83D\uDE80"), devMode ? _react.default.createElement(_ink.Box, null, _chalk.default.red("dev mode"), " \uD83D\uDEE0") : _react.default.createElement(_ink.Box, null, _chalk.default.green("production mode"), " \uD83D\uDC6E\u200D\u2640\uFE0F"), _react.default.createElement(_ink.Box, null, _react.default.createElement(_ink.Box, {
    flexBasis: "40%",
    flexDirection: "column"
  }, _react.default.createElement(_ink.Box, null, "Your App Build"), _react.default.createElement(_ink.Box, null, getStepStatus(buildStatus.webpackCompile), " Compile your app with webpack"), devMode && _react.default.createElement(_ink.Box, null, getStepStatus(buildStatus.launchServer), " Launch a local server"), devMode && _react.default.createElement(_ink.Box, null, getStepStatus(buildStatus.webpackDevCompile), " Compile development bundle"), devMode && _react.default.createElement(_ink.Box, null, getStepStatus(buildStatus.launchDevServer), " Launch local development server"), devMode && _react.default.createElement(_ink.Box, {
    flexDirection: "column",
    alignItems: "center",
    padding: 2
  }, _react.default.createElement(_ink.Box, null, "browser"), _react.default.createElement(_ink.Box, null, "\u2922 \u2921"), _react.default.createElement(_ink.Box, null, _react.default.createElement(_ink.Box, {
    flexBasis: "50%",
    flexDirection: "column",
    alignItems: "center"
  }, buildStatus.launchServer === _index.BuildStatusOptions.Done ? _chalk.default.green("server") : _chalk.default.dim("server"), buildStatus.launchServer === _index.BuildStatusOptions.Done ? _chalk.default.green("(initial response)") : _chalk.default.dim("(initial response)"), buildStatus.launchServer === _index.BuildStatusOptions.Done ? _chalk.default.green("localhost:3000") : _chalk.default.dim("localhost:3000")), _react.default.createElement(_ink.Box, {
    flexBasis: "50%",
    flexDirection: "column",
    alignItems: "center"
  }, buildStatus.launchDevServer === _index.BuildStatusOptions.Done ? _chalk.default.green("dev-server") : _chalk.default.dim("dev-server"), buildStatus.launchDevServer === _index.BuildStatusOptions.Done ? _chalk.default.green("(app bundle)") : _chalk.default.dim("(app bundle)"), buildStatus.launchDevServer === _index.BuildStatusOptions.Done ? _chalk.default.green("localhost:8080") : _chalk.default.dim("localhost:8080"), buildStatus.launchDevServer === _index.BuildStatusOptions.Done ? _chalk.default.green("websocket server (for HMR)") : _chalk.default.dim("websocket server (for HMR)"), buildStatus.launchDevServer === _index.BuildStatusOptions.Done ? _chalk.default.green("localhost:8081") : _chalk.default.dim("localhost:8081"))))), _react.default.createElement(_ink.Box, {
    flexBasis: "60%",

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var React = require('react');

var _require = require('ink'),
    Color = _require.Color,
    Box = _require.Box;

var TextInput = require('ink-text-input')["default"];

var _require2 = require("../utils"),
    getDesc = _require2.getDesc;

var Required = require('import-jsx')("./Required");

var Input =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Input, _React$Component);

  function Input() {
    var _this;

const MessageTemplate = ({
  messages,
  isFlaggedStart
}) => _react.default.createElement(_ink.Box, {
  flexDirection: "column"
}, !(0, _utils.isEmpty)(messages) && messages.map(({
  text,
  type
}, i) => _react.default.createElement(_ink.Box, {
  key: `msg${i}`
}, type === 'heading' && !isFlaggedStart && _react.default.createElement(_ink.Box, {
  marginBottom: 1
}, _react.default.createElement(_ink.Text, {
  bold: true
}, `—— ${text} ——`)), type === 'heading' && isFlaggedStart && _react.default.createElement(_ink.Text, {
  bold: true
}, `${text}\n`), _react.default.createElement(_ink.Color, {
  dim: messages.length - 1 !== i
}, type === 'error' && `💩  ${text}`, type === 'success' && `👌  ${text}`, type === 'message' && `💁‍  ${text}`, type === 'working' && (messages.length - 1 === i ? _react.default.createElement(_inkSpinner.default, {
  type: "runner"