npm - @dxos/ui-theme - Versions diffs - 0.8.4-main.fbb7a13 → 0.8.4-staging.ac66bdf99f - Mend

@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-staging.ac66bdf99f

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 (384) hide show

package/dist/lib/browser/index.mjs +766 -2802
package/dist/lib/browser/index.mjs.map +4 -4
package/dist/lib/browser/meta.json +1 -1
package/dist/lib/node-esm/index.mjs +766 -2802
package/dist/lib/node-esm/index.mjs.map +4 -4
package/dist/lib/node-esm/meta.json +1 -1
package/dist/plugin/node-cjs/main.css +1529 -0
package/dist/plugin/node-cjs/main.css.map +7 -0
package/dist/plugin/node-cjs/meta.json +1 -1
package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs +137 -0
package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map +7 -0
package/dist/plugin/node-esm/main.css +1529 -0
package/dist/plugin/node-esm/main.css.map +7 -0
package/dist/plugin/node-esm/meta.json +1 -1
package/dist/plugin/node-esm/plugins/ThemePlugin.mjs +105 -0
package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map +7 -0
package/dist/types/src/Theme.stories.d.ts +27 -0
package/dist/types/src/Theme.stories.d.ts.map +1 -0
package/dist/types/src/defs.d.ts +21 -0
package/dist/types/src/defs.d.ts.map +1 -0
package/dist/types/src/fragments/density.d.ts +4 -0
package/dist/types/src/fragments/density.d.ts.map +1 -0
package/dist/types/src/fragments/disabled.d.ts.map +1 -0
package/dist/types/src/fragments/hover.d.ts +10 -0
package/dist/types/src/fragments/hover.d.ts.map +1 -0
package/dist/types/src/fragments/index.d.ts +5 -0
package/dist/types/src/fragments/index.d.ts.map +1 -0
package/dist/types/src/fragments/text.d.ts +2 -0
package/dist/types/src/fragments/text.d.ts.map +1 -0
package/dist/types/src/index.d.ts +3 -10
package/dist/types/src/index.d.ts.map +1 -1
package/dist/types/src/plugins/ThemePlugin.d.ts +16 -0
package/dist/types/src/plugins/ThemePlugin.d.ts.map +1 -0
package/dist/types/src/plugins/dark-mode.d.ts +1 -0
package/dist/types/src/plugins/dark-mode.d.ts.map +1 -0
package/dist/types/src/theme/components/avatar.d.ts.map +1 -0
package/dist/types/src/theme/components/breadcrumb.d.ts.map +1 -0
package/dist/types/src/theme/components/button.d.ts +15 -0
package/dist/types/src/theme/components/button.d.ts.map +1 -0
package/dist/types/src/theme/components/card.d.ts +12 -0
package/dist/types/src/theme/components/card.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/dialog.d.ts +2 -0
package/dist/types/src/theme/components/dialog.d.ts.map +1 -0
package/dist/types/src/theme/components/focus.d.ts +6 -0
package/dist/types/src/theme/components/focus.d.ts.map +1 -0
package/dist/types/src/theme/components/icon-button.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/icon.d.ts +3 -0
package/dist/types/src/theme/components/icon.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/index.d.ts +4 -1
package/dist/types/src/theme/components/index.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/input.d.ts +25 -21
package/dist/types/src/theme/components/input.d.ts.map +1 -0
package/dist/types/src/theme/components/link.d.ts.map +1 -0
package/dist/types/src/theme/components/list.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/main.d.ts +2 -7
package/dist/types/src/theme/components/main.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/menu.d.ts +1 -1
package/dist/types/src/theme/components/menu.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/message.d.ts +1 -0
package/dist/types/src/theme/components/message.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/popover.d.ts +1 -1
package/dist/types/src/theme/components/popover.d.ts.map +1 -0
package/dist/types/src/theme/components/scroll-area.d.ts +32 -0
package/dist/types/src/theme/components/scroll-area.d.ts.map +1 -0
package/dist/types/src/theme/components/select.d.ts.map +1 -0
package/dist/types/src/theme/components/separator.d.ts.map +1 -0
package/dist/types/src/theme/components/skeleton.d.ts +7 -0
package/dist/types/src/theme/components/skeleton.d.ts.map +1 -0
package/dist/types/src/theme/components/splitter.d.ts +4 -0
package/dist/types/src/theme/components/splitter.d.ts.map +1 -0
package/dist/types/src/{styles → theme}/components/status.d.ts +1 -1
package/dist/types/src/theme/components/status.d.ts.map +1 -0
package/dist/types/src/theme/components/tag.d.ts.map +1 -0
package/dist/types/src/theme/components/toast.d.ts.map +1 -0
package/dist/types/src/theme/components/toolbar.d.ts +11 -0
package/dist/types/src/theme/components/toolbar.d.ts.map +1 -0
package/dist/types/src/theme/components/tooltip.d.ts.map +1 -0
package/dist/types/src/theme/components/treegrid.d.ts.map +1 -0
package/dist/types/src/theme/index.d.ts +4 -0
package/dist/types/src/theme/index.d.ts.map +1 -0
package/dist/types/src/theme/primitives/column.d.ts +29 -0
package/dist/types/src/theme/primitives/column.d.ts.map +1 -0
package/dist/types/src/theme/primitives/index.d.ts +3 -0
package/dist/types/src/theme/primitives/index.d.ts.map +1 -0
package/dist/types/src/theme/primitives/panel.d.ts +13 -0
package/dist/types/src/theme/primitives/panel.d.ts.map +1 -0
package/dist/types/src/theme/theme.d.ts +5 -0
package/dist/types/src/theme/theme.d.ts.map +1 -0
package/dist/types/src/{styles/fragments → util}/elevation.d.ts +0 -6
package/dist/types/src/util/elevation.d.ts.map +1 -0
package/dist/types/src/util/hash-styles.d.ts +8 -5
package/dist/types/src/util/hash-styles.d.ts.map +1 -1
package/dist/types/src/util/index.d.ts +3 -0
package/dist/types/src/util/index.d.ts.map +1 -1
package/dist/types/src/util/mx.d.ts +36 -0
package/dist/types/src/util/mx.d.ts.map +1 -1
package/dist/types/src/util/size.d.ts +27 -0
package/dist/types/src/util/size.d.ts.map +1 -0
package/dist/types/src/util/valence.d.ts +4 -0
package/dist/types/src/util/valence.d.ts.map +1 -0
package/dist/types/tsconfig.tsbuildinfo +1 -1
package/package.json +24 -27
package/src/Theme.stories.tsx +224 -0
package/src/css/base/base.css +43 -0
package/src/{styles/layers → css/base}/typography.css +3 -5
package/src/{styles/layers → css/components}/button.css +23 -14
package/src/{styles/layers → css/components}/checkbox.css +12 -8
package/src/{styles/layers → css/components}/dialog.css +16 -15
package/src/{styles/layers/focus-ring.css → css/components/focus.css} +60 -41
package/src/css/components/icon.css +9 -0
package/src/css/components/link.css +9 -0
package/src/css/components/panel.css +117 -0
package/src/css/components/scrollbar.css +24 -0
package/src/css/components/selected.css +30 -0
package/src/css/components/surface.css +34 -0
package/src/css/components/tag.css +130 -0
package/src/css/components/text.css +124 -0
package/src/css/integrations/codemirror.css +34 -0
package/src/css/integrations/tldraw.css +14 -0
package/src/css/layout/main.css +205 -0
package/src/{styles/layers → css/layout}/native.css +6 -4
package/src/css/layout/positioning.css +19 -0
package/src/{styles/layers → css/layout}/size.css +117 -109
package/src/css/theme/animation.css +229 -0
package/src/css/theme/border.css +23 -0
package/src/css/theme/palette.css +36 -0
package/src/css/theme/semantic.css +116 -0
package/src/css/theme/spacing.css +147 -0
package/src/css/theme/styles.css +145 -0
package/src/css/theme/text.css +37 -0
package/src/css/utilities.css +76 -0
package/src/defs.ts +48 -0
package/src/fragments/AUDIT.md +57 -0
package/src/fragments/density.ts +16 -0
package/src/fragments/hover.ts +18 -0
package/src/fragments/index.ts +10 -0
package/src/fragments/text.ts +6 -0
package/src/index.ts +3 -14
package/src/main.css +87 -0
package/src/plugins/ThemePlugin.ts +125 -0
package/src/plugins/dark-mode.ts +22 -0
package/src/plugins/main.css +45 -0
package/src/{styles → theme}/components/avatar.ts +12 -13
package/src/theme/components/button.ts +48 -0
package/src/theme/components/card.ts +102 -0
package/src/{styles → theme}/components/dialog.ts +19 -10
package/src/theme/components/focus.ts +33 -0
package/src/{styles → theme}/components/icon-button.ts +1 -3
package/src/theme/components/icon.ts +28 -0
package/src/{styles → theme}/components/index.ts +4 -1
package/src/theme/components/input.ts +171 -0
package/src/{styles → theme}/components/link.ts +3 -4
package/src/{styles → theme}/components/list.ts +5 -5
package/src/{styles → theme}/components/main.ts +2 -6
package/src/{styles → theme}/components/menu.ts +11 -21
package/src/{styles → theme}/components/message.ts +11 -7
package/src/{styles → theme}/components/popover.ts +13 -12
package/src/theme/components/scroll-area.ts +115 -0
package/src/{styles → theme}/components/select.ts +8 -16
package/src/{styles → theme}/components/separator.ts +3 -3
package/src/theme/components/skeleton.ts +23 -0
package/src/theme/components/splitter.ts +20 -0
package/src/{styles → theme}/components/status.ts +7 -7
package/src/{styles → theme}/components/tag.ts +1 -1
package/src/{styles → theme}/components/toast.ts +6 -8
package/src/theme/components/toolbar.ts +35 -0
package/src/{styles → theme}/components/tooltip.ts +4 -6
package/src/{styles → theme}/components/treegrid.ts +9 -9
package/src/{styles → theme}/index.ts +2 -2
package/src/theme/primitives/column.ts +71 -0
package/src/theme/primitives/index.ts +6 -0
package/src/theme/primitives/panel.ts +43 -0
package/src/{styles → theme}/theme.ts +27 -9
package/src/typings.d.ts +3 -1
package/src/{styles/fragments → util}/elevation.ts +6 -8
package/src/util/hash-styles.ts +118 -98
package/src/util/index.ts +3 -0
package/src/util/mx.ts +165 -43
package/src/util/size.ts +103 -0
package/src/util/valence.ts +33 -0
package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs +0 -79
package/dist/plugin/node-cjs/chunk-UUMDOU7E.cjs.map +0 -7
package/dist/plugin/node-cjs/chunk-ZVALPM6U.cjs +0 -1619
package/dist/plugin/node-cjs/chunk-ZVALPM6U.cjs.map +0 -7
package/dist/plugin/node-cjs/config/tailwind.cjs +0 -29
package/dist/plugin/node-cjs/config/tailwind.cjs.map +0 -7
package/dist/plugin/node-cjs/plugins/esbuild-plugin.cjs +0 -90
package/dist/plugin/node-cjs/plugins/esbuild-plugin.cjs.map +0 -7
package/dist/plugin/node-cjs/plugins/plugin.cjs +0 -124
package/dist/plugin/node-cjs/plugins/plugin.cjs.map +0 -7
package/dist/plugin/node-cjs/theme.css +0 -1418
package/dist/plugin/node-cjs/theme.css.map +0 -7
package/dist/plugin/node-esm/chunk-AFRHJHP4.mjs +0 -49
package/dist/plugin/node-esm/chunk-AFRHJHP4.mjs.map +0 -7
package/dist/plugin/node-esm/chunk-HJE6EZWE.mjs +0 -1614
package/dist/plugin/node-esm/chunk-HJE6EZWE.mjs.map +0 -7
package/dist/plugin/node-esm/config/tailwind.mjs +0 -8
package/dist/plugin/node-esm/config/tailwind.mjs.map +0 -7
package/dist/plugin/node-esm/plugins/esbuild-plugin.mjs +0 -63
package/dist/plugin/node-esm/plugins/esbuild-plugin.mjs.map +0 -7
package/dist/plugin/node-esm/plugins/plugin.mjs +0 -98
package/dist/plugin/node-esm/plugins/plugin.mjs.map +0 -7
package/dist/plugin/node-esm/theme.css +0 -1418
package/dist/plugin/node-esm/theme.css.map +0 -7
package/dist/types/src/Tokens.stories.d.ts +0 -10
package/dist/types/src/Tokens.stories.d.ts.map +0 -1
package/dist/types/src/config/index.d.ts +0 -3
package/dist/types/src/config/index.d.ts.map +0 -1
package/dist/types/src/config/tailwind.d.ts +0 -9
package/dist/types/src/config/tailwind.d.ts.map +0 -1
package/dist/types/src/config/tokens/alias-colors.d.ts +0 -21
package/dist/types/src/config/tokens/alias-colors.d.ts.map +0 -1
package/dist/types/src/config/tokens/index.d.ts +0 -486
package/dist/types/src/config/tokens/index.d.ts.map +0 -1
package/dist/types/src/config/tokens/lengths.d.ts +0 -139
package/dist/types/src/config/tokens/lengths.d.ts.map +0 -1
package/dist/types/src/config/tokens/physical-colors.d.ts +0 -23
package/dist/types/src/config/tokens/physical-colors.d.ts.map +0 -1
package/dist/types/src/config/tokens/semantic-colors.d.ts +0 -187
package/dist/types/src/config/tokens/semantic-colors.d.ts.map +0 -1
package/dist/types/src/config/tokens/sememes-calls.d.ts +0 -3
package/dist/types/src/config/tokens/sememes-calls.d.ts.map +0 -1
package/dist/types/src/config/tokens/sememes-codemirror.d.ts +0 -43
package/dist/types/src/config/tokens/sememes-codemirror.d.ts.map +0 -1
package/dist/types/src/config/tokens/sememes-hue.d.ts +0 -4
package/dist/types/src/config/tokens/sememes-hue.d.ts.map +0 -1
package/dist/types/src/config/tokens/sememes-sheet.d.ts +0 -58
package/dist/types/src/config/tokens/sememes-sheet.d.ts.map +0 -1
package/dist/types/src/config/tokens/sememes-system.d.ts +0 -99
package/dist/types/src/config/tokens/sememes-system.d.ts.map +0 -1
package/dist/types/src/config/tokens/sizes.d.ts +0 -7
package/dist/types/src/config/tokens/sizes.d.ts.map +0 -1
package/dist/types/src/config/tokens/types.d.ts +0 -5
package/dist/types/src/config/tokens/types.d.ts.map +0 -1
package/dist/types/src/plugins/esbuild-plugin.d.ts +0 -9
package/dist/types/src/plugins/esbuild-plugin.d.ts.map +0 -1
package/dist/types/src/plugins/plugin.d.ts +0 -20
package/dist/types/src/plugins/plugin.d.ts.map +0 -1
package/dist/types/src/plugins/resolveContent.d.ts +0 -2
package/dist/types/src/plugins/resolveContent.d.ts.map +0 -1
package/dist/types/src/styles/components/anchored-overflow.d.ts +0 -6
package/dist/types/src/styles/components/anchored-overflow.d.ts.map +0 -1
package/dist/types/src/styles/components/avatar.d.ts.map +0 -1
package/dist/types/src/styles/components/breadcrumb.d.ts.map +0 -1
package/dist/types/src/styles/components/button.d.ts +0 -19
package/dist/types/src/styles/components/button.d.ts.map +0 -1
package/dist/types/src/styles/components/dialog.d.ts.map +0 -1
package/dist/types/src/styles/components/icon-button.d.ts.map +0 -1
package/dist/types/src/styles/components/icon.d.ts.map +0 -1
package/dist/types/src/styles/components/index.d.ts.map +0 -1
package/dist/types/src/styles/components/input.d.ts.map +0 -1
package/dist/types/src/styles/components/link.d.ts.map +0 -1
package/dist/types/src/styles/components/list.d.ts.map +0 -1
package/dist/types/src/styles/components/main.d.ts.map +0 -1
package/dist/types/src/styles/components/menu.d.ts.map +0 -1
package/dist/types/src/styles/components/message.d.ts.map +0 -1
package/dist/types/src/styles/components/popover.d.ts.map +0 -1
package/dist/types/src/styles/components/scroll-area.d.ts +0 -9
package/dist/types/src/styles/components/scroll-area.d.ts.map +0 -1
package/dist/types/src/styles/components/select.d.ts.map +0 -1
package/dist/types/src/styles/components/separator.d.ts.map +0 -1
package/dist/types/src/styles/components/status.d.ts.map +0 -1
package/dist/types/src/styles/components/tag.d.ts.map +0 -1
package/dist/types/src/styles/components/toast.d.ts.map +0 -1
package/dist/types/src/styles/components/toolbar.d.ts +0 -11
package/dist/types/src/styles/components/toolbar.d.ts.map +0 -1
package/dist/types/src/styles/components/tooltip.d.ts.map +0 -1
package/dist/types/src/styles/components/treegrid.d.ts.map +0 -1
package/dist/types/src/styles/fragments/density.d.ts +0 -13
package/dist/types/src/styles/fragments/density.d.ts.map +0 -1
package/dist/types/src/styles/fragments/dimension.d.ts +0 -5
package/dist/types/src/styles/fragments/dimension.d.ts.map +0 -1
package/dist/types/src/styles/fragments/disabled.d.ts.map +0 -1
package/dist/types/src/styles/fragments/elevation.d.ts.map +0 -1
package/dist/types/src/styles/fragments/focus.d.ts +0 -6
package/dist/types/src/styles/fragments/focus.d.ts.map +0 -1
package/dist/types/src/styles/fragments/group.d.ts +0 -5
package/dist/types/src/styles/fragments/group.d.ts.map +0 -1
package/dist/types/src/styles/fragments/hover.d.ts +0 -17
package/dist/types/src/styles/fragments/hover.d.ts.map +0 -1
package/dist/types/src/styles/fragments/index.d.ts +0 -17
package/dist/types/src/styles/fragments/index.d.ts.map +0 -1
package/dist/types/src/styles/fragments/layout.d.ts +0 -3
package/dist/types/src/styles/fragments/layout.d.ts.map +0 -1
package/dist/types/src/styles/fragments/motion.d.ts +0 -2
package/dist/types/src/styles/fragments/motion.d.ts.map +0 -1
package/dist/types/src/styles/fragments/ornament.d.ts +0 -5
package/dist/types/src/styles/fragments/ornament.d.ts.map +0 -1
package/dist/types/src/styles/fragments/selected.d.ts +0 -13
package/dist/types/src/styles/fragments/selected.d.ts.map +0 -1
package/dist/types/src/styles/fragments/shimmer.d.ts +0 -3
package/dist/types/src/styles/fragments/shimmer.d.ts.map +0 -1
package/dist/types/src/styles/fragments/size.d.ts +0 -9
package/dist/types/src/styles/fragments/size.d.ts.map +0 -1
package/dist/types/src/styles/fragments/surface.d.ts +0 -9
package/dist/types/src/styles/fragments/surface.d.ts.map +0 -1
package/dist/types/src/styles/fragments/text.d.ts +0 -7
package/dist/types/src/styles/fragments/text.d.ts.map +0 -1
package/dist/types/src/styles/fragments/valence.d.ts +0 -13
package/dist/types/src/styles/fragments/valence.d.ts.map +0 -1
package/dist/types/src/styles/index.d.ts +0 -4
package/dist/types/src/styles/index.d.ts.map +0 -1
package/dist/types/src/styles/theme.d.ts +0 -5
package/dist/types/src/styles/theme.d.ts.map +0 -1
package/dist/types/src/tailwind.d.ts +0 -3
package/dist/types/src/tailwind.d.ts.map +0 -1
package/dist/types/src/types.d.ts +0 -3
package/dist/types/src/types.d.ts.map +0 -1
package/dist/types/src/util/withLogical.d.ts +0 -164
package/dist/types/src/util/withLogical.d.ts.map +0 -1
package/src/Tokens.stories.tsx +0 -88
package/src/config/index.ts +0 -6
package/src/config/tailwind.ts +0 -264
package/src/config/tokens/alias-colors.ts +0 -39
package/src/config/tokens/index.ts +0 -92
package/src/config/tokens/lengths.ts +0 -97
package/src/config/tokens/physical-colors.ts +0 -125
package/src/config/tokens/semantic-colors.ts +0 -27
package/src/config/tokens/sememes-calls.ts +0 -17
package/src/config/tokens/sememes-codemirror.ts +0 -50
package/src/config/tokens/sememes-hue.ts +0 -54
package/src/config/tokens/sememes-sheet.ts +0 -62
package/src/config/tokens/sememes-system.ts +0 -302
package/src/config/tokens/sizes.ts +0 -10
package/src/config/tokens/types.ts +0 -9
package/src/docs/theme.drawio.svg +0 -635
package/src/plugins/esbuild-plugin.ts +0 -65
package/src/plugins/plugin.ts +0 -130
package/src/plugins/resolveContent.ts +0 -51
package/src/styles/components/README.md +0 -6
package/src/styles/components/anchored-overflow.ts +0 -20
package/src/styles/components/button.ts +0 -48
package/src/styles/components/icon.ts +0 -19
package/src/styles/components/input.ts +0 -177
package/src/styles/components/scroll-area.ts +0 -43
package/src/styles/components/toolbar.ts +0 -29
package/src/styles/fragments/density.ts +0 -17
package/src/styles/fragments/dimension.ts +0 -8
package/src/styles/fragments/focus.ts +0 -16
package/src/styles/fragments/group.ts +0 -12
package/src/styles/fragments/hover.ts +0 -25
package/src/styles/fragments/index.ts +0 -20
package/src/styles/fragments/layout.ts +0 -7
package/src/styles/fragments/motion.ts +0 -6
package/src/styles/fragments/ornament.ts +0 -10
package/src/styles/fragments/selected.ts +0 -45
package/src/styles/fragments/shimmer.ts +0 -9
package/src/styles/fragments/size.ts +0 -117
package/src/styles/fragments/surface.ts +0 -29
package/src/styles/fragments/text.ts +0 -12
package/src/styles/fragments/valence.ts +0 -46
package/src/styles/layers/README.md +0 -15
package/src/styles/layers/anchored-overflow.css +0 -9
package/src/styles/layers/animation.css +0 -17
package/src/styles/layers/attention.css +0 -8
package/src/styles/layers/base.css +0 -25
package/src/styles/layers/can-scroll.css +0 -26
package/src/styles/layers/drag-preview.css +0 -18
package/src/styles/layers/hues.css +0 -110
package/src/styles/layers/index.css +0 -26
package/src/styles/layers/main.css +0 -227
package/src/styles/layers/positioning.css +0 -23
package/src/styles/layers/surfaces.css +0 -31
package/src/styles/layers/tag.css +0 -132
package/src/styles/layers/tldraw.css +0 -91
package/src/styles/layers/tokens.css +0 -46
package/src/tailwind.ts +0 -7
package/src/theme.css +0 -9
package/src/types.ts +0 -7
package/src/util/withLogical.ts +0 -114
/package/dist/types/src/{styles/fragments → fragments}/disabled.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/avatar.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/breadcrumb.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/icon-button.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/link.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/list.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/select.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/separator.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/tag.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/toast.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/tooltip.d.ts +0 -0
/package/dist/types/src/{styles → theme}/components/treegrid.d.ts +0 -0
/package/src/{styles/fragments → fragments}/disabled.ts +0 -0
/package/src/{styles → theme}/components/breadcrumb.ts +0 -0

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

