import { clsx } from 'clsx';
import { useContext } from 'react';
import IconButton$1 from '../../iconButton/IconButton.mjs';
import { useListItemControl } from '../useListItemControl.mjs';
import { ListItemContext } from '../ListItemContext.mjs';
import { jsx } from 'react/jsx-runtime';

const IconButton = function ({
  priority = 'minimal',
  'aria-label': ariaLabel,
  ...props
}) {
  const {
    partiallyInteractive,
    ...restProps
  } = props;
  const {
    ids,
    props: itemProps
  } = useContext(ListItemContext);
  const {
    baseItemProps
  } = useListItemControl('icon-button', {
    partiallyInteractive,
    ...restProps
  });
  const getAriaProps = () => {
    const labelIds = [itemProps.inverted ? ids.subtitle : ids.title, itemProps.inverted ? ids.title : ids.subtitle, itemProps.inverted ? ids.valueSubtitle : ids.valueTitle, itemProps.inverted ? ids.valueTitle : ids.valueSubtitle].join(' ');
    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');
    if (ariaLabel) {
      return {
        'aria-label': ariaLabel,
        'aria-describedby': labelIds.concat(descriptorIds)
      };
    }
    return {
      'aria-labelledby': labelIds,
      'aria-describedby': descriptorIds
    };
  };
  return /*#__PURE__*/jsx(IconButton$1, {
    ...restProps,
    ...getAriaProps(),
    className: clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
    id: ids.control,
    size: 40,
    priority: priority,
    disabled: baseItemProps.disabled
  });
};
IconButton.displayName = 'ListItem.IconButton';

export { IconButton };
//# sourceMappingURL=ListItemIconButton.mjs.map
