'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
require('../common/theme.js');
require('../common/direction.js');
require('@transferwise/neptune-tokens');
require('../common/propsValues/control.js');
require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/formatting');
require('@transferwise/icons');
var React = require('react');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Link = require('../link/Link.js');
var Title = require('../title/Title.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const HeaderAction = /*#__PURE__*/React__default.default.forwardRef(({
  action
}, ref) => {
  return /*#__PURE__*/jsxRuntime.jsx(Link.default, {
    className: "np-header__action-button",
    "aria-label": action['aria-label'],
    href: 'href' in action ? action.href : undefined,
    target: 'target' in action ? action.target : undefined,
    disabled: action.disabled,
    onClick: action.onClick,
    children: action.text
  });
});
HeaderAction.displayName = 'HeaderAction';
/**
 * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
 * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
 * @param {string} title - Required prop to set the title of the section header.
 * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
 * @param {string} [className]
 * @param {string} [testId]
 *
 * @see {@link Header } for further information.
 * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
 */
const Header = /*#__PURE__*/React__default.default.forwardRef(({
  as = 'h5',
  action,
  className,
  testId,
  title,
  level = 'group',
  ...props
}, ref) => {
  const internalRef = React.useRef(null);
  const levelTypography = level === 'group' ? typography.Typography.TITLE_GROUP : typography.Typography.TITLE_SUBSECTION;
  const headerClasses = clsx.clsx('np-header', className, {
    'np-header--group': level === 'group'
  });
  const commonProps = {
    className: headerClasses,
    'data-testid': testId
  };
  React.useEffect(() => {
    if (as === 'legend' && internalRef.current) {
      const {
        parentElement
      } = internalRef.current;
      if (parentElement?.tagName.toLowerCase() !== 'fieldset') {
        console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
      }
    }
  }, [as]);
  if (!action) {
    return /*#__PURE__*/jsxRuntime.jsx(Title.default, {
      ref: internalRef,
      as: as,
      type: levelTypography,
      ...commonProps,
      ...props,
      children: title
    });
  }
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    ...commonProps,
    ...props,
    ref: ref,
    children: [/*#__PURE__*/jsxRuntime.jsx(Title.default, {
      as: as,
      type: levelTypography,
      className: "np-header__title",
      children: title
    }), /*#__PURE__*/jsxRuntime.jsx(HeaderAction, {
      action: action
    })]
  });
});
Header.displayName = 'Header';

exports.default = Header;
//# sourceMappingURL=Header.js.map
