fix(link): ensure inline prop allows text wrapping (#13183)

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/Link/Link.stories.js

@@ -39,6 +39,28 @@ export default {
 
 export const Default = () => <Link href="#">Link</Link>;
 
+export const Inline = () => (
+  <>
+    <Link inline href="#">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </Link>
+    <p>
+      Ut facilisis semper lorem in aliquet. Aliquam accumsan ante justo, vitae
+      fringilla eros vehicula id. Ut at enim quis libero pharetra ullamcorper.
+      Maecenas feugiat sodales arcu ut porttitor. In blandit ultricies est.
+      Vivamus risus massa, cursus eu tellus sed, sagittis commodo nunc.{' '}
+      <Link inline href="#">
+        Maecenas nunc mauris, consequat quis mauris sit amet
+      </Link>
+      , finibus suscipit nunc. Phasellus ex quam, placerat quis tempus sit amet,
+      pretium nec sem. Etiam dictum scelerisque mauris, blandit ultrices erat
+      pellentesque id. Quisque venenatis purus sit amet sodales condimentum.
+      Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet
+      rhoncus purus. Praesent et scelerisque ligula.
+    </p>
+  </>
+);
+
 export const PairedWithIcon = () => (
   <Link href="#" renderIcon={Download}>
     Download

packages/styles/scss/components/link/_link.scss

@@ -85,6 +85,7 @@ $link-focus-text-color: custom-property.get-var(
   }
 
   .#{$prefix}--link.#{$prefix}--link--inline {
+    display: inline;
     text-decoration: underline;
 
     &:focus,