function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import styled from 'styled-components';
import { border, color, flexbox, layout, space } from 'styled-system';
import { Box, Text } from '../../primitives';
const StyledAppBar = styled(Box)(color, border, flexbox, layout, space);
const defaultAppBarProps = {
  height: 64,
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: 'blue.4',
  px: 4
};
const defaultTitleProps = {
  color: 'white',
  fontSize: 3,
  fontWeight: '600'
};

const AppBar = ({
  actions,
  leading,
  title,
  ...props
}) => {
  const getTitleJSX = headerTitle => {
    if (!headerTitle) return undefined;
    return typeof headerTitle === 'string' ? /*#__PURE__*/React.createElement(Text, defaultTitleProps, title) : /*#__PURE__*/React.cloneElement(headerTitle, defaultTitleProps, headerTitle.props.children);
  };

  return /*#__PURE__*/React.createElement(StyledAppBar, _extends({}, defaultAppBarProps, props), /*#__PURE__*/React.createElement(Box, {
    justifyContent: "center",
    mr: 4
  }, leading || /*#__PURE__*/React.createElement(Box, {
    width: 40,
    height: 40
  })), /*#__PURE__*/React.createElement(Box, {
    flexDirection: "row",
    flexGrow: 1,
    justifyContent: "space-between",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Box, null, getTitleJSX(title)), /*#__PURE__*/React.createElement(Box, {
    flexDirection: "row"
  }, actions && actions.map(action => action))));
};

export default AppBar;
//# sourceMappingURL=index.js.map