utopia-ui/lib/Components.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   version="1.1"
   width="741"
   height="541"
   viewBox="-0.5 -0.5 741 541"
   id="svg134"
   sodipodi:docname="Components.svg"
   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <sodipodi:namedview
     id="namedview136"
     pagecolor="#ffffff"
     bordercolor="#111111"
     borderopacity="1"
     inkscape:showpageshadow="0"
     inkscape:pageopacity="0"
     inkscape:pagecheckerboard="1"
     inkscape:deskcolor="#d1d1d1"
     showgrid="false"
     inkscape:zoom="1.2315609"
     inkscape:cx="346.71448"
     inkscape:cy="271.20056"
     inkscape:window-width="1536"
     inkscape:window-height="888"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg134" />
  <defs
     id="defs2" />
  <g
     id="g124"
     transform="translate(-44,-20)">
    <rect
       x="44"
       y="20"
       width="740"
       height="540"
       fill="#ffffff"
       stroke="#000000"
       pointer-events="all"
       id="rect4" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g10">
      <switch
         id="switch8">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 738px; height: 1px; padding-top: 27px; margin-left: 46px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">AppShell</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="46"
           y="39"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text6">AppShell</text>
      </switch>
    </g>
    <rect
       x="199"
       y="140"
       width="555"
       height="380"
       fill="#f5f5f5"
       stroke="#666666"
       pointer-events="all"
       id="rect12" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g18">
      <switch
         id="switch16">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 553px; height: 1px; padding-top: 147px; margin-left: 201px;">
            <xhtml:div
               data-drawio-colors="color: #333333; "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Content</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="201"
           y="159"
           fill="#333333"
           font-family="Helvetica"
           font-size="12px"
           id="text14">Content</text>
      </switch>
    </g>
    <rect
       x="224"
       y="170"
       width="500"
       height="250"
       fill="#d5e8d4"
       stroke="#82b366"
       pointer-events="all"
       id="rect20" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g26">
      <switch
         id="switch24">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 498px; height: 1px; padding-top: 177px; margin-left: 226px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">MapContainer</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="226"
           y="189"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text22">MapContainer</text>
      </switch>
    </g>
    <rect
       x="256.5"
       y="340"
       width="210"
       height="60"
       fill="#e1d5e7"
       stroke="#9673a6"
       pointer-events="all"
       id="rect28" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g34">
      <switch
         id="switch32">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 347px; margin-left: 259px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tags</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="259"
           y="359"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text30">Tags</text>
      </switch>
    </g>
    <rect
       x="496.5"
       y="340"
       width="200"
       height="60"
       fill="#fff2cc"
       stroke="#d6b656"
       pointer-events="all"
       id="rect36" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g42">
      <switch
         id="switch40">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 198px; height: 1px; padding-top: 347px; margin-left: 499px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Permissions</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="499"
           y="359"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text38">Permissions</text>
      </switch>
    </g>
    <rect
       x="576.5"
       y="200"
       width="120"
       height="50"
       fill="#ffe6cc"
       stroke="#d79b00"
       pointer-events="all"
       id="rect44" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g50">
      <switch
         id="switch48">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 207px; margin-left: 579px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Layer</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="579"
           y="219"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text46">Layer</text>
      </switch>
    </g>
    <rect
       x="576.5"
       y="270"
       width="120"
       height="50"
       fill="#ffe6cc"
       stroke="#d79b00"
       pointer-events="all"
       id="rect52" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g58">
      <switch
         id="switch56">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 277px; margin-left: 579px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Layer</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="579"
           y="289"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text54">Layer</text>
      </switch>
    </g>
    <rect
       x="256.5"
       y="200"
       width="277.5"
       height="120"
       fill="#ffe6cc"
       stroke="#d79b00"
       pointer-events="all"
       id="rect60" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g66">
      <switch
         id="switch64">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 276px; height: 1px; padding-top: 207px; margin-left: 259px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Layer</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="259"
           y="219"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text62">Layer</text>
      </switch>
    </g>
    <rect
       x="74"
       y="140"
       width="100"
       height="380"
       fill="#f5f5f5"
       stroke="#666666"
       pointer-events="all"
       id="rect68" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g74">
      <switch
         id="switch72">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 147px; margin-left: 76px;">
            <xhtml:div
               data-drawio-colors="color: #333333; "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Sidebar</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="76"
           y="159"
           fill="#333333"
           font-family="Helvetica"
           font-size="12px"
           id="text70">Sidebar</text>
      </switch>
    </g>
    <rect
       x="224"
       y="440"
       width="150"
       height="60"
       fill="#ffffff"
       stroke="#000000"
       pointer-events="all"
       id="rect76" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g82">
      <switch
         id="switch80">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 447px; margin-left: 226px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Settings</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="226"
           y="459"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text78">Settings</text>
      </switch>
    </g>
    <rect
       x="401.5"
       y="440"
       width="150"
       height="60"
       fill="#ffffff"
       stroke="#000000"
       pointer-events="all"
       id="rect84" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g90">
      <switch
         id="switch88">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 447px; margin-left: 404px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Profile</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="404"
           y="459"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text86">Profile</text>
      </switch>
    </g>
    <rect
       x="576.5"
       y="440"
       width="150"
       height="60"
       fill="#ffffff"
       stroke="#000000"
       pointer-events="all"
       id="rect92" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g98">
      <switch
         id="switch96">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 447px; margin-left: 579px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">another Page</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="579"
           y="459"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text94">another Page</text>
      </switch>
    </g>
    <rect
       x="74"
       y="60"
       width="680"
       height="60"
       fill="#f5f5f5"
       stroke="#666666"
       pointer-events="all"
       id="rect100" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g106">
      <switch
         id="switch104">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 678px; height: 1px; padding-top: 67px; margin-left: 76px;">
            <xhtml:div
               data-drawio-colors="color: #333333; "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">NavBar</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="76"
           y="79"
           fill="#333333"
           font-family="Helvetica"
           font-size="12px"
           id="text102">NavBar</text>
      </switch>
    </g>
    <rect
       x="284"
       y="230"
       width="100"
       height="70"
       fill="#dae8fc"
       stroke="#6c8ebf"
       pointer-events="all"
       id="rect108" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g114">
      <switch
         id="switch112">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 237px; margin-left: 286px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">ViewPopup</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="286"
           y="249"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text110">ViewPopup</text>
      </switch>
    </g>
    <rect
       x="414"
       y="230"
       width="100"
       height="70"
       fill="#f8cecc"
       stroke="#b85450"
       pointer-events="all"
       id="rect116" />
    <g
       transform="translate(-0.5,-0.5)"
       id="g122">
      <switch
         id="switch120">
        <foreignObject
           pointer-events="none"
           width="100%"
           height="100%"
           requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
           style="overflow: visible; text-align: left;">
          <xhtml:div
             style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 237px; margin-left: 416px;">
            <xhtml:div
               data-drawio-colors="color: rgb(0, 0, 0); "
               style="box-sizing: border-box; font-size: 0px; text-align: left;">
              <xhtml:div
                 style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">FormPopup</xhtml:div>
            </xhtml:div>
          </xhtml:div>
        </foreignObject>
        <text
           x="416"
           y="249"
           fill="#000000"
           font-family="Helvetica"
           font-size="12px"
           id="text118">FormPopup</text>
      </switch>
    </g>
  </g>
  <switch
     id="switch132"
     transform="translate(-44,-20)">
    <g
       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
       id="g126" />
    <a
       transform="translate(0,-5)"
       xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems"
       target="_blank"
       id="a130">
      <text
         text-anchor="middle"
         font-size="10px"
         x="50%"
         y="100%"
         id="text128">Text is not SVG - cannot display</text>
    </a>
  </switch>
</svg>