From 27eafab99520da85dc3ff95c6ba032f635b00323 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 19 Jul 2024 15:46:15 +0200
Subject: [PATCH] Use the Text component for the help text

---
 packages/components/src/radio-control/index.tsx  | 7 +++++--
 packages/components/src/radio-control/style.scss | 6 ------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index 67e9bc8aa62f38..dae3542e05f189 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -16,6 +16,7 @@ import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { RadioControlProps } from './types';
 import { VStack } from '../v-stack';
+import { Text } from '../text';
 
 /**
  * Render a user interface to select the user type using radio inputs.
@@ -105,12 +106,14 @@ export function RadioControl(
 							{ option.label }
 						</label>
 						{ !! option.helpText ? (
-							<span
+							<Text
+								variant="muted"
+								size={ 12 }
 								id={ `${ id }-${ index }-help` }
 								className="components-radio-control__help-text"
 							>
 								{ option.helpText }
-							</span>
+							</Text>
 						) : null }
 					</div>
 				) ) }
diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
index 109bbe5ea5e2b2..9765783bcc40b1 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -44,10 +44,4 @@
 .components-radio-control__help-text {
 	grid-column: 2;
 	grid-row: 2;
-
-	font-size: $helptext-font-size;
-	font-style: normal;
-	font-weight: normal;
-	line-height: $default-line-height;
-	color: $components-color-gray-700;
 }