@charcoal-ui/react 4.0.0-beta.1 → 4.0.0-beta.12

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

@@ -1,1786 +1,733 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests TextField Default 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;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6 {
-  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;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6:not(:disabled):not([aria-disabled]):hover,
-.c6[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c6:not(:disabled):not([aria-disabled]):active,
-.c6[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.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);
-}
-
-.c2 {
-  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;
-}
-
-.c2 > .c5 {
-  margin-left: auto;
-}
-
-.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;
-}
-
+exports[`Storybook Tests > react/TextField > Affix 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-field-root"
   >
     <div
-      className="c1"
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
       <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",
-          }
-        }
+        className="charcoal-field-label-sub-label"
       >
-        <label
-          className="c4"
-          htmlFor="test-id"
-          id="test-id"
-        >
-          Label
-        </label>
-        <div
-          className="c5 c6"
-        >
-          <span>
-            <button
-              className="c7"
-            >
-              Text Link
-            </button>
-          </span>
-        </div>
+        <span />
       </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
       <div
-        className="c8"
+        className="charcoal-text-field-prefix"
       >
-        <input
-          aria-labelledby="test-id"
-          className="c9"
-          disabled={false}
-          id="test-id"
-          onChange={[Function]}
-          placeholder="TextField"
-          readOnly={false}
-          required={false}
-          type="text"
-          value=""
-        />
+        /home/john/
+      </div>
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
+      <div
+        className="charcoal-text-field-suffix"
+      >
+        .png
       </div>
     </div>
   </div>
 </div>
 `;
 
-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;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6 {
-  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;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6:not(:disabled):not([aria-disabled]):hover,
-.c6[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c6:not(:disabled):not([aria-disabled]):active,
-.c6[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.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);
-}
-
-.c2 {
-  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;
-}
-
-.c2 > .c5 {
-  margin-left: auto;
-}
-
-.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: auto 1fr auto;
-  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 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.c10 {
-  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);
-}
-
-.c10::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
+exports[`Storybook Tests > react/TextField > AssistiveText 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={false}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
+      </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-describedby="test-id"
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+    <div
+      className="charcoal-text-field-assistive-text"
+      data-invalid={false}
+      id="test-id"
+    >
+      説明が入ります
+    </div>
+  </div>
+</div>
+`;
 
-.c10::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
+exports[`Storybook Tests > react/TextField > Default 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={false}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span>
+          <button
+            className="charcoal-clickable"
+          >
+            Text Link
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-invalid={false}
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        placeholder="TextField"
+        readOnly={false}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
 
-.c10:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
+exports[`Storybook Tests > react/TextField > Disabled 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={true}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
+      </div>
+    </div>
+    <div
+      aria-disabled={true}
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={true}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
 
-.c10::placeholder {
-  color: var(--charcoal-text3);
-}
+exports[`Storybook Tests > react/TextField > Invalid 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={false}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
+      </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={true}
+    >
+      <input
+        aria-describedby="test-id"
+        aria-invalid={true}
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={true}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+    <div
+      className="charcoal-text-field-assistive-text"
+      data-invalid={true}
+      id="test-id"
+    >
+      エラーメッセージ
+    </div>
+  </div>
+</div>
+`;
 
-.c12 {
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-}
+exports[`Storybook Tests > react/TextField > Label 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={false}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+    >
+      <label
+        className="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
+      </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
 
-.c0 {
-  display: grid;
-  gap: 24px;
-}
+exports[`Storybook Tests > react/TextField > Number 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={false}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
+      </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        onWheel={[Function]}
+        type="number"
+        value="0"
+      />
+    </div>
+  </div>
+</div>
+`;
 
+exports[`Storybook Tests > react/TextField > Placeholder 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-field-root"
   >
     <div
-      className="c1"
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
       <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",
-          }
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
+      </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        placeholder="Placeholder"
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests > react/TextField > Prefix 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    aria-disabled={false}
+    className="charcoal-text-field-root"
+  >
+    <div
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
       >
-        <label
-          className="c4"
-          htmlFor="test-id"
-          id="test-id"
-        >
-          Label
-        </label>
-        <div
-          className="c5 c6"
-        >
-          <span>
-            <button
-              className="c7"
-            >
-              Text Link
-            </button>
-          </span>
-        </div>
+        Label
+      </label>
+      <div
+        className="charcoal-field-label-sub-label"
+      >
+        <span />
       </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
       <div
-        className="c8"
+        className="charcoal-text-field-prefix"
       >
         <div
-          className="c9"
+          style={
+            Object {
+              "alignItems": "center",
+              "color": "var(--charcoal-text3)",
+              "display": "flex",
+            }
+          }
         >
-          /home/john/
+          <pixiv-icon
+            name="16/Search"
+          />
         </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"
-        >
-          .png
-          <span
-            className="c12"
-          >
-            0/200
-          </span>
-        </span>
       </div>
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`Storybook Tests TextField HasCount 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;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6 {
-  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;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6:not(:disabled):not([aria-disabled]):hover,
-.c6[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c6:not(:disabled):not([aria-disabled]):active,
-.c6[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.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);
-}
-
-.c2 {
-  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;
-}
-
-.c2 > .c5 {
-  margin-left: auto;
-}
-
-.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 auto;
-  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);
-}
-
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.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);
-}
-
-.c11 {
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-}
-
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
+exports[`Storybook Tests > react/TextField > ReadOnly 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-field-root"
   >
     <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",
-          }
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
       >
-        <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>
+        Label
+      </label>
       <div
-        className="c8"
+        className="charcoal-field-label-sub-label"
       >
-        <input
-          aria-labelledby="test-id"
-          className="c9"
-          disabled={false}
-          id="test-id"
-          maxLength={100}
-          onChange={[Function]}
-          placeholder="TextField"
-          readOnly={false}
-          required={false}
-          type="text"
-          value=""
-        />
-        <span
-          className="c10"
-        >
-          <span
-            className="c11"
-          >
-            0/100
-          </span>
-        </span>
+        <span />
       </div>
     </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        readOnly={true}
+        type="text"
+        value="読み取り専用"
+      />
+    </div>
   </div>
 </div>
 `;
 
-exports[`Storybook Tests TextField HasLabel 1`] = `
-.c9 {
-  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;
-}
-
-.c9:disabled,
-.c9[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c9:focus {
-  outline: none;
-}
-
-.c9::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c8 {
-  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;
-}
-
-.c8::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c8::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c8:not(:disabled):not([aria-disabled]):hover,
-.c8[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled='false']:active,
-.c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled='false']:focus,
-.c8:not(:disabled):not([aria-disabled]):focus-visible,
-.c8[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2 {
-  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;
-}
-
-.c2 > .c5 {
-  margin-left: 4px;
-}
-
-.c2 > .c7 {
-  margin-left: auto;
-}
-
-.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;
-}
-
-.c10 {
-  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;
-}
-
-.c10:not(:disabled):not([aria-disabled]):hover,
-.c10 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c10:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c11 {
-  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);
-}
-
-.c11::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c11::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c11:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c11::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c12 {
-  font-size: 14px;
-  line-height: 22px;
-  margin-top: 4px;
-  margin-bottom: -4px;
-  color: var(--charcoal-text2);
-}
-
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
+exports[`Storybook Tests > react/TextField > RequiredText 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-field-root"
   >
     <div
-      className="c1"
+      className="charcoal-field-label-root"
     >
+      <label
+        className="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
       <div
-        className="c2 c3"
+        className="charcoal-field-label-required-text"
       >
-        <label
-          className="c4"
-          htmlFor="test-id"
-          id="test-id"
-        >
-          Label
-        </label>
-        <span
-          className="c5 c6"
-        >
-          *必須
-        </span>
-        <div
-          className="c7 c8"
-        >
-          <span>
-            <button
-              className="c9"
-            >
-              Text Link
-            </button>
-          </span>
-        </div>
+        *必須
       </div>
       <div
-        className="c10"
+        className="charcoal-field-label-sub-label"
       >
-        <input
-          aria-labelledby="test-id"
-          aria-required={true}
-          className="c11"
-          disabled={false}
-          id="test-id"
-          onChange={[Function]}
-          placeholder="TextField"
-          readOnly={false}
-          required={false}
-          type="text"
-          value=""
-        />
+        <span />
       </div>
-      <p
-        className="c12"
-      >
-        Assistive text
-      </p>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        onChange={[Function]}
+        type="text"
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`Storybook Tests TextField Number 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;
-  display: flow-root;
-  color: var(--charcoal-text1);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6 {
-  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;
-}
-
-.c6::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c6::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c6:not(:disabled):not([aria-disabled]):hover,
-.c6[aria-disabled='false']:hover {
-  color: var(--charcoal-text3-hover);
-}
-
-.c6:not(:disabled):not([aria-disabled]):active,
-.c6[aria-disabled='false']:active {
-  color: var(--charcoal-text3-press);
-}
-
-.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);
-}
-
-.c2 {
-  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;
-}
-
-.c2 > .c5 {
-  margin-left: auto;
-}
-
-.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;
-}
-
+exports[`Storybook Tests > react/TextField > ShowCount 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-field-root"
   >
     <div
-      className="c1"
+      className="charcoal-field-label-root"
+      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="charcoal-field-label"
+        htmlFor="test-id"
+        id="test-id"
+      >
+        Label
+      </label>
       <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",
-          }
-        }
+        className="charcoal-field-label-sub-label"
       >
-        <label
-          className="c4"
-          htmlFor="test-id"
-          id="test-id"
-        >
-          Label
-        </label>
-        <div
-          className="c5 c6"
-        >
-          <span>
-            <button
-              className="c7"
-            >
-              Text Link
-            </button>
-          </span>
-        </div>
+        <span />
       </div>
+    </div>
+    <div
+      className="charcoal-text-field-container"
+      data-invalid={false}
+    >
+      <input
+        aria-labelledby="test-id"
+        className="charcoal-text-field-input"
+        data-invalid={false}
+        disabled={false}
+        id="test-id"
+        maxLength={100}
+        onChange={[Function]}
+        type="text"
+      />
       <div
-        className="c8"
+        className="charcoal-text-field-suffix"
       >
-        <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"
-        />
+        <span
+          className="charcoal-text-field-line-counter"
+        >
+          0/100
+        </span>
       </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;
-  width: 20px;
-  height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: var(--charcoal-text5);
-  background-color: var(--charcoal-surface4);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c12:not(:disabled):not([aria-disabled]):hover,
-.c12[aria-disabled='false']:hover {
-  color: var(--charcoal-text5-hover);
-  background-color: var(--charcoal-surface4-hover);
-}
-
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active {
-  color: var(--charcoal-text5-press);
-  background-color: var(--charcoal-surface4-press);
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus,
-.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 {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c2 {
-  margin-bottom: 8px;
-}
-
-.c7 {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  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;
-}
-
-.c7:not(:disabled):not([aria-disabled]):hover,
-.c7 [aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c7:focus-within {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.c10 {
-  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);
-}
-
-.c10::-webkit-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c10::-moz-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c10:-ms-input-placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c10::placeholder {
-  color: var(--charcoal-text3);
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #858585;
-}
-
+exports[`Storybook Tests > react/TextField > SubLabel 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    aria-disabled={false}
+    className="charcoal-text-field-root"
   >
     <div
-      className="c1 c2"
+      className="charcoal-field-label-root"
       style={
         Object {
           "border": 0,
@@ -1797,18 +744,18 @@ exports[`Storybook Tests TextField PrefixIcon 1`] = `
       }
     >
       <label
-        className="c3"
+        className="charcoal-field-label"
         htmlFor="test-id"
         id="test-id"
       >
         Label
       </label>
       <div
-        className="c4 c5"
+        className="charcoal-field-label-sub-label"
       >
         <span>
           <button
-            className="c6"
+            className="charcoal-clickable"
           >
             Text Link
           </button>
@@ -1816,43 +763,18 @@ exports[`Storybook Tests TextField PrefixIcon 1`] = `
       </div>
     </div>
     <div
-      className="c7"
+      className="charcoal-text-field-container"
+      data-invalid={false}
     >
-      <div
-        className="c8"
-      >
-        <div
-          className="c9"
-        >
-          <pixiv-icon
-            name="16/Search"
-          />
-        </div>
-      </div>
       <input
         aria-labelledby="test-id"
-        className="c10"
+        className="charcoal-text-field-input"
+        data-invalid={false}
         disabled={false}
         id="test-id"
         onChange={[Function]}
-        placeholder="作品を検索"
-        readOnly={false}
-        required={false}
         type="text"
-        value=""
       />
-      <span
-        className="c11"
-      >
-        <button
-          className="c6 c12"
-          onClick={[Function]}
-        >
-          <pixiv-icon
-            name="16/Remove"
-          />
-        </button>
-      </span>
     </div>
   </div>
 </div>