From 8ad0a093c6421ed2776165a550e4a9553b278d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor.baer@me.com>
Date: Sun, 3 May 2020 22:00:37 +0200
Subject: [PATCH] test(components): update storyshots

feature/focus-outline
---
 src/__snapshots__/storyshots.spec.js.snap | 948 ++++++++++++++++------
 1 file changed, 715 insertions(+), 233 deletions(-)

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 7fbc33b540..c8303c5880 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -45,9 +45,8 @@ exports[`Storyshots Components/AspectRatio Base 1`] = `
 
 exports[`Storyshots Components/Badge Base 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -72,9 +71,8 @@ exports[`Storyshots Components/Badge Base 1`] = `
 
 exports[`Storyshots Components/Badge Circular 1`] = `
 .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -111,12 +109,56 @@ exports[`Storyshots Components/Badge Circular 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Badge Clickable 1`] = `
+.circuit-0 {
+  border-radius: 999999px;
+  color: #FFFFFF;
+  display: inline-block;
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: center;
+  background-color: #3388FF;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+}
+
+.circuit-0:hover {
+  background-color: #1760CE;
+}
+
+.circuit-0:active {
+  background-color: #003C8B;
+}
+
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+<button
+  class="circuit-0 circuit-1"
+  color="primary"
+>
+  Click me
+</button>
+`;
+
 exports[`Storyshots Components/Badge Colors 1`] = `
 HTMLCollection [
   .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -138,9 +180,8 @@ HTMLCollection [
     Neutral
   </div>,
   .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -162,9 +203,8 @@ HTMLCollection [
     Primary
   </div>,
   .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -186,9 +226,8 @@ HTMLCollection [
     Success
   </div>,
   .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -210,9 +249,8 @@ HTMLCollection [
     Warning
   </div>,
   .circuit-0 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -1814,15 +1852,25 @@ exports[`Storyshots Components/Calendar/CalendarTag Base 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   cursor: pointer;
+  outline: 0;
+  background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
 }
 
 <div>
