chore(design-system): use semantic html in storybook overview [AR-54812] (#307)

MDX adds its own `<p>` tag each time you add a new line, and our
`<DsTypography />` also adds a `<p>` tag.
As a result, we got invalid HTML

Author: StyleShit

packages/design-system/src/stories/overview.mdx

@@ -18,9 +18,11 @@ import logoUrl from './assets/logo.svg';
 		<img src={logoUrl} className={styles.logo} alt="DriveNets" />
 		<DsTypography variant="heading1">DriveNets Design System</DsTypography>
 	</div>
-	<DsTypography variant="body-md-reg" className={styles.heroDescription}>
-		The official component library for building consistent, scalable UI across DriveNets applications. Browse
-		components in the sidebar, copy code from the docs, and ship faster.
+	<DsTypography variant="body-md-reg" asChild className={styles.heroDescription}>
+		<span>
+			The official component library for building consistent, scalable UI across DriveNets applications.
+			Browse components in the sidebar, copy code from the docs, and ship faster.
+		</span>
 	</DsTypography>
 </div>
 
@@ -92,10 +94,12 @@ export const App = () => (
     <DsTypography variant="heading2">ESLint Plugin</DsTypography>
   </div>
 
-<DsTypography variant="body-md-reg" className={styles.sectionDescription}>
-	Enforce design system consistency and catch deprecated components early with the ESLint plugin. It prevents
-	usage of native HTML elements and MUI components, ensuring your codebase stays aligned with the design
-	system.
+<DsTypography variant="body-md-reg" asChild className={styles.sectionDescription}>
+	<span>
+		Enforce design system consistency and catch deprecated components early with the ESLint plugin. It
+		prevents usage of native HTML elements and MUI components, ensuring your codebase stays aligned with the
+		design system.
+	</span>
 </DsTypography>
 
   <div className={styles.steps}>