import { ChevronRight } from '@transferwise/icons';
import { useListItemControl } from '../useListItemControl.mjs';
import PrimitiveButton from '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
import { useContext } from 'react';
import { ListItemContext } from '../ListItemContext.mjs';
import { jsx, Fragment } from 'react/jsx-runtime';

const Navigation = function Navigation({
  href,
  ...props
}) {
  const {
    baseItemProps
  } = useListItemControl('navigation', {
    href,
    ...props
  });
  const {
    ids,
    describedByIds
  } = useContext(ListItemContext);
  const icon = /*#__PURE__*/jsx(ChevronRight, {
    size: 16
  });
  return href ? /*#__PURE__*/jsx(Fragment, {
    children: icon
  }) : /*#__PURE__*/jsx(PrimitiveButton, {
    disabled: baseItemProps.disabled,
    "aria-describedby": describedByIds,
    id: ids.control,
    className: "btn-unstyled wds-list-item-control",
    onClick: props.onClick,
    children: icon
  });
};
Navigation.displayName = 'ListItem.Navigation';

export { Navigation };
//# sourceMappingURL=ListItemNavigation.mjs.map
