import { clsx } from 'clsx';
import { forwardRef } from 'react';
import Chevron from '../chevron/Chevron.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../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 { Position } from '../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';
import Option from '../common/Option/Option.mjs';

const NavigationOption = /*#__PURE__*/forwardRef(({
  as: component = 'button',
  disabled = false,
  onClick,
  className,
  ...rest
}, reference) => {
  if ('href' in rest && rest.href) {
    component = 'a';
  }
  return /*#__PURE__*/jsx(Option, {
    ...rest,
    ref: reference,
    as: component,
    className: clsx('np-navigation-option', className),
    button: /*#__PURE__*/jsx(Chevron, {
      orientation: Position.RIGHT,
      disabled: disabled,
      className: "d-block"
    }),
    disabled: disabled,
    onClick: event => {
      if (disabled) {
        event.preventDefault();
        return;
      }
      if (onClick) {
        onClick(event);
      }
    }
  });
});

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