import { clsx } from 'clsx';
import * as React from 'react';
import { Layout } from '../propsValues/layouts.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';

const FlowHeader = /*#__PURE__*/React.forwardRef(({
  bottomContent,
  className,
  layout = Layout.HORIZONTAL,
  leftContent,
  rightContent
}, reference) => {
  const isVertical = layout === Layout.VERTICAL;
  return /*#__PURE__*/jsxs("div", {
    ref: reference,
    className: clsx('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', 'justify-content-between', 'flex__item--12', className),
    children: [leftContent, rightContent, /*#__PURE__*/jsx("div", {
      className: clsx('align-items-center', 'd-flex', 'justify-content-center', {
        'flex__item--12': isVertical,
        'order-1 flex-grow-1': !isVertical
      }),
      children: bottomContent
    })]
  });
});

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