npm - @dxos/ui-theme - Versions diffs - 0.0.0 - Mend

@dxos/ui-theme 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/LICENSE +8 -0
package/README.md +25 -0
package/package.json +80 -0
package/src/Tokens.stories.tsx +88 -0
package/src/config/index.ts +6 -0
package/src/config/tailwind.ts +250 -0
package/src/config/tokens/alias-colors.ts +39 -0
package/src/config/tokens/index.ts +92 -0
package/src/config/tokens/lengths.ts +97 -0
package/src/config/tokens/physical-colors.ts +125 -0
package/src/config/tokens/semantic-colors.ts +27 -0
package/src/config/tokens/sememes-calls.ts +17 -0
package/src/config/tokens/sememes-codemirror.ts +50 -0
package/src/config/tokens/sememes-hue.ts +54 -0
package/src/config/tokens/sememes-sheet.ts +62 -0
package/src/config/tokens/sememes-system.ts +302 -0
package/src/config/tokens/sizes.ts +7 -0
package/src/config/tokens/types.ts +9 -0
package/src/docs/theme.drawio.svg +635 -0
package/src/index.ts +19 -0
package/src/plugins/esbuild-plugin.ts +65 -0
package/src/plugins/plugin.ts +130 -0
package/src/plugins/resolveContent.ts +51 -0
package/src/styles/components/README.md +6 -0
package/src/styles/components/anchored-overflow.ts +20 -0
package/src/styles/components/avatar.ts +96 -0
package/src/styles/components/breadcrumb.ts +29 -0
package/src/styles/components/button.ts +48 -0
package/src/styles/components/dialog.ts +36 -0
package/src/styles/components/icon-button.ts +20 -0
package/src/styles/components/icon.ts +19 -0
package/src/styles/components/index.ts +27 -0
package/src/styles/components/input.ts +177 -0
package/src/styles/components/link.ts +26 -0
package/src/styles/components/list.ts +46 -0
package/src/styles/components/main.ts +36 -0
package/src/styles/components/menu.ts +60 -0
package/src/styles/components/message.ts +36 -0
package/src/styles/components/popover.ts +40 -0
package/src/styles/components/scroll-area.ts +43 -0
package/src/styles/components/select.ts +60 -0
package/src/styles/components/separator.ts +24 -0
package/src/styles/components/status.ts +32 -0
package/src/styles/components/tag.ts +23 -0
package/src/styles/components/toast.ts +55 -0
package/src/styles/components/toolbar.ts +29 -0
package/src/styles/components/tooltip.ts +29 -0
package/src/styles/components/treegrid.ts +37 -0
package/src/styles/fragments/density.ts +17 -0
package/src/styles/fragments/dimension.ts +8 -0
package/src/styles/fragments/disabled.ts +6 -0
package/src/styles/fragments/elevation.ts +29 -0
package/src/styles/fragments/focus.ts +16 -0
package/src/styles/fragments/group.ts +12 -0
package/src/styles/fragments/hover.ts +25 -0
package/src/styles/fragments/index.ts +20 -0
package/src/styles/fragments/layout.ts +7 -0
package/src/styles/fragments/motion.ts +6 -0
package/src/styles/fragments/ornament.ts +10 -0
package/src/styles/fragments/selected.ts +45 -0
package/src/styles/fragments/shimmer.ts +9 -0
package/src/styles/fragments/size.ts +117 -0
package/src/styles/fragments/surface.ts +29 -0
package/src/styles/fragments/text.ts +12 -0
package/src/styles/fragments/valence.ts +46 -0
package/src/styles/index.ts +7 -0
package/src/styles/layers/README.md +15 -0
package/src/styles/layers/anchored-overflow.css +9 -0
package/src/styles/layers/animation.css +17 -0
package/src/styles/layers/attention.css +8 -0
package/src/styles/layers/base.css +25 -0
package/src/styles/layers/button.css +76 -0
package/src/styles/layers/can-scroll.css +26 -0
package/src/styles/layers/checkbox.css +50 -0
package/src/styles/layers/dialog.css +42 -0
package/src/styles/layers/drag-preview.css +18 -0
package/src/styles/layers/focus-ring.css +224 -0
package/src/styles/layers/hues.css +110 -0
package/src/styles/layers/index.css +26 -0
package/src/styles/layers/main.css +160 -0
package/src/styles/layers/native.css +20 -0
package/src/styles/layers/positioning.css +23 -0
package/src/styles/layers/size.css +397 -0
package/src/styles/layers/surfaces.css +31 -0
package/src/styles/layers/tag.css +132 -0
package/src/styles/layers/tldraw.css +91 -0
package/src/styles/layers/tokens.css +45 -0
package/src/styles/layers/typography.css +157 -0
package/src/styles/theme.ts +69 -0
package/src/tailwind.ts +5 -0
package/src/theme.css +9 -0
package/src/types.ts +7 -0
package/src/typings.d.ts +8 -0
package/src/util/hash-styles.ts +168 -0
package/src/util/index.ts +6 -0
package/src/util/mx.ts +51 -0
package/src/util/withLogical.ts +114 -0

