@ornikar/bumper 3.6.0 → 3.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/system/content/icon/Icon.features.stories.tsx

@@ -37,6 +37,25 @@ export const Sizes: Story = {
   ),
 };
 
+export const DefaultSize: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarIcon />} />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          default (m, 20)
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarIcon />} size="$icon.m" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          explicit m (20)
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};
+
 export const Colors: Story = {
   render: () => (
     <HStack gap="$space.16" alignItems="center">

package/src/system/content/icon/Icon.mdx

@@ -13,6 +13,12 @@ import * as IconFeatures from './Icon.features.stories';
 
 `Icon` is a standalone icon wrapper that applies color and size to an icon element. Pass any icon from `@ornikar/kitt-icons/ornicons` via the `icon` prop. Defaults to `$icon.m` (20px) and `$content.base.hi` color. For icons inside `Typography.Text`, use `Typography.Icon` instead — it inherits color from the typography context.
 
+## Default Size
+
+When no `size` prop is provided, the icon defaults to `$icon.m` (20px).
+
+<Canvas of={IconFeatures.DefaultSize} />
+
 ## Sizes
 
 Use `size` to control the icon dimensions: `$icon.s` (16px), `$icon.m` (20px), or `$icon.l` (24px).

package/src/system/content/icon/Icon.tsx

@@ -17,6 +17,10 @@ const IconContainer = styled(View, {
       };
     },
   } as const,
+
+  defaultVariants: {
+    size: '$icon.m',
+  },
 });
 
 type IconContainerProps = GetProps<typeof IconContainer>;
@@ -43,7 +47,11 @@ export const InternalIcon = IconContainer.styleable<IconProps>((props) => {
   const clonedIcon = cloneElement(flattenProps.icon, { color: style.color });
 
   return (
-    <IconContainer size={flattenProps.size} testID={flattenProps.testID} alignSelf={flattenProps.alignSelf}>
+    <IconContainer
+      {...(flattenProps.size !== undefined ? { size: flattenProps.size } : undefined)}
+      testID={flattenProps.testID}
+      alignSelf={flattenProps.alignSelf}
+    >
       {clonedIcon}
     </IconContainer>
   );

package/src/system/content/icon/__snapshots__/Icon.features.stories.tsx.snap

@@ -321,6 +321,105 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
 </RNCSafeAreaProvider>
 `;
 
+exports[`Bumper/Content/Icon/Features DefaultSize 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "gap": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "height": 20,
+            "width": 20,
+          }
+        }
+      >
+        <svg
+          color="#101010"
+          data-file-name="star.inline.svg"
+        />
+      </View>
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 12,
+            "letterSpacing": 0.3,
+            "lineHeight": 16,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        default (m, 20)
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "height": 20,
+            "width": 20,
+          }
+        }
+      >
+        <svg
+          color="#101010"
+          data-file-name="star.inline.svg"
+        />
+      </View>
+      <Text
+        style={
+          {
+            "color": "#505050",
+            "fontFamily": "GTStandardRegular",
+            "fontSize": 12,
+            "letterSpacing": 0.3,
+            "lineHeight": 16,
+          }
+        }
+        suppressHighlighting={true}
+      >
+        explicit m (20)
+      </Text>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
+
 exports[`Bumper/Content/Icon/Features Sizes 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}

package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap

@@ -164,6 +164,68 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Bumper/Content/Icon/Features DefaultSize 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+          >
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
+              >
+                default (m, 20)
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </div>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _fw-f-weight-re98715119 _col-content--ba1918259606"
+              >
+                explicit m (20)
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Bumper/Content/Icon/Features Sizes 1`] = `
 <DocumentFragment>
   <div

package/src/system/content/typography/TypographyLink.features.stories.tsx

@@ -54,6 +54,14 @@ export const NestedInContentCaps: Story = {
   ),
 };
 
+export const Withhref: Story = {
+  render: () => (
+    <Typography.Text variant="content-caps-m">
+      with href <TypographyLink href="https://app.ornikar.com">a nested link</TypographyLink>
+    </Typography.Text>
+  ),
+};
+
 export const NestedInHeading: Story = {
   render: () => (
     <Typography.Text variant="heading-m">

package/src/system/content/typography/TypographyLink.mdx

@@ -11,11 +11,17 @@ import * as TypographyLinkFeatures from './TypographyLink.features.stories';
 
 ## Overview
 
-`Typography.Link` is an interactive text component with `role="link"`. It renders underlined by default and removes the underline on hover. It inherits all typography props (`variant`, `weight`, `color`) from `Typography.Text`. Use it for inline navigational links within text blocks.
+`Typography.Link` is an interactive text component with `role="link"`. It renders as an `<a>` element on web, so it natively supports the `href` prop for standard anchor navigation. It renders underlined by default and removes the underline on hover. It inherits all typography props (`variant`, `weight`, `color`) from `Typography.Text`. Use it for inline navigational links within text blocks.
+
+## With href
+
+Pass an `href` to render a semantic anchor link. `onPress` is optional and can be omitted when `href` is sufficient.
+
+<Canvas of={TypographyLinkFeatures.Withhref} />
 
 ## Enabled state
 
-By default, `disabled` is `false` — the link shows a pointer cursor and responds to `onPress`.
+By default, `disabled` is `false` — the link shows a pointer cursor and responds to `onPress` or `href`.
 
 <Canvas of={TypographyLinkFeatures.DisabledFalse} />
 

package/src/system/content/typography/TypographyLink.stories.tsx

@@ -52,7 +52,12 @@ const meta: Meta<Extract<TypographyLinkProps, BodyProps>> = {
       description: 'When true, removes the underline decoration',
     },
     onPress: {
-      description: 'Click/press handler (automatically removed when disabled=true)',
+      description:
+        'Optional click/press handler (automatically removed when disabled=true). Can be omitted when href is used.',
+    },
+    href: {
+      control: 'text',
+      description: 'URL for anchor navigation (web only). Renders the component as an <a> element.',
     },
   },
 };

package/src/system/content/typography/TypographyLink.tsx

@@ -8,7 +8,7 @@ import { typographyStyleContext } from './utils/typographyContext';
 export interface TypographyLinkWithoutMediaProps {
   disabled?: boolean;
   noUnderline?: boolean;
-  onPress: () => void;
+  onPress?: () => void;
 }
 
 export type TypographyLinkProps = TypographyTextProps & TamaguiMediaProps<TypographyLinkWithoutMediaProps>;
@@ -17,6 +17,7 @@ export const InternalTypographyLink = styled(InternalTypography, {
   name: 'TypographyLink',
   context: typographyStyleContext,
   role: 'link',
+  tag: 'a',
   variants: {
     disabled: {
       true: {

package/src/system/content/typography/__snapshots__/TypographyLink.features.stories.tsx.snap

@@ -420,3 +420,51 @@ exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
   </View>
 </RNCSafeAreaProvider>
 `;
