@charcoal-ui/react 3.3.0 → 3.4.0

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

@@ -0,0 +1,1181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots TagItem Default 1`] = `
+.c0 {
+  isolation: isolate;
+  position: relative;
+  height: 40px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  padding-right: 24px;
+  padding-left: 24px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c0:not(:disabled):not([aria-disabled]):focus,
+.c0[aria-disabled=false]:focus,
+.c0:not(:disabled):not([aria-disabled]):active,
+.c0[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c0:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c0[aria-disabled=false]:focus:not(:focus-visible),
+.c0:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c0[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c0:not(:disabled):not([aria-disabled]):focus-visible,
+.c0[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:disabled:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]):disabled,
+.c0:disabled[aria-disabled]:not([aria-disabled=false]),
+.c0[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1 {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #7ACCB1;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.c3 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+}
+
+.c3::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c3::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c4 {
+  max-width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+}
+
+<div
+  data-dark={false}
+>
+  <a
+    className="c0"
+    href=""
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    rel=""
+    role="button"
+    size="M"
+    tabIndex={0}
+    target=""
+  >
+    <div
+      className="c1"
+    />
+    <div
+      className="c2"
+    >
+      <div
+        className="c3"
+      >
+        <span
+          className="c4"
+        >
+          #女の子
+        </span>
+      </div>
+    </div>
+  </a>
+</div>
+`;
+
+exports[`Storyshots TagItem Playground 1`] = `
+.c1 {
+  isolation: isolate;
+  position: relative;
+  height: 40px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  padding-right: 24px;
+  padding-left: 24px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.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);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1:disabled:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]):disabled,
+.c1:disabled[aria-disabled]:not([aria-disabled=false]),
+.c1[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c8 {
+  isolation: isolate;
+  position: relative;
+  height: 40px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  color: var(--charcoal-text5);
+  padding-left: 16px;
+  padding-right: 8px;
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c8:not(:disabled):not([aria-disabled]):focus,
+.c8[aria-disabled=false]:focus,
+.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:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c8[aria-disabled=false]:focus:not(:focus-visible),
+.c8:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c8[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.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);
+}
+
+.c8:disabled,
+.c8[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c8:disabled:disabled,
+.c8[aria-disabled]:not([aria-disabled=false]):disabled,
+.c8:disabled[aria-disabled]:not([aria-disabled=false]),
+.c8[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c9 {
+  isolation: isolate;
+  position: relative;
+  height: 40px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  padding-right: 24px;
+  padding-left: 24px;
+  color: var(--charcoal-text2);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c9:not(:disabled):not([aria-disabled]):focus,
+.c9[aria-disabled=false]:focus,
+.c9:not(:disabled):not([aria-disabled]):active,
+.c9[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c9:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c9[aria-disabled=false]:focus:not(:focus-visible),
+.c9:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c9[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c9:not(:disabled):not([aria-disabled]):focus-visible,
+.c9[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c9:disabled,
+.c9[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c9:disabled:disabled,
+.c9[aria-disabled]:not([aria-disabled=false]):disabled,
+.c9:disabled[aria-disabled]:not([aria-disabled=false]),
+.c9[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c11 {
+  isolation: isolate;
+  position: relative;
+  height: 32px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  padding-right: 16px;
+  padding-left: 16px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c11:not(:disabled):not([aria-disabled]):focus,
+.c11[aria-disabled=false]:focus,
+.c11:not(:disabled):not([aria-disabled]):active,
+.c11[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c11[aria-disabled=false]:focus:not(:focus-visible),
+.c11:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c11[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c11:not(:disabled):not([aria-disabled]):focus-visible,
+.c11[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c11:disabled,
+.c11[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c11:disabled:disabled,
+.c11[aria-disabled]:not([aria-disabled=false]):disabled,
+.c11:disabled[aria-disabled]:not([aria-disabled=false]),
+.c11[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c12 {
+  isolation: isolate;
+  position: relative;
+  height: 32px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  color: var(--charcoal-text5);
+  padding-left: 16px;
+  padding-right: 8px;
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus,
+.c12[aria-disabled=false]:focus,
+.c12:not(:disabled):not([aria-disabled]):active,
+.c12[aria-disabled=false]:active {
+  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),
+.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c12[aria-disabled=false]:active:not(:focus-visible) {
+  outline: 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);
+}
+
+.c12:disabled,
+.c12[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c12:disabled:disabled,
+.c12[aria-disabled]:not([aria-disabled=false]):disabled,
+.c12:disabled[aria-disabled]:not([aria-disabled=false]),
+.c12[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c13 {
+  isolation: isolate;
+  position: relative;
+  height: 32px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 4px;
+  padding-right: 16px;
+  padding-left: 16px;
+  color: var(--charcoal-text2);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c13:not(:disabled):not([aria-disabled]):focus,
+.c13[aria-disabled=false]:focus,
+.c13:not(:disabled):not([aria-disabled]):active,
+.c13[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c13:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c13[aria-disabled=false]:focus:not(:focus-visible),
+.c13:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c13[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c13:not(:disabled):not([aria-disabled]):focus-visible,
+.c13[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c13:disabled,
+.c13[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c13:disabled:disabled,
+.c13[aria-disabled]:not([aria-disabled=false]):disabled,
+.c13:disabled[aria-disabled]:not([aria-disabled=false]),
+.c13[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c2 {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #7ACCB1;
+}
+
+.c10 {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #7ACCB1;
+  background-color: var(--charcoal-surface3);
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+}
+
+.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 {
+  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-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-size: 10px;
+}
+
+.c5 {
+  max-width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+}
+
+.c7 {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: bold;
+  display: flow-root;
+}
+
+.c7::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c7::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+}
+
+.c0 > div {
+  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;
+  padding: 1em;
+}
+
+<div
+  data-dark={false}
+>
+  <div>
+    <div
+      className="c0"
+    >
+      <div>
+        <a
+          className="c1"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+          tabIndex={0}
+        >
+          <div
+            className="c2"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div />
+      <div>
+        <a
+          className="c1"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+          tabIndex={0}
+        >
+          <div
+            className="c2"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c6"
+            >
+              <div
+                className="c7"
+              >
+                <span
+                  className="c5"
+                >
+                  girl
+                </span>
+              </div>
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div />
+    </div>
+    <div
+      className="c0"
+    >
+      <div>
+        <a
+          className="c8"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+          tabIndex={0}
+        >
+          <div
+            className="c2"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+            <pixiv-icon
+              name="16/Remove"
+            />
+          </div>
+        </a>
+      </div>
+      <div />
+      <div>
+        <a
+          className="c8"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+          tabIndex={0}
+        >
+          <div
+            className="c2"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c6"
+            >
+              <div
+                className="c7"
+              >
+                <span
+                  className="c5"
+                >
+                  girl
+                </span>
+              </div>
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+            <pixiv-icon
+              name="16/Remove"
+            />
+          </div>
+        </a>
+      </div>
+      <div />
+    </div>
+    <div
+      className="c0"
+    >
+      <div>
+        <a
+          className="c9"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+          tabIndex={0}
+        >
+          <div
+            className="c10"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div>
+        <a
+          aria-disabled={true}
+          className="c9"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+        >
+          <div
+            className="c10"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div>
+        <a
+          className="c9"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+          tabIndex={0}
+        >
+          <div
+            className="c10"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c6"
+            >
+              <div
+                className="c7"
+              >
+                <span
+                  className="c5"
+                >
+                  girl
+                </span>
+              </div>
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div>
+        <a
+          aria-disabled={true}
+          className="c9"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="M"
+        >
+          <div
+            className="c10"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c6"
+            >
+              <div
+                className="c7"
+              >
+                <span
+                  className="c5"
+                >
+                  girl
+                </span>
+              </div>
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      className="c0"
+    >
+      <div>
+        <a
+          className="c11"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="S"
+          tabIndex={0}
+        >
+          <div
+            className="c2"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      className="c0"
+    >
+      <div>
+        <a
+          className="c12"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="S"
+          tabIndex={0}
+        >
+          <div
+            className="c2"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+            <pixiv-icon
+              name="16/Remove"
+            />
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      className="c0"
+    >
+      <div>
+        <a
+          className="c13"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="S"
+          tabIndex={0}
+        >
+          <div
+            className="c10"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div>
+        <a
+          aria-disabled={true}
+          className="c13"
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          size="S"
+        >
+          <div
+            className="c10"
+          />
+          <div
+            className="c3"
+          >
+            <div
+              className="c4"
+            >
+              <span
+                className="c5"
+              >
+                #女の子
+              </span>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;