<svg xmlns="http://www.w3.org/2000/svg" width="800" height="395" viewBox="0 0 800 395">
  <defs>
    <style>
      .a {
        fill: none;
      }

      .h {
        fill: #fff;
        stroke: #a19ad1;
        stroke-miterlimit: 10;
        stroke-width: 4px;
      }

      .b {
        fill: #cdeffc;
      }

      .c, .j {
        font-size: 14px;
        font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
      }

      .c {
        fill: #18162d;
      }

      .c, .e, .g, .j {
        font-weight: 700;
      }

      .d {
        font-family: Courier;
        font-weight: 400;
      }

      .e, .g {
        font-size: 18px;
        font-family: Arial-BoldMT, Arial;
      }

      .e {
        fill: #a19ad1;
      }

      .f {
        fill: #bec3c3;
      }

      .g {
        fill: #6257b2;
      }

      .i {
        fill: #c0bce0;
      }

      .j {
        fill: #312c59;
      }
    </style>
  </defs>
  <g>
    <rect class="h" x="46.5" y="33.55" width="212" height="292.45"/>
    <g>
      <rect class="b" x="67.75" y="173.55" width="164.75" height="115.45" rx="4.83"/>
      <text class="c" transform="translate(79.95 200.91)">export default <tspan class="d"><tspan x="0.56" y="16.8">function </tspan><tspan x="0" y="33.6">Button() { </tspan><tspan x="0" y="50.4" xml:space="preserve"> ... </tspan><tspan x="0" y="67.2">}</tspan></tspan></text>
    </g>
    <text class="e" transform="translate(86.99 62.68)">Component.js</text>
    <rect class="f" x="68.11" y="76" width="164.75" height="40" rx="4.83"/>
    <rect class="f" x="68.11" y="124.33" width="164.75" height="40" rx="4.83"/>
    <text class="g" transform="translate(69.21 355.13)">one default export</text>
  </g>
  <g>
    <text class="g" transform="translate(295.2 355.13)">multiple named exports</text>
    <rect class="h" x="294.5" y="33.55" width="212" height="292.45"/>
    <g>
      <rect class="i" x="315.75" y="185.55" width="164.75" height="97.45" rx="4.83"/>
      <text class="j" transform="translate(327.95 212.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Checkbox() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
    </g>
    <g>
      <rect class="i" x="315.75" y="77.55" width="164.75" height="97.45" rx="4.83"/>
      <text class="j" transform="translate(327.95 104.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Slider() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
    </g>
    <text class="e" transform="translate(329.98 62.68)">Components.js</text>
  </g>
  <g>
    <rect class="h" x="543.5" y="33.55" width="212" height="292.45"/>
    <g>
      <rect class="i" x="564.75" y="77.55" width="164.75" height="97.45" rx="4.83"/>
      <text class="j" transform="translate(576.95 104.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Avatar() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
    </g>
    <text class="e" transform="translate(559.48 62.68)">MixedComponents.js</text>
    <g>
      <rect class="b" x="565.11" y="185.28" width="164.75" height="115.45" rx="4.83"/>
      <text class="c" transform="translate(577.31 212.64)">export default <tspan class="d"><tspan x="0.56" y="16.8">function </tspan><tspan x="0" y="33.6">FriendsList() { </tspan><tspan x="0" y="50.4" xml:space="preserve"> ... </tspan><tspan x="0" y="67.2">}</tspan></tspan></text>
    </g>
    <text class="g" transform="translate(577.2 355.18)">named export(s)<tspan x="-26.49" y="21.6">and one default export</tspan></text>
  </g>
</svg>
