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

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 (158) hide show
  1. package/README.md +1 -0
  2. package/ai/component-catalog.json +9 -2
  3. package/ai/component-composition.json +8 -1
  4. package/ai/components/button.md +5 -2
  5. package/ai/components/surface-scaffold.md +3 -0
  6. package/ai/public-api-signatures-v1.md +86 -39
  7. package/ai/skill.md +4 -0
  8. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  9. package/dist/backdrop-image.d.ts +8 -0
  10. package/dist/backdrop-image.js +1 -1
  11. package/dist/browser/content-item.js +1 -0
  12. package/dist/button.d.ts +4 -2
  13. package/dist/button.js +1 -1
  14. package/dist/catalog-resources.d.ts +2 -1
  15. package/dist/catalog.d.ts +2 -1
  16. package/dist/catalog.js +2 -1
  17. package/dist/catalog.js.map +1 -1
  18. package/dist/{chunk-P7EJ4CAD.js → chunk-ETFP7HAR.js} +2 -2
  19. package/dist/{chunk-P7EJ4CAD.js.map → chunk-ETFP7HAR.js.map} +1 -1
  20. package/dist/{chunk-SOFPUW3O.js → chunk-IIQ2XIMU.js} +4 -3
  21. package/dist/chunk-IIQ2XIMU.js.map +1 -0
  22. package/dist/chunk-IRC5N7FA.js +16 -0
  23. package/dist/chunk-IRC5N7FA.js.map +1 -0
  24. package/dist/{chunk-SQ5DH66U.js → chunk-ITENVZ6Q.js} +2 -15
  25. package/dist/chunk-ITENVZ6Q.js.map +1 -0
  26. package/dist/{chunk-WSEJ2FDE.js → chunk-OUCHU7JB.js} +2 -2
  27. package/dist/{chunk-WSEJ2FDE.js.map → chunk-OUCHU7JB.js.map} +1 -1
  28. package/dist/{chunk-KPINJHIC.js → chunk-PS24PVR6.js} +3 -1
  29. package/dist/chunk-PS24PVR6.js.map +1 -0
  30. package/dist/{chunk-SCDWURBO.js → chunk-SOBRGH7T.js} +18 -3
  31. package/dist/chunk-SOBRGH7T.js.map +1 -0
  32. package/dist/{chunk-6CDILXF4.js → chunk-VGECEXM6.js} +11 -2
  33. package/dist/chunk-VGECEXM6.js.map +1 -0
  34. package/dist/chunk-WD6KABEU.js +200 -0
  35. package/dist/chunk-WD6KABEU.js.map +1 -0
  36. package/dist/{chunk-HQZG3OFL.js → chunk-XRZSK2WC.js} +3 -2
  37. package/dist/chunk-XRZSK2WC.js.map +1 -0
  38. package/dist/{chunk-CPSGUGAY.js → chunk-YPAQFBMN.js} +4 -4
  39. package/dist/{chunk-CPSGUGAY.js.map → chunk-YPAQFBMN.js.map} +1 -1
  40. package/dist/collapsible-panel.d.ts +1 -0
  41. package/dist/collapsible-panel.js +3 -2
  42. package/dist/collapsible-panel.js.map +1 -1
  43. package/dist/content-item.d.ts +44 -2
  44. package/dist/content-item.js +4 -1
  45. package/dist/index.d.ts +3 -2
  46. package/dist/index.js +6 -5
  47. package/dist/list-detail-dialog.d.ts +2 -1
  48. package/dist/list-detail-dialog.js +4 -3
  49. package/dist/list-detail-dialog.js.map +1 -1
  50. package/dist/{nav-stack-CU_0dKtI.d.ts → nav-stack-CrZF95VO.d.ts} +2 -1
  51. package/dist/nav-stack.d.ts +2 -1
  52. package/dist/nav-stack.js +2 -1
  53. package/dist/pane.d.ts +3 -23
  54. package/dist/pane.js +2 -1
  55. package/dist/split-view.d.ts +2 -1
  56. package/dist/split-view.js +2 -1
  57. package/dist/styles/backdrop-image.css +18 -1
  58. package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css +18 -1
  59. package/dist/styles/components/surfaces/content-item/content-item.css +52 -0
  60. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +9 -1
  61. package/dist/styles/content-item.css +3 -168
  62. package/dist/styles/foundation.css +4 -4
  63. package/dist/styles/surface-scaffold.css +9 -1
  64. package/dist/styles/webawesome.css +2 -2
  65. package/dist/surface-scaffold.d.ts +6 -2
  66. package/dist/surface-scaffold.js +1 -1
  67. package/dist/surface-tint-DQgYCaP9.d.ts +25 -0
  68. package/dist/tab-navigator.d.ts +2 -1
  69. package/dist/tab-navigator.js +2 -1
  70. package/dist/tab-navigator.js.map +1 -1
  71. package/dist/toolbar.d.ts +1 -0
  72. package/dist/wire-catalog.d.ts +2 -1
  73. package/dist/wire-content-items.js +62 -0
  74. package/dist/wire-content-items.js.map +1 -1
  75. package/dist/workbench-dialog.d.ts +2 -1
  76. package/dist/workbench-dialog.js +3 -2
  77. package/dist/workbench-dialog.js.map +1 -1
  78. package/dist/workbench.d.ts +2 -1
  79. package/dist/workbench.js +2 -1
  80. package/docs/accessibility.md +6 -0
  81. package/docs/backdrop-image.md +4 -0
  82. package/docs/button.md +15 -0
  83. package/docs/component-contract.md +7 -0
  84. package/docs/component-selection.md +1 -1
  85. package/docs/design/templates/button/emphasis-dark.svg +1 -1
  86. package/docs/design/templates/button-dark.svg +1 -1
  87. package/docs/design/templates/checkbox/error-dark.svg +1 -1
  88. package/docs/design/templates/checkbox/states.svg +1 -1
  89. package/docs/design/templates/checkbox-dark.svg +1 -1
  90. package/docs/design/templates/checkbox-group/horizontal-dark.svg +1 -1
  91. package/docs/design/templates/checkbox-group/vertical.svg +1 -1
  92. package/docs/design/templates/checkbox-group-dark.svg +1 -1
  93. package/docs/design/templates/checkbox-group.svg +1 -1
  94. package/docs/design/templates/checkbox.svg +1 -1
  95. package/docs/design/templates/choice-chips/color-palette-dark.svg +1 -1
  96. package/docs/design/templates/choice-chips-dark.svg +1 -1
  97. package/docs/design/templates/color-field/error-dark.svg +1 -1
  98. package/docs/design/templates/color-field/hint.svg +1 -1
  99. package/docs/design/templates/color-field-dark.svg +1 -1
  100. package/docs/design/templates/color-field.svg +1 -1
  101. package/docs/design/templates/color-picker/gray.svg +1 -1
  102. package/docs/design/templates/color-picker/hsb.svg +1 -1
  103. package/docs/design/templates/color-picker/rgb.svg +1 -1
  104. package/docs/design/templates/color-picker.svg +1 -1
  105. package/docs/design/templates/color-swatches/palette-dark.svg +1 -1
  106. package/docs/design/templates/color-swatches-dark.svg +1 -1
  107. package/docs/design/templates/disclosure/embedded.svg +1 -1
  108. package/docs/design/templates/disclosure/framed-sunken.svg +1 -1
  109. package/docs/design/templates/disclosure/plain.svg +1 -1
  110. package/docs/design/templates/disclosure.svg +1 -1
  111. package/docs/design/templates/message-composer/chat.svg +1 -1
  112. package/docs/design/templates/message-composer.svg +1 -1
  113. package/docs/design/templates/progress-bar/determinate.svg +1 -1
  114. package/docs/design/templates/progress-bar/tones.svg +1 -1
  115. package/docs/design/templates/progress-bar.svg +1 -1
  116. package/docs/design/templates/radio-group/horizontal-dark.svg +1 -1
  117. package/docs/design/templates/radio-group/vertical.svg +1 -1
  118. package/docs/design/templates/radio-group-dark.svg +1 -1
  119. package/docs/design/templates/radio-group.svg +1 -1
  120. package/docs/design/templates/search-field/empty.svg +1 -1
  121. package/docs/design/templates/search-field/tokens.svg +1 -1
  122. package/docs/design/templates/search-field.svg +1 -1
  123. package/docs/design/templates/select/form.svg +1 -1
  124. package/docs/design/templates/select.svg +1 -1
  125. package/docs/design/templates/slider/compact.svg +1 -1
  126. package/docs/design/templates/slider/readout.svg +1 -1
  127. package/docs/design/templates/slider/ticks.svg +1 -1
  128. package/docs/design/templates/slider.svg +1 -1
  129. package/docs/design/templates/switch/states.svg +1 -1
  130. package/docs/design/templates/switch.svg +1 -1
  131. package/docs/design/templates/tag-field/error-dark.svg +1 -1
  132. package/docs/design/templates/tag-field/error.svg +1 -1
  133. package/docs/design/templates/tag-field/tags.svg +1 -1
  134. package/docs/design/templates/tag-field-dark.svg +1 -1
  135. package/docs/design/templates/tag-field.svg +1 -1
  136. package/docs/design/templates/text-field/error-dark.svg +1 -1
  137. package/docs/design/templates/text-field/labeled.svg +1 -1
  138. package/docs/design/templates/text-field/multiline.svg +1 -1
  139. package/docs/design/templates/text-field/search.svg +1 -1
  140. package/docs/design/templates/text-field-dark.svg +1 -1
  141. package/docs/design/templates/text-field.svg +1 -1
  142. package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -1
  143. package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
  144. package/docs/design/templates.md +3 -1
  145. package/docs/layout.md +25 -0
  146. package/docs/manual-test-plan.md +27 -1
  147. package/docs/recipes.md +9 -0
  148. package/docs/surface-scaffold.md +4 -1
  149. package/llms.txt +3 -0
  150. package/package.json +1 -1
  151. package/dist/chunk-5USKCWGL.js +0 -113
  152. package/dist/chunk-5USKCWGL.js.map +0 -1
  153. package/dist/chunk-6CDILXF4.js.map +0 -1
  154. package/dist/chunk-HQZG3OFL.js.map +0 -1
  155. package/dist/chunk-KPINJHIC.js.map +0 -1
  156. package/dist/chunk-SCDWURBO.js.map +0 -1
  157. package/dist/chunk-SOFPUW3O.js.map +0 -1
  158. package/dist/chunk-SQ5DH66U.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/layout.md CHANGED
