// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Components|Icon As img element 1`] = `
.c0 {
  max-width: 920px;
  margin: auto;
  padding: 48px;
  box-sizing: border-box;
}

<div
  class="c0"
>
  <img
    src="plus.svg"
  />
</div>
`;

exports[`Storyshots Components|Icon Icons 1`] = `
.c0 {
  max-width: 920px;
  margin: auto;
  padding: 48px;
  box-sizing: border-box;
}

.c5 {
  box-sizing: border-box;
}

.c2 {
  text-align: center;
  box-sizing: border-box;
}

.c1 {
  box-sizing: border-box;
  grid-gap: 24px;
  grid-template-columns: repeat(7,1fr);
  display: grid;
}

.c4 {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

.c4 svg {
  display: block;
  width: 100%;
  height: 100%;
}

.c7 .c3 {
  margin-right: 10px;
}

.c6 {
  margin-top: 10px;
  margin-bottom: 16px;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: 0.75rem;
  overflow-wrap: break-word;
}

.c6:last-child {
  margin-bottom: 0;
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        account.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgAccount
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        accreditation-check.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgAccreditationCheck
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        alert.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgAlert
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        arrow.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgArrow
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        arrow-down.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgArrowDown
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        briefcase.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgBriefcase
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        calendar.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCalendar
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        certificate.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCertificate
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        close.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgClose
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        close-filled.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCloseFilled
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        caret-down.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCaretDown
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        checkmark.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCheckmark
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        checklist.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgChecklist
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        checklist-filled.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgChecklistFilled
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        checklist-dotted.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgChecklistDotted
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        empty-checklist.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgEmptyChecklist
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        cog.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCog
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        copy.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCopy
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        cycle.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCycle
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        customer-check.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgCustomerCheck
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        dai.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDai
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        document.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDocument
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        dot.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDot
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        delete.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDelete
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        download.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDownload
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        dividends.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDividends
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        dividends-outline.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgDividendsOutline
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        eth.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgEth
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        erc-20.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgErc20
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        file-check.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgFileCheck
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        gusd.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgGusd
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        handshake.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgHandshake
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        info.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgInfo
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        invest-graph.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgInvestGraph
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        non-certificate.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgNonCertificate
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        paperplane.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPaperplane
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        pax.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPax
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        pen.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPen
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        pending.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPending
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        poly.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPoly
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        plus.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPlus
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        plus-plain.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgPlusPlain
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        share.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgShare
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        token.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgToken
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        clock.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgClock
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        clock-alert.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgClockAlert
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        clock-filled.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgClockFilled
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        clock-history.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgClockHistory
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        trust.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgTrust
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        usd.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgUsd
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        usdt.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgUsdt
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        usdc.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgUsdc
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        upload.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgUpload
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        warning.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgWarning
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        wallet.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgWallet
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        world.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgWorld
      </p>
    </div>
    <div
      class="c2"
    >
      <span
        class="c3 c4 c5"
      >
        timeout.svg
      </span>
      <p
        class="c6"
        font-size="0"
      >
        SvgTimeout
      </p>
    </div>
  </div>
</div>
`;

exports[`Storyshots Components|Icon Rotated 1`] = `
.c0 {
  max-width: 920px;
  margin: auto;
  padding: 48px;
  box-sizing: border-box;
}

.c3 {
  box-sizing: border-box;
}

.c2 {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

.c2 svg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.c4 .c1 {
  margin-right: 10px;
}

<div
  class="c0"
>
  <span
    class="c1 c2 c3"
  >
    plus.svg
  </span>
</div>
`;

exports[`Storyshots Components|Icon Scaled 1`] = `
.c0 {
  max-width: 920px;
  margin: auto;
  padding: 48px;
  box-sizing: border-box;
}

.c3 {
  box-sizing: border-box;
}

.c2 {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

.c2 svg {
  display: block;
  width: 100%;
  height: 100%;
  padding: 9.999999999999998%;
}

.c4 .c1 {
  margin-right: 10px;
}

<div
  class="c0"
>
  <span
    class="c1 c2 c3"
  >
    plus.svg
  </span>
</div>
`;
