gap: get()

in src/stories/Token.stories.tsx [86:117]


          gap: get('space.2')
        }}
      >
        <Token as="a" href="http://google.com/" text="Link" {...args} />
        <Token as="button" onClick={action('clicked')} text="Button" {...args} />
        <Token as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" {...args} />
      </Box>
    </ExampleCollectionContainer>
  )
}
Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}

export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
  return (
    <ExampleCollectionContainer>
      <Token {...args} leadingVisual={() => <GitBranchIcon />} />
    </ExampleCollectionContainer>
  )
}
WithLeadingVisual.storyName = 'with leadingVisual'
WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}

export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
  return (
    <ExampleCollectionContainer>
      <SingleExampleContainer label="w/ onRemove passed">
        <Token onRemove={action('remove me')} {...args} />
      </SingleExampleContainer>
      <SingleExampleContainer label="w/ onRemove passed and the token is interactive">
        <Box
          display="flex"
          sx={{