@@ -448,6 +448,31 @@ 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. `wireContentItems`
462
+ also listens for image load/error from one containing root: a broken lead image
463
+ hides its media block and removes its tint, leaving an ordinary ContentItem;
464
+ changing its source and loading successfully restores the card treatment. A
465
+ card with no `media` keeps the existing surface and geometry. Do not create a
466
+ scroller inside each card. A source link or multiple actions belong inside a
467
+ static ContentItem so each retains native keyboard behavior.
468
+
469
+ The image stays sharp and static under reduced motion, the static-effects
470
+ switch, a slow-update display, or missing scroll-timeline support. Reduced
471
+ transparency and increased contrast also stop the movement and blur; forced
472
+ colors hides the image and uses system surface colors. The tint uses the same
473
+ light/dark AA-clamped tokens as a tinted Pane, including quiet text, links,
474
+ controls, and focus. The application provides the sampled color and scheme.
475
+
451
476
  For a static item that needs focus, set `tabIndex={0}` for a Tab stop or
452
477
  `tabIndex={-1}` for programmatic focus. Set `outlined` for a persistent focus
453
478
  ring, such as a drop target, on static or interactive items. Interactive items
package/docs/manual-test-plan.md CHANGED
@@ -26,4 +26,30 @@ in `tests/browser/dialog-bottom-sheet.spec.ts`.
26
26
 
