@charcoal-ui/react 4.0.0-beta.3 → 4.0.0-beta.5

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

@@ -1,1066 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests MultiSelect Default 1`] = `
-.c1 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  gap: 4px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c4 {
-  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;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c2[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  background-color: var(--charcoal-text3);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c2[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-hover);
-}
-
-.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-press);
-}
-
-.c2[type='checkbox']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2[type='checkbox']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c2[type='checkbox']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3 {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  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;
-  width: 24px;
-  height: 24px;
-  border-radius: 999999px;
-  color: var(--charcoal-text5);
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-}
-
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-label=""
-    className="c0"
-    data-testid="SelectGroup"
-  >
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={true}
-        className="c2"
-        disabled={false}
-        name=""
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢1"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        1
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name=""
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢2"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        2
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={true}
-        className="c2"
-        disabled={false}
-        name=""
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢3"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        3
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name=""
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢4"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        4
-      </div>
-    </label>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests MultiSelect Invalid 1`] = `
-.c1 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  gap: 4px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c4 {
-  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;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c2[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  background-color: var(--charcoal-text3);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c2[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-hover);
-}
-
-.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-press);
-}
-
-.c2[type='checkbox']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2[type='checkbox']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c2[type='checkbox']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox'][aria-disabled='false'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3 {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  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;
-  width: 24px;
-  height: 24px;
-  border-radius: 999999px;
-  color: var(--charcoal-text5);
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-}
-
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-label=""
-    className="c0"
-    data-testid="SelectGroup"
-  >
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢1"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        1
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢2"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        2
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢3"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        3
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢4"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        4
-      </div>
-    </label>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests MultiSelect Overlay 1`] = `
-.c1 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  gap: 4px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c4 {
-  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;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c2[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  background-color: var(--charcoal-text3);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-  background-color: var(--charcoal-surface4);
-}
-
-.c2[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-hover);
-}
-
-.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-press);
-}
-
-.c2[type='checkbox']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2[type='checkbox']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c2[type='checkbox']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3 {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  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;
-  width: 24px;
-  height: 24px;
-  border-radius: 999999px;
-  color: var(--charcoal-text5);
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  border-color: var(--charcoal-text5);
-  border-width: 2px;
-  border-style: solid;
-}
-
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-label=""
-    className="c0"
-    data-testid="SelectGroup"
-  >
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢1"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        1
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢2"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        2
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢3"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        3
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢4"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        4
-      </div>
-    </label>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests MultiSelect Playground 1`] = `
-.c1 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  gap: 4px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c4 {
-  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;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c2[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  background-color: var(--charcoal-text3);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c2[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-hover);
-}
-
-.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-press);
-}
-
-.c2[type='checkbox']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c2[type='checkbox']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c2[type='checkbox']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3 {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  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;
-  width: 24px;
-  height: 24px;
-  border-radius: 999999px;
-  color: var(--charcoal-text5);
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-}
-
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-label=""
-    className="c0"
-    data-testid="SelectGroup"
-  >
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢1"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        1
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢2"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        2
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢3"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        3
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={false}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢4"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        4
-      </div>
-    </label>
-  </div>
-</div>
-`;