import * as React from 'react' ; import { Box , safelySpreadBoxProps } from '@twilio-paste/box' ; import type { BoxElementProps } from '@twilio-paste/box' ; import { secureExternalLink } from '@twilio-paste/anchor' ; type DisplayPillProps = React . AnchorHTMLAttributes < HTMLAnchorElement > & Pick < BoxElementProps , 'element' > ; example see https export const DisplayPill = React . forwardRef < HTMLAnchorElement , DisplayPillProps > ( ( { element = 'DISPLAY_PILL' , ... props } , ref ) => { return ( < Box as = "li" listStyleType = "none" > < Box { ... safelySpreadBoxProps ( props ) } { ... ( props . href ? secureExternalLink ( props . href ) : { } ) } ref = { ref } element = { element } as = { props . href ? 'a' : 'div' } alignItems = "center" backgroundColor = "colorBackgroundStrong" borderRadius = "borderRadius10" color = { props . href ? 'colorTextLinkStrong' : 'colorText' } columnGap = "space20" cursor = { props . href ? 'pointer' : 'default' } display = "flex" fontSize = "fontSize20" fontWeight = "fontWeightSemibold" lineHeight = "lineHeight10" paddingX = "space30" paddingY = "space20" outline = "none" _hover = { { textDecoration : 'none' , } } _focusVisible = { { backgroundColor : 'colorBackgroundPrimaryWeakest' , boxShadow : 'shadowFocus' , color : 'colorTextLinkStronger' , } } > { props . children } < /Box> < /Box>); } ) ; DisplayPill . displayName = 'DisplayPill' ;