27
27
  ## Automated coverage summary
28
28
 
29
- Nothing has moved from this plan into automation yet.
29
+ The feed-card route `?component=content-item`, example "Image-Tinted Feed
30
+ Cards", has unit coverage for image state transitions and three-engine browser
31
+ coverage for independent timelines, reverse scrolling, image error/recovery,
32
+ light/dark tint contrast, reduced motion, increased contrast, and forced
33
+ colors. Wide and narrow light/dark captures were inspected for text, controls,
34
+ image clipping, and card spacing. A 50/200-card Chromium trace checks node and
35
+ listener growth; it uses repeated sample artwork, so a production feed with
36
+ unique high-resolution assets still needs its own image-cache profiling.
37
+ The composed BackdropImage card has browser checks for its edge geometry,
38
+ fade, scrim, and focusable overlay at wide and narrow sizes; inspect the same
39
+ states in both captured WebKit views.
40
+
41
+ The remaining device-only checks above require a real mobile keyboard.
42
+ The List View Transitions catalog example has unit coverage for its row edits,
43
+ pending-snapshot queue, and clip lifecycle, with browser coverage for real controls, fallback,
44
+ reduced motion, and wide/narrow layout. Its animation was visually inspected
45
+ at both widths; the browser tests verify names and state after each edit.
46
+ The real catalog scroll position is checked during and after all four List
47
+ transition actions at wide and narrow viewports. During motion, check that
48
+ named rows stay within the visible example and do not cover the catalog footer
49
+ or neighboring examples; the browser suite checks the computed transition
50
+ clip at wide and narrow viewports. Also check that the catalog header, sidebar,
51
+ and surrounding examples remain painted throughout the transition; browser
52
+ captures compare a header pixel before and during motion at narrow, medium,
53
+ and review-sized viewports.
54
+ The row viewport has a fixed height across Reorder, Insert Delta, Remove Last,
55
+ and Reset; inspect the disappearing last row within it at wide and narrow sizes.
package/docs/recipes.md CHANGED
@@ -220,6 +220,15 @@ and [`backdrop-image.md`](backdrop-image.md) for the image.
220
220
 
