Issue Summary

When using the Tag or TagGroup component in a Forge UI Kit 2 app, the resulting rendered component is not styled correctly.

Steps to Reproduce

1. Create bitbucket:repoPullRequestCard module with the below code.

   import React from 'react';
   import ForgeReconciler, { Tag, TagGroup } from '@forge/react';
   
   const App = () => {
     return (
       <TagGroup>
           <Tag text="standard Tag" color="standard" />
           <Tag text="blue Tag" color="blue" />
           <Tag text="green Tag" color="green" />
           <Tag text="teal Tag" color="teal" />
           <Tag text="purple Tag" color="purple" />
           <Tag text="red Tag" color="red" />
           <Tag text="yellow Tag" color="yellow" />
           <Tag text="orange Tag" color="orange" />
           <Tag text="magenta Tag" color="magenta" />
           <Tag text="lime Tag" color="lime" />
           <Tag text="grey Tag" color="grey" />
           <Tag text="greenLight Tag" color="greenLight" />
           <Tag text="tealLight Tag" color="tealLight" />
           <Tag text="blueLight Tag" color="blueLight" />
           <Tag text="purpleLight Tag" color="purpleLight" />
           <Tag text="redLight Tag" color="redLight" />
           <Tag text="yellowLight Tag" color="yellowLight" />
           <Tag text="orangeLight Tag" color="orangeLight" />
           <Tag text="magentaLight Tag" color="magentaLight" />
           <Tag text="limeLight Tag" color="limeLight" />
           <Tag text="greyLight Tag" color="greyLight" />
         </TagGroup>
     );
   };
   

2. Deploy the project and navigate to UI

Expected Results

Actual Results

Workaround

• Manually style the component to look like the Tag component:

  const infoStyles = xcss({
  	backgroundColor: 'color.background.information',
  	borderRadius: 'border.radius',
  	borderWidth: 'border.width',
  	padding: 'space.025',
  });
  const warningStyles = xcss({
  	backgroundColor: 'color.background.warning',
  	borderRadius: 'border.radius',
  	borderWidth: 'border.width',
  	padding: 'space.025',
  });
  
  return (
  	<Inline space="space.100">
  		<Box xcss={warningStyles}>warning</Box>
  		<Box xcss={infoStyles}>info</Box>
  	</Inline>
  );