+
+exports[`Bumper/Content/TypographyLink/Features Withhref 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#101010",
+        "fontFamily": "GTStandardNarrowBold",
+        "fontSize": 16,
+        "letterSpacing": 0,
+        "lineHeight": 18,
+        "textTransform": "uppercase",
+      }
+    }
+    suppressHighlighting={true}
+  >
+    with href 
+    <Text
+      href="https://app.ornikar.com"
+      role="link"
+      style={
+        {
+          "color": "#101010",
+          "fontFamily": "GTStandardNarrowBold",
+          "fontSize": 16,
+          "letterSpacing": 0,
+          "lineHeight": 18,
+          "textDecorationLine": "underline",
+          "textTransform": "uppercase",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      a nested link
+    </Text>
+  </Text>
+</RNCSafeAreaProvider>
+`;

package/src/system/content/typography/__snapshots_web__/TypographyLink.features.stories.tsx.snap

@@ -17,13 +17,12 @@ exports[`Bumper/Content/TypographyLink/Features DisabledFalse 1`] = `
           class=" t_light is_Theme"
           style="display: contents;"
         >
-          <span
+          <a
             class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba907952141 _td-underline _cur-pointer"
             role="link"
-            tabindex="0"
           >
             Enabled link (clickable with pointer cursor)
-          </span>
+          </a>
         </span>
       </span>
     </span>
@@ -48,14 +47,13 @@ exports[`Bumper/Content/TypographyLink/Features DisabledTrue 1`] = `
           class=" t_light is_Theme"
           style="display: contents;"
         >
-          <span
+          <a
             aria-disabled="true"
             class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--di910006857 _td-underline _cur-not-allowed"
             role="link"
-            tabindex="0"
           >
             Disabled link (not-allowed cursor, onPress removed)
-          </span>
+          </a>
         </span>
       </span>
     </span>
@@ -84,13 +82,12 @@ exports[`Bumper/Content/TypographyLink/Features NestedInBodyBold 1`] = `
             class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1503 _lh-f-lineHeigh201793146 _ls-f-letterSpa1099960303 _fw-f-weight-bo3448 _col-content--ac3049896"
           >
             Bold accent text with 
-            <span
+            <a
               class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1503 _lh-f-lineHeigh201793146 _ls-f-letterSpa1099960303 _fw-f-weight-bo3448 _col-content--ac3049896 _cur-pointer _td-underline _tt-inherit"
               role="link"
-              tabindex="0"
             >
               a nested link
-            </span>
+            </a>
           </span>
         </span>
       </span>
@@ -120,13 +117,12 @@ exports[`Bumper/Content/TypographyLink/Features NestedInContentCaps 1`] = `
             class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448 _col-content--ba907952141 _tt-uppercase"
           >
             content caps with 
-            <span
+            <a
               class="is_TypographyLink font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448 _col-content--ba907952141 _cur-pointer _td-underline _tt-uppercase"
               role="link"
-              tabindex="0"
             >
               a nested link
-            </span>
+            </a>
           </span>
         </span>
       </span>
@@ -156,13 +152,12 @@ exports[`Bumper/Content/TypographyLink/Features NestedInHeading 1`] = `
             class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-head100347202 _lh-f-lineHeigh1544154441 _ls-f-letterSpa1195674548 _fw-f-weight-se1074390495 _col-content--ba907952141"
           >
             Heading with 
-            <span
+            <a
               class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-head100347202 _lh-f-lineHeigh1544154441 _ls-f-letterSpa1195674548 _fw-f-weight-se1074390495 _col-content--ba907952141 _cur-pointer _td-underline _tt-inherit"
               role="link"
-              tabindex="0"
             >
               a nested link
-            </span>
+            </a>
           </span>
         </span>
       </span>
@@ -188,13 +183,12 @@ exports[`Bumper/Content/TypographyLink/Features NoUnderlineFalse 1`] = `
           class=" t_light is_Theme"
           style="display: contents;"
         >
-          <span
+          <a
             class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba907952141 _cur-pointer _td-underline"
             role="link"
-            tabindex="0"
           >
             Link with underline (default)
-          </span>
+          </a>
         </span>
       </span>
     </span>
@@ -219,13 +213,12 @@ exports[`Bumper/Content/TypographyLink/Features NoUnderlineTrue 1`] = `
           class=" t_light is_Theme"
           style="display: contents;"
         >
-          <span
+          <a
             class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ba907952141 _cur-pointer _td-none"
             role="link"
-            tabindex="0"
           >
             Link without underline
-          </span>
+          </a>
         </span>
       </span>
     </span>
@@ -253,40 +246,36 @@ exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
           <div
             class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
           >
-            <span
+            <a
               class="is_TypographyLink font_GTStandard "
               role="link"
               style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0px 0px 0px 0px; font-family: var(--f-family); font-size: var(--f-size-body-m); line-height: var(--f-lineHeight-body-m); letter-spacing: var(--f-letterSpacing-body-m); font-weight: var(--f-weight-regular); color: var(--content--base--hi); -webkit-font-smoothing: antialiased; cursor: pointer; text-decoration-line: none;"
-              tabindex="0"
             >
               Forced hover state - underline removed (hoverStyle applied)
-            </span>
-            <span
+            </a>
+            <a
               class="is_TypographyLink font_GTStandard "
               role="link"
               style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0px 0px 0px 0px; font-family: var(--f-family); font-size: var(--f-size-body-m); line-height: var(--f-lineHeight-body-m); letter-spacing: var(--f-letterSpacing-body-m); font-weight: var(--f-weight-regular); color: var(--content--base--hi); -webkit-font-smoothing: antialiased; cursor: pointer; text-decoration-line: none;"
-              tabindex="0"
             >
               Forced hover state with noUnderline - no visual change
-            </span>
-            <span
+            </a>
+            <a
               aria-disabled="true"
               class="is_TypographyLink font_GTStandard "
               role="link"
               style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0px 0px 0px 0px; font-family: var(--f-family); font-size: var(--f-size-body-m); line-height: var(--f-lineHeight-body-m); letter-spacing: var(--f-letterSpacing-body-m); font-weight: var(--f-weight-regular); color: var(--content--disabled); -webkit-font-smoothing: antialiased; text-decoration-line: underline; cursor: not-allowed;"
-              tabindex="0"
             >
               Forced hover state on disabled - underline removed (hoverStyle applied)
-            </span>
-            <span
+            </a>
+            <a
               aria-disabled="true"
               class="is_TypographyLink font_GTStandard "
               role="link"
               style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0px 0px 0px 0px; font-family: var(--f-family); font-size: var(--f-size-body-m); line-height: var(--f-lineHeight-body-m); letter-spacing: var(--f-letterSpacing-body-m); font-weight: var(--f-weight-regular); color: var(--content--disabled); -webkit-font-smoothing: antialiased; cursor: not-allowed; text-decoration-line: none;"
-              tabindex="0"
             >
               Forced hover state with noUnderline on disabled - no visual change
-            </span>
+            </a>
           </div>
         </span>
       </span>
@@ -294,3 +283,39 @@ exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Bumper/Content/TypographyLink/Features Withhref 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448 _col-content--ba907952141 _tt-uppercase"
+          >
+            with href 
+            <a
+              class="is_TypographyLink font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448 _col-content--ba907952141 _cur-pointer _td-underline _tt-uppercase"
+              href="https://app.ornikar.com"
+              role="link"
+            >
+              a nested link
+            </a>
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/typography/__snapshots_web__/TypographyLink.stories.tsx.snap

@@ -17,13 +17,12 @@ exports[`Bumper/Content/TypographyLink Default 1`] = `
           class=" t_light is_Theme"
           style="display: contents;"
         >
-          <span
+          <a
             class="is_TypographyLink font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _fw-f-weight-re98715119 _col-content--ac3049896 _cur-pointer _td-underline"
             role="link"
-            tabindex="0"
           >
             This is a link
-          </span>
+          </a>
         </span>
       </span>
     </span>