@@ -1847,15 +1895,25 @@ exports[`Storyshots Components/Calendar/CalendarTagTwoStep Base 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   cursor: pointer;
+  outline: 0;
+  background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
 }
 
 <div>
@@ -11638,36 +11696,49 @@ exports[`Storyshots Components/Step Swiper 1`] = `
 `;
 
 exports[`Storyshots Components/Table Base 1`] = `
-.circuit-62 {
+.circuit-2 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-66 {
   position: relative;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
-.circuit-60 {
+.circuit-64 {
   border-radius: 4px;
 }
 
 @media (max-width:767px) {
-  .circuit-60 {
+  .circuit-64 {
     height: unset;
     margin-left: 145px;
     overflow-x: auto;
   }
 }
 
-.circuit-58 {
+.circuit-62 {
   background-color: #FFFFFF;
   border-collapse: separate;
   width: 100%;
 }
 
 @media (max-width:767px) {
-  .circuit-58 {
+  .circuit-62 {
     margin-left: -145px;
     width: calc(100% + 145px);
   }
 
-  .circuit-58:after {
+  .circuit-62:after {
     content: '';
     background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent );
     height: 100%;
@@ -11678,16 +11749,16 @@ exports[`Storyshots Components/Table Base 1`] = `
   }
 }
 
-.circuit-18 {
+.circuit-22 {
   vertical-align: middle;
 }
 
-tbody .circuit-18:last-child th,
-tbody .circuit-18:last-child td {
+tbody .circuit-22:last-child th,
+tbody .circuit-22:last-child td {
   border-bottom: none;
 }
 
-.circuit-4 {
+.circuit-6 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11709,7 +11780,7 @@ tbody .circuit-18:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-4 {
+  .circuit-6 {
     left: 0;
     top: auto;
     position: absolute;
@@ -11718,16 +11789,36 @@ tbody .circuit-18:last-child td {
   }
 }
 
-.circuit-4:hover {
+.circuit-6:focus-within::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-6:focus-within::after::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-6:focus-within,
+.circuit-6:hover {
   background-color: #FAFBFC;
   color: #3388FF;
 }
 
-.circuit-4:hover > span {
+.circuit-6:focus-within > button,
+.circuit-6:hover > button {
   opacity: 1;
 }
 
-.circuit-2 {
+.circuit-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11751,6 +11842,20 @@ tbody .circuit-18:last-child td {
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
   color: #3388FF;
+  border: 0;
+  background: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.circuit-4:focus {
+  opacity: 1;
+}
+
+.circuit-4:focus::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0 {
@@ -11758,7 +11863,7 @@ tbody .circuit-18:last-child td {
   margin-bottom: -7px;
 }
 
-.circuit-6 {
+.circuit-8 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11774,7 +11879,7 @@ tbody .circuit-18:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-6 {
+  .circuit-8 {
     display: table-cell;
     min-width: 145px;
     white-space: unset;
@@ -11782,7 +11887,7 @@ tbody .circuit-18:last-child td {
   }
 }
 
-.circuit-12 {
+.circuit-16 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11803,16 +11908,36 @@ tbody .circuit-18:last-child td {
   user-select: none;
 }
 
-.circuit-12:hover {
+.circuit-16:focus-within::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-16:focus-within::after::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-16:focus-within,
+.circuit-16:hover {
   background-color: #FAFBFC;
   color: #3388FF;
 }
 
-.circuit-12:hover > span {
+.circuit-16:focus-within > button,
+.circuit-16:hover > button {
   opacity: 1;
 }
 
-.circuit-14 {
+.circuit-18 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11827,7 +11952,7 @@ tbody .circuit-18:last-child td {
   vertical-align: middle;
 }
 
-.circuit-16 {
+.circuit-20 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11842,23 +11967,44 @@ tbody .circuit-18:last-child td {
   vertical-align: middle;
 }
 
-.circuit-32 {
+.circuit-36 {
   vertical-align: middle;
   cursor: pointer;
+  position: relative;
 }
 
-tbody .circuit-32:last-child th,
-tbody .circuit-32:last-child td {
+tbody .circuit-36:last-child th,
+tbody .circuit-36:last-child td {
   border-bottom: none;
 }
 
-tbody .circuit-32:hover td,
-tbody .circuit-32:hover th {
+.circuit-36:focus::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-36:focus::after::-moz-focus-inner {
+  border: 0;
+}
+
+tbody .circuit-36:focus td,
+tbody .circuit-36:hover td,
+tbody .circuit-36:focus th,
+tbody .circuit-36:hover th {
   color: #3388FF;
   background-color: #FAFBFC;
 }
 
-.circuit-22 {
+.circuit-26 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11869,7 +12015,7 @@ tbody .circuit-32:hover th {
 }
 
 @media (max-width:767px) {
-  .circuit-22 {
+  .circuit-26 {
     left: 0;
     top: auto;
     position: absolute;
@@ -11878,7 +12024,7 @@ tbody .circuit-32:hover th {
   }
 }
 
-.circuit-24 {
+.circuit-28 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11891,7 +12037,7 @@ tbody .circuit-32:hover th {
 }
 
 @media (max-width:767px) {
-  .circuit-24 {
+  .circuit-28 {
     display: table-cell;
     min-width: 145px;
     white-space: unset;
@@ -11899,7 +12045,7 @@ tbody .circuit-32:hover th {
   }
 }
 
-.circuit-26 {
+.circuit-30 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11910,7 +12056,7 @@ tbody .circuit-32:hover th {
   white-space: nowrap;
 }
 
-.circuit-30 {
+.circuit-34 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -11922,28 +12068,30 @@ tbody .circuit-32:hover th {
 }
 
 <div
-  class="circuit-62 circuit-63"
+  class="circuit-66 circuit-67"
 >
   <div
-    class="circuit-60 circuit-61"
+    class="circuit-64 circuit-65"
   >
     <table
-      class="circuit-58 circuit-59"
+      class="circuit-62 circuit-63"
     >
       <thead
-        class="circuit-20 circuit-21"
+        class="circuit-24 circuit-25"
       >
         <tr
-          class="circuit-18 circuit-19"
+          class="circuit-22 circuit-23"
         >
           <th
             aria-sort="none"
-            class="circuit-4 circuit-5"
+            class="circuit-6 circuit-7"
             data-testid="table-header"
             scope="col"
           >
-            <span
-              class="circuit-2 circuit-3"
+            <button
+              class="circuit-4 circuit-5"
+              role="button"
+              title="Sort"
             >
               <svg
                 class="circuit-0"
@@ -11977,12 +12125,17 @@ tbody .circuit-32:hover th {
                   stroke-width="2"
                 />
               </svg>
-            </span>
+              <span
+                class="circuit-2 circuit-3"
+              >
+                Sort
+              </span>
+            </button>
             Name
           </th>
           <td
             aria-hidden="true"
-            class="circuit-6 circuit-7"
+            class="circuit-8 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -11990,12 +12143,14 @@ tbody .circuit-32:hover th {
           </td>
           <th
             aria-sort="none"
-            class="circuit-12 circuit-5"
+            class="circuit-16 circuit-7"
             data-testid="table-header"
             scope="col"
           >
-            <span
-              class="circuit-2 circuit-3"
+            <button
+              class="circuit-4 circuit-5"
+              role="button"
+              title="Sort"
             >
               <svg
                 class="circuit-0"
@@ -12029,18 +12184,23 @@ tbody .circuit-32:hover th {
                   stroke-width="2"
                 />
               </svg>
-            </span>
+              <span
+                class="circuit-2 circuit-3"
+              >
+                Sort
+              </span>
+            </button>
             Created at
           </th>
           <th
-            class="circuit-14 circuit-5"
+            class="circuit-18 circuit-7"
             data-testid="table-header"
             scope="col"
           >
             Permissions
           </th>
           <th
-            class="circuit-16 circuit-5"
+            class="circuit-20 circuit-7"
             data-testid="table-header"
             scope="col"
           >
@@ -12050,12 +12210,13 @@ tbody .circuit-32:hover th {
       </thead>
       <tbody>
         <tr
-          class="circuit-32 circuit-19"
+          class="circuit-36 circuit-23"
           data-selector="item-1"
           data-testid="table-row"
+          tabindex="0"
         >
           <th
-            class="circuit-22 circuit-5"
+            class="circuit-26 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12063,38 +12224,39 @@ tbody .circuit-32:hover th {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-24 circuit-7"
+            class="circuit-28 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
             Lorem ipsum dolor
           </td>
           <td
-            class="circuit-26 circuit-7"
+            class="circuit-30 circuit-9"
             data-selector="item-1-cell-date-12/01/2017"
             data-testid="table-cell"
           >
             12/01/2017
           </td>
           <td
-            class="circuit-26 circuit-7"
+            class="circuit-30 circuit-9"
             data-testid="table-cell"
           >
             -
           </td>
           <td
-            class="circuit-30 circuit-7"
+            class="circuit-34 circuit-9"
             data-testid="table-cell"
           >
             Disabled
           </td>
         </tr>
         <tr
-          class="circuit-32 circuit-19"
+          class="circuit-36 circuit-23"
           data-testid="table-row"
+          tabindex="0"
         >
           <th
-            class="circuit-22 circuit-5"
+            class="circuit-26 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12102,37 +12264,38 @@ tbody .circuit-32:hover th {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-24 circuit-7"
+            class="circuit-28 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
             Ipsum dolor sit amet
           </td>
           <td
-            class="circuit-26 circuit-7"
+            class="circuit-30 circuit-9"
             data-testid="table-cell"
           >
             13/01/2017
           </td>
           <td
-            class="circuit-26 circuit-7"
+            class="circuit-30 circuit-9"
             data-testid="table-cell"
           >
             Virtual Terminal
           </td>
           <td
-            class="circuit-30 circuit-7"
+            class="circuit-34 circuit-9"
             data-testid="table-cell"
           >
             Enabled
           </td>
         </tr>
         <tr
-          class="circuit-32 circuit-19"
+          class="circuit-36 circuit-23"
           data-testid="table-row"
+          tabindex="0"
         >
           <th
-            class="circuit-22 circuit-5"
+            class="circuit-26 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12140,26 +12303,26 @@ tbody .circuit-32:hover th {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-24 circuit-7"
+            class="circuit-28 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
             Dolor sit amet, consectetur adipiscing
           </td>
           <td
-            class="circuit-26 circuit-7"
+            class="circuit-30 circuit-9"
             data-testid="table-cell"
           >
             14/01/2017
           </td>
           <td
-            class="circuit-26 circuit-7"
+            class="circuit-30 circuit-9"
             data-testid="table-cell"
           >
             -
           </td>
           <td
-            class="circuit-30 circuit-7"
+            class="circuit-34 circuit-9"
             data-testid="table-cell"
           >
             Disabled
@@ -12172,36 +12335,49 @@ tbody .circuit-32:hover th {
 `;
 
 exports[`Storyshots Components/Table Custom Sort 1`] = `
-.circuit-46 {
+.circuit-2 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-48 {
   position: relative;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
-.circuit-44 {
+.circuit-46 {
   border-radius: 4px;
 }
 
 @media (max-width:767px) {
-  .circuit-44 {
+  .circuit-46 {
     height: unset;
     margin-left: 145px;
     overflow-x: auto;
   }
 }
 
-.circuit-42 {
+.circuit-44 {
   background-color: #FFFFFF;
   border-collapse: separate;
   width: 100%;
 }
 
 @media (max-width:767px) {
-  .circuit-42 {
+  .circuit-44 {
     margin-left: -145px;
     width: calc(100% + 145px);
   }
 
-  .circuit-42:after {
+  .circuit-44:after {
     content: '';
     background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent );
     height: 100%;
@@ -12212,16 +12388,16 @@ exports[`Storyshots Components/Table Custom Sort 1`] = `
   }
 }
 
-.circuit-8 {
+.circuit-10 {
   vertical-align: middle;
 }
 
-tbody .circuit-8:last-child th,
-tbody .circuit-8:last-child td {
+tbody .circuit-10:last-child th,
+tbody .circuit-10:last-child td {
   border-bottom: none;
 }
 
-.circuit-4 {
+.circuit-6 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12243,7 +12419,7 @@ tbody .circuit-8:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-4 {
+  .circuit-6 {
     left: 0;
     top: auto;
     position: absolute;
@@ -12252,16 +12428,36 @@ tbody .circuit-8:last-child td {
   }
 }
 
-.circuit-4:hover {
+.circuit-6:focus-within::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-6:focus-within::after::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-6:focus-within,
+.circuit-6:hover {
   background-color: #FAFBFC;
   color: #3388FF;
 }
 
-.circuit-4:hover > span {
+.circuit-6:focus-within > button,
+.circuit-6:hover > button {
   opacity: 1;
 }
 
-.circuit-2 {
+.circuit-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12285,6 +12481,20 @@ tbody .circuit-8:last-child td {
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
   color: #3388FF;
+  border: 0;
+  background: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.circuit-4:focus {
+  opacity: 1;
+}
+
+.circuit-4:focus::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0 {
@@ -12292,7 +12502,7 @@ tbody .circuit-8:last-child td {
   margin-bottom: -7px;
 }
 
-.circuit-6 {
+.circuit-8 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12308,7 +12518,7 @@ tbody .circuit-8:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-6 {
+  .circuit-8 {
     display: table-cell;
     min-width: 145px;
     white-space: unset;
@@ -12316,7 +12526,7 @@ tbody .circuit-8:last-child td {
   }
 }
 
-.circuit-12 {
+.circuit-14 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12327,7 +12537,7 @@ tbody .circuit-8:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-12 {
+  .circuit-14 {
     left: 0;
     top: auto;
     position: absolute;
@@ -12336,7 +12546,7 @@ tbody .circuit-8:last-child td {
   }
 }
 
-.circuit-14 {
+.circuit-16 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12349,7 +12559,7 @@ tbody .circuit-8:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-14 {
+  .circuit-16 {
     display: table-cell;
     min-width: 145px;
     white-space: unset;
@@ -12358,28 +12568,30 @@ tbody .circuit-8:last-child td {
 }
 
 <div
-  class="circuit-46 circuit-47"
+  class="circuit-48 circuit-49"
 >
   <div
-    class="circuit-44 circuit-45"
+    class="circuit-46 circuit-47"
   >
     <table
-      class="circuit-42 circuit-43"
+      class="circuit-44 circuit-45"
     >
       <thead
-        class="circuit-10 circuit-11"
+        class="circuit-12 circuit-13"
       >
         <tr
-          class="circuit-8 circuit-9"
+          class="circuit-10 circuit-11"
         >
           <th
             aria-sort="none"
-            class="circuit-4 circuit-5"
+            class="circuit-6 circuit-7"
             data-testid="table-header"
             scope="col"
           >
-            <span
-              class="circuit-2 circuit-3"
+            <button
+              class="circuit-4 circuit-5"
+              role="button"
+              title="Sort"
             >
               <svg
                 class="circuit-0"
@@ -12413,12 +12625,17 @@ tbody .circuit-8:last-child td {
                   stroke-width="2"
                 />
               </svg>
-            </span>
+              <span
+                class="circuit-2 circuit-3"
+              >
+                Sort
+              </span>
+            </button>
             Country
           </th>
           <td
             aria-hidden="true"
-            class="circuit-6 circuit-7"
+            class="circuit-8 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12428,11 +12645,11 @@ tbody .circuit-8:last-child td {
       </thead>
       <tbody>
         <tr
-          class="circuit-8 circuit-9"
+          class="circuit-10 circuit-11"
           data-testid="table-row"
         >
           <th
-            class="circuit-12 circuit-5"
+            class="circuit-14 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12440,7 +12657,7 @@ tbody .circuit-8:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-14 circuit-7"
+            class="circuit-16 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12448,11 +12665,11 @@ tbody .circuit-8:last-child td {
           </td>
         </tr>
         <tr
-          class="circuit-8 circuit-9"
+          class="circuit-10 circuit-11"
           data-testid="table-row"
         >
           <th
-            class="circuit-12 circuit-5"
+            class="circuit-14 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12460,7 +12677,7 @@ tbody .circuit-8:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-14 circuit-7"
+            class="circuit-16 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12468,11 +12685,11 @@ tbody .circuit-8:last-child td {
           </td>
         </tr>
         <tr
-          class="circuit-8 circuit-9"
+          class="circuit-10 circuit-11"
           data-testid="table-row"
         >
           <th
-            class="circuit-12 circuit-5"
+            class="circuit-14 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12480,7 +12697,7 @@ tbody .circuit-8:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-14 circuit-7"
+            class="circuit-16 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12488,11 +12705,11 @@ tbody .circuit-8:last-child td {
           </td>
         </tr>
         <tr
-          class="circuit-8 circuit-9"
+          class="circuit-10 circuit-11"
           data-testid="table-row"
         >
           <th
-            class="circuit-12 circuit-5"
+            class="circuit-14 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12500,7 +12717,7 @@ tbody .circuit-8:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-14 circuit-7"
+            class="circuit-16 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12508,11 +12725,11 @@ tbody .circuit-8:last-child td {
           </td>
         </tr>
         <tr
-          class="circuit-8 circuit-9"
+          class="circuit-10 circuit-11"
           data-testid="table-row"
         >
           <th
-            class="circuit-12 circuit-5"
+            class="circuit-14 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12520,7 +12737,7 @@ tbody .circuit-8:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-14 circuit-7"
+            class="circuit-16 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12534,36 +12751,49 @@ tbody .circuit-8:last-child td {
 `;
 
 exports[`Storyshots Components/Table Sortable 1`] = `
-.circuit-46 {
+.circuit-2 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-50 {
   position: relative;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
 }
 
-.circuit-44 {
+.circuit-48 {
   border-radius: 4px;
 }
 
 @media (max-width:767px) {
-  .circuit-44 {
+  .circuit-48 {
     height: unset;
     margin-left: 145px;
     overflow-x: auto;
   }
 }
 
-.circuit-42 {
+.circuit-46 {
   background-color: #FFFFFF;
   border-collapse: separate;
   width: 100%;
 }
 
 @media (max-width:767px) {
-  .circuit-42 {
+  .circuit-46 {
     margin-left: -145px;
     width: calc(100% + 145px);
   }
 
-  .circuit-42:after {
+  .circuit-46:after {
     content: '';
     background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent );
     height: 100%;
@@ -12574,16 +12804,16 @@ exports[`Storyshots Components/Table Sortable 1`] = `
   }
 }
 
-.circuit-14 {
+.circuit-18 {
   vertical-align: middle;
 }
 
-tbody .circuit-14:last-child th,
-tbody .circuit-14:last-child td {
+tbody .circuit-18:last-child th,
+tbody .circuit-18:last-child td {
   border-bottom: none;
 }
 
-.circuit-4 {
+.circuit-6 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12605,7 +12835,7 @@ tbody .circuit-14:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-4 {
+  .circuit-6 {
     left: 0;
     top: auto;
     position: absolute;
@@ -12614,16 +12844,36 @@ tbody .circuit-14:last-child td {
   }
 }
 
-.circuit-4:hover {
+.circuit-6:focus-within::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-6:focus-within::after::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-6:focus-within,
+.circuit-6:hover {
   background-color: #FAFBFC;
   color: #3388FF;
 }
 
-.circuit-4:hover > span {
+.circuit-6:focus-within > button,
+.circuit-6:hover > button {
   opacity: 1;
 }
 
-.circuit-2 {
+.circuit-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12647,6 +12897,20 @@ tbody .circuit-14:last-child td {
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
   color: #3388FF;
+  border: 0;
+  background: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.circuit-4:focus {
+  opacity: 1;
+}
+
+.circuit-4:focus::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0 {
@@ -12654,7 +12918,7 @@ tbody .circuit-14:last-child td {
   margin-bottom: -7px;
 }
 
-.circuit-6 {
+.circuit-8 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12670,7 +12934,7 @@ tbody .circuit-14:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-6 {
+  .circuit-8 {
     display: table-cell;
     min-width: 145px;
     white-space: unset;
@@ -12678,7 +12942,7 @@ tbody .circuit-14:last-child td {
   }
 }
 
-.circuit-12 {
+.circuit-16 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12699,16 +12963,36 @@ tbody .circuit-14:last-child td {
   user-select: none;
 }
 
-.circuit-12:hover {
+.circuit-16:focus-within::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-16:focus-within::after::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-16:focus-within,
+.circuit-16:hover {
   background-color: #FAFBFC;
   color: #3388FF;
 }
 
-.circuit-12:hover > span {
+.circuit-16:focus-within > button,
+.circuit-16:hover > button {
   opacity: 1;
 }
 
-.circuit-18 {
+.circuit-22 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12719,7 +13003,7 @@ tbody .circuit-14:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-18 {
+  .circuit-22 {
     left: 0;
     top: auto;
     position: absolute;
@@ -12728,7 +13012,7 @@ tbody .circuit-14:last-child td {
   }
 }
 
-.circuit-20 {
+.circuit-24 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12741,7 +13025,7 @@ tbody .circuit-14:last-child td {
 }
 
 @media (max-width:767px) {
-  .circuit-20 {
+  .circuit-24 {
     display: table-cell;
     min-width: 145px;
     white-space: unset;
@@ -12749,7 +13033,7 @@ tbody .circuit-14:last-child td {
   }
 }
 
-.circuit-22 {
+.circuit-26 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12761,28 +13045,30 @@ tbody .circuit-14:last-child td {
 }
 
 <div
-  class="circuit-46 circuit-47"
+  class="circuit-50 circuit-51"
 >
   <div
-    class="circuit-44 circuit-45"
+    class="circuit-48 circuit-49"
   >
     <table
-      class="circuit-42 circuit-43"
+      class="circuit-46 circuit-47"
     >
       <thead
-        class="circuit-16 circuit-17"
+        class="circuit-20 circuit-21"
       >
         <tr
-          class="circuit-14 circuit-15"
+          class="circuit-18 circuit-19"
         >
           <th
             aria-sort="none"
-            class="circuit-4 circuit-5"
+            class="circuit-6 circuit-7"
             data-testid="table-header"
             scope="col"
           >
-            <span
-              class="circuit-2 circuit-3"
+            <button
+              class="circuit-4 circuit-5"
+              role="button"
+              title="Sort"
             >
               <svg
                 class="circuit-0"
@@ -12816,12 +13102,17 @@ tbody .circuit-14:last-child td {
                   stroke-width="2"
                 />
               </svg>
-            </span>
+              <span
+                class="circuit-2 circuit-3"
+              >
+                Sort
+              </span>
+            </button>
             Name
           </th>
           <td
             aria-hidden="true"
-            class="circuit-6 circuit-7"
+            class="circuit-8 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
@@ -12829,12 +13120,14 @@ tbody .circuit-14:last-child td {
           </td>
           <th
             aria-sort="none"
-            class="circuit-12 circuit-5"
+            class="circuit-16 circuit-7"
             data-testid="table-header"
             scope="col"
           >
-            <span
-              class="circuit-2 circuit-3"
+            <button
+              class="circuit-4 circuit-5"
+              role="button"
+              title="Sort"
             >
               <svg
                 class="circuit-0"
@@ -12868,18 +13161,23 @@ tbody .circuit-14:last-child td {
                   stroke-width="2"
                 />
               </svg>
-            </span>
+              <span
+                class="circuit-2 circuit-3"
+              >
+                Sort
+              </span>
+            </button>
             Date added
           </th>
         </tr>
       </thead>
       <tbody>
         <tr
-          class="circuit-14 circuit-15"
+          class="circuit-18 circuit-19"
           data-testid="table-row"
         >
           <th
-            class="circuit-18 circuit-5"
+            class="circuit-22 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12887,25 +13185,25 @@ tbody .circuit-14:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-20 circuit-7"
+            class="circuit-24 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
             Apple
           </td>
           <td
-            class="circuit-22 circuit-7"
+            class="circuit-26 circuit-9"
             data-testid="table-cell"
           >
             12/12/18
           </td>
         </tr>
         <tr
-          class="circuit-14 circuit-15"
+          class="circuit-18 circuit-19"
           data-testid="table-row"
         >
           <th
-            class="circuit-18 circuit-5"
+            class="circuit-22 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12913,25 +13211,25 @@ tbody .circuit-14:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-20 circuit-7"
+            class="circuit-24 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
             Broccoli
           </td>
           <td
-            class="circuit-22 circuit-7"
+            class="circuit-26 circuit-9"
             data-testid="table-cell"
           >
             12/13/18
           </td>
         </tr>
         <tr
-          class="circuit-14 circuit-15"
+          class="circuit-18 circuit-19"
           data-testid="table-row"
         >
           <th
-            class="circuit-18 circuit-5"
+            class="circuit-22 circuit-7"
             data-testid="table-header"
             scope="row"
           >
@@ -12939,14 +13237,14 @@ tbody .circuit-14:last-child td {
           </th>
           <td
             aria-hidden="true"
-            class="circuit-20 circuit-7"
+            class="circuit-24 circuit-9"
             data-testid="table-cell"
             role="presentation"
           >
             Chickpeas
           </td>
           <td
-            class="circuit-22 circuit-7"
+            class="circuit-26 circuit-9"
             data-testid="table-cell"
           >
             12/14/18
@@ -12960,9 +13258,8 @@ tbody .circuit-14:last-child td {
 
 exports[`Storyshots Components/Table With Component Rows 1`] = `
 .circuit-24 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -12978,9 +13275,8 @@ exports[`Storyshots Components/Table With Component Rows 1`] = `
 }
 
 .circuit-34 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -12996,9 +13292,8 @@ exports[`Storyshots Components/Table With Component Rows 1`] = `
 }
 
 .circuit-14 {
-  border-radius: 100px;
+  border-radius: 999999px;
   color: #FFFFFF;
-  cursor: default;
   display: inline-block;
   padding: 0 8px;
   font-size: 12px;
@@ -13396,7 +13691,7 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  background-color: transparent;
+  background-color: #FFFFFF;
   border: none;
   white-space: nowrap;
   height: 100%;
@@ -13421,6 +13716,22 @@ HTMLCollection [
   color: #212933;
 }
 
+.circuit-0:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-0:active {
+  background-color: #EEF0F2;
+}
+
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
+}
+
 .circuit-0::after {
   content: ' ';
   position: absolute;
@@ -13440,7 +13751,7 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  background-color: transparent;
+  background-color: #FFFFFF;
   border: none;
   white-space: nowrap;
   height: 100%;
@@ -13463,6 +13774,22 @@ HTMLCollection [
   outline: none;
 }
 
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:active {
+  background-color: #EEF0F2;
+}
+
+.circuit-2:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-2:focus::-moz-focus-inner {
+  border: 0;
+}
+
 <div
     class="circuit-10 circuit-11"
   >
@@ -13589,7 +13916,7 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  background-color: transparent;
+  background-color: #FFFFFF;
   border: none;
   white-space: nowrap;
   height: 100%;
@@ -13614,6 +13941,22 @@ HTMLCollection [
   color: #212933;
 }
 
+.circuit-0:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-0:active {
+  background-color: #EEF0F2;
+}
+
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
+}
+
 .circuit-0::after {
   content: ' ';
   position: absolute;
@@ -13633,7 +13976,7 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  background-color: transparent;
+  background-color: #FFFFFF;
   border: none;
   white-space: nowrap;
   height: 100%;
@@ -13656,6 +13999,22 @@ HTMLCollection [
   outline: none;
 }
 
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:active {
+  background-color: #EEF0F2;
+}
+
+.circuit-2:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-2:focus::-moz-focus-inner {
+  border: 0;
+}
+
 <div
     class="circuit-10 circuit-11"
   >
@@ -13723,7 +14082,7 @@ exports[`Storyshots Components/Tabs Links 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  background-color: transparent;
+  background-color: #FFFFFF;
   border: none;
   white-space: nowrap;
   height: 100%;
@@ -13748,6 +14107,22 @@ exports[`Storyshots Components/Tabs Links 1`] = `
   color: #212933;
 }
 
+.circuit-0:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-0:active {
+  background-color: #EEF0F2;
+}
+
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
+}
+
 .circuit-0::after {
   content: ' ';
   position: absolute;
@@ -13767,7 +14142,7 @@ exports[`Storyshots Components/Tabs Links 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  background-color: transparent;
+  background-color: #FFFFFF;
   border: none;
   white-space: nowrap;
   height: 100%;
@@ -13790,6 +14165,22 @@ exports[`Storyshots Components/Tabs Links 1`] = `
   outline: none;
 }
 
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:active {
+  background-color: #EEF0F2;
+}
+
+.circuit-2:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-2:focus::-moz-focus-inner {
+  border: 0;
+}
+
 .circuit-6 {
   width: 100%;
   display: -webkit-box;
@@ -13864,7 +14255,7 @@ exports[`Storyshots Components/Tag Base 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
 }
@@ -13889,22 +14280,32 @@ exports[`Storyshots Components/Tag Clickable 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   cursor: pointer;
+  outline: 0;
+  background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #9DA7B1;
 }
 
-<div
+.circuit-0:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+<button
   class="circuit-0 circuit-1"
 >
   Transactions
-</div>
+</button>
 `;
 
 exports[`Storyshots Components/Tag Removable 1`] = `
@@ -13961,7 +14362,7 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
 }
@@ -14013,11 +14414,11 @@ exports[`Storyshots Components/Tag Selected 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   background-color: #3388FF;
-  box-shadow: 0px 0px 0px 1px #3388FF;
+  border: 1px solid #3388FF;
   color: #FFFFFF;
 }
 
@@ -14041,7 +14442,7 @@ exports[`Storyshots Components/Tag With Prefix 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
 }
@@ -14086,7 +14487,7 @@ exports[`Storyshots Components/Tag With Suffix 1`] = `
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
 }
@@ -14463,8 +14864,11 @@ exports[`Storyshots Forms/Checkbox Base 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label > svg {
@@ -14483,6 +14887,7 @@ exports[`Storyshots Forms/Checkbox Base 1`] = `
   display: inline-block;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-2::before {
@@ -14582,8 +14987,11 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label > svg {
@@ -14602,6 +15010,7 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
   display: inline-block;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
@@ -14721,8 +15130,11 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label > svg {
@@ -14741,6 +15153,7 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = `
   display: inline-block;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-2::before {
@@ -14896,8 +15309,11 @@ HTMLCollection [
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label > svg {
@@ -14916,6 +15332,7 @@ HTMLCollection [
   display: inline-block;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-2::before {
@@ -15012,8 +15429,11 @@ HTMLCollection [
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label > svg {
@@ -15032,6 +15452,7 @@ HTMLCollection [
   display: inline-block;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-2::before {
@@ -15128,8 +15549,11 @@ HTMLCollection [
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label > svg {
@@ -15148,6 +15572,7 @@ HTMLCollection [
   display: inline-block;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-2::before {
@@ -17765,7 +18190,7 @@ label + .circuit-3 {
   border-radius: 4px;
   font-size: 16px;
   line-height: 24px;
-  box-shadow: 0px 0px 0px 1px #D8DDE1;
+  border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
   margin-top: 8px;
@@ -19203,8 +19628,11 @@ HTMLCollection [
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label::before {
@@ -19229,6 +19657,7 @@ HTMLCollection [
   color: #5C656F;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-0::before {
@@ -19296,8 +19725,11 @@ HTMLCollection [
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label::before {
@@ -19323,6 +19755,7 @@ HTMLCollection [
   color: #5C656F;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
@@ -19409,8 +19842,11 @@ HTMLCollection [
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label::before {
@@ -19435,6 +19871,7 @@ HTMLCollection [
   color: #5C656F;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-0::before {
@@ -19510,8 +19947,11 @@ exports[`Storyshots Forms/RadioButton/RadioButtonGroup Base 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label::before {
@@ -19529,6 +19969,7 @@ exports[`Storyshots Forms/RadioButton/RadioButtonGroup Base 1`] = `
   color: #5C656F;
   padding-left: 24px;
   position: relative;
+  cursor: pointer;
 }
 
 .circuit-2::before {
@@ -19646,6 +20087,7 @@ label + .circuit-4 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  cursor: pointer;
   background-color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
@@ -19765,6 +20207,7 @@ label + .circuit-8 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  cursor: pointer;
   background-color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
@@ -19987,6 +20430,7 @@ label + .circuit-5 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  cursor: pointer;
   background-color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
@@ -20138,7 +20582,11 @@ exports[`Storyshots Forms/Selector Base 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label {
@@ -20220,7 +20668,11 @@ exports[`Storyshots Forms/Selector Disabled 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label {
@@ -20311,7 +20763,11 @@ exports[`Storyshots Forms/Selector Selected 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label {
@@ -20394,7 +20850,11 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label {
@@ -20516,7 +20976,11 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = `
 }
 
 .circuit-0:focus + label::before {
-  border-width: 2px;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label::before::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0:checked + label {
@@ -21341,10 +21805,15 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
   height: 24px;
   width: 40px;
   overflow: visible;
+  cursor: pointer;
 }
 
-.circuit-4::-moz-focus-inner {
-  border-radius: 24px;
+.circuit-4:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-4:focus::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0 {
@@ -21380,6 +21849,7 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
 .circuit-9 {
   display: block;
   margin-left: 12px;
+  cursor: pointer;
 }
 
 .circuit-7 {
@@ -21452,10 +21922,15 @@ exports[`Storyshots Forms/Toggle Reversed 1`] = `
   height: 24px;
   width: 40px;
   overflow: visible;
+  cursor: pointer;
 }
 
-.circuit-4::-moz-focus-inner {
-  border-radius: 24px;
+.circuit-4:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-4:focus::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0 {
@@ -21491,6 +21966,7 @@ exports[`Storyshots Forms/Toggle Reversed 1`] = `
 .circuit-9 {
   display: block;
   margin-left: 12px;
+  cursor: pointer;
 }
 
 .circuit-7 {
@@ -21603,10 +22079,15 @@ exports[`Storyshots Forms/Toggle With Explanation 1`] = `
   height: 24px;
   width: 40px;
   overflow: visible;
+  cursor: pointer;
 }
 
-.circuit-4::-moz-focus-inner {
-  border-radius: 24px;
+.circuit-4:focus {
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-4:focus::-moz-focus-inner {
+  border: 0;
 }
 
 .circuit-0 {
@@ -21642,6 +22123,7 @@ exports[`Storyshots Forms/Toggle With Explanation 1`] = `
 .circuit-12 {
   display: block;
   margin-left: 12px;
+  cursor: pointer;
 }
 
 .circuit-7 {