@charcoal-ui/react 3.7.0 → 3.9.0

package/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots TextField Default 1`] = `
+exports[`Storybook Tests TextField Default 1`] = `
 .c7 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -157,12 +157,6 @@ exports[`Storyshots TextField Default 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c8:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
@@ -280,8 +274,46 @@ exports[`Storyshots TextField Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots TextField Has Affix 1`] = `
-.c3 {
+exports[`Storybook Tests TextField HasAffix 1`] = `
+.c7 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c7:focus {
+  outline: none;
+}
+
+.c7::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4 {
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
@@ -289,7 +321,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   color: var(--charcoal-text1);
 }
 
-.c3::before {
+.c4::before {
   display: block;
   width: 0;
   height: 0;
@@ -297,7 +329,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   margin-top: -4px;
 }
 
-.c3::after {
+.c4::after {
   display: block;
   width: 0;
   height: 0;
@@ -305,7 +337,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   margin-bottom: -4px;
 }
 
-.c5 {
+.c6 {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
@@ -314,7 +346,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   transition: 0.2s color,0.2s box-shadow;
 }
 
-.c5::before {
+.c6::before {
   display: block;
   width: 0;
   height: 0;
@@ -322,7 +354,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   margin-top: -4px;
 }
 
-.c5::after {
+.c6::after {
   display: block;
   width: 0;
   height: 0;
@@ -330,27 +362,27 @@ exports[`Storyshots TextField Has Affix 1`] = `
   margin-bottom: -4px;
 }
 
-.c5:not(:disabled):not([aria-disabled]):hover,
-.c5[aria-disabled='false']:hover {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled='false']:active {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
   color: var(--charcoal-text3-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 {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active,
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[aria-disabled='false']:focus,
+.c6:not(:disabled):not([aria-disabled]):focus-visible,
+.c6[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -361,11 +393,11 @@ exports[`Storyshots TextField Has Affix 1`] = `
   align-items: center;
 }
 
-.c1 > .c4 {
+.c2 > .c5 {
   margin-left: auto;
 }
 
-.c0 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -375,11 +407,11 @@ exports[`Storyshots TextField Has Affix 1`] = `
   flex-direction: column;
 }
 
-.c2 {
+.c3 {
   margin-bottom: 8px;
 }
 
-.c6 {
+.c8 {
   display: grid;
   grid-template-columns: auto 1fr auto;
   height: 40px;
@@ -394,23 +426,17 @@ exports[`Storyshots TextField Has Affix 1`] = `
   font-size: 14px;
 }
 
-.c6:not(:disabled):not([aria-disabled]):hover,
-.c6 [aria-disabled='false']:hover {
+.c8:not(:disabled):not([aria-disabled]):hover,
+.c8 [aria-disabled='false']:hover {
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c6:not(:disabled):not([aria-disabled]):active,
-.c6 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c6:focus-within {
+.c8:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c7 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -421,7 +447,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   align-items: center;
 }
 
-.c9 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -433,7 +459,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
   gap: 8px;
 }
 
-.c8 {
+.c10 {
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -458,28 +484,33 @@ exports[`Storyshots TextField Has Affix 1`] = `
   color: var(--charcoal-text2);
 }
 
-.c8::-webkit-input-placeholder {
+.c10::-webkit-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c8::-moz-placeholder {
+.c10::-moz-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c8:-ms-input-placeholder {
+.c10:-ms-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c8::placeholder {
+.c10::placeholder {
   color: var(--charcoal-text3);
 }
 
-.c10 {
+.c12 {
   line-height: 22px;
   font-size: 14px;
   color: var(--charcoal-text3);
 }
 
+.c0 {
+  display: grid;
+  gap: 24px;
+}
+
 <div
   data-dark={false}
 >
@@ -487,72 +518,82 @@ exports[`Storyshots TextField Has Affix 1`] = `
     className="c0"
   >
     <div
-      className="c1 c2"
-      style={
-        Object {
-          "border": 0,
-          "clip": "rect(0 0 0 0)",
-          "clipPath": "inset(50%)",
-          "height": "1px",
-          "margin": "-1px",
-          "overflow": "hidden",
-          "padding": 0,
-          "position": "absolute",
-          "whiteSpace": "nowrap",
-          "width": "1px",
-        }
-      }
+      className="c1"
     >
-      <label
-        className="c3"
-        htmlFor="test-id"
-        id="test-id"
-      >
-        Label
-      </label>
       <div
-        className="c4 c5"
+        className="c2 c3"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
       >
-        <span />
+        <label
+          className="c4"
+          htmlFor="test-id"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="c5 c6"
+        >
+          <span>
+            <button
+              className="c7"
+            >
+              Text Link
+            </button>
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      className="c6"
-    >
       <div
-        className="c7"
-      >
-        /home/john/
-      </div>
-      <input
-        aria-labelledby="test-id"
         className="c8"
-        disabled={false}
-        id="test-id"
-        maxLength={200}
-        onChange={[Function]}
-        placeholder="path/to/your/file"
-        readOnly={false}
-        required={false}
-        type="text"
-        value=""
-      />
-      <span
-        className="c9"
       >
-        .png
-        <span
+        <div
+          className="c9"
+        >
+          /home/john/
+        </div>
+        <input
+          aria-labelledby="test-id"
           className="c10"
+          disabled={false}
+          id="test-id"
+          maxLength={200}
+          onChange={[Function]}
+          placeholder="TextField"
+          readOnly={false}
+          required={false}
+          type="text"
+          value=""
+        />
+        <span
+          className="c11"
         >
-          0/200
+          .png
+          <span
+            className="c12"
+          >
+            0/200
+          </span>
         </span>
-      </span>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots TextField Has Count 1`] = `
+exports[`Storybook Tests TextField HasCount 1`] = `
 .c7 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -709,12 +750,6 @@ exports[`Storyshots TextField Has Count 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c8:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
@@ -860,7 +895,7 @@ exports[`Storyshots TextField Has Count 1`] = `
 </div>
 `;
 
-exports[`Storyshots TextField Has Label 1`] = `
+exports[`Storybook Tests TextField HasLabel 1`] = `
 .c9 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1044,12 +1079,6 @@ exports[`Storyshots TextField Has Label 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c10:not(:disabled):not([aria-disabled]):active,
-.c10 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c10:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
@@ -1172,8 +1201,8 @@ exports[`Storyshots TextField Has Label 1`] = `
 </div>
 `;
 
-exports[`Storyshots TextField Prefix Icon 1`] = `
-.c11 {
+exports[`Storybook Tests TextField Number 1`] = `
+.c7 {
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1197,21 +1226,21 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   text-transform: none;
 }
 
-.c11:disabled,
-.c11[aria-disabled]:not([aria-disabled=false]) {
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
 }
 
-.c11:focus {
+.c7:focus {
   outline: none;
 }
 
-.c11::-moz-focus-inner {
+.c7::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c3 {
+.c4 {
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
@@ -1219,7 +1248,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   color: var(--charcoal-text1);
 }
 
-.c3::before {
+.c4::before {
   display: block;
   width: 0;
   height: 0;
@@ -1227,7 +1256,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   margin-top: -4px;
 }
 
-.c3::after {
+.c4::after {
   display: block;
   width: 0;
   height: 0;
@@ -1235,7 +1264,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   margin-bottom: -4px;
 }
 
-.c5 {
+.c6 {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
@@ -1244,7 +1273,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   transition: 0.2s color,0.2s box-shadow;
 }
 
-.c5::before {
+.c6::before {
   display: block;
   width: 0;
   height: 0;
@@ -1252,7 +1281,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   margin-top: -4px;
 }
 
-.c5::after {
+.c6::after {
   display: block;
   width: 0;
   height: 0;
@@ -1260,27 +1289,27 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   margin-bottom: -4px;
 }
 
-.c5:not(:disabled):not([aria-disabled]):hover,
-.c5[aria-disabled='false']:hover {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled='false']:active {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
   color: var(--charcoal-text3-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 {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active,
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[aria-disabled='false']:focus,
+.c6:not(:disabled):not([aria-disabled]):focus-visible,
+.c6[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1291,12 +1320,287 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   align-items: center;
 }
 
-.c1 > .c4 {
+.c2 > .c5 {
   margin-left: auto;
 }
 
-.c12 {
-  -webkit-user-select: none;
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c3 {
+  margin-bottom: 8px;
+}
+
+.c8 {
+  display: grid;
+  grid-template-columns: 1fr;
+  height: 40px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  gap: 4px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 14px;
+}
+
+.c8:not(:disabled):not([aria-disabled]):hover,
+.c8 [aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c8:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c9 {
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  font-family: inherit;
+  -webkit-transform-origin: top left;
+  -ms-transform-origin: top left;
+  transform-origin: top left;
+  -webkit-transform: scale(0.875);
+  -ms-transform: scale(0.875);
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  height: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: calc(4px / 0.875);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  color: var(--charcoal-text2);
+}
+
+.c9::-webkit-input-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c9::-moz-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c9:-ms-input-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c9::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c0 {
+  display: grid;
+  gap: 24px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2 c3"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="c4"
+          htmlFor="test-id"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="c5 c6"
+        >
+          <span>
+            <button
+              className="c7"
+            >
+              Text Link
+            </button>
+          </span>
+        </div>
+      </div>
+      <div
+        className="c8"
+      >
+        <input
+          aria-labelledby="test-id"
+          className="c9"
+          disabled={false}
+          id="test-id"
+          onChange={[Function]}
+          onWheel={[Function]}
+          placeholder="TextField"
+          readOnly={false}
+          required={false}
+          type="number"
+          value="0"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests TextField PrefixIcon 1`] = `
+.c6 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c6:disabled,
+.c6[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c6:focus {
+  outline: none;
+}
+
+.c6::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c3 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+  color: var(--charcoal-text1);
+}
+
+.c3::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c3::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c5 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text3);
+  -webkit-transition: 0.2s color,0.2s box-shadow;
+  transition: 0.2s color,0.2s box-shadow;
+}
+
+.c5::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c5::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c5:not(:disabled):not([aria-disabled]):hover,
+.c5[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+}
+
+.c5:not(:disabled):not([aria-disabled]):active,
+.c5[aria-disabled='false']:active {
+  color: var(--charcoal-text3-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);
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 > .c4 {
+  margin-left: auto;
+}
+
+.c12 {
+  -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
@@ -1323,21 +1627,29 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
 
 .c12:not(:disabled):not([aria-disabled]):hover,
 .c12[aria-disabled='false']:hover {
-  background-color: var( --charcoal-surface4-hover );
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-surface4-hover);
 }
 
 .c12:not(:disabled):not([aria-disabled]):active,
 .c12[aria-disabled='false']:active {
-  background-color: var( --charcoal-surface4-press );
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface4-press);
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus,
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active,
+.c12[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1360,7 +1672,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   margin-bottom: 8px;
 }
 
-.c6 {
+.c7 {
   display: grid;
   grid-template-columns: auto 1fr auto;
   height: 40px;
@@ -1375,23 +1687,17 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   font-size: 14px;
 }
 
-.c6:not(:disabled):not([aria-disabled]):hover,
-.c6 [aria-disabled='false']:hover {
+.c7:not(:disabled):not([aria-disabled]):hover,
+.c7 [aria-disabled='false']:hover {
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c6:not(:disabled):not([aria-disabled]):active,
-.c6 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c6:focus-within {
+.c7:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1402,7 +1708,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   align-items: center;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1414,7 +1720,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   gap: 8px;
 }
 
-.c9 {
+.c10 {
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -1439,23 +1745,23 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   color: var(--charcoal-text2);
 }
 
-.c9::-webkit-input-placeholder {
+.c10::-webkit-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c9::-moz-placeholder {
+.c10::-moz-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c9:-ms-input-placeholder {
+.c10:-ms-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c9::placeholder {
+.c10::placeholder {
   color: var(--charcoal-text3);
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1500,17 +1806,23 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
       <div
         className="c4 c5"
       >
-        <span />
+        <span>
+          <button
+            className="c6"
+          >
+            Text Link
+          </button>
+        </span>
       </div>
     </div>
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <pixiv-icon
             name="16/Search"
@@ -1519,7 +1831,7 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
       </div>
       <input
         aria-labelledby="test-id"
-        className="c9"
+        className="c10"
         disabled={false}
         id="test-id"
         onChange={[Function]}
@@ -1530,10 +1842,10 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
         value=""
       />
       <span
-        className="c10"
+        className="c11"
       >
         <button
-          className="c11 c12"
+          className="c6 c12"
           onClick={[Function]}
         >
           <pixiv-icon