@@ -1,635 +0,0 @@
-<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;7Z1bb6M4FIB/TaTuQyNjGwKPM5m0u9KsNFJX2mcaPAkaAhFxp5399QvBJuDjtgzYhFTJQ5WYW/jO/dikM7Lcvdzn4X77dxaxZIZR9DIjX2YYU4KLv+XAr2rAJ241sMnjqBpyTgMP8X9MHCgGn+KIHVr78SxLeLxvD66zNGVr3hoL8zx7bu/2PUvaF92HG3FBdBp4WIcJA7v9G0d8K27Cbez9J4s3W3llB4ktu1DuLAYO2zDKnhtDZDUjyzzLePVu97JkSYlOYqmOu3tla/3FcpbyLgcs/OqIn2HyJG5OfDH+S95tnj2lESsPQDPy+Xkbc/awD9fl1udCusXYlu+S4pNTvP0eJ8kyS7L8eCxZOSu68srxLOWNcXR8FeMHnmc/WGPLEi3J0i22wFsRd/eT5Zy9NIbErd2zbMd4/qvYRW6VmIWaOcgTGvR8EptDxdi2KTIswIRCVTb1yU80izcC6CtwF3bh1qg6ww0+B6tP2AxcDOH6AC5FOrbIAFvvI7N1FvicbN0PzVZGkfOwBWgJ3r/MsJcUV/n8mBfvNuW7G5yz3R/DsJdM4iJqfUriTVqM8WxvCGHQVk+dV5UOtElQ7jcEIAxYFOkBzt0JI/RoL4K+ARV0sGHzNo+jThAbPDxNmDahUA6ZHo5a9m/wwK5nCQidHhDin1FBTIdDEzwCb+62iVDoQnRRjJrwIDD5WmZhfmDDuDTThDRLGcgExGAonHHCvnM77gcmBHXwb2UEngGWMKAtwzz6KCQlolFQBgDlXZxerFKqWdaYWll/WxslgCBmI04GUN2IjlEdTwZBmmDmsFDjwkL2nkaICxhmDpiWyfkQKIphHYod43Tz9fjpi6makCwUbJ5OkxDRcDPQKMIdMgyWRp/K1uXJfqLwsD1CdNrAKvckG5OO2PNbyDnL0+MIRm9yY5Fsf75CrcHE1aiSHMtZEvL4Z7tpquMkrvAti4tvUguF+u0Gk+spKnrInvI1E0edaIMTyVzxtfPwMN8wDs5zlFp9190ECROjizGAtiOl0GsUSacl9TfdJzXiRxUe42XXZIL1hkcV/0gQBGKrACOme70mDAb7HYhYq9HJBE2myKnOqSSmZ7JMEAFVOtHUQ9b8CCyH/smy5DHMh4E5Z3Gp4MT+iDWRlMklBneghhj6KlvhncJaEqOh3AxgAaXSmMZJ8fvu6pry1/X8wJQfnMdcyk9NNwHsdErUvpymvNVFZiN9EtphQqGh6+skPBzi9VGtw5zD4TcV/wJUXO3QuLifksNTeb7irw3qOaxKqpnry0wlqK/m7wtNTNSl70ZSicvtE7QbrgsP9gmstcloh6LnGjM9rLjsnjETnMegL4G12nBfYkK7QVHv6FZmaBXcRA1LYcXmeBPlopmA13KR+w3hIgNkc2Ivy3eXGnvUWSsHjzlL6sKE9Wv4WK7PPgNNO0FKo66afrY9wjDf/SvdP/GPTXjMVoz7Wy1ypxfcMF+LBw8MrUb3qBKodZFFV4MhA6HFtble2mCZqtSpGqXSJuX14CBGML/c35Zp4PE9QnNcriitPw9O2HtadLlq+i7cxUnJqDo7Rvd5xtnhhyHzlqWQkMKtzrQ1q1ONmDbMDfe3dCDogpiwZceQBwSt6FtNDJe5j+l8yIOd6GGADAAJ8LuW69gyXM/maqUZJiQgy/LK6gMLd8cXMNtii7Ny7ko/cUayaiuoF1iYeFd9CnRTfHl+u4umur7e8drBtl5M16AWaKiZ6FN4MMPGfoNaspkqNSX6Oj5MUXTQjNiwZu0YakA7TPZRjvr25aSkZsWdVtUMTCN5MBGuOgaC2sthqtSILOpratCt6agZiZ+6RI9MIIS+WyBgTX2g9ul6EZng6gnQJkHyqcgxUizYipseEEczZWELyGKCOScE4o4IxHTSaQKIsmxxVJORl5o0kFFNZoLPB0AgY5rMBJ8sxEp1Na7JwCjzwMP1j2FUJjSzgcbsu/sdQtR1fhisEek7P2xvrYnfIbReBdl73ZAiSHAeg4LskBJcBemrzq+nIMF5DApygqlMhyWN9fLFVqgJ8OsS6xprgg4ualMQ2Xe/0fr3ysJHeQb0JgCK2gQIJvPABRD0PYM5CoZT8DvMKkL7/q2ZmWAitlvny/PAQaeX19N01awTz1HzZW3pld+hr/FBJDZQJGiO/KB++chelAx65a0XKRPZ7KUtde+ZxygCO/q05mmJNYFBt7cpAhxGN2Rgu/3dxTtNUSM4Uzn49xY1UQnErrfKP3VZkNd1/aSJcjqAzk3IBV/l0paLq5nasyaX+vdPoWCcsQWjTmjt4igqrzx9iWkeprUoMZjfComhq8Q6SoziUSUGa20hMXqVWEeJLTQ/82AvWkGBras9xrcxSwbgakpyW08HBbBFIXGOHmQsRQAyJk44VyNxjp5M2cHp6VZsWsMJF+pInKPXDJZwWvzFrOLj6Tfxq4Lt9H8FyOp/&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>