import { useContext } from 'react';
import { ListItemContext } from '../ListItemContext.mjs';
import Body from '../../body/Body.mjs';
import Link from '../../link/Link.mjs';
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 'clsx';
import 'react-intl';
import '../../common/closeButton/CloseButton.messages.mjs';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

const AdditionalInfo = function ({
  children,
  action
}) {
  const {
    ids
  } = useContext(ListItemContext);
  return /*#__PURE__*/jsxs(Body, {
    type: Typography.BODY_DEFAULT,
    id: ids.additionalInfo,
    className: "wds-list-item-additional-info",
    children: [children, action ? /*#__PURE__*/jsxs(Fragment, {
      children: [' ', /*#__PURE__*/jsx(Link, {
        href: action.href,
        target: action.target,
        onClick: action.onClick,
        children: action.label
      })]
    }) : null]
  });
};
AdditionalInfo.displayName = 'ListItem.AdditionalInfo';

export { AdditionalInfo };
//# sourceMappingURL=ListItemAdditionalInfo.mjs.map
