"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideBar = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _primitives = require("../../primitives");

var _typography = require("../../core/typography");

var _icon = require("../../core/icon");

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

var MaxWidthBox = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "MaxWidthBox",
  componentId: "bmued0-0"
})(["max-width:200px;"]);

var SideBar = function SideBar(props) {
  return _react["default"].createElement(MaxWidthBox, {
    spacing: "m4"
  }, _react["default"].createElement(_icon.Info, {
    spacing: "mb2"
  }), _react["default"].createElement(_typography.Head4, {
    spacing: ['mb2', 'mt2']
  }, props.title), props.text.map(function (text) {
    return _react["default"].createElement(_primitives.Box, {
      spacing: "mb1",
      key: text
    }, _react["default"].createElement(_typography.Span, {
      fontSize: "f2",
      colorName: "greyscale-black"
    }, text));
  }));
};

exports.SideBar = SideBar;
SideBar.displayName = 'SideBar';