import { clsx } from 'clsx';
import React__default from 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../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 '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx } from 'react/jsx-runtime';

const DEFAULT_TYPE = Typography.TITLE_GROUP;
const titleTypeMapping = {
  [Typography.TITLE_SCREEN]: 'h1',
  [Typography.TITLE_SECTION]: 'h2',
  [Typography.TITLE_SUBSECTION]: 'h3',
  [Typography.TITLE_BODY]: 'h4',
  [Typography.TITLE_GROUP]: 'h5'
};
const Title = /*#__PURE__*/React__default.forwardRef(({
  as,
  type = DEFAULT_TYPE,
  className,
  ...props
}, ref) => {
  const mapping = titleTypeMapping[type];
  const isTypeSupported = mapping !== undefined;
  if (isTypeSupported) {
    const HeaderTag = as ?? mapping;
    return /*#__PURE__*/jsx(HeaderTag, {
      ref: ref,
      ...props,
      className: clsx(`np-text-${type}`, className)
    });
  }
  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
  return /*#__PURE__*/jsx(HeaderTag, {
    ref: ref,
    ...props,
    className: clsx(`np-text-${DEFAULT_TYPE}`, className)
  });
});

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