@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.112

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 (211) hide show
  1. package/README.md +3 -0
  2. package/ai/component-catalog.json +161 -8
  3. package/ai/component-composition.json +119 -2
  4. package/ai/components/README.md +2 -0
  5. package/ai/components/backdrop-image.md +1 -0
  6. package/ai/components/button.md +5 -2
  7. package/ai/components/content-item.md +1 -0
  8. package/ai/components/editor-frame.md +80 -0
  9. package/ai/components/summary-row.md +5 -2
  10. package/ai/components/surface-scaffold.md +3 -0
  11. package/ai/components/value-preview.md +75 -0
  12. package/ai/public-api-signatures-v1.md +207 -50
  13. package/ai/skill.md +17 -0
  14. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  15. package/dist/backdrop-image.d.ts +11 -0
  16. package/dist/backdrop-image.js +1 -1
  17. package/dist/browser/content-item.js +1 -0
  18. package/dist/browser/editor-frame.js +3 -0
  19. package/dist/browser/value-preview.js +3 -0
  20. package/dist/button.d.ts +4 -2
  21. package/dist/button.js +1 -1
  22. package/dist/catalog-resources.d.ts +2 -1
  23. package/dist/catalog.d.ts +2 -1
  24. package/dist/catalog.js +6 -4
  25. package/dist/catalog.js.map +1 -1
  26. package/dist/{chunk-JCCN3U6X.js → chunk-2J7XKAZX.js} +3 -2
  27. package/dist/chunk-2J7XKAZX.js.map +1 -0
  28. package/dist/chunk-3KFMLOTH.js +201 -0
  29. package/dist/chunk-3KFMLOTH.js.map +1 -0
  30. package/dist/{chunk-ATGAJVZ6.js → chunk-3OP66VXU.js} +64 -4
  31. package/dist/chunk-3OP66VXU.js.map +1 -0
  32. package/dist/{chunk-ZNROKDSZ.js → chunk-3V4OCDTL.js} +2 -8
  33. package/dist/chunk-3V4OCDTL.js.map +1 -0
  34. package/dist/{chunk-3GLYIIFR.js → chunk-3WWX2O4G.js} +3 -2
  35. package/dist/chunk-3WWX2O4G.js.map +1 -0
  36. package/dist/{chunk-SCDWURBO.js → chunk-5CLMV5YU.js} +21 -3
  37. package/dist/chunk-5CLMV5YU.js.map +1 -0
  38. package/dist/{chunk-P7EJ4CAD.js → chunk-ETFP7HAR.js} +2 -2
  39. package/dist/{chunk-P7EJ4CAD.js.map → chunk-ETFP7HAR.js.map} +1 -1
  40. package/dist/chunk-F653O57X.js +41 -0
  41. package/dist/chunk-F653O57X.js.map +1 -0
  42. package/dist/{chunk-SOFPUW3O.js → chunk-IIQ2XIMU.js} +4 -3
  43. package/dist/chunk-IIQ2XIMU.js.map +1 -0
  44. package/dist/chunk-IRC5N7FA.js +16 -0
  45. package/dist/chunk-IRC5N7FA.js.map +1 -0
  46. package/dist/{chunk-SQ5DH66U.js → chunk-ITENVZ6Q.js} +2 -15
  47. package/dist/chunk-ITENVZ6Q.js.map +1 -0
  48. package/dist/{chunk-4UB5Z3ZZ.js → chunk-K67XBCHG.js} +8 -4
  49. package/dist/chunk-K67XBCHG.js.map +1 -0
  50. package/dist/chunk-OK7FUK7U.js +9 -0
  51. package/dist/chunk-OK7FUK7U.js.map +1 -0
  52. package/dist/{chunk-WSEJ2FDE.js → chunk-OUCHU7JB.js} +2 -2
  53. package/dist/{chunk-WSEJ2FDE.js.map → chunk-OUCHU7JB.js.map} +1 -1
  54. package/dist/{chunk-KPINJHIC.js → chunk-PS24PVR6.js} +3 -1
  55. package/dist/chunk-PS24PVR6.js.map +1 -0
  56. package/dist/{chunk-6CDILXF4.js → chunk-S3DCRI2M.js} +31 -5
  57. package/dist/chunk-S3DCRI2M.js.map +1 -0
  58. package/dist/chunk-V6N3YLTM.js +56 -0
  59. package/dist/chunk-V6N3YLTM.js.map +1 -0
  60. package/dist/{chunk-HQZG3OFL.js → chunk-XRZSK2WC.js} +3 -2
  61. package/dist/chunk-XRZSK2WC.js.map +1 -0
  62. package/dist/{chunk-CPSGUGAY.js → chunk-YPAQFBMN.js} +4 -4
  63. package/dist/{chunk-CPSGUGAY.js.map → chunk-YPAQFBMN.js.map} +1 -1
  64. package/dist/collapsible-panel.d.ts +1 -0
  65. package/dist/collapsible-panel.js +3 -2
  66. package/dist/collapsible-panel.js.map +1 -1
  67. package/dist/content-item.d.ts +46 -2
  68. package/dist/content-item.js +4 -1
  69. package/dist/editor-frame.d.ts +41 -0
  70. package/dist/editor-frame.js +3 -0
  71. package/dist/editor-frame.js.map +1 -0
  72. package/dist/index.d.ts +5 -2
  73. package/dist/index.js +27 -23
  74. package/dist/list-action-row.js +2 -1
  75. package/dist/list-detail-dialog.d.ts +2 -1
  76. package/dist/list-detail-dialog.js +5 -4
  77. package/dist/list-detail-dialog.js.map +1 -1
  78. package/dist/list-item.js +2 -1
  79. package/dist/{nav-stack-CU_0dKtI.d.ts → nav-stack-CrZF95VO.d.ts} +2 -1
  80. package/dist/nav-stack.d.ts +2 -1
  81. package/dist/nav-stack.js +2 -1
  82. package/dist/pane.d.ts +3 -23
  83. package/dist/pane.js +2 -1
  84. package/dist/split-view.d.ts +2 -1
  85. package/dist/split-view.js +2 -1
  86. package/dist/styles/backdrop-image.css +24 -1
  87. package/dist/styles/components/actions/popup-menu/popup-menu.css +1 -1
  88. package/dist/styles/components/collections/summary-row/summary-row.css +7 -3
  89. package/dist/styles/components/data-display/value-preview/value-preview.css +18 -0
  90. package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css +24 -1
  91. package/dist/styles/components/surfaces/content-item/content-item.css +52 -0
  92. package/dist/styles/components/surfaces/editor-frame/editor-frame.css +121 -0
  93. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +25 -1
  94. package/dist/styles/content-item.css +3 -168
  95. package/dist/styles/editor-frame.css +121 -0
  96. package/dist/styles/foundation.css +9 -4
  97. package/dist/styles/popup-menu.css +1 -1
  98. package/dist/styles/styles.css +2 -0
  99. package/dist/styles/summary-row.css +7 -3
  100. package/dist/styles/surface-scaffold.css +25 -1
  101. package/dist/styles/value-preview.css +18 -0
  102. package/dist/styles/webawesome.css +2 -2
  103. package/dist/summary-row.d.ts +20 -11
  104. package/dist/summary-row.js +2 -1
  105. package/dist/surface-scaffold-register.js +1 -1
  106. package/dist/surface-scaffold.d.ts +30 -2
  107. package/dist/surface-scaffold.js +2 -2
  108. package/dist/surface-tint-DQgYCaP9.d.ts +25 -0
  109. package/dist/tab-navigator.d.ts +2 -1
  110. package/dist/tab-navigator.js +2 -1
  111. package/dist/tab-navigator.js.map +1 -1
  112. package/dist/toolbar.d.ts +1 -0
  113. package/dist/value-preview.d.ts +21 -0
  114. package/dist/value-preview.js +3 -0
  115. package/dist/value-preview.js.map +1 -0
  116. package/dist/wire-catalog.d.ts +2 -1
  117. package/dist/wire-catalog.js +1 -1
  118. package/dist/wire-content-items.js +88 -0
  119. package/dist/wire-content-items.js.map +1 -1
  120. package/dist/workbench-dialog.d.ts +2 -1
  121. package/dist/workbench-dialog.js +4 -3
  122. package/dist/workbench-dialog.js.map +1 -1
  123. package/dist/workbench.d.ts +2 -1
  124. package/dist/workbench.js +2 -1
  125. package/docs/accessibility.md +6 -0
  126. package/docs/backdrop-image.md +4 -0
  127. package/docs/button.md +15 -0
  128. package/docs/component-contract.md +34 -4
  129. package/docs/component-selection.md +16 -1
  130. package/docs/design/templates/button/emphasis-dark.svg +1 -1
  131. package/docs/design/templates/button-dark.svg +1 -1
  132. package/docs/design/templates/checkbox/error-dark.svg +1 -1
  133. package/docs/design/templates/checkbox/states.svg +1 -1
  134. package/docs/design/templates/checkbox-dark.svg +1 -1
  135. package/docs/design/templates/checkbox-group/horizontal-dark.svg +1 -1
  136. package/docs/design/templates/checkbox-group/vertical.svg +1 -1
  137. package/docs/design/templates/checkbox-group-dark.svg +1 -1
  138. package/docs/design/templates/checkbox-group.svg +1 -1
  139. package/docs/design/templates/checkbox.svg +1 -1
  140. package/docs/design/templates/choice-chips/color-palette-dark.svg +1 -1
  141. package/docs/design/templates/choice-chips-dark.svg +1 -1
  142. package/docs/design/templates/color-field/error-dark.svg +1 -1
  143. package/docs/design/templates/color-field/hint.svg +1 -1
  144. package/docs/design/templates/color-field-dark.svg +1 -1
  145. package/docs/design/templates/color-field.svg +1 -1
  146. package/docs/design/templates/color-picker/gray.svg +1 -1
  147. package/docs/design/templates/color-picker/hsb.svg +1 -1
  148. package/docs/design/templates/color-picker/rgb.svg +1 -1
  149. package/docs/design/templates/color-picker.svg +1 -1
  150. package/docs/design/templates/color-swatches/palette-dark.svg +1 -1
  151. package/docs/design/templates/color-swatches-dark.svg +1 -1
  152. package/docs/design/templates/disclosure/embedded.svg +1 -1
  153. package/docs/design/templates/disclosure/framed-sunken.svg +1 -1
  154. package/docs/design/templates/disclosure/plain.svg +1 -1
  155. package/docs/design/templates/disclosure.svg +1 -1
  156. package/docs/design/templates/message-composer/chat.svg +1 -1
  157. package/docs/design/templates/message-composer.svg +1 -1
  158. package/docs/design/templates/progress-bar/determinate.svg +1 -1
  159. package/docs/design/templates/progress-bar/tones.svg +1 -1
  160. package/docs/design/templates/progress-bar.svg +1 -1
  161. package/docs/design/templates/radio-group/horizontal-dark.svg +1 -1
  162. package/docs/design/templates/radio-group/vertical.svg +1 -1
  163. package/docs/design/templates/radio-group-dark.svg +1 -1
  164. package/docs/design/templates/radio-group.svg +1 -1
  165. package/docs/design/templates/search-field/empty.svg +1 -1
  166. package/docs/design/templates/search-field/tokens.svg +1 -1
  167. package/docs/design/templates/search-field.svg +1 -1
  168. package/docs/design/templates/select/form.svg +1 -1
  169. package/docs/design/templates/select.svg +1 -1
  170. package/docs/design/templates/slider/compact.svg +1 -1
  171. package/docs/design/templates/slider/readout.svg +1 -1
  172. package/docs/design/templates/slider/ticks.svg +1 -1
  173. package/docs/design/templates/slider.svg +1 -1
  174. package/docs/design/templates/switch/states.svg +1 -1
  175. package/docs/design/templates/switch.svg +1 -1
  176. package/docs/design/templates/tag-field/error-dark.svg +1 -1
  177. package/docs/design/templates/tag-field/error.svg +1 -1
  178. package/docs/design/templates/tag-field/tags.svg +1 -1
  179. package/docs/design/templates/tag-field-dark.svg +1 -1
  180. package/docs/design/templates/tag-field.svg +1 -1
  181. package/docs/design/templates/text-field/error-dark.svg +1 -1
  182. package/docs/design/templates/text-field/labeled.svg +1 -1
  183. package/docs/design/templates/text-field/multiline.svg +1 -1
  184. package/docs/design/templates/text-field/search.svg +1 -1
  185. package/docs/design/templates/text-field-dark.svg +1 -1
  186. package/docs/design/templates/text-field.svg +1 -1
  187. package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -1
  188. package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
  189. package/docs/design/templates.md +3 -1
  190. package/docs/editor-frame.md +47 -0
  191. package/docs/investigations/content-item-media-scroll-performance.md +26 -0
  192. package/docs/layout.md +34 -0
  193. package/docs/manual-test-plan.md +27 -1
  194. package/docs/recipes.md +9 -0
  195. package/docs/surface-scaffold.md +50 -1
  196. package/docs/value-preview.md +16 -0
  197. package/llms.txt +10 -1
  198. package/package.json +13 -1
  199. package/dist/chunk-3GLYIIFR.js.map +0 -1
  200. package/dist/chunk-4UB5Z3ZZ.js.map +0 -1
  201. package/dist/chunk-5USKCWGL.js +0 -113
  202. package/dist/chunk-5USKCWGL.js.map +0 -1
  203. package/dist/chunk-6CDILXF4.js.map +0 -1
  204. package/dist/chunk-ATGAJVZ6.js.map +0 -1
  205. package/dist/chunk-HQZG3OFL.js.map +0 -1
  206. package/dist/chunk-JCCN3U6X.js.map +0 -1
  207. package/dist/chunk-KPINJHIC.js.map +0 -1
  208. package/dist/chunk-SCDWURBO.js.map +0 -1
  209. package/dist/chunk-SOFPUW3O.js.map +0 -1
  210. package/dist/chunk-SQ5DH66U.js.map +0 -1
  211. package/dist/chunk-ZNROKDSZ.js.map +0 -1
