In this challenge, you will build a versatile radio card component as part of a design system. These components will be essential for filtering lists across various projects and apps found within the platform.

Component states, variants, and properties

• States: Implement and style items to reflect different states - normal, hover, focus, selected, and disabled.
• Sizes: For each item style and state, we have 5 sizes - Small, Medium, Large, Extra large and 2 Extra large
• Icons: Left icon only, right icon only, icons on both sides

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Radio/single-select behavior: Radio cards are meant to be used in a group and selecting one item should deselect the other buttons.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.