221
221
  ## Rules shared by every recipe
222
222
 
223
+ An image-led feed composes `ContentItem` rows with `media` and a per-card
224
+ app-sampled `tint` inside one scrolling Pane. Each image reserves its size and
225
+ animates on its own view timeline as it crosses that Pane's top edge. Use
226
+ `wireContentItems` on the stable app root for image load/error as well as card
227
+ keyboard behavior. Put source links and actions inside static cards. Use
228
+ `ContentItem.media` composes `BackdropImage` for each feed row; use the public
229
+ `BackdropImage` directly for a page hero. See
230
+ [Content items](layout.md#content-items) and [BackdropImage](backdrop-image.md).
231
+
223
232
  - Import `@kerfjs/ui/layout.css`; keep every pane unpadded and use exactly one
224
233
  `.kui-pane__content` scroll owner for each real boundary.
225
234
  - For direct `wa-*` JSX, import types from `@kerfjs/ui/webawesome`. Import only
package/docs/surface-scaffold.md CHANGED
@@ -47,7 +47,10 @@ openDialog(document.getElementById('edit-workspace') as HTMLDialogElement);
47
47
  copy in the body. `rootAttributes` takes only `data-*` attributes, so it can
48
48
  never set or override `aria-describedby`.
49
49
  - **Header.** The title, then `headerActions` and a close button (`closeLabel`,
50
- default `Close`). `withoutHeader` renders none, for content that owns its
50
+ default `Close`). Set `closeEmphasis="quiet"` for a smaller, softer X in the
51
+ same 40px button target; the default `"normal"` keeps the standard close
52
+ control. Both preserve the accessible name, keyboard focus, and close
53
+ request behavior. `withoutHeader` renders none, for content that owns its
51
54
  heading and close control.
52
55
  - **Body and footer.** `children` is the body; `footer` sits below it (or
53
56
  floats over it, see [Chat dialogs](#chat-dialogs-a-floating-footer-over-a-filling-transcript)).
package/llms.txt CHANGED
@@ -717,6 +717,9 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
717
717
  renders a native `aria-pressed` button whose pressed look draws on top of
718
718
  its tone and emphasis; the app flips the state. Never wrap a
719
719
  `ToolbarControlGroup` outside a toolbar or restyle a button to fake it.
720
+ - **Mark a current setup step with `Button.currentStep`.** It emits
721
+ `aria-current="step"` on a button or link, including a disabled current step.
722
+ The app owns the step label and which step is current. See `docs/button.md`.
720
723
  - **Let an icon-state toggle skip selected chrome.** When a pressed toggle's
721
724
  glyph already shows its state (an empty or filled star), set
722
725
  `data-selected-chrome="none"` on that button, or `selectedChrome="none"` on
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerfjs/ui",
3
- "version": "5.0.0-beta.110",
3
+ "version": "5.0.0-beta.111",
4
4
  "description": "Accessible, composable UI primitives for kerf applications.",
5
5
  "type": "module",
6
6
  "license": "MIT",