♻️(react) fix Storybook source blocks

Due to the recent upgrade to Storybook 7, the source blocks of Canvases
were broken, they were only showing args. This was mainly due to the fact
that as of Storybook 7 the meta tags of the MDX files have changed, thus
causing the issue. These are now based on imports. We also needed to rename
index.stories.mdx files to index.mdx because Storybook was throwing errors,
maybe due to a conflicts with index.stories.tsx files and new imports.
Anyway this way of naming MDX files seems to be the recommend one based on
the official documentation.

packages/react/src/components/Forms/Radio/index.mdx

@@ -0,0 +1,110 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Radio } from "./index";
+import * as Stories from './index.stories';
+
+<Meta of={Stories}/>
+
+# Radio
+
+Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
+
+<Canvas>
+  <Story id="components-forms-radio--group"/>
+</Canvas>
+
+## Label
+
+The `label` props is optional, but you can use it to provide a description of the radio.
+
+**Without label**
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--default"/>
+</Canvas>
+
+**With label**
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--with-label"/>
+</Canvas>
+
+## Value
+
+You can set the value of the radio with the `checked` attribute.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--default"/>
+  <Story id="components-forms-radio--checked"/>
+</Canvas>
+
+## Texts
+
+As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--with-text"/>
+</Canvas>
+
+## Disabled
+
+As a regular radio, you can disable it by using the `disabled` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--disabled"/>
+</Canvas>
+
+## States
+
+You can use the following props to change the state of the Input component by using the `state` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--with-text"/>
+</Canvas>
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--success"/>
+</Canvas>
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--error"/>
+</Canvas>
+
+## Group
+
+Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--group"/>
+</Canvas>
+
+You can also define `state`, `text` props on the group component
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-radio--group-error"/>
+  <Story id="components-forms-radio--group-success"/>
+</Canvas>
+
+## Design tokens
+
+Here are available custom design tokens.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| border-color   	| Border color of the radio    	|
+| accent-color     	| Color of the checkmark  	|
+
+The design tokens `font-size`, `font-weight`, `color`, `width`, `height` are shared with [Checkbox](?path=/story/components-forms-checkbox-doc--page)
+
+See also [Field](?path=/story/components-forms-field-doc--page)
+
+##
+
+<img src="components/Forms/Radio/resources/dd_1.svg"/>
+
+##
+
+<img src="components/Forms/Radio/resources/dd_2.svg"/>
+
+##
+
+<img src="components/Forms/Radio/resources/dd_3.svg"/>