import { CrossCircleFill, Cross } from '@transferwise/icons';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { useIntl } from 'react-intl';
import { Size } from '../propsValues/size.mjs';
import closeBtnMessages from './CloseButton.messages.mjs';
import { jsx } from 'react/jsx-runtime';

const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
  'aria-label': ariaLabel,
  size = Size.MEDIUM,
  filled = false,
  className,
  onClick,
  isDisabled,
  testId,
  tabIndex
}, reference) {
  const intl = useIntl();
  ariaLabel ??= intl.formatMessage(closeBtnMessages.ariaLabel);
  const Icon = filled ? CrossCircleFill : Cross;
  return /*#__PURE__*/jsx("button", {
    ref: reference,
    type: "button",
    className: clsx('np-close-button', 'close btn-link', 'text-no-decoration', {
      'np-close-button--x-small': size === Size.EXTRA_SMALL,
      'np-close-button--large': size === Size.MEDIUM,
      'np-close-button--x-large': size === Size.LARGE
    }, className),
    "aria-label": ariaLabel,
    "aria-disabled": isDisabled,
    disabled: isDisabled,
    "data-testid": testId,
    tabIndex: tabIndex,
    onClick: onClick,
    children: /*#__PURE__*/jsx(Icon, {
      size: size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24
    })
  });
});

export { CloseButton };
//# sourceMappingURL=CloseButton.mjs.map
