<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1012px" height="674px" content="&lt;mxfile modified=&quot;2019-03-17T18:29:05.364Z&quot; host=&quot;www.draw.io&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36&quot; etag=&quot;Uz92GVTUb3yri22S5xCA&quot; version=&quot;10.4.9&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;ojASgKTjU-_JHi5w-cnP&quot; name=&quot;Component hierarchy&quot;&gt;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&lt;/diagram&gt;&lt;diagram id=&quot;GVz6tk1x659pRadKBHSG&quot; name=&quot;Render flow&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color:rgb(255, 255, 255)" version="1.1" viewBox="-0.5 -0.5 1012 674">
    <defs/>
    <g>
        <rect width="190" height="90" x="180" y="517" fill="none" stroke="#000000" stroke-dasharray="3 3" pointer-events="none"/>
        <rect width="82.91" height="30" x="231.82" y="517" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(255.5,525.5)">
            <switch>
                <foreignObject width="35" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:35px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Button
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="18" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Button&lt;br&gt;
                </text>
            </switch>
        </g>
        <rect width="82.91" height="30" x="180" y="577" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(209.5,585.5)">
            <switch>
                <foreignObject width="23" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:23px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Icon
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="12" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Icon&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#6c8ebf" stroke-miterlimit="10" d="M 253 547 L 253 567 L 221 567 L 221 570.63" pointer-events="none"/>
        <path fill="#6c8ebf" stroke="#6c8ebf" stroke-miterlimit="10" d="M 221 575.88 L 217.5 568.88 L 221 570.63 L 224.5 568.88 Z" pointer-events="none"/>
        <rect width="82.91" height="30" x="287.09" y="577" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(309.5,585.5)">
            <switch>
                <foreignObject width="37" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:&quot;Courier New&quot;;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:37px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Label
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="19" y="12" fill="#000000" font-family="Courier New" font-size="12px" text-anchor="middle">
                    Label&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#6c8ebf" stroke-miterlimit="10" d="M 294 547 L 294 567 L 329 567 L 329 570.63" pointer-events="none"/>
        <path fill="#6c8ebf" stroke="#6c8ebf" stroke-miterlimit="10" d="M 329 575.88 L 325.5 568.88 L 329 570.63 L 332.5 568.88 Z" pointer-events="none"/>
        <rect width="170" height="90" x="380" y="517" fill="none" stroke="#000000" stroke-dasharray="3 3" pointer-events="none"/>
        <rect width="74.18" height="30" x="426.36" y="517" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(435.5,525.5)">
            <switch>
                <foreignObject width="54" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:54px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Checkbox
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="27" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Checkbox&lt;br&gt;
                </text>
            </switch>
        </g>
        <rect width="74.18" height="30" x="380" y="577" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(405.5,585.5)">
            <switch>
                <foreignObject width="22" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:24px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Icon
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="11" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Icon&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#6c8ebf" stroke-miterlimit="10" d="M 445 547 L 445 567 L 417 567 L 417 570.63" pointer-events="none"/>
        <path fill="#6c8ebf" stroke="#6c8ebf" stroke-miterlimit="10" d="M 417 575.88 L 413.5 568.88 L 417 570.63 L 420.5 568.88 Z" pointer-events="none"/>
        <rect width="74.18" height="30" x="475.82" y="577" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(494.5,585.5)">
            <switch>
                <foreignObject width="36" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:&quot;Courier New&quot;;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:38px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Label
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="18" y="12" fill="#000000" font-family="Courier New" font-size="12px" text-anchor="middle">
                    Label&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#6c8ebf" stroke-miterlimit="10" d="M 482 547 L 482 567 L 513 567 L 513 570.63" pointer-events="none"/>
        <path fill="#6c8ebf" stroke="#6c8ebf" stroke-miterlimit="10" d="M 513 575.88 L 509.5 568.88 L 513 570.63 L 516.5 568.88 Z" pointer-events="none"/>
        <rect width="430" height="240" x="580" y="433" fill="none" stroke="#000000" stroke-dasharray="3 3" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 808 478 L 808 502 L 860 502 L 860 520.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 860 525.88 L 856.5 518.88 L 860 520.63 L 863.5 518.88 Z" pointer-events="none"/>
        <rect width="157" height="30" x="690" y="448" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(755.5,456.5)">
            <switch>
                <foreignObject width="25" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:27px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Tabs
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="13" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Tabs&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 629 547 L 625 547 L 625 559.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 625 564.88 L 621.5 557.88 L 625 559.63 L 628.5 557.88 Z" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 708 547 L 725 547 L 725 559.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 725 564.88 L 721.5 557.88 L 725 559.63 L 728.5 557.88 Z" pointer-events="none"/>
        <rect width="157" height="41" x="590" y="506" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="6.15" ry="6.15"/>
        <g transform="translate(646.5,520.5)">
            <switch>
                <foreignObject width="43" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:43px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            TabItem
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="22" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    TabItem&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#6c8ebf" stroke-miterlimit="10" d="M 729 478 L 729 498 L 670 498 L 670 486 L 669 486 L 669 499.63" pointer-events="none"/>
        <path fill="#6c8ebf" stroke="#6c8ebf" stroke-miterlimit="10" d="M 669 504.88 L 665.5 497.88 L 669 499.63 L 672.5 497.88 Z" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 625 607 L 625 619.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 625 624.88 L 621.5 617.88 L 625 619.63 L 628.5 617.88 Z" pointer-events="none"/>
        <rect width="70" height="41" x="590" y="566" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="6.15" ry="6.15"/>
        <g transform="translate(604.5,580.5)">
            <switch>
                <foreignObject width="40" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:40px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Header
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="20" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Header&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 725 607 L 725 616.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 725 621.88 L 721.5 614.88 L 725 616.63 L 728.5 614.88 Z" pointer-events="none"/>
        <rect width="70" height="41" x="690" y="566" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="6.15" ry="6.15"/>
        <g transform="translate(703.5,580.5)">
            <switch>
                <foreignObject width="42" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:44px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Content
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="21" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Content&lt;br&gt;
                </text>
            </switch>
        </g>
        <rect width="74.18" height="30" x="587.82" y="626" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(609.5,634.5)">
            <switch>
                <foreignObject width="30" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:30px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            Label
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="15" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Label&lt;br&gt;
                </text>
            </switch>
        </g>
        <rect width="74.18" height="30" x="686.82" y="624" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(694.5,632.5)">
            <switch>
                <foreignObject width="58" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:&quot;Courier New&quot;;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:58px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            children
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="29" y="12" fill="#000000" font-family="Courier New" font-size="12px" text-anchor="middle">
                    children&lt;br&gt;
                </text>
            </switch>
        </g>
        <g transform="translate(854.5,530.5)">
            <switch>
                <foreignObject width="10" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:12px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            ...
                        </div>
                    </div>
                </foreignObject>
                <text x="5" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    ...
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 273 340 L 273 510.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 273 515.88 L 269.5 508.88 L 273 510.63 L 276.5 508.88 Z" pointer-events="none"/>
        <g transform="translate(210.5,438.5)">
            <switch>
                <foreignObject width="122" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:&quot;Courier New&quot;;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;background-color:#ffffff">
                            ReactDOM.render()
                        </div>
                    </div>
                </foreignObject>
                <text x="61" y="12" fill="#000000" font-family="Courier New" font-size="12px" text-anchor="middle">
                    ReactDOM.render()
                </text>
            </switch>
        </g>
        <rect width="110" height="30" x="218" y="310" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(245.5,318.5)">
            <switch>
                <foreignObject width="54" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:56px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            fab-button
                        </div>
                    </div>
                </foreignObject>
                <text x="27" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    fab-button
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 464 340 L 464 429 L 464 510.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 464 515.88 L 460.5 508.88 L 464 510.63 L 467.5 508.88 Z" pointer-events="none"/>
        <g transform="translate(402.5,434.5)">
            <switch>
                <foreignObject width="122" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:&quot;Courier New&quot;;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;background-color:#ffffff">
                            ReactDOM.render()
                        </div>
                    </div>
                </foreignObject>
                <text x="61" y="12" fill="#000000" font-family="Courier New" font-size="12px" text-anchor="middle">
                    ReactDOM.render()
                </text>
            </switch>
        </g>
        <rect width="110" height="30" x="408.5" y="310" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(427.5,318.5)">
            <switch>
                <foreignObject width="72" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:72px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            fab-checkbox
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="36" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    fab-checkbox&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 747 300 L 759 300 L 759 439.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 759 444.88 L 755.5 437.88 L 759 439.63 L 762.5 437.88 Z" pointer-events="none"/>
        <g transform="translate(707.5,404.5)">
            <switch>
                <foreignObject width="122" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:&quot;Courier New&quot;;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;background-color:#ffffff">
                            <i>
                                ReactDOM.render()
                            </i>
                        </div>
                    </div>
                </foreignObject>
                <text x="61" y="12" fill="#000000" font-family="Courier New" font-size="12px" text-anchor="middle">
                    &lt;i&gt;ReactDOM.render()&lt;/i&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 692 285 L 643 285 L 643 303.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 643 308.88 L 639.5 301.88 L 643 303.63 L 646.5 301.88 Z" pointer-events="none"/>
        <rect width="110" height="30" x="692" y="270" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(724.5,278.5)">
            <switch>
                <foreignObject width="44" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:44px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            fab-tabs
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="22" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    fab-tabs&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 644 340 L 644 499.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 644 504.88 L 640.5 497.88 L 644 499.63 L 647.5 497.88 Z" pointer-events="none"/>
        <g transform="translate(573.5,403.5)">
            <switch>
                <foreignObject width="112" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:11px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;background-color:#ffffff">
                            <font face="Courier New">
                                <i>
                                    ReactDOM.render()
                                </i>
                            </font>
                        </div>
                    </div>
                </foreignObject>
                <text x="56" y="12" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    [Not supported by viewer]
                </text>
            </switch>
        </g>
        <rect width="110" height="30" x="588" y="310" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(610.5,318.5)">
            <switch>
                <foreignObject width="64" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:66px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            fab-tab-item
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="32" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    fab-tab-item&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 289 160 L 289 235 L 273 235 L 273 303.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 273 308.88 L 269.5 301.88 L 273 303.63 L 276.5 301.88 Z" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 369 160 L 369 235 L 464 235 L 464 303.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 464 308.88 L 460.5 301.88 L 464 303.63 L 467.5 301.88 Z" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 655 160 L 655 235 L 491 235 L 491 303.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 491 308.88 L 487.5 301.88 L 491 303.63 L 494.5 301.88 Z" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-dasharray="3 3" stroke-miterlimit="10" d="M 0 390 L 1010 390" pointer-events="none"/>
        <g transform="translate(9.5,545.5)rotate(-90,17,0)">
            <switch>
                <foreignObject width="34" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            React
                        </div>
                    </div>
                </foreignObject>
                <text x="17" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    React
                </text>
            </switch>
        </g>
        <g transform="translate(14.5,207.5)rotate(-90,23.5,12)">
            <switch>
                <foreignObject width="47" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;background-color:#ffffff">
                            Angular
                        </div>
                    </div>
                </foreignObject>
                <text x="24" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    Angular
                </text>
            </switch>
        </g>
        <rect width="160" height="30" x="248.5" y="130" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(266.5,138.5)">
            <switch>
                <foreignObject width="124" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:124px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            my-angular-component
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="62" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    my-angular-component&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 700 160 L 700 215 L 747 215 L 747 263.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 747 268.88 L 743.5 261.88 L 747 263.63 L 750.5 261.88 Z" pointer-events="none"/>
        <rect width="180" height="30" x="610" y="130" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(622.5,138.5)">
            <switch>
                <foreignObject width="154" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:156px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            my-other-angular-component
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="77" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    my-other-angular-component&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 488 70 L 488 100 L 329 100 L 329 123.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 329 128.88 L 325.5 121.88 L 329 123.63 L 332.5 121.88 Z" pointer-events="none"/>
        <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M 568 70 L 568 100 L 700 100 L 700 123.63" pointer-events="none"/>
        <path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M 700 128.88 L 696.5 121.88 L 700 123.63 L 703.5 121.88 Z" pointer-events="none"/>
        <rect width="160" height="30" x="447.5" y="40" fill="#f8cecc" stroke="#000000" pointer-events="none" rx="4.5" ry="4.5"/>
        <g transform="translate(517.5,48.5)">
            <switch>
                <foreignObject width="20" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Helvetica;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:22px;white-space:nowrap;overflow-wrap:normal;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            app
                            <br/>
                        </div>
                    </div>
                </foreignObject>
                <text x="10" y="12" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    app&lt;br&gt;
                </text>
            </switch>
        </g>
        <path fill="none" stroke="#000000" stroke-dasharray="3 3" stroke-miterlimit="10" d="M 0 390 L 1010 390" pointer-events="none"/>
        <g transform="translate(9.5,545.5)rotate(-90,17,0)">
            <switch>
                <foreignObject width="34" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            React
                        </div>
                    </div>
                </foreignObject>
                <text x="17" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    React
                </text>
            </switch>
        </g>
        <g transform="translate(14.5,207.5)rotate(-90,23.5,12)">
            <switch>
                <foreignObject width="47" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;background-color:#ffffff">
                            Angular
                        </div>
                    </div>
                </foreignObject>
                <text x="24" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    Angular
                </text>
            </switch>
        </g>
        <rect width="247" height="80" x="411" y="0" fill="none" stroke="#000000" stroke-dasharray="1 1" pointer-events="none"/>
        <g transform="translate(422.5,13.5)">
            <switch>
                <foreignObject width="66" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:67px;white-space:nowrap;overflow-wrap:normal">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            AppModule
                        </div>
                    </div>
                </foreignObject>
                <text x="33" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    AppModule
                </text>
            </switch>
        </g>
        <rect width="247" height="80" x="220" y="90" fill="none" stroke="#000000" stroke-dasharray="1 1" pointer-events="none"/>
        <g transform="translate(231.5,103.5)">
            <switch>
                <foreignObject width="69" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:70px;white-space:nowrap;overflow-wrap:normal">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            FirstModule
                        </div>
                    </div>
                </foreignObject>
                <text x="35" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    FirstModule
                </text>
            </switch>
        </g>
        <rect width="247" height="80" x="580" y="92" fill="none" stroke="#000000" stroke-dasharray="1 1" pointer-events="none"/>
        <g transform="translate(591.5,105.5)">
            <switch>
                <foreignObject width="87" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:88px;white-space:nowrap;overflow-wrap:normal">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            SecondModule
                        </div>
                    </div>
                </foreignObject>
                <text x="44" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    SecondModule
                </text>
            </switch>
        </g>
        <rect width="280" height="110" x="560" y="250" fill="none" stroke="#000000" stroke-dasharray="1 1" pointer-events="none"/>
        <g transform="translate(571.5,263.5)">
            <switch>
                <foreignObject width="87" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:88px;white-space:nowrap;overflow-wrap:normal">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            FabTabModule
                        </div>
                    </div>
                </foreignObject>
                <text x="44" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    FabTabModule
                </text>
            </switch>
        </g>
        <rect width="170" height="90" x="170" y="270" fill="none" stroke="#000000" stroke-dasharray="1 1" pointer-events="none"/>
        <g transform="translate(181.5,283.5)">
            <switch>
                <foreignObject width="105" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:106px;white-space:nowrap;overflow-wrap:normal">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            FabButtonModule
                        </div>
                    </div>
                </foreignObject>
                <text x="53" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    FabButtonModule
                </text>
            </switch>
        </g>
        <rect width="200" height="90" x="350" y="270" fill="none" stroke="#000000" stroke-dasharray="1 1" pointer-events="none"/>
        <g transform="translate(361.5,283.5)">
            <switch>
                <foreignObject width="123" height="12" pointer-events="all" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;font-size:12px;font-family:Verdana;color:rgb(0, 0, 0);line-height:1.2;vertical-align:top;width:124px;white-space:nowrap;overflow-wrap:normal">
                        <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit">
                            FabCheckboxModule
                        </div>
                    </div>
                </foreignObject>
                <text x="62" y="12" fill="#000000" font-family="Verdana" font-size="12px" text-anchor="middle">
                    FabCheckboxModule
                </text>
            </switch>
        </g>
    </g>
</svg>
