npm - @khanacademy/wonder-blocks-link - Versions diffs - 4.1.0 → 4.2.0 - Mend

@khanacademy/wonder-blocks-link 4.1.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md +10 -0
package/dist/components/link.d.ts +11 -0
package/dist/components/link.js.flow +13 -0
package/dist/es/index.js +39 -13
package/dist/index.js +39 -13
package/package.json +3 -3
package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap +847 -176
package/src/components/__tests__/link.test.tsx +90 -62
package/src/components/link-core.tsx +43 -11
package/src/components/link.tsx +11 -0
package/tsconfig.tsbuildinfo +1 -1

package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap CHANGED Viewed

@@ -21,14 +21,23 @@ exports[`Link <Link tabIndex={-1}> 1`] = `
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={-1}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -53,14 +62,23 @@ exports[`Link <Link tabIndex={0}> 1`] = `
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -85,14 +103,23 @@ exports[`Link <Link tabIndex={1}> 1`] = `
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={1}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -114,18 +141,31 @@ exports[`LinkCore kind:primary href:# light:false visitable:false focused 1`] =
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -147,18 +187,31 @@ exports[`LinkCore kind:primary href:# light:false visitable:false focused 2`] =
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -183,14 +236,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:false hovered 1`] =
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -215,14 +277,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:false hovered 2`] =
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -247,14 +318,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:false pressed 1`] =
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -279,14 +359,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:false pressed 2`] =
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -308,21 +397,37 @@ exports[`LinkCore kind:primary href:# light:false visitable:true focused 1`] = `
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#8755ee",
+        },
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       ":visited": {
         "color": "#8755ee",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -344,21 +449,37 @@ exports[`LinkCore kind:primary href:# light:false visitable:true focused 2`] = `
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#8755ee",
+        },
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       ":visited": {
         "color": "#8755ee",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -386,14 +507,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:true hovered 1`] = `
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -421,14 +551,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:true hovered 2`] = `
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -456,14 +595,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:true pressed 1`] = `
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -491,14 +639,23 @@ exports[`LinkCore kind:primary href:# light:false visitable:true pressed 2`] = `
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -520,18 +677,31 @@ exports[`LinkCore kind:primary href:# light:true visitable:false focused 1`] = `
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -553,18 +723,31 @@ exports[`LinkCore kind:primary href:# light:true visitable:false focused 2`] = `
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -589,14 +772,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:false hovered 1`] = `
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -621,14 +813,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:false hovered 2`] = `
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -653,14 +854,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:false pressed 1`] = `
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -685,14 +895,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:false pressed 2`] = `
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -714,21 +933,37 @@ exports[`LinkCore kind:primary href:# light:true visitable:true focused 1`] = `
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#fa50ae",
+        },
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       ":visited": {
         "color": "#fa50ae",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -750,21 +985,37 @@ exports[`LinkCore kind:primary href:# light:true visitable:true focused 2`] = `
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#fa50ae",
+        },
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       ":visited": {
         "color": "#fa50ae",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -792,14 +1043,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:true hovered 1`] = `
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -827,14 +1087,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:true hovered 2`] = `
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -862,14 +1131,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:true pressed 1`] = `
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -897,14 +1175,23 @@ exports[`LinkCore kind:primary href:# light:true visitable:true pressed 2`] = `
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -926,18 +1213,31 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -959,18 +1259,31 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -995,14 +1308,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1027,14 +1349,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1059,14 +1390,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1091,14 +1431,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1120,21 +1469,37 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#8755ee",
+        },
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       ":visited": {
         "color": "#8755ee",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1156,21 +1521,37 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#8755ee",
+        },
+        "borderRadius": 3,
+        "color": "#1865f2",
+        "outline": "1px solid #1865f2",
+      },
       ":visited": {
         "color": "#8755ee",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1198,14 +1579,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1233,14 +1623,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
       "alignItems": "center",
       "color": "#1865f2",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1268,14 +1667,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1303,14 +1711,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1332,18 +1749,31 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1365,18 +1795,31 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1401,14 +1844,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1433,14 +1885,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1465,14 +1926,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1497,14 +1967,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1526,21 +2005,37 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:true
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#fa50ae",
+        },
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       ":visited": {
         "color": "#fa50ae",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1562,21 +2057,37 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:true
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        ":visited": {
+          "color": "#fa50ae",
+        },
+        "borderRadius": 3,
+        "color": "#ffffff",
+        "outline": "1px solid #ffffff",
+      },
       ":visited": {
         "color": "#fa50ae",
       },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #ffffff",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1604,14 +2115,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:true
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1639,14 +2159,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:true
       "alignItems": "center",
       "color": "#ffffff",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1674,14 +2203,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:true
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1709,14 +2247,23 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:true
       "alignItems": "center",
       "color": "#b5cefb",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1738,18 +2285,31 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false focused 1`]
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#21242c",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#21242c",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1771,18 +2331,31 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false focused 2`]
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "rgba(33,36,44,0.64)",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "rgba(33,36,44,0.64)",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1807,14 +2380,23 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false hovered 1`]
       "alignItems": "center",
       "color": "#21242c",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1839,14 +2421,23 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false hovered 2`]
       "alignItems": "center",
       "color": "rgba(33,36,44,0.64)",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1871,14 +2462,23 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false pressed 1`]
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1903,14 +2503,23 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false pressed 2`]
       "alignItems": "center",
       "color": "#21242c",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1932,18 +2541,31 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "#21242c",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "#21242c",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
-      "textDecoration": "none",
+      "outline": "none",
+      "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -1965,18 +2587,31 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
   onTouchStart={[Function]}
   style={
     {
+      ":focusVisible": {
+        "borderRadius": 3,
+        "color": "rgba(33,36,44,0.64)",
+        "outline": "1px solid #1865f2",
+      },
       "alignItems": "center",
-      "borderRadius": 3,
       "color": "rgba(33,36,44,0.64)",
       "cursor": "pointer",
-      "display": "inline-flex",
-      "outline": "1px solid #1865f2",
+      "outline": "none",
       "textDecoration": "none",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -2001,14 +2636,23 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
       "alignItems": "center",
       "color": "#21242c",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -2033,14 +2677,23 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
       "alignItems": "center",
       "color": "rgba(33,36,44,0.64)",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -2065,14 +2718,23 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
       "alignItems": "center",
       "color": "#1b50b3",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;
@@ -2097,13 +2759,22 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
       "alignItems": "center",
       "color": "#21242c",
       "cursor": "pointer",
-      "display": "inline-flex",
       "outline": "none",
       "textDecoration": "underline currentcolor solid",
+      "textUnderlineOffset": "3px",
+      "verticalAlign": "bottom",
     }
   }
   tabIndex={0}
 >
-  Click me
+  <span
+    style={
+      {
+        "verticalAlign": "middle",
+      }
+    }
+  >
+    Click me
+  </span>
 </a>
 `;