@kerfjs/ui 5.0.0-beta.76 → 5.0.0-beta.77

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 (101) hide show
  1. package/README.md +12 -0
  2. package/ai/component-catalog.json +212 -19
  3. package/ai/component-composition.json +122 -11
  4. package/ai/components/nav-stack.md +1 -0
  5. package/ai/components/select.md +1 -0
  6. package/ai/components/split-view.md +1 -0
  7. package/ai/components/text.md +4 -2
  8. package/ai/components/toolbar-control-group.md +20 -3
  9. package/ai/components/toolbar-text.md +19 -4
  10. package/ai/components/toolbar.md +10 -4
  11. package/ai/public-api-signatures-v1.md +51 -7
  12. package/ai/skill.md +26 -2
  13. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  14. package/dist/catalog.js +5 -5
  15. package/dist/{chunk-ZVYA6TLR.js → chunk-4Y4L5YEI.js} +3 -1
  16. package/dist/chunk-4Y4L5YEI.js.map +1 -0
  17. package/dist/{chunk-7QWIJEK5.js → chunk-6VQPLV3O.js} +3 -3
  18. package/dist/{chunk-7QWIJEK5.js.map → chunk-6VQPLV3O.js.map} +1 -1
  19. package/dist/{chunk-IVLTEBBT.js → chunk-M6BWQMQY.js} +2 -2
  20. package/dist/{chunk-IVLTEBBT.js.map → chunk-M6BWQMQY.js.map} +1 -1
  21. package/dist/{chunk-72LLWYP2.js → chunk-NVKRZ5DI.js} +1 -1
  22. package/dist/chunk-NVKRZ5DI.js.map +1 -0
  23. package/dist/{chunk-GO2CZX4M.js → chunk-RRCD3A6G.js} +13 -5
  24. package/dist/chunk-RRCD3A6G.js.map +1 -0
  25. package/dist/{chunk-5PAVAR4B.js → chunk-VHXHLZ6R.js} +10 -1
  26. package/dist/chunk-VHXHLZ6R.js.map +1 -0
  27. package/dist/chunk-WJN3V2H5.js +256 -0
  28. package/dist/chunk-WJN3V2H5.js.map +1 -0
  29. package/dist/{chunk-SJY7KC45.js → chunk-Z4EPMX25.js} +3 -3
  30. package/dist/{chunk-SJY7KC45.js.map → chunk-Z4EPMX25.js.map} +1 -1
  31. package/dist/{chunk-HGSTMZZ6.js → chunk-Z6PE5T7N.js} +2 -2
  32. package/dist/{chunk-HGSTMZZ6.js.map → chunk-Z6PE5T7N.js.map} +1 -1
  33. package/dist/collapsible-panel.js +2 -2
  34. package/dist/index.d.ts +3 -2
  35. package/dist/index.js +6 -5
  36. package/dist/list-header.d.ts +1 -0
  37. package/dist/list-header.js +1 -1
  38. package/dist/nav-stack.d.ts +1 -0
  39. package/dist/nav-stack.js +1 -1
  40. package/dist/select-register.js +3 -0
  41. package/dist/select-register.js.map +1 -1
  42. package/dist/select.d.ts +1 -0
  43. package/dist/select.js +1 -1
  44. package/dist/split-view.js +1 -1
  45. package/dist/styles/components/actions/toolbar/toolbar.css +32 -0
  46. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +51 -0
  47. package/dist/styles/components/actions/toolbar-text/toolbar-text.css +11 -0
  48. package/dist/styles/components/navigation/nav-stack/nav-stack.css +11 -0
  49. package/dist/styles/components/typography/text/text.css +19 -0
  50. package/dist/styles/nav-stack.css +11 -0
  51. package/dist/styles/text.css +19 -0
  52. package/dist/styles/toolbar-control-group.css +51 -0
  53. package/dist/styles/toolbar-text.css +11 -0
  54. package/dist/styles/toolbar.css +32 -0
  55. package/dist/text.d.ts +5 -2
  56. package/dist/text.js +1 -1
  57. package/dist/toolbar-control-group.d.ts +14 -2
  58. package/dist/toolbar-control-group.js +1 -1
  59. package/dist/toolbar-text.d.ts +10 -2
  60. package/dist/toolbar-text.js +1 -1
  61. package/dist/wire-nav-stack.js +58 -22
  62. package/dist/wire-nav-stack.js.map +1 -1
  63. package/dist/wire-toolbar-visibility.d.ts +13 -0
  64. package/dist/wire-toolbar-visibility.js +3 -0
  65. package/dist/wire-toolbar-visibility.js.map +1 -0
  66. package/dist/workbench.js +1 -1
  67. package/docs/accessibility.md +15 -0
  68. package/docs/collapsible-panel.md +4 -0
  69. package/docs/component-contract.md +31 -0
  70. package/docs/component-selection.md +55 -1
  71. package/docs/design/templates/toolbar/width-visibility-320-dark.svg +1 -0
  72. package/docs/design/templates/toolbar/width-visibility-320.svg +1 -0
  73. package/docs/design/templates/toolbar/width-visibility-600-dark.svg +1 -0
  74. package/docs/design/templates/toolbar/width-visibility-600.svg +1 -0
  75. package/docs/design/templates/toolbar-control-group/icon-tile-brand-dark.svg +1 -0
  76. package/docs/design/templates/toolbar-control-group/icon-tile-brand.svg +1 -0
  77. package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -0
  78. package/docs/design/templates/toolbar-control-group/icon-tile-danger.svg +1 -0
  79. package/docs/design/templates/toolbar-control-group/icon-tile-neutral-dark.svg +1 -0
  80. package/docs/design/templates/toolbar-control-group/icon-tile-neutral.svg +1 -0
  81. package/docs/design/templates/toolbar-control-group/icon-tile-success-dark.svg +1 -0
  82. package/docs/design/templates/toolbar-control-group/icon-tile-success.svg +1 -0
  83. package/docs/design/templates/toolbar-control-group/icon-tile-warning-dark.svg +1 -0
  84. package/docs/design/templates/toolbar-control-group/icon-tile-warning.svg +1 -0
  85. package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
  86. package/docs/design/templates/toolbar-control-group.svg +1 -1
  87. package/docs/design/templates/toolbar-dark.svg +1 -1
  88. package/docs/design/templates/toolbar-text/dark-tone-dark.svg +1 -0
  89. package/docs/design/templates/toolbar-text/dark-tone.svg +1 -0
  90. package/docs/design/templates/toolbar-text-dark.svg +1 -1
  91. package/docs/design/templates/toolbar-text.svg +1 -1
  92. package/docs/design/templates/toolbar.svg +1 -1
  93. package/docs/design/templates.md +2 -0
  94. package/docs/layout.md +12 -1
  95. package/docs/nav-stack.md +5 -1
  96. package/llms.txt +24 -0
  97. package/package.json +5 -1
  98. package/dist/chunk-5PAVAR4B.js.map +0 -1
  99. package/dist/chunk-72LLWYP2.js.map +0 -1
  100. package/dist/chunk-GO2CZX4M.js.map +0 -1
  101. package/dist/chunk-ZVYA6TLR.js.map +0 -1
