@primer/components/lib-esm/Token/TokenBase.js

Primer react components

import styled from 'styled-components';
import { variant } from 'styled-system';
import { get } from '../constants';
export const tokenSizes = {
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32
};
export const defaultTokenSize = 'md';
export const isTokenInteractive = ({
  as = 'span',
  onClick,
  onFocus,
  tabIndex = -1
}) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
const variants = variant({
  variants: {
    sm: {
      fontSize: 0,
      gap: 1,
      height: `${tokenSizes.sm}px`,
      paddingLeft: 1,
      paddingRight: 1
    },
    md: {
      fontSize: 0,
      gap: 1,
      height: `${tokenSizes.md}px`,
      paddingLeft: 2,
      paddingRight: 2
    },
    lg: {
      fontSize: 0,
      gap: 2,
      height: `${tokenSizes.lg}px`,
      paddingLeft: 2,
      paddingRight: 2
    },
    xl: {
      fontSize: 1,
      gap: 2,
      height: `${tokenSizes.xl}px`,
      paddingLeft: 3,
      paddingRight: 3
    }
  }
});
const TokenBase = styled.span.attrs(({
  text,
  handleRemove,
  onKeyUp
}) => ({
  onKeyUp: e => {
    onKeyUp && onKeyUp(e);

    if ((e.key === 'Backspace' || e.key === 'Delete') && handleRemove) {
      handleRemove();
    }
  },
  'aria-label': handleRemove ? `${text}, press backspace or delete to remove` : undefined
})).withConfig({
  displayName: "TokenBase",
  componentId: "opajvp-0"
})(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";text-decoration:none;white-space:nowrap;", ""], props => isTokenInteractive(props) ? 'pointer' : 'auto', get('fontWeights.bold'), variants);
TokenBase.defaultProps = {
  as: 'span',
  variant: defaultTokenSize
};
export default TokenBase;