Update Input Radio Component Styles + TypeScript conversion

[djalmaaraujo]

Description

Fixes #236

Roadmap

• [x] 🕐 Implement color changes and adjust new variants
• [x] Convert the component to TypeScript
• [x] Update Storybook with Raw radio examples (No fieldset included)

Breaking changes

• The' renderLabel' prop should now be used to customize the label property (for using React elements, not simple strings). The documentation has examples.

{
    value: 'a',
    renderLabel: ( commonProps, labelStyle ) => (
        <Label
            { ...commonProps }
            className="custom-class"
            sx={ { ...labelStyle, color: 'error' } }
        >
            (Custom) All domains listed on this environment, and all subdomains
        </Label>
    ),
    id: 'another-option-custom-a',
}

• Passing other properties to the rendered Input should now use the inputProps prop. Passing arbitrary arguments to the option will no longer spread to the Input.

{
    value: 'b',
    label: 'All domains listed on this environment',
    labelProps: {
        id: 'label-option-custom-b-custom-props',
    },
    className: 'custom-class-for-this',
    id: 'option-custom-b',
    inputProps: {
        'aria-describedby': 'describe-radio-all-domains-subdomains',
    },
},

Checklist

• [x] This PR has good automated test coverage
• [x] The storybook for the component has been updated

Steps to Test

1. Pull down PR.
2. npm run dev.
3. Open http://localhost:6006/?path=/docs/radio--docs OR https://deploy-preview-354--vip-design-system-components.netlify.app/
4. The Radio component examples work as expected
5. New color variants are available: Primary, Success, Error, Warning, and Info.

[netlify[bot]]

✅ Deploy Preview for vip-design-system-components ready!

Name	Link
🔨 Latest commit	5d54f57cc6e35eaaafa30a4c6435827fa9f7ee3c
🔍 Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/65f20c7efa46af0008bdcbd7
😎 Deploy Preview	https://deploy-preview-354--vip-design-system-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.