import { clsx } from 'clsx';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import 'react';
import { jsx, jsxs } from 'react/jsx-runtime';
import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
import Logo from '../logo/Logo.mjs';

const defaultLogo = /*#__PURE__*/jsx(Logo, {});
function OverlayHeader({
  avatar,
  onClose,
  logo = defaultLogo
}) {
  const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
    size: Size.LARGE,
    onClick: onClose
  });
  return /*#__PURE__*/jsx("div", {
    className: "np-overlay-header d-flex justify-content-center",
    children: /*#__PURE__*/jsx(FlowHeader, {
      className: "np-overlay-header__content p-a-3",
      leftContent: logo,
      rightContent: /*#__PURE__*/jsxs("div", {
        className: clsx('d-flex', 'align-items-center', 'order-2'),
        children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
          className: clsx('m-x-1')
        }), closeButton]
      })
    })
  });
}

export { OverlayHeader as default };
//# sourceMappingURL=OverlayHeader.mjs.map
