@charcoal-ui/react 4.0.0-beta.4 → 4.0.0-beta.6

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

@@ -1,1227 +1,250 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests TagItem Active 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: 8px;
-  padding-left: 16px;
-  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 {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem Active 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="M"
+    data-state="active"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "#7ACCB1",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          #女の子
-        </span>
-      </div>
-      <pixiv-icon
-        name="16/Remove"
-      />
+        #女の子
+      </span>
     </div>
-  </a>
+    <pixiv-icon
+      name="16/Remove"
+    />
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests TagItem BGColor 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 {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1 {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--charcoal-brand);
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem BGColor 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="M"
+    data-state="default"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "var(--charcoal-brand)",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          女の子
-        </span>
-      </div>
+        女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests TagItem BGImage 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 {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1 {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #7ACCB1;
-  background-color: var(--charcoal-surface4);
-}
-
-.c1::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-size: cover;
-  background-image: url(https://charcoal-web.pixiv.design/charcoal-ogp.jpg);
-  mix-blend-mode: overlay;
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem BGImage 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="image"
+    data-size="M"
+    data-state="default"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "url(data:image/png;base64,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)",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          #女の子
-        </span>
-      </div>
+        #女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests 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 {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem Default 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="M"
+    data-state="default"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "#7ACCB1",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          #女の子
-        </span>
-      </div>
+        #女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests TagItem Disabled 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 {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem Disabled 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    aria-disabled={true}
-    className="c0"
-    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"
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="M"
+    data-state="default"
+    disabled={true}
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "#7ACCB1",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          #女の子
-        </span>
-      </div>
+        #女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests TagItem InActive 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-text2);
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus,
-.c0[aria-disabled='false']:focus {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1 {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #7ACCB1;
-  background-color: var(--charcoal-surface3);
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem InActive 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="M"
+    data-state="inactive"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "#7ACCB1",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          #女の子
-        </span>
-      </div>
+        #女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests TagItem Small 1`] = `
-.c0 {
-  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;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus,
-.c0[aria-disabled='false']:focus {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.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;
-}
-
+exports[`Storybook Tests react/TagItem Small 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="S"
+    data-state="default"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "#7ACCB1",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={false}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={false}
       >
-        <span
-          className="c4"
-        >
-          #女の子
-        </span>
-      </div>
+        #女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`Storybook Tests TagItem TranslatedLabel 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 {
-  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) {
-  box-shadow: none;
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.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 {
-  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;
-}
-
-.c4 {
-  font-size: 12px;
-  line-height: 20px;
-  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;
-}
-
+exports[`Storybook Tests react/TagItem TranslatedLabel 1`] = `
 <div
   data-dark={false}
 >
-  <a
-    className="c0"
-    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}
+  <button
+    className="charcoal-tag-item charcoal-tag-item__bg"
+    data-bg-variant="color"
+    data-size="M"
+    data-state="default"
+    style={
+      Object {
+        "--charcoal-tag-item-bg": "#7ACCB1",
+      }
+    }
   >
     <div
-      className="c1"
-    />
-    <div
-      className="c2"
+      className="charcoal-tag-item__label"
+      data-has-translate={true}
     >
-      <div
-        className="c3"
+      <span
+        className="charcoal-tag-item__label__translated"
+      >
+        girl
+      </span>
+      <span
+        className="charcoal-tag-item__label__text"
+        data-has-translate={true}
       >
-        <div
-          className="c4"
-        >
-          <span
-            className="c5"
-          >
-            girl
-          </span>
-        </div>
-        <span
-          className="c5"
-        >
-          #女の子
-        </span>
-      </div>
+        #女の子
+      </span>
     </div>
-  </a>
+  </button>
 </div>
 `;