@primer/react/lib-esm/Token/_RemoveTokenButton.js

An implementation of GitHub's Primer Design System using React

import { XIcon } from '@primer/octicons-react';
import { clsx } from 'clsx';
import { defaultTokenSize, tokenSizes } from './TokenBase.js';
import classes from './_RemoveTokenButton.module.css.js';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { jsx } from 'react/jsx-runtime';

const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75;
const RemoveTokenButton = ({
  'aria-label': ariaLabel,
  isParentInteractive,
  size = defaultTokenSize,
  className,
  borderOffset = 0,
  as: _as,
  ...rest
}) => {
  // eslint-disable-next-line react-compiler/react-compiler
  delete rest.children;
  return /*#__PURE__*/jsx(BoxWithFallback, {
    as: isParentInteractive ? 'span' : 'button',
    tabIndex: isParentInteractive ? -1 : undefined,
    "aria-label": !isParentInteractive ? 'Remove token' : ariaLabel,
    "data-size": size,
    className: clsx(classes.TokenButton, className),
    style: {
      transform: `translate(${borderOffset}px, -${borderOffset}px)`
    },
    ...rest,
    children: /*#__PURE__*/jsx(XIcon, {
      size: getTokenButtonIconSize(size)
    })
  });
};
RemoveTokenButton.displayName = "RemoveTokenButton";

export { RemoveTokenButton as default };