package/docs/design/templates/toolbar-control-group/icon-tile-warning-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(48,44,27)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(107,90,20)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
package/docs/design/templates/toolbar-control-group/icon-tile-warning.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(255,250,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(255,237,166)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(150, 98, 0)"><clipPath id="svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(150, 98, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(150, 98, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
package/docs/design/templates/toolbar-control-group-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 552" width="552" height="552"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="552" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bordered group of icon buttons</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg6svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg6svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg6svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(114 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Borderless single control</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg9cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg9svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label text beside a control</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg12svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Push-appearance buttons</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg15cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg15svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1222" width="552" height="1222"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="cp4"><rect x="16" y="574" width="520" height="96"/></clipPath><clipPath id="cp5"><rect x="16" y="708" width="520" height="96"/></clipPath><clipPath id="cp6"><rect x="16" y="842" width="520" height="96"/></clipPath><clipPath id="cp7"><rect x="16" y="976" width="520" height="96"/></clipPath><clipPath id="cp8"><rect x="16" y="1110" width="520" height="96"/></clipPath><clipPath id="ct9"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct24"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc25"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct27"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc28"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct30"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc31"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct33"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc34"><rect x="16" y="1110" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1222" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">neutral quiet icon tile</text><g clip-path="url(#cp0)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg11cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgba(228,228,255,0.075)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.125)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">brand quiet icon tile</text><g clip-path="url(#cp1)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg14cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg14cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg14svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">success quiet icon tile</text><g clip-path="url(#cp2)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg17cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(31,52,38)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(36,83,49)" stroke-width="1"/><g clip-path="url(#svgimg17cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg17svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg17svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">warning quiet icon tile</text><g clip-path="url(#cp3)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg20cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(48,44,27)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(107,90,20)" stroke-width="1"/><g clip-path="url(#svgimg20cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg20svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="564" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">danger quiet icon tile</text><g clip-path="url(#cp4)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg23cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(44,30,32)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg23cp0)"><g color="rgb(255, 105, 108)"><clipPath id="svgimg23svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 105, 108)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 105, 108)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="698" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bordered group of icon buttons</text><g clip-path="url(#cp5)"><g clip-path="url(#irc25)"><clipPath id="svgimg26vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg26vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg26cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg26svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg26svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg26svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic5)"><g transform="translate(114 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="832" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Borderless single control</text><g clip-path="url(#cp6)"><g clip-path="url(#irc28)"><clipPath id="svgimg29vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg29vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg29cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg29cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg29svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg29svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="966" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label text beside a control</text><g clip-path="url(#cp7)"><g clip-path="url(#irc31)"><clipPath id="svgimg32vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg32vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg32cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg32ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg32cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp0)"><g clip-path="url(#svgimg32ov1)"><g clip-path="url(#svgimg32cp2)"><g clip-path="url(#svgimg32ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg32svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg32svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="1100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Push-appearance buttons</text><g clip-path="url(#cp8)"><g clip-path="url(#irc34)"><clipPath id="svgimg35vclip"><rect x="16" y="1110" width="520" height="96"/></clipPath><g clip-path="url(#svgimg35vclip)"><g transform="translate(16 1110)"><defs><clipPath id="svgimg35cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg35cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg35svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg35svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-control-group.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 552" width="552" height="552"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="552" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bordered group of icon buttons</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg6svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg6svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg6svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(114 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Borderless single control</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg9cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg9svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label text beside a control</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg12svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Push-appearance buttons</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg15cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg15svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1222" width="552" height="1222"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="cp4"><rect x="16" y="574" width="520" height="96"/></clipPath><clipPath id="cp5"><rect x="16" y="708" width="520" height="96"/></clipPath><clipPath id="cp6"><rect x="16" y="842" width="520" height="96"/></clipPath><clipPath id="cp7"><rect x="16" y="976" width="520" height="96"/></clipPath><clipPath id="cp8"><rect x="16" y="1110" width="520" height="96"/></clipPath><clipPath id="ct9"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct24"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc25"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct27"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc28"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct30"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc31"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct33"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc34"><rect x="16" y="1110" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1222" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">neutral quiet icon tile</text><g clip-path="url(#cp0)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg11cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgba(0,0,98,0.05)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,49,0.1)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">brand quiet icon tile</text><g clip-path="url(#cp1)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg14cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(235,244,252)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg14cp0)"><g color="rgb(12, 98, 243)"><clipPath id="svgimg14svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">success quiet icon tile</text><g clip-path="url(#cp2)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg17cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(227,247,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(190,237,202)" stroke-width="1"/><g clip-path="url(#svgimg17cp0)"><g color="rgb(0, 127, 46)"><clipPath id="svgimg17svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg17svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 127, 46)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 127, 46)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">warning quiet icon tile</text><g clip-path="url(#cp3)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg20cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(255,250,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(255,237,166)" stroke-width="1"/><g clip-path="url(#svgimg20cp0)"><g color="rgb(150, 98, 0)"><clipPath id="svgimg20svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(150, 98, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(150, 98, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="564" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">danger quiet icon tile</text><g clip-path="url(#cp4)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg23cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(254,237,238)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(249,173,175)" stroke-width="1"/><g clip-path="url(#svgimg23cp0)"><g color="rgb(194, 11, 32)"><clipPath id="svgimg23svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="698" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bordered group of icon buttons</text><g clip-path="url(#cp5)"><g clip-path="url(#irc25)"><clipPath id="svgimg26vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg26vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg26cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg26svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg26svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg26svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic5)"><g transform="translate(114 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="832" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Borderless single control</text><g clip-path="url(#cp6)"><g clip-path="url(#irc28)"><clipPath id="svgimg29vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg29vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg29cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg29cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg29svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg29svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="966" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label text beside a control</text><g clip-path="url(#cp7)"><g clip-path="url(#irc31)"><clipPath id="svgimg32vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg32vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg32cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg32ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg32cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp0)"><g clip-path="url(#svgimg32ov1)"><g clip-path="url(#svgimg32cp2)"><g clip-path="url(#svgimg32ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg32svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg32svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="1100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Push-appearance buttons</text><g clip-path="url(#cp8)"><g clip-path="url(#irc34)"><clipPath id="svgimg35vclip"><rect x="16" y="1110" width="520" height="96"/></clipPath><g clip-path="url(#svgimg35vclip)"><g transform="translate(16 1110)"><defs><clipPath id="svgimg35cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg35cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg35svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg35svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 158" width="672" height="158"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="158" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="24" y="24" width="460" height="52"/></clipPath><clipPath id="svgimg3ov1"><rect x="24" y="24" width="460" height="52" rx="0"/></clipPath><clipPath id="svgimg3cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg3ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg3cp4"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3ct5"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"/><g clip-path="url(#svgimg3ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ov3)"><g clip-path="url(#svgimg3cp4)"><g clip-path="url(#svgimg3ct5)"><text x="38" y="55.41" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(194,194,198)">Northstar</text></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp6)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg3svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp8)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg3svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp10)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg3svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic11)"><g transform="translate(582 42)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 442" width="672" height="442"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="cp1"><rect x="16" y="180" width="640" height="104"/></clipPath><clipPath id="cp2"><rect x="16" y="322" width="640" height="104"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="158" width="640" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="180" width="640" height="104" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="300" width="640" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="322" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="442" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="24" y="24" width="460" height="52"/></clipPath><clipPath id="svgimg5ov1"><rect x="24" y="24" width="460" height="52" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg5ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp4"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg5ct5"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg5cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg5cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg5cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"/><g clip-path="url(#svgimg5ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ov3)"><g clip-path="url(#svgimg5cp4)"><g clip-path="url(#svgimg5ct5)"><text x="38" y="55.41" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(194,194,198)">Northstar</text></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp6)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg5svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp8)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg5svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp10)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg5svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic11)"><g transform="translate(582 42)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="170" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Width visibility (600px)</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="180" width="640" height="104"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 180)"><defs><clipPath id="svgimg8cp0"><rect x="24" y="24" width="448" height="52"/></clipPath><clipPath id="svgimg8ov1"><rect x="24" y="24" width="448" height="52" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="28" width="91.9" height="44"/></clipPath><clipPath id="svgimg8ov3"><rect x="28" y="28" width="91.9" height="44" rx="0"/></clipPath><clipPath id="svgimg8cp4"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg8ct5"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg8cp6"><rect x="490" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg8cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg8cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ov3)"><g clip-path="url(#svgimg8cp4)"><g clip-path="url(#svgimg8ct5)"><text x="36" y="54.59" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(194,194,198)">Workspace</text></g></g></g></g></g></g><rect x="476" y="28" width="44" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="476.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="478.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg8cp6)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg8svgic7"><rect x="490" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic7)"><g transform="translate(490 42)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="528" y="28" width="84" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="528.5" y="28.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg8cp8)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg8svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic9)"><g transform="translate(542 42)scale(.66667)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg8cp10)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg8svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic11)"><g transform="translate(582 42)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="312" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Width visibility (320px)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="322" width="640" height="104"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 322)"><defs><clipPath id="svgimg11cp0"><rect x="24" y="24" width="208" height="52"/></clipPath><clipPath id="svgimg11ov1"><rect x="24" y="24" width="208" height="52" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="28" width="91.9" height="44"/></clipPath><clipPath id="svgimg11ov3"><rect x="28" y="28" width="91.9" height="44" rx="0"/></clipPath><clipPath id="svgimg11cp4"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg11ct5"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg11cp6"><rect x="250" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg11cp8"><rect x="302" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ov3)"><g clip-path="url(#svgimg11cp4)"><g clip-path="url(#svgimg11ct5)"><text x="36" y="54.59" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(194,194,198)">Workspace</text></g></g></g></g></g></g><rect x="236" y="28" width="44" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="236.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="238.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg11cp6)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic7"><rect x="250" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic7)"><g transform="translate(250 42)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="288" y="28" width="44" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="288.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="290.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg11cp8)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic9"><rect x="302" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic9)"><g transform="translate(302 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/dark-tone-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="154.7" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="154.7" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath><clipPath id="ct3"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath></defs><rect x="20" y="20" width="154.7" height="40" rx="0" fill="rgb(229,229,234)"/><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(28,28,30)">Quarterly report.pdf</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/dark-tone.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="154.7" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="154.7" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath><clipPath id="ct3"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath></defs><rect x="20" y="20" width="154.7" height="40" rx="0" fill="rgb(72,72,74)"/><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(255,255,255)">Quarterly report.pdf</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 358" width="392" height="358"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="76"/></clipPath><clipPath id="cp2"><rect x="16" y="270" width="360" height="72"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="156" width="360" height="76" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="248" width="360" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="270" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="358" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Large (title)</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg5ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="svgimg5ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ov1)"><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(194,194,198)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Default</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="156" width="360" height="76"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg8cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg8ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="svgimg8ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(194,194,198)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="260" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Small (label)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="270" width="360" height="72"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 270)"><defs><clipPath id="svgimg11cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="svgimg11ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="svgimg11ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">Filters</text></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 476" width="392" height="476"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="80"/></clipPath><clipPath id="cp2"><rect x="16" y="274" width="360" height="76"/></clipPath><clipPath id="cp3"><rect x="16" y="388" width="360" height="72"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="156" width="360" height="80" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="252" width="360" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="274" width="360" height="76" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="366" width="360" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="388" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="476" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Dark toolbar tone</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="20" y="20" width="154.7" height="40"/></clipPath><clipPath id="svgimg6ov1"><rect x="20" y="20" width="154.7" height="40" rx="0"/></clipPath><clipPath id="svgimg6cp2"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath><clipPath id="svgimg6ct3"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath></defs><rect x="20" y="20" width="154.7" height="40" rx="0" fill="rgb(229,229,234)"/><g clip-path="url(#svgimg6cp0)"><g clip-path="url(#svgimg6ov1)"><g clip-path="url(#svgimg6cp2)"><g clip-path="url(#svgimg6ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(28,28,30)">Quarterly report.pdf</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Large (title)</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="156" width="360" height="80"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg9cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg9ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg9cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="svgimg9ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg9cp0)"><g clip-path="url(#svgimg9ov1)"><g clip-path="url(#svgimg9cp2)"><g clip-path="url(#svgimg9ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(194,194,198)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="264" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Default</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="274" width="360" height="76"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 274)"><defs><clipPath id="svgimg12cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="svgimg12ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(194,194,198)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="378" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Small (label)</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="388" width="360" height="72"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 388)"><defs><clipPath id="svgimg15cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="svgimg15ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="svgimg15cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="svgimg15ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg15cp0)"><g clip-path="url(#svgimg15ov1)"><g clip-path="url(#svgimg15cp2)"><g clip-path="url(#svgimg15ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">Filters</text></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-text.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 358" width="392" height="358"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="76"/></clipPath><clipPath id="cp2"><rect x="16" y="270" width="360" height="72"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="156" width="360" height="76" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="248" width="360" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="270" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="358" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Large (title)</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg5ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="svgimg5ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ov1)"><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(98,98,103)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Default</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="156" width="360" height="76"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg8cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg8ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="svgimg8ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(98,98,103)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="260" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Small (label)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="270" width="360" height="72"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 270)"><defs><clipPath id="svgimg11cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="svgimg11ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="svgimg11ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">Filters</text></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 476" width="392" height="476"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="80"/></clipPath><clipPath id="cp2"><rect x="16" y="274" width="360" height="76"/></clipPath><clipPath id="cp3"><rect x="16" y="388" width="360" height="72"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="156" width="360" height="80" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="252" width="360" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="274" width="360" height="76" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="366" width="360" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="388" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="476" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Dark toolbar tone</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="20" y="20" width="154.7" height="40"/></clipPath><clipPath id="svgimg6ov1"><rect x="20" y="20" width="154.7" height="40" rx="0"/></clipPath><clipPath id="svgimg6cp2"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath><clipPath id="svgimg6ct3"><rect x="28" y="31.6" width="138.7" height="16.8"/></clipPath></defs><rect x="20" y="20" width="154.7" height="40" rx="0" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg6cp0)"><g clip-path="url(#svgimg6ov1)"><g clip-path="url(#svgimg6cp2)"><g clip-path="url(#svgimg6ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(255,255,255)">Quarterly report.pdf</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Large (title)</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="156" width="360" height="80"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg9cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg9ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg9cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="svgimg9ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg9cp0)"><g clip-path="url(#svgimg9ov1)"><g clip-path="url(#svgimg9cp2)"><g clip-path="url(#svgimg9ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(98,98,103)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="264" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Default</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="274" width="360" height="76"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 274)"><defs><clipPath id="svgimg12cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="svgimg12ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(98,98,103)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="378" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Small (label)</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="388" width="360" height="72"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 388)"><defs><clipPath id="svgimg15cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="svgimg15ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="svgimg15cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="svgimg15ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg15cp0)"><g clip-path="url(#svgimg15ov1)"><g clip-path="url(#svgimg15cp2)"><g clip-path="url(#svgimg15ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">Filters</text></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 158" width="672" height="158"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="158" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="24" y="24" width="460" height="52"/></clipPath><clipPath id="svgimg3ov1"><rect x="24" y="24" width="460" height="52" rx="0"/></clipPath><clipPath id="svgimg3cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg3ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg3cp4"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3ct5"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"/><g clip-path="url(#svgimg3ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ov3)"><g clip-path="url(#svgimg3cp4)"><g clip-path="url(#svgimg3ct5)"><text x="38" y="55.41" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(98,98,103)">Northstar</text></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp6)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg3svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp8)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg3svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp10)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg3svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic11)"><g transform="translate(582 42)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 442" width="672" height="442"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="cp1"><rect x="16" y="180" width="640" height="104"/></clipPath><clipPath id="cp2"><rect x="16" y="322" width="640" height="104"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="158" width="640" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="180" width="640" height="104" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="300" width="640" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="322" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="442" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="24" y="24" width="460" height="52"/></clipPath><clipPath id="svgimg5ov1"><rect x="24" y="24" width="460" height="52" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg5ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp4"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg5ct5"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg5cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg5cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg5cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"/><g clip-path="url(#svgimg5ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ov3)"><g clip-path="url(#svgimg5cp4)"><g clip-path="url(#svgimg5ct5)"><text x="38" y="55.41" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(98,98,103)">Northstar</text></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp6)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg5svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp8)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg5svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg5cp10)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg5svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic11)"><g transform="translate(582 42)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="170" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Width visibility (600px)</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="180" width="640" height="104"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 180)"><defs><clipPath id="svgimg8cp0"><rect x="24" y="24" width="448" height="52"/></clipPath><clipPath id="svgimg8ov1"><rect x="24" y="24" width="448" height="52" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="28" width="91.9" height="44"/></clipPath><clipPath id="svgimg8ov3"><rect x="28" y="28" width="91.9" height="44" rx="0"/></clipPath><clipPath id="svgimg8cp4"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg8ct5"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg8cp6"><rect x="490" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg8cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg8cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ov3)"><g clip-path="url(#svgimg8cp4)"><g clip-path="url(#svgimg8ct5)"><text x="36" y="54.59" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(98,98,103)">Workspace</text></g></g></g></g></g></g><rect x="476" y="28" width="44" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="476.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="478.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg8cp6)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg8svgic7"><rect x="490" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic7)"><g transform="translate(490 42)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="528" y="28" width="84" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="528.5" y="28.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg8cp8)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg8svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic9)"><g transform="translate(542 42)scale(.66667)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg8cp10)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg8svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic11)"><g transform="translate(582 42)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="312" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Width visibility (320px)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="322" width="640" height="104"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 322)"><defs><clipPath id="svgimg11cp0"><rect x="24" y="24" width="208" height="52"/></clipPath><clipPath id="svgimg11ov1"><rect x="24" y="24" width="208" height="52" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="28" width="91.9" height="44"/></clipPath><clipPath id="svgimg11ov3"><rect x="28" y="28" width="91.9" height="44" rx="0"/></clipPath><clipPath id="svgimg11cp4"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg11ct5"><rect x="36" y="41.6" width="75.9" height="16.8"/></clipPath><clipPath id="svgimg11cp6"><rect x="250" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg11cp8"><rect x="302" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ov3)"><g clip-path="url(#svgimg11cp4)"><g clip-path="url(#svgimg11ct5)"><text x="36" y="54.59" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(98,98,103)">Workspace</text></g></g></g></g></g></g><rect x="236" y="28" width="44" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="236.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="238.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg11cp6)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic7"><rect x="250" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic7)"><g transform="translate(250 42)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="288" y="28" width="44" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="288.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="290.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg11cp8)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic9"><rect x="302" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic9)"><g transform="translate(302 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>