Description:
The TagGroup component displays a collection of tags, often used for categorization, filtering, or labeling items. It supports various tag types (e.g., removable, selectable) and provides flexibility in layout and interactivity. Common use cases include filters, metadata display, and keyword tagging.

Requirements:

1. Component Implementation

Implement the TagGroup component in TypeScript.
Utilize SCSS with BEM methodology for styling.
Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, and border radius.
Support variations such as different avatar sizes, optional user details (e.g., email, role), and status indicators (e.g., online, offline).
Ensure accessibility, including proper ARIA attributes for screen readers.

2. Unit Tests

Write unit tests using Jest and React Testing Library.
Ensure test coverage for all props, including different sizes, user details visibility, and status indicators.
Test edge cases such as missing user data or unsupported profile configurations.

3. Storybook Stories

Create a Storybook story for the TagGroup component.
Showcase different configurations, including variations in avatar size, presence of user details, and different status indicators.
Create controls for the props so users can interact with the Profile component in Storybook.
Document all props of the public interfaces.

4. Figma Design

Follow the design as outlined in the provided Figma file.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used.
• Unit tests are written and cover different states and edge cases.
• Storybook stories are created for all variations and props.
• Component matches the Figma design specification.