"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PageHeaderCard = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
var _utils = require("../../common/utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledCard = (0, _styledComponents.default)(_.Card).withConfig({
  displayName: "PageHeaderCard__StyledCard",
  componentId: "sc-14wtht9-0"
})(["background:", ";border-bottom:1px solid ", ";border-radius:0;"], function (p) {
  return p.theme.color.pageHeaderBackground;
}, function (p) {
  return p.theme.color.headerCardBorder;
});
var PageHeaderCard = exports.PageHeaderCard = function PageHeaderCard(_ref) {
  var title = _ref.title,
    className = _ref.className,
    children = _ref.children,
    grow = _ref.grow;
  var pageHeaderTitle = function pageHeaderTitle() {
    if ((0, _utils.isElement)(title)) {
      return title;
    }
    return _react.default.createElement(_.Typography, {
      type: "title1",
      as: "h1"
    }, title);
  };
  return _react.default.createElement(StyledCard, {
    className: className,
    grow: grow
  }, _react.default.createElement(_.PageWrapper, null, _react.default.createElement(_.Flexbox, {
    container: true,
    gap: 0,
    direction: "column",
    sm: {
      direction: 'row',
      justifyContent: 'space-between',
      alignItems: 'center'
    }
  }, _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Box, {
    p: 3,
    sm: {
      px: 0,
      py: 2
    }
  }, pageHeaderTitle())), children && _react.default.createElement(_.Media, {
    query: function query(t) {
      return t.media.lessThan(t.breakpoints.sm);
    }
  }, _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Separator, null))), children && _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Box, {
    px: 3,
    sm: {
      px: 0
    }
  }, children)))));
};