package/src/docs/theme.drawio.svg ADDED Viewed

@@ -0,0 +1,635 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="914px" height="1794px" viewBox="-0.5 -0.5 914 1794" content="&lt;mxfile&gt;&lt;diagram id=&quot;xes-K0iwaH3ju0ZghSWJ&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <rect x="88" y="1080" width="144" height="128" fill="#e1e4e6" stroke="#c0c3c5" pointer-events="all"/>
+        <rect x="188" y="1084" width="40" height="120" fill="#c0c3c5" stroke="#9b9ea2" pointer-events="all"/>
+        <rect x="140" y="1084" width="40" height="120" fill="#c0c3c5" stroke="#9b9ea2" pointer-events="all"/>
+        <rect x="92" y="1084" width="40" height="120" fill="#c0c3c5" stroke="#9b9ea2" pointer-events="all"/>
+        <rect x="160" y="80" width="128" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 126px; height: 1px; padding-top: 87px; margin-left: 161px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                32px
+                                <br/>
+                                (2rem)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="224" y="99" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    32px...
+                </text>
+            </switch>
+        </g>
+        <rect x="32" y="80" width="128" height="80" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 126px; height: 1px; padding-top: 87px; margin-left: 33px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                40px
+                                <br/>
+                                (2.5rem)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="96" y="99" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    40px...
+                </text>
+            </switch>
+        </g>
+        <rect x="32" y="448" width="64" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="96" y="448" width="256" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="352" y="448" width="64" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="364.5" y="460" width="40" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="32" y="64" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 72px; margin-left: 34px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Coarse
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="34" y="76" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Coarse
+                </text>
+            </switch>
+        </g>
+        <rect x="32" y="432" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 440px; margin-left: 34px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Card
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="34" y="444" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Card
+                </text>
+            </switch>
+        </g>
+        <rect x="160" y="64" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 72px; margin-left: 162px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Fine
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="162" y="76" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Fine
+                </text>
+            </switch>
+        </g>
+        <rect x="96" y="512" width="320" height="384" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="44.5" y="716" width="40" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="105.5" y="712" width="303" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 736px; margin-left: 110px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                24px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="110" y="740" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    24px
+                </text>
+            </switch>
+        </g>
+        <path d="M 448 576 L 0 576" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="1 2" pointer-events="stroke"/>
+        <rect x="105" y="456" width="239" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 235px; height: 1px; padding-top: 480px; margin-left: 109px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                24px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="109" y="484" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    24px
+                </text>
+            </switch>
+        </g>
+        <rect x="44" y="460" width="40" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="32.5" y="320" width="64" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="96.5" y="320" width="256" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="352.5" y="320" width="64" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="364.5" y="332" width="40" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="32.5" y="304" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 312px; margin-left: 35px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Toolbar
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="35" y="316" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Toolbar
+                </text>
+            </switch>
+        </g>
+        <rect x="105.5" y="328" width="239" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 235px; height: 1px; padding-top: 352px; margin-left: 110px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                24px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="110" y="356" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    24px
+                </text>
+            </switch>
+        </g>
+        <rect x="44.5" y="332" width="40" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 352px; margin-left: 46px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                20px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="65" y="356" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    20px
+                </text>
+            </switch>
+        </g>
+        <path d="M 448 512 L 0 512" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="1 2" pointer-events="stroke"/>
+        <rect x="32" y="512" width="64" height="384" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <path d="M 448.5 761.63 L 448.5 710.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 448.5 766.88 L 445 759.88 L 448.5 761.63 L 452 759.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 448.5 705.12 L 452 712.12 L 448.5 710.37 L 445 712.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="456.5" y="728" width="56" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 54px; height: 1px; padding-top: 736px; margin-left: 459px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                32px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="459" y="740" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    32px
+                </text>
+            </switch>
+        </g>
+        <rect x="106" y="776" width="303" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 800px; margin-left: 110px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                24px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="110" y="804" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    24px
+                </text>
+            </switch>
+        </g>
+        <path d="M 448 640 L 0 640" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="1 2" pointer-events="stroke"/>
+        <rect x="96.5" y="1280" width="303" height="64" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 301px; height: 1px; padding-top: 1312px; margin-left: 98px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                32px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="248" y="1316" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    32px
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1248" width="303" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 301px; height: 1px; padding-top: 1264px; margin-left: 98px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                16px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="248" y="1268" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    16px
+                </text>
+            </switch>
+        </g>
+        <rect x="96" y="1232" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 1240px; margin-left: 98px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Form
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="98" y="1244" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Form
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1256" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 116px; height: 1px; padding-top: 1264px; margin-left: 101px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Label
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1268" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Label
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1304" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 116px; height: 1px; padding-top: 1312px; margin-left: 101px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Input
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1316" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Input
+                </text>
+            </switch>
+        </g>
+        <rect x="608" y="80" width="304" height="304" rx="15.2" ry="15.2" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="632" y="104" width="256" height="256" fill="none" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="80" y="8" width="128" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 126px; height: 1px; padding-top: 16px; margin-left: 82px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Space Grotesk&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                p-1 = 0.25rem = 4px
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="82" y="20" fill="rgb(0, 0, 0)" font-family="Space Grotesk" font-size="12px">
+                    p-1 = 0.25rem = 4px
+                </text>
+            </switch>
+        </g>
+        <rect x="32.5" y="0" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 30px; height: 1px; padding-top: 16px; margin-left: 34px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                p-4
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="49" y="20" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    p-4
+                </text>
+            </switch>
+        </g>
+        <rect x="892" y="104" width="16" height="256" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="892" y="104" width="16" height="88" fill="#393c3e" stroke="#1e1f20" pointer-events="all"/>
+        <rect x="128" y="208" width="96" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 94px; height: 1px; padding-top: 215px; margin-left: 129px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                24px (text-md)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="176" y="227" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    24px (text-md)
+                </text>
+            </switch>
+        </g>
+        <rect x="32" y="200" width="96" height="56" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 94px; height: 1px; padding-top: 207px; margin-left: 33px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                28px (text-lg)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="80" y="219" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    28px (text-lg)
+                </text>
+            </switch>
+        </g>
+        <rect x="224" y="216" width="96" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 94px; height: 1px; padding-top: 223px; margin-left: 225px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                20px (text-sm)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="272" y="235" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    20px (text-sm)
+                </text>
+            </switch>
+        </g>
+        <rect x="320" y="224" width="96" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 94px; height: 1px; padding-top: 231px; margin-left: 321px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                16px (text-xs)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="368" y="243" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    16px (text-xs)
+                </text>
+            </switch>
+        </g>
+        <rect x="888" y="80" width="24" height="24" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 22px; height: 1px; padding-top: 92px; margin-left: 889px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <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;">
+                                p-3
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="900" y="96" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    p-3
+                </text>
+            </switch>
+        </g>
+        <rect x="96" y="1088" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="96" y="1128" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="96" y="1168" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="144" y="1088" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="144" y="1128" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="144" y="1168" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="192" y="1088" width="32" height="32" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <rect x="96" y="1056" width="120" height="16" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 1064px; margin-left: 98px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <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;">
+                                Stack
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="98" y="1068" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">
+                    Stack
+                </text>
+            </switch>
+        </g>
+        <path d="M 448 704 L 0 704" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="1 2" pointer-events="stroke"/>
+        <path d="M 448 768 L 0 768" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="1 2" pointer-events="stroke"/>
+        <path d="M 448 832 L 0 832" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="1 2" pointer-events="stroke"/>
+        <rect x="32" y="512" width="384" height="192" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <path d="M 372 351.86 L 396 351.95" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 372 339.95 L 396 340.04" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 372 363.95 L 396 364.04" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
+        <rect x="96.5" y="1680" width="303" height="32" fill="#e1e4e6" stroke="#c0c3c5" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1696px; margin-left: 101px;">
+                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                gap (3)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1699" fill="#000000" font-family="Helvetica" font-size="10px">
+                    gap (3)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1600" width="303" height="32" fill="#e1e4e6" stroke="#c0c3c5" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1616px; margin-left: 101px;">
+                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                gap (2)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1619" fill="#000000" font-family="Helvetica" font-size="10px">
+                    gap (2)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1520" width="303" height="32" fill="#e1e4e6" stroke="#c0c3c5" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1536px; margin-left: 101px;">
+                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                gap (1)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1539" fill="#000000" font-family="Helvetica" font-size="10px">
+                    gap (1)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1440" width="303" height="32" fill="#e1e4e6" stroke="#c0c3c5" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1456px; margin-left: 101px;">
+                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                gap (0)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1459" fill="#000000" font-family="Helvetica" font-size="10px">
+                    gap (0)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1760" width="303" height="32" fill="#e1e4e6" stroke="#c0c3c5" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1776px; margin-left: 101px;">
+                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                gap (4)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1779" fill="#000000" font-family="Helvetica" font-size="10px">
+                    gap (4)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1472" width="303" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1496px; margin-left: 101px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                cell (0)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1499" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
+                    cell (0)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1552" width="303" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1576px; margin-left: 101px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                cell (1)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1579" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
+                    cell (1)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1632" width="303" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1656px; margin-left: 101px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                cell (2)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1659" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
+                    cell (2)
+                </text>
+            </switch>
+        </g>
+        <rect x="96.5" y="1712" width="303" height="48" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 299px; height: 1px; padding-top: 1736px; margin-left: 101px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
+                                cell (3)
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="101" y="1739" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
+                    cell (3)
+                </text>
+            </switch>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>