import { clsx } from 'clsx';
import Body from '../body/Body.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';

const ListItem = ({
  media,
  action,
  className,
  title,
  value,
  isContainerAligned,
  as = 'li',
  ...rest
}) => {
  const Element = as;
  return /*#__PURE__*/jsxs(Element, {
    className: clsx('np-list-item d-flex align-items-center p-y-2', className, {
      'p-x-2': !isContainerAligned
    }),
    ...rest,
    children: [media, /*#__PURE__*/jsxs("div", {
      className: clsx('d-flex flex-column', {
        'p-l-2': !!media,
        'p-r-2': !!action
      }),
      children: [/*#__PURE__*/jsx(Body, {
        type: "body-default",
        className: "text-secondary m-b-0",
        children: title
      }), value && /*#__PURE__*/jsx(Body, {
        type: "body-large",
        className: "text-primary m-b-0",
        children: value
      })]
    }), action ? /*#__PURE__*/jsx("div", {
      className: "np-list-item__action m-l-auto",
      children: action
    }) : null]
  });
};

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