package/docs/design/templates/text-field/multiline.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 167" width="400" height="167"><defs><clipPath id="ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(110,110,115)">0 / 200</text></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 167" width="400" height="167"><defs><clipPath id="ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(100, 100, 105)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(100,100,105)">0 / 200</text></svg>
package/docs/design/templates/text-field/search.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 84" width="400" height="84"><defs><clipPath id="cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.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"/><circle cx="11" cy="11" r="8" 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 clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Search tickets</text></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 84" width="400" height="84"><defs><clipPath id="cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.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"/><circle cx="11" cy="11" r="8" 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 clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(100, 100, 105)">Search tickets</text></g></g></svg>
package/docs/design/templates/text-field-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 951" width="432" height="951"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="cp5"><rect x="16" y="841" width="400" height="94"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="819" width="400" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="841" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="951" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g clip-path="url(#svgimg8ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Northstar Migration</text></g></g><g clip-path="url(#svgimg8cp3)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg8svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" 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 9-6 6" 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 9 6 6" 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><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg11cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg11ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.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"/><circle cx="11" cy="11" r="8" 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 clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg14ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg14ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg14cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><g clip-path="url(#svgimg14cp2)"><g clip-path="url(#svgimg14ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(255,105,108)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg17ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg17cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg17ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg17cp1)"><g clip-path="url(#svgimg17ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(174,174,178)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg20ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg20cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg20ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg20cp1)"><g clip-path="url(#svgimg20ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">design</text></g></g></g></g></g></g><text x="16" y="831" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bounded Decimal</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="841" width="400" height="94"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 841)"><defs><clipPath id="svgimg23ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg23cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg23ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg23cp1)"><g clip-path="url(#svgimg23ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">12.50</text></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 951" width="432" height="951"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="cp5"><rect x="16" y="841" width="400" height="94"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="819" width="400" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="841" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="951" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g clip-path="url(#svgimg8ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Northstar Migration</text></g></g><g clip-path="url(#svgimg8cp3)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg8svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" 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 9-6 6" 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 9 6 6" 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><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg11cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg11ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.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"/><circle cx="11" cy="11" r="8" 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 clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg14ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg14ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg14cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><g clip-path="url(#svgimg14cp2)"><g clip-path="url(#svgimg14ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(255,133,136)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg17ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg17cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg17ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg17cp1)"><g clip-path="url(#svgimg17ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(174,174,178)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg20ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg20cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg20ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg20cp1)"><g clip-path="url(#svgimg20ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">design</text></g></g></g></g></g></g><text x="16" y="831" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bounded Decimal</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="841" width="400" height="94"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 841)"><defs><clipPath id="svgimg23ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg23cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg23ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg23cp1)"><g clip-path="url(#svgimg23ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">12.50</text></g></g></g></g></g></g></svg>
package/docs/design/templates/text-field.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 951" width="432" height="951"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="cp5"><rect x="16" y="841" width="400" height="94"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="819" width="400" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="841" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="951" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g clip-path="url(#svgimg8ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Northstar Migration</text></g></g><g clip-path="url(#svgimg8cp3)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg8svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" 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 9-6 6" 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 9 6 6" 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><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg11cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg11ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.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"/><circle cx="11" cy="11" r="8" 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 clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg14ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg14ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg14cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><g clip-path="url(#svgimg14cp2)"><g clip-path="url(#svgimg14ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,11,32)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg17ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg17cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg17ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg17cp1)"><g clip-path="url(#svgimg17ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(110,110,115)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg20ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg20cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg20ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg20cp1)"><g clip-path="url(#svgimg20ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">design</text></g></g></g></g></g></g><text x="16" y="831" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bounded Decimal</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="841" width="400" height="94"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 841)"><defs><clipPath id="svgimg23ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg23cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg23ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg23cp1)"><g clip-path="url(#svgimg23ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">12.50</text></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 951" width="432" height="951"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="cp5"><rect x="16" y="841" width="400" height="94"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="819" width="400" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="841" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="951" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g clip-path="url(#svgimg8ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Northstar Migration</text></g></g><g clip-path="url(#svgimg8cp3)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg8svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" 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 9-6 6" 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 9 6 6" 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><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(100,100,105)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg11cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg11ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.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"/><circle cx="11" cy="11" r="8" 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 clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(100, 100, 105)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg14ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg14ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg14cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><g clip-path="url(#svgimg14cp2)"><g clip-path="url(#svgimg14ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,11,32)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg17ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg17cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg17ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg17cp1)"><g clip-path="url(#svgimg17ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(100, 100, 105)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(100,100,105)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg20ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg20cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg20ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg20cp1)"><g clip-path="url(#svgimg20ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">design</text></g></g></g></g></g></g><text x="16" y="831" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bounded Decimal</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="841" width="400" height="94"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 841)"><defs><clipPath id="svgimg23ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg23cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg23ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg23cp1)"><g clip-path="url(#svgimg23ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">12.50</text></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg CHANGED
@@ -1 +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(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(#cp0)"><g color="rgb(255, 105, 108)"><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, 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></svg>
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(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(#cp0)"><g color="rgb(255, 133, 136)"><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, 133, 136)" 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, 133, 136)" 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 1372" width="552" height="1372"><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="112"/></clipPath><clipPath id="cp9"><rect x="16" y="1260" width="520" height="96"/></clipPath><clipPath id="ct10"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct28"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc29"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct31"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc32"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct34"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc35"><rect x="16" y="1110" width="520" height="112" rx="0"/></clipPath><clipPath id="ct37"><rect x="16" y="1238" width="520" height="22"/></clipPath><clipPath id="irc38"><rect x="16" y="1260" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1372" 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(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg12cp0"><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(#svgimg12cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg12svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic1)"><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(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg15cp0"><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(#svgimg15cp0)"><g color="rgb(138, 203, 255)"><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="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(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg18cp0"><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(#svgimg18cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg18svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg18svgic1)"><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(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg21cp0"><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(#svgimg21cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg21svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic1)"><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(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg24cp0"><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(#svgimg24cp0)"><g color="rgb(255, 105, 108)"><clipPath id="svgimg24svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic1)"><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(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg27cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp4"><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(#svgimg27cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><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(#svgimg27cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic3)"><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(#svgimg27cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic5)"><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(#irc29)"><clipPath id="svgimg30vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg30vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg30cp0"><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(#svgimg30cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg30svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg30svgic1)"><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(#irc32)"><clipPath id="svgimg33vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg33vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg33cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg33ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg33cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33cp4"><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(#svgimg33cp0)"><g clip-path="url(#svgimg33ov1)"><g clip-path="url(#svgimg33cp2)"><g clip-path="url(#svgimg33ct3)"><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(#svgimg33cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg33svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg33svgic5)"><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)">Glass Material Over Artwork</text><g clip-path="url(#cp8)"><g clip-path="url(#irc35)"><clipPath id="svgimg36vclip"><rect x="16" y="1110" width="520" height="112"/></clipPath><g clip-path="url(#svgimg36vclip)"><g transform="translate(16 1110)"><defs><filter id="svgimg36sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter><filter id="svgimg36sh1" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg36cp2"><rect x="42" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp4"><rect x="82" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp6"><rect x="122" y="42" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="35" height="60" rx="0" fill="rgb(27,42,92)"/><rect x="55" y="20" width="35" height="60" rx="0" fill="rgb(122,63,110)"/><rect x="90" y="20" width="35" height="60" rx="0" fill="rgb(194,87,122)"/><rect x="125" y="20" width="35" height="60" rx="0" fill="rgb(244,179,107)"/><rect x="28" y="34" width="124" height="44" rx="22" fill="rgba(0,0,0,0.28)" filter="url(#svgimg36sh0)"/><rect x="28" y="29" width="124" height="44" rx="22" fill="rgba(0,0,0,0.32)" filter="url(#svgimg36sh1)"/><rect x="28" y="28" width="124" height="44" rx="22" fill="rgba(28,28,30,0.8)"/><rect x="28.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(255,255,255,0.16)" stroke-width="1"/><rect x="30.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(#svgimg36cp2)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic3"><rect x="42" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic3)"><g transform="translate(42 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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="70.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(#svgimg36cp4)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic5"><rect x="82" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic5)"><g transform="translate(82 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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="110.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(#svgimg36cp6)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic7"><rect x="122" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic7)"><g transform="translate(122 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(245, 245, 247)" 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(245, 245, 247)" 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="1250" 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(#cp9)"><g clip-path="url(#irc38)"><clipPath id="svgimg39vclip"><rect x="16" y="1260" width="520" height="96"/></clipPath><g clip-path="url(#svgimg39vclip)"><g transform="translate(16 1260)"><defs><clipPath id="svgimg39cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg39cp2"><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(#svgimg39cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg39svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic1)"><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(#svgimg39cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg39svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic3)"><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 1372" width="552" height="1372"><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="112"/></clipPath><clipPath id="cp9"><rect x="16" y="1260" width="520" height="96"/></clipPath><clipPath id="ct10"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct28"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc29"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct31"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc32"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct34"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc35"><rect x="16" y="1110" width="520" height="112" rx="0"/></clipPath><clipPath id="ct37"><rect x="16" y="1238" width="520" height="22"/></clipPath><clipPath id="irc38"><rect x="16" y="1260" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1372" 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(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg12cp0"><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(#svgimg12cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg12svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic1)"><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(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg15cp0"><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(#svgimg15cp0)"><g color="rgb(138, 203, 255)"><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="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(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg18cp0"><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(#svgimg18cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg18svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg18svgic1)"><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(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg21cp0"><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(#svgimg21cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg21svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic1)"><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(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg24cp0"><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(#svgimg24cp0)"><g color="rgb(255, 133, 136)"><clipPath id="svgimg24svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic1)"><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, 133, 136)" 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, 133, 136)" 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(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg27cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp4"><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(#svgimg27cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><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(#svgimg27cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic3)"><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(#svgimg27cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic5)"><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(#irc29)"><clipPath id="svgimg30vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg30vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg30cp0"><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(#svgimg30cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg30svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg30svgic1)"><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(#irc32)"><clipPath id="svgimg33vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg33vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg33cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg33ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg33cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33cp4"><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(#svgimg33cp0)"><g clip-path="url(#svgimg33ov1)"><g clip-path="url(#svgimg33cp2)"><g clip-path="url(#svgimg33ct3)"><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(#svgimg33cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg33svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg33svgic5)"><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)">Glass Material Over Artwork</text><g clip-path="url(#cp8)"><g clip-path="url(#irc35)"><clipPath id="svgimg36vclip"><rect x="16" y="1110" width="520" height="112"/></clipPath><g clip-path="url(#svgimg36vclip)"><g transform="translate(16 1110)"><defs><filter id="svgimg36sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter><filter id="svgimg36sh1" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg36cp2"><rect x="42" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp4"><rect x="82" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp6"><rect x="122" y="42" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="35" height="60" rx="0" fill="rgb(27,42,92)"/><rect x="55" y="20" width="35" height="60" rx="0" fill="rgb(122,63,110)"/><rect x="90" y="20" width="35" height="60" rx="0" fill="rgb(194,87,122)"/><rect x="125" y="20" width="35" height="60" rx="0" fill="rgb(244,179,107)"/><rect x="28" y="34" width="124" height="44" rx="22" fill="rgba(0,0,0,0.28)" filter="url(#svgimg36sh0)"/><rect x="28" y="29" width="124" height="44" rx="22" fill="rgba(0,0,0,0.32)" filter="url(#svgimg36sh1)"/><rect x="28" y="28" width="124" height="44" rx="22" fill="rgba(28,28,30,0.8)"/><rect x="28.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(255,255,255,0.16)" stroke-width="1"/><rect x="30.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(#svgimg36cp2)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic3"><rect x="42" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic3)"><g transform="translate(42 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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="70.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(#svgimg36cp4)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic5"><rect x="82" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic5)"><g transform="translate(82 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(245, 245, 247)" 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(245, 245, 247)" 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(245, 245, 247)" 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="110.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(#svgimg36cp6)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic7"><rect x="122" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic7)"><g transform="translate(122 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(245, 245, 247)" 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(245, 245, 247)" 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="1250" 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(#cp9)"><g clip-path="url(#irc38)"><clipPath id="svgimg39vclip"><rect x="16" y="1260" width="520" height="96"/></clipPath><g clip-path="url(#svgimg39vclip)"><g transform="translate(16 1260)"><defs><clipPath id="svgimg39cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg39cp2"><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(#svgimg39cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg39svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic1)"><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(#svgimg39cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg39svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic3)"><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.md CHANGED
@@ -89,7 +89,9 @@ entry (`dist/browser/<name>.js`), which imports every stylesheet the component's
89
89
  runtime reaches. A nested component's styles — the `Badge` inside `StateBanner` or
90
90
  `ListHeader`, the `Skeleton` inside a placeholder — are therefore loaded exactly as a
91
91
  consumer's browser import loads them, instead of depending on a hand-maintained
92
- list. Run `npm run build` before the template build so those entries exist.
92
+ list. The capture also inlines relative CSS `@import` statements from public
93
+ stylesheets, because its standalone HTML pages live outside `dist/styles`.
94
+ Run `npm run build` before the template build so those entries exist.
93
95
 
94
96
  **Keep the templates current as components change.** The variants live in the
95
97
  `COMPONENTS` manifest in `scripts/build-design-templates.mjs` — when a component
package/docs/editor-frame.md ADDED
@@ -0,0 +1,47 @@
1
+ # EditorFrame
2
+
3
+ `EditorFrame` owns the geometry of a bounded writing surface. It keeps a Kerf
4
+ `Toolbar` above one scroll owner and gives standalone editors their border,
5
+ surface, radius, and inset. The application supplies a native `<textarea>` in
6
+ `mode="source"` or rendered content in `mode="preview"`; it retains the draft,
7
+ recovery, edit actions, and preview rendering.
8
+
9
+ ```tsx
10
+ import { EditorFrame } from '@kerfjs/ui/editor-frame';
11
+ import { Toolbar } from '@kerfjs/ui/toolbar';
12
+
13
+ <EditorFrame
14
+ mode="source"
15
+ label="Markdown Editor"
16
+ toolbar={<Toolbar label="Markdown Editor Toolbar" trailing={actions} />}
17
+ >
18
+ <textarea name="markdown-source" aria-label="Markdown Source">
19
+ {draft}
20
+ </textarea>
21
+ </EditorFrame>;
22
+ ```
23
+
24
+ The framed default is 320px high and at most 672px wide; `height` and `maxWidth`
25
+ accept typed `CssLength` values. The toolbar row stays fixed. In source mode,
26
+ the native textarea fills the remaining space and scrolls its own text while
27
+ the surrounding surface clips overflow. In preview mode, the surface scrolls
28
+ around the application's rendered content. No second nested scrollport is
29
+ introduced.
30
+
31
+ Set `appearance="embedded"` when a host already owns the frame. The border,
32
+ radius, fill, and fixed height then drop away. The embedded source can use
33
+ `sourceHeight` for a restored native textarea height or `sourceAutosize` to
34
+ grow with its content; the application still owns persistence and value updates.
35
+ Set `inset="flush"` when the host already provides the text inset. These modes
36
+ preserve the native textarea's selection, input events, and form behavior.
37
+
38
+ Set `expanded` to place the same editor in a fixed viewport overlay with a
39
+ 32px inset and raised shadow. This takes precedence over embedded appearance
40
+ while expanded. The application owns the expand control, focus management, and
41
+ any modal behavior it needs. `toolbar` accepts a normal Kerf Toolbar and is
42
+ omitted when the embedded host supplies its own controls.
43
+
44
+ Import `@kerfjs/ui/editor-frame.css` when not using the browser export
45
+ condition; the browser entry includes its stylesheet automatically. The
46
+ component is demonstrated by the EditorFrame UX catalog route, with source,
47
+ preview, and embedded variants.
package/docs/investigations/content-item-media-scroll-performance.md ADDED
@@ -0,0 +1,26 @@
1
+ # ContentItem media scroll performance investigation
2
+
3
+ `ContentItem.media` composes `BackdropImage` for image-led cards. A recorded Newsmonger feed with 200 image-backed cards exposed a Chromium scroll regression under fourfold CPU throttling (KF-NMB087, 200-card media performance investigation). The comparison used the former feed image nodes as its baseline and the public beta.111 media composition as its effect. Both loaded the same server data and 200 unique image URLs; all images decoded before scrolling, and neither run reported page errors. The baseline bundle override was checked for raw story images and zero `BackdropImage` nodes, and the effect for the inverse.
4
+
5
+ | 200 cards, 240 forward/reverse frames | Former feed p95 | Media effect p95 | Frames over 50 ms, former → effect |
6
+ | ------------------------------------- | --------------: | ---------------: | ---------------------------------: |
7
+ | 1440px, 2400px local crossing | 19.0 ms | 50.9 ms | 0 → 13 |
8
+ | 390px, 2400px local crossing | 19.0 ms | 26.7 ms | 0 → 0 |
9
+ | 1440px, rapid full-feed sweep | 23.6 ms | 73.0 ms | 0 → 123 |
10
+ | 390px, rapid full-feed sweep | 18.8 ms | 42.4 ms | 0 → 1 |
11
+
12
+ The rapid desktop trace increased Layerize from 389 to 3621 ms, PrePaint from 55 to 629 ms, Paint from 2704 to 3346 ms, raster from 1065 to 1870 ms, and peak observed layers from 9 to 141. These event durations overlap and cannot be summed as CPU time. The trace recorded no geometric Layout events, and app JavaScript was comparatively small. Layer construction, prepaint, and raster are leading suspects; the trace does not isolate parallax, blur, fade, mask, tint, or image memory. The 432 MB unique-source RGBA figure is an estimate from natural image sizes, not measured GPU allocation.
13
+
14
+ A browser-side CSS ablation toggled the moving, blurred, filtered, and masked layers without changing component source. It did not establish a causal ranking: in a single page of 200 cards (396 image elements, because two media blocks were absent), the unchanged desktop effect measured 43.1 ms p95 on its first pass and 22.6 ms when repeated after the variants. That run requested decode for every present image but did not separately record the decoded count. The two completed fresh-context variants were not counterbalanced. Each toggle's computed animation, filter, and mask state was checked, and no page errors occurred. The narrow, warmed passes clustered near 19 ms p95. One-pass toggles therefore cannot justify a component change or an application CSS workaround.
15
+
16
+ KF-J5SAFS followed up with counterbalanced measurements and an opt-in shared-component change below. The original raw traces and harnesses are attached to KF-NMB087.
17
+
18
+ ## Follow-up measurement and shipped option
19
+
20
+ KF-J5SAFS repeated fresh-context CSS ablations against the same seeded real feed under Chromium fourfold CPU throttling. In two counterbalanced 200-card desktop blocks, the unchanged effect measured 44–46 ms first-pass p95. Removing the parallax layer lowered it to 33–34 ms; removing filters alone did not improve it. Deferring the whole card's offscreen rendering lowered it to 19–21 ms, but initially shortened the feed's scroll height by 473–507px. That violates scroll restoration and can cause a jump as cards become visible.
21
+
22
+ Applying `content-visibility: auto` only to the `BackdropImage` hero preserved the measured scroll height exactly while lowering first-pass p95 from 44.7 to 33.3 ms at 1440px and 31.0 to 25.1 ms at 390px. Peak observed layers fell from 97 to 33 and from 44 to 16, respectively. This is an opt-in `BackdropImage.deferOffscreen` / `ContentItem.media.deferOffscreen` setting for dense feeds. It leaves the card body, actions, aspect-ratio reservation, and shared Pane scrollport in layout; browsers without `content-visibility` simply paint the hero normally. The existing scroll timeline and static accessibility fallbacks remain unchanged.
23
+
24
+ An exact 50-card counterbalanced follow-up found first-pass p95 of 18.7 ms unchanged versus 18.6 ms with hero deferral at 1440px, and 18.2 versus 18.6 ms at 390px. All four runs preserved feed scroll height; peak layers were 97 versus 33 on desktop and 44 versus 16 on narrow. The 50-card feed is near the display cadence floor, so deferral provides no measurable frame-time gain at that size. The earlier mismatched 50/52-card block is excluded from this conclusion.
25
+
26
+ The 200-card hero ablation decoded 324/396 images before traversal on desktop and 352/396 on narrow, versus all images in the unchanged effect. Browser checks therefore verify that visible images are ready after scrolling to them and that feed geometry remains stable. These numbers measure a specific seeded local feed and CPU setting, not a general frame-time guarantee.
package/docs/layout.md CHANGED
@@ -448,6 +448,40 @@ the inline margin, padding, and border. Use it for content such as a markdown
448
448
  preview that must reach the item's top and bottom edges. `title` passes through
449
449
  to the root element as a native tooltip.
450
450
 
451
+ For an image-led feed card, pass `media={{ src, alt, aspectRatio?, srcset?,
452
+ sizes?, position?, parallax?, blurredSrc?, blur?, fadeTo?, overlay?, scrim?,
453
+ edgeToEdge? }}` and an optional app-sampled
454
+ `tint={{ color, scheme, accent? }}`. The image reserves a 16:9 block by default,
455
+ loads lazily with async decode, and stays inside the item's existing border and
456
+ padding by default. `edgeToEdge` reaches the top, left, and right inner edges.
457
+ The card composes `BackdropImage` for its scroll timeline, optional overlay and
458
+ scrim, progressive `blur`, and typed `fadeTo` that continues behind its body.
459
+ `blurredSrc` is a pre-blurred decorative copy; the browser animates
460
+ only its opacity and the image layer's transform. Each image has its own view
461
+ timeline in the containing Pane's shared vertical scroller. Set
462
+ `media.deferOffscreen` for dense feeds: it skips painting an offscreen
463
+ image hero while preserving the card and its reserved media height. Enable it
464
+ only when many media cards share a scrollport; it has no effect in browsers
465
+ without `content-visibility`. The card body and controls remain in the layout.
466
+ `wireContentItems`
467
+ also listens for image load/error from one containing root: a broken lead image
468
+ hides its media block and removes its tint, leaving an ordinary ContentItem;
469
+ changing its source and loading successfully restores the card treatment. A
470
+ card with no `media` keeps the existing surface and geometry. Do not create a
471
+ scroller inside each card. A source link or multiple actions belong inside a
472
+ static ContentItem so each retains native keyboard behavior.
473
+
474
+ For long image-led feeds, see the [200-card scroll performance investigation](investigations/content-item-media-scroll-performance.md) before choosing media effects. Its controlled measurements and warmup limit are recorded there; optimization is tracked separately.
475
+
476
+ The image stays sharp and static under reduced motion, the static-effects
477
+ switch, a slow-update display, or missing scroll-timeline support. Reduced
478
+ transparency and increased contrast also stop the movement and blur; forced
479
+ colors hides the image and uses system surface colors. The tint uses the same
480
+ light/dark AA-clamped tokens as a tinted Pane, including quiet text, links,
481
+ controls, and focus. The application provides the sampled color and scheme.
482
+ On a light tint without an accent, the brand on-fill color is capped at 30%
483
+ OKLCH lightness so a compact info Badge remains AA-readable on its pale fill.
484
+
451
485
  For a static item that needs focus, set `tabIndex={0}` for a Tab stop or
452
486
  `tabIndex={-1}` for programmatic focus. Set `outlined` for a persistent focus
453
487
  ring, such as a drop target, on static or interactive items. Interactive items