@charcoal-ui/react 3.5.0 → 3.7.0

package/src/components/Button/__snapshots__/index.story.storyshot

@@ -17,6 +17,8 @@ exports[`Storyshots Button Danger 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -56,65 +58,46 @@ exports[`Storyshots Button Danger 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-assertive);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-assertive);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-assertive-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-assertive-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -145,6 +128,8 @@ exports[`Storyshots Button Default 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -184,65 +169,46 @@ exports[`Storyshots Button Default 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -273,6 +239,8 @@ exports[`Storyshots Button Disabled 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -312,65 +280,46 @@ exports[`Storyshots Button Disabled 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -401,6 +350,8 @@ exports[`Storyshots Button Fixed 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -440,65 +391,46 @@ exports[`Storyshots Button Fixed 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -529,6 +461,8 @@ exports[`Storyshots Button Focus 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -568,65 +502,46 @@ exports[`Storyshots Button Focus 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -657,6 +572,8 @@ exports[`Storyshots Button Layout Example 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -696,65 +613,46 @@ exports[`Storyshots Button Layout Example 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c2 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -774,65 +672,46 @@ exports[`Storyshots Button Layout Example 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-surface6);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface6);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c2:hover:not(:disabled):not([aria-disabled]),
-.c2:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c2:active:not(:disabled):not([aria-disabled]),
-.c2:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c2:not(:disabled):not([aria-disabled]):active,
+.c2[aria-disabled='false']:active,
+.c2:not(:disabled):not([aria-disabled]):focus,
+.c2[aria-disabled='false']:focus,
+.c2:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c2:hover:not(:disabled):not([aria-disabled]),
-.c2:hover[aria-disabled=false] {
+.c2:not(:disabled):not([aria-disabled]):hover,
+.c2[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-surface6-hover);
 }
 
-.c2:active:not(:disabled):not([aria-disabled]),
-.c2:active[aria-disabled=false] {
+.c2:not(:disabled):not([aria-disabled]):active,
+.c2[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-surface6-press);
 }
 
 .c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
+.c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c2:not(:disabled):not([aria-disabled]):focus,
-.c2[aria-disabled=false]:focus,
-.c2:not(:disabled):not([aria-disabled]):active,
-.c2[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[aria-disabled=false]:focus:not(:focus-visible),
-.c2:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c2:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c3 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -852,65 +731,46 @@ exports[`Storyshots Button Layout Example 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-assertive);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-assertive);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c3:hover:not(:disabled):not([aria-disabled]),
-.c3:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c3:active:not(:disabled):not([aria-disabled]),
-.c3:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c3:not(:disabled):not([aria-disabled]):active,
+.c3[aria-disabled='false']:active,
+.c3:not(:disabled):not([aria-disabled]):focus,
+.c3[aria-disabled='false']:focus,
+.c3:not(:disabled):not([aria-disabled]):focus-visible,
+.c3[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c3:hover:not(:disabled):not([aria-disabled]),
-.c3:hover[aria-disabled=false] {
+.c3:not(:disabled):not([aria-disabled]):hover,
+.c3[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-assertive-hover);
 }
 
-.c3:active:not(:disabled):not([aria-disabled]),
-.c3:active[aria-disabled=false] {
+.c3:not(:disabled):not([aria-disabled]):active,
+.c3[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-assertive-press);
 }
 
 .c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
+.c3[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled=false]:focus,
-.c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[aria-disabled=false]:focus:not(:focus-visible),
-.c3:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c3[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c4 {
   width: -webkit-fill-available;
   width: -moz-available;
@@ -930,65 +790,46 @@ exports[`Storyshots Button Layout Example 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-brand);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-brand);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c4:hover:not(:disabled):not([aria-disabled]),
-.c4:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c4:active:not(:disabled):not([aria-disabled]),
-.c4:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c4:not(:disabled):not([aria-disabled]):active,
+.c4[aria-disabled='false']:active,
+.c4:not(:disabled):not([aria-disabled]):focus,
+.c4[aria-disabled='false']:focus,
+.c4:not(:disabled):not([aria-disabled]):focus-visible,
+.c4[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c4:hover:not(:disabled):not([aria-disabled]),
-.c4:hover[aria-disabled=false] {
+.c4:not(:disabled):not([aria-disabled]):hover,
+.c4[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-brand-hover);
 }
 
-.c4:active:not(:disabled):not([aria-disabled]),
-.c4:active[aria-disabled=false] {
+.c4:not(:disabled):not([aria-disabled]):active,
+.c4[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-brand-press);
 }
 
 .c4:disabled,
-.c4[aria-disabled]:not([aria-disabled=false]) {
+.c4[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c4:not(:disabled):not([aria-disabled]):focus,
-.c4[aria-disabled=false]:focus,
-.c4:not(:disabled):not([aria-disabled]):active,
-.c4[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c4:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c4[aria-disabled=false]:focus:not(:focus-visible),
-.c4:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c4[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c4:not(:disabled):not([aria-disabled]):focus-visible,
-.c4[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c5 {
   width: -webkit-fill-available;
   width: -moz-available;
@@ -1008,65 +849,46 @@ exports[`Storyshots Button Layout Example 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c5:hover:not(:disabled):not([aria-disabled]),
-.c5:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c5:active:not(:disabled):not([aria-disabled]),
-.c5:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c5:not(:disabled):not([aria-disabled]):active,
+.c5[aria-disabled='false']:active,
+.c5:not(:disabled):not([aria-disabled]):focus,
+.c5[aria-disabled='false']:focus,
+.c5:not(:disabled):not([aria-disabled]):focus-visible,
+.c5[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c5:hover:not(:disabled):not([aria-disabled]),
-.c5:hover[aria-disabled=false] {
+.c5:not(:disabled):not([aria-disabled]):hover,
+.c5[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c5:active:not(:disabled):not([aria-disabled]),
-.c5:active[aria-disabled=false] {
+.c5:not(:disabled):not([aria-disabled]):active,
+.c5[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c5:disabled,
-.c5[aria-disabled]:not([aria-disabled=false]) {
+.c5[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c5:not(:disabled):not([aria-disabled]):focus,
-.c5[aria-disabled=false]:focus,
-.c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c5:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c5[aria-disabled=false]:focus:not(:focus-visible),
-.c5:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c5[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c5:not(:disabled):not([aria-disabled]):focus-visible,
-.c5[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -1219,6 +1041,8 @@ exports[`Storyshots Button Link 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1258,65 +1082,46 @@ exports[`Storyshots Button Link 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -1347,6 +1152,8 @@ exports[`Storyshots Button Navigation 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1386,65 +1193,46 @@ exports[`Storyshots Button Navigation 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-surface6);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface6);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-surface6-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-surface6-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -1475,6 +1263,8 @@ exports[`Storyshots Button Nihongo 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1514,65 +1304,46 @@ exports[`Storyshots Button Nihongo 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -1603,6 +1374,8 @@ exports[`Storyshots Button Overlay 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1642,65 +1415,46 @@ exports[`Storyshots Button Overlay 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-surface4);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface4);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-surface4-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-surface4-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -1731,6 +1485,8 @@ exports[`Storyshots Button Primary 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1770,65 +1526,46 @@ exports[`Storyshots Button Primary 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-brand);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-brand);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text5-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text5-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-brand-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-brand-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >
@@ -1859,6 +1596,8 @@ exports[`Storyshots Button Small 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1898,65 +1637,46 @@ exports[`Storyshots Button Small 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 16px;
   padding-left: 16px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 32px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 <div
   data-dark={false}
 >