@kerfjs/ui 5.0.0-beta.106 → 5.0.0-beta.108

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 (283) hide show
  1. package/README.md +2 -1
  2. package/ai/application-ui-diagnostic-ids-v1.json +1 -0
  3. package/ai/application-ui-profile.defaults.json +6 -1
  4. package/ai/component-catalog.json +184 -39
  5. package/ai/component-composition-rules.json +20 -2
  6. package/ai/component-composition.d.ts +11 -0
  7. package/ai/component-composition.json +126 -21
  8. package/ai/component-composition.schema.json +32 -0
  9. package/ai/components/README.md +3 -2
  10. package/ai/components/button.md +9 -6
  11. package/ai/components/checkbox-group.md +89 -0
  12. package/ai/components/checkbox.md +3 -2
  13. package/ai/components/chip.md +1 -0
  14. package/ai/components/color-picker.md +10 -7
  15. package/ai/components/disclosure.md +6 -1
  16. package/ai/components/foundation.md +1 -1
  17. package/ai/components/list-detail-dialog.md +1 -1
  18. package/ai/components/list.md +1 -1
  19. package/ai/components/message-composer.md +2 -1
  20. package/ai/components/radio-group.md +4 -3
  21. package/ai/components/segmented-control.md +1 -0
  22. package/ai/components/split-button.md +5 -2
  23. package/ai/components/surface-scaffold.md +3 -1
  24. package/ai/components/switch.md +1 -1
  25. package/ai/components/text-field.md +3 -1
  26. package/ai/components/text.md +2 -0
  27. package/ai/components/toolbar-control-group.md +1 -0
  28. package/ai/components/toolbar.md +1 -1
  29. package/ai/components/wa-checkbox-group.md +5 -5
  30. package/ai/components/workbench-dialog.md +1 -1
  31. package/ai/public-api-signatures-v1.md +258 -35
  32. package/ai/skill.md +82 -65
  33. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  34. package/dist/browser/checkbox-group.js +5 -0
  35. package/dist/button.d.ts +18 -5
  36. package/dist/button.js +1 -1
  37. package/dist/catalog.js +11 -10
  38. package/dist/catalog.js.map +1 -1
  39. package/dist/checkbox-group.d.ts +70 -0
  40. package/dist/checkbox-group.js +7 -0
  41. package/dist/checkbox-group.js.map +1 -0
  42. package/dist/chip.d.ts +20 -2
  43. package/dist/chip.js +2 -1
  44. package/dist/{chunk-SQ2Q3OQI.js → chunk-2LM3PYHA.js} +2 -2
  45. package/dist/{chunk-SQ2Q3OQI.js.map → chunk-2LM3PYHA.js.map} +1 -1
  46. package/dist/{chunk-HYORKKYP.js → chunk-3VZ6SFD4.js} +1 -1
  47. package/dist/chunk-3VZ6SFD4.js.map +1 -0
  48. package/dist/{chunk-EKBMUXFV.js → chunk-3Z7N2NAZ.js} +141 -54
  49. package/dist/chunk-3Z7N2NAZ.js.map +1 -0
  50. package/dist/{chunk-23PPPNH6.js → chunk-4OV272LF.js} +2 -2
  51. package/dist/{chunk-23PPPNH6.js.map → chunk-4OV272LF.js.map} +1 -1
  52. package/dist/{chunk-2PXZBFEC.js → chunk-5J6Z4BWY.js} +1 -1
  53. package/dist/{chunk-2PXZBFEC.js.map → chunk-5J6Z4BWY.js.map} +1 -1
  54. package/dist/{chunk-TAHR457X.js → chunk-6CDILXF4.js} +5 -1
  55. package/dist/chunk-6CDILXF4.js.map +1 -0
  56. package/dist/{chunk-DDSCVEO5.js → chunk-CPSGUGAY.js} +6 -6
  57. package/dist/{chunk-DDSCVEO5.js.map → chunk-CPSGUGAY.js.map} +1 -1
  58. package/dist/{chunk-C3RLKKFQ.js → chunk-EYDXFOSH.js} +13 -8
  59. package/dist/chunk-EYDXFOSH.js.map +1 -0
  60. package/dist/{chunk-PE2KPZDW.js → chunk-HDXUHLTQ.js} +7 -2
  61. package/dist/chunk-HDXUHLTQ.js.map +1 -0
  62. package/dist/chunk-HU5IHXCI.js +73 -0
  63. package/dist/chunk-HU5IHXCI.js.map +1 -0
  64. package/dist/{chunk-DF2YKGIX.js → chunk-JCCN3U6X.js} +2 -2
  65. package/dist/{chunk-DF2YKGIX.js.map → chunk-JCCN3U6X.js.map} +1 -1
  66. package/dist/{chunk-UTCAOOXU.js → chunk-KPINJHIC.js} +8 -2
  67. package/dist/chunk-KPINJHIC.js.map +1 -0
  68. package/dist/{chunk-N7MBGONH.js → chunk-LMHN2TJL.js} +22 -2
  69. package/dist/chunk-LMHN2TJL.js.map +1 -0
  70. package/dist/{chunk-NS2TBYM4.js → chunk-LZUUUHNH.js} +7 -3
  71. package/dist/chunk-LZUUUHNH.js.map +1 -0
  72. package/dist/{chunk-GCAK23PU.js → chunk-MVKHSAKE.js} +2 -2
  73. package/dist/{chunk-GCAK23PU.js.map → chunk-MVKHSAKE.js.map} +1 -1
  74. package/dist/{chunk-OY2MXIBB.js → chunk-NB6POCFH.js} +3 -1
  75. package/dist/chunk-NB6POCFH.js.map +1 -0
  76. package/dist/{chunk-ECFCAKWE.js → chunk-NR6O74ST.js} +5 -1
  77. package/dist/chunk-NR6O74ST.js.map +1 -0
  78. package/dist/{chunk-7W3GKMN4.js → chunk-OQP3PFKQ.js} +7 -4
  79. package/dist/chunk-OQP3PFKQ.js.map +1 -0
  80. package/dist/{chunk-FKKJHGN5.js → chunk-P7EJ4CAD.js} +2 -2
  81. package/dist/{chunk-FKKJHGN5.js.map → chunk-P7EJ4CAD.js.map} +1 -1
  82. package/dist/{chunk-ZXZAECHZ.js → chunk-SOFPUW3O.js} +4 -4
  83. package/dist/{chunk-ZXZAECHZ.js.map → chunk-SOFPUW3O.js.map} +1 -1
  84. package/dist/{chunk-WJKHLOP5.js → chunk-TI2GV36S.js} +8 -2
  85. package/dist/chunk-TI2GV36S.js.map +1 -0
  86. package/dist/{chunk-QLA25V2K.js → chunk-WPNIKZMJ.js} +15 -1
  87. package/dist/chunk-WPNIKZMJ.js.map +1 -0
  88. package/dist/{chunk-FG6U7KQQ.js → chunk-WSEJ2FDE.js} +4 -4
  89. package/dist/{chunk-FG6U7KQQ.js.map → chunk-WSEJ2FDE.js.map} +1 -1
  90. package/dist/{chunk-ACUKTVS3.js → chunk-XWNXGFX3.js} +52 -42
  91. package/dist/chunk-XWNXGFX3.js.map +1 -0
  92. package/dist/{chunk-WU57BYYM.js → chunk-YVZCKXR3.js} +8 -2
  93. package/dist/chunk-YVZCKXR3.js.map +1 -0
  94. package/dist/{chunk-CMLPFIC5.js → chunk-ZN7KUMPY.js} +3 -1
  95. package/dist/chunk-ZN7KUMPY.js.map +1 -0
  96. package/dist/collapsible-panel.js +2 -2
  97. package/dist/color-picker.d.ts +30 -5
  98. package/dist/color-picker.js +1 -1
  99. package/dist/disclosure.d.ts +13 -4
  100. package/dist/disclosure.js.map +1 -1
  101. package/dist/help-tags-register.js +1 -1
  102. package/dist/index.d.ts +2 -1
  103. package/dist/index.js +24 -23
  104. package/dist/list-action-row.js +1 -1
  105. package/dist/list-detail-dialog.d.ts +7 -1
  106. package/dist/list-detail-dialog.js +7 -5
  107. package/dist/list-detail-dialog.js.map +1 -1
  108. package/dist/list-header.d.ts +8 -1
  109. package/dist/list-header.js +1 -1
  110. package/dist/list.d.ts +7 -1
  111. package/dist/list.js +1 -1
  112. package/dist/message-composer.js +1 -1
  113. package/dist/nav-stack.js +1 -1
  114. package/dist/popup-menu-register.js +2 -2
  115. package/dist/popup-menu.d.ts +15 -5
  116. package/dist/popup-menu.js +1 -1
  117. package/dist/segmented-control.d.ts +3 -1
  118. package/dist/segmented-control.js +1 -1
  119. package/dist/select-register.js +3 -3
  120. package/dist/split-button.d.ts +14 -2
  121. package/dist/split-button.js +1 -1
  122. package/dist/split-view.js +1 -1
  123. package/dist/styles/anchored-surface.css +3 -0
  124. package/dist/styles/button.css +57 -2
  125. package/dist/styles/catalog/components/catalog-example.css +55 -18
  126. package/dist/styles/checkbox-group.css +63 -0
  127. package/dist/styles/checkbox.css +7 -6
  128. package/dist/styles/color-picker.css +69 -34
  129. package/dist/styles/components/actions/button/button.css +57 -2
  130. package/dist/styles/components/actions/split-button/split-button.css +51 -5
  131. package/dist/styles/components/actions/toolbar/toolbar.css +9 -0
  132. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +29 -1
  133. package/dist/styles/components/collections/framed-list/framed-list.css +6 -0
  134. package/dist/styles/components/collections/list/list.css +6 -0
  135. package/dist/styles/components/collections/list-header/list-header.css +7 -0
  136. package/dist/styles/components/feedback/anchored-surface/anchored-surface.css +3 -0
  137. package/dist/styles/components/forms/checkbox/checkbox.css +7 -6
  138. package/dist/styles/components/forms/checkbox-group/checkbox-group.css +63 -0
  139. package/dist/styles/components/forms/color-picker/color-picker.css +69 -34
  140. package/dist/styles/components/forms/radio-group/radio-group.css +7 -5
  141. package/dist/styles/components/forms/select/select.css +6 -2
  142. package/dist/styles/components/forms/switch/switch.css +3 -3
  143. package/dist/styles/components/layout/pane/pane.css +24 -0
  144. package/dist/styles/components/layout/workbench/workbench.css +4 -0
  145. package/dist/styles/components/navigation/nav-stack/nav-stack.css +77 -1
  146. package/dist/styles/components/navigation/tab-bar/tab-bar.css +6 -0
  147. package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +17 -0
  148. package/dist/styles/components/surfaces/content-item/content-item.css +30 -0
  149. package/dist/styles/components/surfaces/disclosure/disclosure.css +38 -0
  150. package/dist/styles/components/surfaces/sunken-panel/sunken-panel.css +3 -0
  151. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +8 -0
  152. package/dist/styles/components/typography/text/text.css +10 -0
  153. package/dist/styles/content-item.css +30 -0
  154. package/dist/styles/disclosure.css +38 -0
  155. package/dist/styles/foundation.css +78 -13
  156. package/dist/styles/framed-list.css +6 -0
  157. package/dist/styles/list-header.css +7 -0
  158. package/dist/styles/list.css +6 -0
  159. package/dist/styles/nav-stack.css +77 -1
  160. package/dist/styles/pane.css +24 -0
  161. package/dist/styles/radio-group.css +7 -5
  162. package/dist/styles/select.css +6 -2
  163. package/dist/styles/split-button.css +51 -5
  164. package/dist/styles/styles.css +1 -0
  165. package/dist/styles/sunken-panel.css +3 -0
  166. package/dist/styles/surface-scaffold.css +8 -0
  167. package/dist/styles/switch.css +3 -3
  168. package/dist/styles/tab-bar.css +6 -0
  169. package/dist/styles/tab-navigator.css +17 -0
  170. package/dist/styles/text.css +10 -0
  171. package/dist/styles/toolbar-control-group.css +29 -1
  172. package/dist/styles/toolbar.css +9 -0
  173. package/dist/styles/webawesome.css +56 -12
  174. package/dist/styles/workbench.css +4 -0
  175. package/dist/surface-scaffold.d.ts +15 -1
  176. package/dist/surface-scaffold.js +1 -1
  177. package/dist/text-field.d.ts +7 -1
  178. package/dist/text-field.js +1 -1
  179. package/dist/toolbar-control-group.d.ts +8 -2
  180. package/dist/toolbar-control-group.js +1 -1
  181. package/dist/toolbar.d.ts +6 -1
  182. package/dist/toolbar.js +1 -1
  183. package/dist/wire-catalog.js +1 -1
  184. package/dist/wire-color-fields.js +2 -2
  185. package/dist/wire-color-pickers.d.ts +4 -3
  186. package/dist/wire-color-pickers.js +1 -1
  187. package/dist/wire-comboboxes.js +1 -1
  188. package/dist/wire-workbench.js +1 -1
  189. package/dist/workbench-dialog.d.ts +11 -2
  190. package/dist/workbench-dialog.js +6 -3
  191. package/dist/workbench-dialog.js.map +1 -1
  192. package/dist/workbench.js +1 -1
  193. package/docs/accessibility.md +58 -3
  194. package/docs/anchored-surface.md +6 -1
  195. package/docs/catalog.md +26 -1
  196. package/docs/color-picker.md +39 -8
  197. package/docs/component-contract.md +47 -3
  198. package/docs/component-selection.md +58 -21
  199. package/docs/design/templates/button/full-width-dark.svg +1 -0
  200. package/docs/design/templates/button/full-width.svg +1 -0
  201. package/docs/design/templates/button/tones-dark.svg +1 -1
  202. package/docs/design/templates/button/tones.svg +1 -1
  203. package/docs/design/templates/button-dark.svg +1 -1
  204. package/docs/design/templates/button.svg +1 -1
  205. package/docs/design/templates/checkbox/error-dark.svg +1 -1
  206. package/docs/design/templates/checkbox/error.svg +1 -1
  207. package/docs/design/templates/checkbox/states-dark.svg +1 -1
  208. package/docs/design/templates/checkbox/states.svg +1 -1
  209. package/docs/design/templates/checkbox-dark.svg +1 -1
  210. package/docs/design/templates/checkbox-group/horizontal-dark.svg +1 -0
  211. package/docs/design/templates/checkbox-group/horizontal.svg +1 -0
  212. package/docs/design/templates/checkbox-group/vertical-dark.svg +1 -0
  213. package/docs/design/templates/checkbox-group/vertical.svg +1 -0
  214. package/docs/design/templates/checkbox-group-dark.svg +1 -0
  215. package/docs/design/templates/checkbox-group.svg +1 -0
  216. package/docs/design/templates/checkbox.svg +1 -1
  217. package/docs/design/templates/color-picker/gray-dark.svg +1 -1
  218. package/docs/design/templates/color-picker/gray.svg +1 -1
  219. package/docs/design/templates/color-picker/hsb-dark.svg +1 -0
  220. package/docs/design/templates/color-picker/hsb.svg +1 -0
  221. package/docs/design/templates/color-picker/rgb-dark.svg +1 -1
  222. package/docs/design/templates/color-picker/rgb.svg +1 -1
  223. package/docs/design/templates/color-picker-dark.svg +1 -1
  224. package/docs/design/templates/color-picker.svg +1 -1
  225. package/docs/design/templates/disclosure/embedded-dark.svg +1 -0
  226. package/docs/design/templates/disclosure/embedded.svg +1 -0
  227. package/docs/design/templates/disclosure-dark.svg +1 -1
  228. package/docs/design/templates/disclosure.svg +1 -1
  229. package/docs/design/templates/radio-group/horizontal-dark.svg +1 -1
  230. package/docs/design/templates/radio-group/horizontal.svg +1 -1
  231. package/docs/design/templates/radio-group/vertical-dark.svg +1 -1
  232. package/docs/design/templates/radio-group/vertical.svg +1 -1
  233. package/docs/design/templates/radio-group-dark.svg +1 -1
  234. package/docs/design/templates/radio-group.svg +1 -1
  235. package/docs/design/templates/split-button/full-width-dark.svg +1 -0
  236. package/docs/design/templates/split-button/full-width.svg +1 -0
  237. package/docs/design/templates/split-button/pill-dark.svg +1 -0
  238. package/docs/design/templates/split-button/pill.svg +1 -0
  239. package/docs/design/templates/split-button/states-dark.svg +1 -0
  240. package/docs/design/templates/split-button/states.svg +1 -0
  241. package/docs/design/templates/split-button/tones-dark.svg +1 -0
  242. package/docs/design/templates/split-button/tones.svg +1 -0
  243. package/docs/design/templates/split-button-dark.svg +1 -0
  244. package/docs/design/templates/split-button.svg +1 -0
  245. package/docs/design/templates/switch/states-dark.svg +1 -1
  246. package/docs/design/templates/switch/states.svg +1 -1
  247. package/docs/design/templates/switch-dark.svg +1 -1
  248. package/docs/design/templates/switch.svg +1 -1
  249. package/docs/design/templates/text-field/number-dark.svg +1 -0
  250. package/docs/design/templates/text-field/number.svg +1 -0
  251. package/docs/design/templates/text-field-dark.svg +1 -1
  252. package/docs/design/templates/text-field.svg +1 -1
  253. package/docs/design/templates.md +10 -3
  254. package/docs/disclosure.md +34 -0
  255. package/docs/layout.md +16 -5
  256. package/docs/list-detail-dialog.md +4 -0
  257. package/docs/nav-stack.md +6 -2
  258. package/docs/surface-scaffold.md +6 -2
  259. package/docs/ui-doctor.md +16 -4
  260. package/docs/webawesome-migration.md +3 -1
  261. package/docs/webawesome-theme.md +56 -18
  262. package/docs/workbench-dialog.md +4 -1
  263. package/docs/workbench.md +7 -1
  264. package/docs/writing.md +3 -3
  265. package/doctor/copy-capitalization-checks.mjs +10 -7
  266. package/llms.txt +65 -23
  267. package/package.json +7 -1
  268. package/dist/chunk-7W3GKMN4.js.map +0 -1
  269. package/dist/chunk-ACUKTVS3.js.map +0 -1
  270. package/dist/chunk-C3RLKKFQ.js.map +0 -1
  271. package/dist/chunk-CMLPFIC5.js.map +0 -1
  272. package/dist/chunk-ECFCAKWE.js.map +0 -1
  273. package/dist/chunk-EKBMUXFV.js.map +0 -1
  274. package/dist/chunk-HYORKKYP.js.map +0 -1
  275. package/dist/chunk-N7MBGONH.js.map +0 -1
  276. package/dist/chunk-NS2TBYM4.js.map +0 -1
  277. package/dist/chunk-OY2MXIBB.js.map +0 -1
  278. package/dist/chunk-PE2KPZDW.js.map +0 -1
  279. package/dist/chunk-QLA25V2K.js.map +0 -1
  280. package/dist/chunk-TAHR457X.js.map +0 -1
  281. package/dist/chunk-UTCAOOXU.js.map +0 -1
  282. package/dist/chunk-WJKHLOP5.js.map +0 -1
  283. package/dist/chunk-WU57BYYM.js.map +0 -1
package/docs/design/templates/split-button-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 504" width="552" height="504"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="504" 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)">Rounded Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="56" y="33" width="51.7" height="18"/></clipPath><clipPath id="svgimg6ct3"><rect x="56" y="33" width="51.7" height="18"/></clipPath><mask id="svgimg6bm4"><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw5"><polygon points="120,64 121,64 121,20 120,20"/></clipPath><clipPath id="svgimg6br6"><path d="M119.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp7"><rect x="132" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg6cp9"><rect x="179.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg6ct10"><rect x="179.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg6bm11"><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw12"><polygon points="280,64 281,64 281,20 280,20"/></clipPath><clipPath id="svgimg6br13"><path d="M279.6 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp14"><rect x="292" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg6cp16"><rect x="339.6" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg6ct17"><rect x="339.6" y="33" width="48" height="18"/></clipPath><mask id="svgimg6bm18"><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw19"><polygon points="400,64 401,64 401,20 400,20"/></clipPath><clipPath id="svgimg6br20"><path d="M399.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp21"><rect x="412" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="139.7" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(#svgimg6cp2)"><g clip-path="url(#svgimg6ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Deploy</text></g></g><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw5)"/><g clip-path="url(#svgimg6br6)"/><g clip-path="url(#svgimg6cp7)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic8"><rect x="132.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic8)"><g transform="translate(132.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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="167.7" y="20" width="152" height="44" rx="12" fill="rgb(229,229,234)"/><g clip-path="url(#svgimg6cp9)"><g clip-path="url(#svgimg6ct10)"><text x="179.66" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Run Checks</text></g></g><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(28,28,30,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw12)"/><g clip-path="url(#svgimg6br13)"/><g clip-path="url(#svgimg6cp14)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg6svgic15"><rect x="292.1" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic15)"><g transform="translate(292.14 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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="327.6" y="20" width="112" height="44" rx="12" fill="rgb(255,56,60)"/><g clip-path="url(#svgimg6cp16)"><g clip-path="url(#svgimg6ct17)"><text x="339.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete</text></g></g><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw19)"/><g clip-path="url(#svgimg6br20)"/><g clip-path="url(#svgimg6cp21)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic22"><rect x="412.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic22)"><g transform="translate(412.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg9cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg9cp2"><rect x="56" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="56" y="33" width="48.7" height="18"/></clipPath><mask id="svgimg9bm4"><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw5"><polygon points="117,64 118,64 118,20 117,20"/></clipPath><clipPath id="svgimg9br6"><path d="M116.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp7"><rect x="129" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp9"><rect x="176.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg9ct10"><rect x="176.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg9bm11"><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw12"><polygon points="277,64 278,64 278,20 277,20"/></clipPath><clipPath id="svgimg9br13"><path d="M276.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp14"><rect x="289" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp16"><rect x="336.7" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg9ct17"><rect x="336.7" y="33" width="48" height="18"/></clipPath><mask id="svgimg9bm18"><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw19"><polygon points="397,64 398,64 398,20 397,20"/></clipPath><clipPath id="svgimg9br20"><path d="M396.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp21"><rect x="409" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="136.7" height="44" rx="22" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15V3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m7 10 5 5 5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(#svgimg9cp2)"><g clip-path="url(#svgimg9ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Export</text></g></g><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw5)"/><g clip-path="url(#svgimg9br6)"/><g clip-path="url(#svgimg9cp7)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic8"><rect x="129.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic8)"><g transform="translate(129.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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="164.7" y="20" width="152" height="44" rx="22" fill="rgb(229,229,234)"/><g clip-path="url(#svgimg9cp9)"><g clip-path="url(#svgimg9ct10)"><text x="176.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Run Checks</text></g></g><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(28,28,30,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw12)"/><g clip-path="url(#svgimg9br13)"/><g clip-path="url(#svgimg9cp14)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg9svgic15"><rect x="289.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic15)"><g transform="translate(289.172 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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="324.7" y="20" width="112" height="44" rx="22" fill="rgb(255,56,60)"/><g clip-path="url(#svgimg9cp16)"><g clip-path="url(#svgimg9ct17)"><text x="336.67" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete</text></g></g><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw19)"/><g clip-path="url(#svgimg9br20)"/><g clip-path="url(#svgimg9cp21)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic22"><rect x="409.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic22)"><g transform="translate(409.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Busy and Disabled</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg12cp0"><rect x="56" y="33" width="74.4" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="56" y="33" width="74.4" height="18"/></clipPath><mask id="svgimg12bm2"><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw3"><polygon points="142,64 143,64 143,20 142,20"/></clipPath><clipPath id="svgimg12br4"><path d="M142.4 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp5"><rect x="154.9" y="34" width="16.1" height="16"/></clipPath><mask id="svgimg12bm7"><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw8"><polygon points="269,64 270,64 270,20 269,20"/></clipPath><clipPath id="svgimg12br9"><path d="M268.9 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp10"><rect x="281" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg12cp12"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath><clipPath id="svgimg12ct13"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath></defs><rect x="20" y="20" width="162.4" height="44" rx="12" fill="rgb(229,229,234)"/><g color="rgb(28, 28, 30)"><g transform="translate(32 34)scale(.66667)"><path d="M12 4a8 8 0 0 1 7.9 6.7 1.5 1.5 0 0 0 1.5 1.3 1.5 1.5 0 0 0 1.5-1.7 11 11 0 0 0-21.8 0A1.5 1.5 0 0 0 2.6 12a1.5 1.5 0 0 0 1.5-1.3A8 8 0 0 1 12 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="rgb(28, 28, 30)" stroke="none" stroke-width="1px" stroke-dasharray="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Deploying</text></g></g><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(28,28,30,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw3)"/><g clip-path="url(#svgimg12br4)"/><g clip-path="url(#svgimg12cp5)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg12svgic6"><rect x="154.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic6)"><g transform="translate(154.906 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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="190.4" y="20" width="118.5" height="44" rx="12" fill="rgb(100,210,255)"/><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw8)"/><g clip-path="url(#svgimg12br9)"/><g clip-path="url(#svgimg12cp10)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg12svgic11"><rect x="281.4" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic11)"><g transform="translate(281.375 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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 opacity="0.6" style="isolation:isolate"><g clip-path="url(#svgimg12cp12)"><g clip-path="url(#svgimg12ct13)"><text x="202.41" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Publish</text></g></g></g></g></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Full-Width Primary Action</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg15cp0"><rect x="145" y="34" width="16.3" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><clipPath id="svgimg15ct3"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><mask id="svgimg15bm4"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg15bw5"><polygon points="420,64 421,64 421,20 420,20"/></clipPath><clipPath id="svgimg15br6"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg15cp7"><rect x="432.5" y="34" width="16.5" height="16"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(52,199,89)"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic1"><rect x="145.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(145.266 34)scale(.66667)"><path d="M5 5a2 2 0 0 1 3-1.7l12 7a2 2 0 0 1 0 3.4l-12 7A2 2 0 0 1 5 19Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" 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(#svgimg15cp2)"><g clip-path="url(#svgimg15ct3)"><text x="169.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Drive with Codex</text></g></g><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(29,29,31,0.28)" fill-rule="evenodd" clip-path="url(#svgimg15bw5)"/><g clip-path="url(#svgimg15br6)"/><g clip-path="url(#svgimg15cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic8"><rect x="432.5" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic8)"><g transform="translate(432.5 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" 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/split-button.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 504" width="552" height="504"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="504" 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)">Rounded Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="56" y="33" width="51.7" height="18"/></clipPath><clipPath id="svgimg6ct3"><rect x="56" y="33" width="51.7" height="18"/></clipPath><mask id="svgimg6bm4"><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw5"><polygon points="120,64 121,64 121,20 120,20"/></clipPath><clipPath id="svgimg6br6"><path d="M119.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp7"><rect x="132" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg6cp9"><rect x="179.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg6ct10"><rect x="179.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg6bm11"><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw12"><polygon points="280,64 281,64 281,20 280,20"/></clipPath><clipPath id="svgimg6br13"><path d="M279.6 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp14"><rect x="292" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg6cp16"><rect x="339.6" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg6ct17"><rect x="339.6" y="33" width="48" height="18"/></clipPath><mask id="svgimg6bm18"><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw19"><polygon points="400,64 401,64 401,20 400,20"/></clipPath><clipPath id="svgimg6br20"><path d="M399.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp21"><rect x="412" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="139.7" height="44" rx="12" fill="rgb(0,117,219)"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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 clip-path="url(#svgimg6cp2)"><g clip-path="url(#svgimg6ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Deploy</text></g></g><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw5)"/><g clip-path="url(#svgimg6br6)"/><g clip-path="url(#svgimg6cp7)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic8"><rect x="132.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic8)"><g transform="translate(132.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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><rect x="167.7" y="20" width="152" height="44" rx="12" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg6cp9)"><g clip-path="url(#svgimg6ct10)"><text x="179.66" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Run Checks</text></g></g><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw12)"/><g clip-path="url(#svgimg6br13)"/><g clip-path="url(#svgimg6cp14)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic15"><rect x="292.1" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic15)"><g transform="translate(292.14 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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><rect x="327.6" y="20" width="112" height="44" rx="12" fill="rgb(235,0,5)"/><g clip-path="url(#svgimg6cp16)"><g clip-path="url(#svgimg6ct17)"><text x="339.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete</text></g></g><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw19)"/><g clip-path="url(#svgimg6br20)"/><g clip-path="url(#svgimg6cp21)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic22"><rect x="412.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic22)"><g transform="translate(412.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Pill Shape</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg9cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg9cp2"><rect x="56" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="56" y="33" width="48.7" height="18"/></clipPath><mask id="svgimg9bm4"><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw5"><polygon points="117,64 118,64 118,20 117,20"/></clipPath><clipPath id="svgimg9br6"><path d="M116.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp7"><rect x="129" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp9"><rect x="176.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg9ct10"><rect x="176.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg9bm11"><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw12"><polygon points="277,64 278,64 278,20 277,20"/></clipPath><clipPath id="svgimg9br13"><path d="M276.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp14"><rect x="289" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp16"><rect x="336.7" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg9ct17"><rect x="336.7" y="33" width="48" height="18"/></clipPath><mask id="svgimg9bm18"><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw19"><polygon points="397,64 398,64 398,20 397,20"/></clipPath><clipPath id="svgimg9br20"><path d="M396.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp21"><rect x="409" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="136.7" height="44" rx="22" fill="rgb(0,117,219)"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15V3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m7 10 5 5 5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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 clip-path="url(#svgimg9cp2)"><g clip-path="url(#svgimg9ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Export</text></g></g><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw5)"/><g clip-path="url(#svgimg9br6)"/><g clip-path="url(#svgimg9cp7)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic8"><rect x="129.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic8)"><g transform="translate(129.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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><rect x="164.7" y="20" width="152" height="44" rx="22" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg9cp9)"><g clip-path="url(#svgimg9ct10)"><text x="176.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Run Checks</text></g></g><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw12)"/><g clip-path="url(#svgimg9br13)"/><g clip-path="url(#svgimg9cp14)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic15"><rect x="289.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic15)"><g transform="translate(289.172 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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><rect x="324.7" y="20" width="112" height="44" rx="22" fill="rgb(235,0,5)"/><g clip-path="url(#svgimg9cp16)"><g clip-path="url(#svgimg9ct17)"><text x="336.67" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete</text></g></g><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw19)"/><g clip-path="url(#svgimg9br20)"/><g clip-path="url(#svgimg9cp21)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic22"><rect x="409.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic22)"><g transform="translate(409.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Busy and Disabled</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg12cp0"><rect x="56" y="33" width="74.4" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="56" y="33" width="74.4" height="18"/></clipPath><mask id="svgimg12bm2"><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw3"><polygon points="142,64 143,64 143,20 142,20"/></clipPath><clipPath id="svgimg12br4"><path d="M142.4 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp5"><rect x="154.9" y="34" width="16.1" height="16"/></clipPath><mask id="svgimg12bm7"><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw8"><polygon points="269,64 270,64 270,20 269,20"/></clipPath><clipPath id="svgimg12br9"><path d="M268.9 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp10"><rect x="281" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg12cp12"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath><clipPath id="svgimg12ct13"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath></defs><rect x="20" y="20" width="162.4" height="44" rx="12" fill="rgb(72,72,74)"/><g color="rgb(255, 255, 255)"><g transform="translate(32 34)scale(.66667)"><path d="M12 4a8 8 0 0 1 7.9 6.7 1.5 1.5 0 0 0 1.5 1.3 1.5 1.5 0 0 0 1.5-1.7 11 11 0 0 0-21.8 0A1.5 1.5 0 0 0 2.6 12a1.5 1.5 0 0 0 1.5-1.3A8 8 0 0 1 12 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="rgb(255, 255, 255)" stroke="none" stroke-width="1px" stroke-dasharray="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Deploying</text></g></g><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw3)"/><g clip-path="url(#svgimg12br4)"/><g clip-path="url(#svgimg12cp5)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg12svgic6"><rect x="154.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic6)"><g transform="translate(154.906 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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><rect x="190.4" y="20" width="118.5" height="44" rx="12" fill="rgb(0,117,219)"/><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw8)"/><g clip-path="url(#svgimg12br9)"/><g clip-path="url(#svgimg12cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg12svgic11"><rect x="281.4" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic11)"><g transform="translate(281.375 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 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 opacity="0.6" style="isolation:isolate"><g clip-path="url(#svgimg12cp12)"><g clip-path="url(#svgimg12ct13)"><text x="202.41" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Publish</text></g></g></g></g></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Full-Width Primary Action</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg15cp0"><rect x="145" y="34" width="16.3" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><clipPath id="svgimg15ct3"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><mask id="svgimg15bm4"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg15bw5"><polygon points="420,64 421,64 421,20 420,20"/></clipPath><clipPath id="svgimg15br6"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg15cp7"><rect x="432.5" y="34" width="16.5" height="16"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(52,199,89)"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic1"><rect x="145.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(145.266 34)scale(.66667)"><path d="M5 5a2 2 0 0 1 3-1.7l12 7a2 2 0 0 1 0 3.4l-12 7A2 2 0 0 1 5 19Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" 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(#svgimg15cp2)"><g clip-path="url(#svgimg15ct3)"><text x="169.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Drive with Codex</text></g></g><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(29,29,31,0.28)" fill-rule="evenodd" clip-path="url(#svgimg15bw5)"/><g clip-path="url(#svgimg15br6)"/><g clip-path="url(#svgimg15cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic8"><rect x="432.5" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic8)"><g transform="translate(432.5 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" 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/switch/states-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></svg>
package/docs/design/templates/switch/states.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></svg>
package/docs/design/templates/switch-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(100,210,255)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(28,28,30)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(28,28,30)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(253,253,255,0.196)"/></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(100,210,255)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(28,28,30)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(28,28,30)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(253,253,255,0.196)"/></g></g></g></g></svg>
package/docs/design/templates/switch.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(0,117,219)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(255,255,255)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(255,255,255)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(0,0,28,0.18)"/></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(0,117,219)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(255,255,255)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(255,255,255)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(0,0,28,0.18)"/></g></g></g></g></svg>
package/docs/design/templates/text-field/number-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 94" width="400" height="94"><defs><clipPath id="ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="ct2"><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(#cp1)"><g clip-path="url(#ct2)"><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></svg>
package/docs/design/templates/text-field/number.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 94" width="400" height="94"><defs><clipPath id="ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="ct2"><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(#cp1)"><g clip-path="url(#ct2)"><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></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 819" width="432" height="819"><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="ct5"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="819" 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(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg7cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct5"><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(#svgimg7cp1)"><g clip-path="url(#svgimg7ct2)"><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(#svgimg7cp3)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg7svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic4)"><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(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg10cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg10cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg10ct3"><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(#svgimg10cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg10svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><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(#svgimg10cp2)"><g clip-path="url(#svgimg10ct3)"><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(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg13ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg13ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct4"><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(#svgimg13cp2)"><g clip-path="url(#svgimg13ct3)"><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(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg16ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg16cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg16ct3"><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(#svgimg16cp1)"><g clip-path="url(#svgimg16ct2)"><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(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg19ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg19cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg19ct2"><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(#svgimg19cp1)"><g clip-path="url(#svgimg19ct2)"><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></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,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>
package/docs/design/templates/text-field.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 819" width="432" height="819"><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="ct5"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="819" 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(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg7cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct5"><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(#svgimg7cp1)"><g clip-path="url(#svgimg7ct2)"><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(#svgimg7cp3)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg7svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic4)"><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(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg10cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg10cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg10ct3"><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(#svgimg10cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg10svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><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(#svgimg10cp2)"><g clip-path="url(#svgimg10ct3)"><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(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg13ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg13ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct4"><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(#svgimg13cp2)"><g clip-path="url(#svgimg13ct3)"><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(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg16ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg16cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg16ct3"><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(#svgimg16cp1)"><g clip-path="url(#svgimg16ct2)"><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(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg19ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg19cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg19ct2"><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(#svgimg19cp1)"><g clip-path="url(#svgimg19ct2)"><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></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(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>
package/docs/design/templates.md CHANGED
@@ -13,8 +13,8 @@ Templated components (each with light + dark variants):
13
13
  `ToolbarControlGroup`, `Toolbar`, `ToolbarText`, `List`, `ListItem`, `ListHeader`,
14
14
  `ListActionRow`, `ValueTable`, `Disclosure`, `ProgressBar`, `ProgressRing`, `StateBanner`, `EmptyState`, `Skeleton`,
15
15
  `SegmentedControl`, `TabBar`/`TabBarItem`, `SearchField`, `TagField`, `Chip`, `ChoiceChips`,
16
- `MessageComposer`, `ColorPicker`, `ColorField`, `ColorSwatches`, and the native form controls `Button`, `TextField`, `Checkbox`,
17
- `RadioGroup`, `Switch`, `Slider`, and `Select`.
16
+ `MessageComposer`, `ColorPicker`, `ColorField`, `ColorSwatches`, and the native form controls `Button`, `SplitButton`, `TextField`, `Checkbox`,
17
+ `CheckboxGroup`, `RadioGroup`, `Switch`, `Slider`, and `Select`.
18
18
 
19
19
  Deliberately **not** templated (they don't read as a single static component
20
20
  picture): `DialogSurface`, `ListDetailDialog`, and `WorkbenchDialog` are modal `<dialog>`s that only present as a dialog
@@ -24,7 +24,7 @@ instead; `LucideIcon` and
24
24
  use them; `ResizableRegion` and the whole-screen layouts (`NavStack`,
25
25
  `SplitView`, `Workbench`, `TabNavigator`) and the `Catalog` shell are
26
26
  interaction-/viewport-driven screens rather than component cards — the live UX
27
- catalog and the app-layouts docs cover those. `ColorPicker` is templated from stand-ins: its area and hue and opacity tracks are CSS gradients and range-input pseudo-elements a static capture cannot keep, so the templates draw them as inline SVG gradients and checker squares from the picker's own values (`staticColorPicker`). For the same reason the `Slider` templates draw
27
+ catalog and the app-layouts docs cover those. `ColorPicker` is templated from stand-ins: its area and its channel and opacity tracks are CSS gradients and range-input pseudo-elements a static capture cannot keep, so the templates draw them as inline SVG gradients and checker squares from the picker's own values (`staticColorPicker`). For the same reason the `Slider` templates draw
28
28
  its track, fill, and thumb with template-only stand-in elements built from
29
29
  the Slider's own tokens and fill value (`staticRange` in
30
30
  `scripts/build-design-templates.mjs`). The `ColorField` templates likewise draw the swatch's checkerboard with plain squares (`staticSwatch`), since the capture would embed its conic gradient as a nested SVG.
@@ -53,6 +53,13 @@ docs/design/templates/
53
53
  viewer's system fonts: real, selectable, and small (no embedded font data). The
54
54
  kerf UI design font stack is system-based, so the picture matches; a viewer
55
55
  without those fonts falls back to its own.
56
+ - Variant SVGs have a **transparent background** on purpose, so they keep
57
+ whatever surface they are placed on. Translucent tokens (neutral fills,
58
+ tracks, skeletons, disabled states at 50% opacity, shadows) therefore blend
59
+ with that surface exactly as the live component does: place a dark variant on
60
+ a dark frame. A template-only stand-in that should be opaque must draw its
61
+ own surface underlay instead of painting translucent fills straight onto the
62
+ transparent background.
56
63
  - The **library** files (`<component>.svg` light, `<component>-dark.svg` dark) lay
57
64
  the variants out with captions. The generator writes a temporary HTML page whose
58
65
  `<img>` elements reference the individual variant SVGs, then captures that page
package/docs/disclosure.md CHANGED
@@ -26,6 +26,40 @@ prose in `Text` rather than passing a bare string.
26
26
  it marks a real distinction.
27
27
  - `appearance="sunken"` draws the border on the lowered, textured work surface,
28
28
  for something like a log.
29
+ - `appearance="embedded"` is for a Disclosure inside chrome that already owns
30
+ the content-item geometry, such as a `ContentItem`. See below.
31
+
32
+ ## Embedded in a content item
33
+
34
+ A compact details panel inside a `ContentItem` (a note card's AI feedback)
35
+ would be framed twice by the default geometry: the item's 8px margin, border,
36
+ and padding, then the Disclosure's own. `appearance="embedded"` drops the
37
+ Disclosure's margin, border, and padding, so the summary row starts on the
38
+ item's content inset and the arrow lines up with the item's other icons. The
39
+ summary is a compact row with a 24px minimum height, and it has no hover
40
+ fill, because a fill would touch the arrow and text at the item's content
41
+ edge. Its focus ring sits just outside the row.
42
+
43
+ The content starts on the title's text column, 8px below the summary. Inside
44
+ an item, content brings no inset of its own: use a `flush` `Text` or other
45
+ inline content rather than a block `Text`. `kerf-ui-doctor` (through
46
+ `eslint-plugin-kerfjs`'s `ui-composition` rule) reports a block `Text`, or any
47
+ other child that brings its own content-item inset, directly inside an
48
+ embedded Disclosure as `KUI-L204`.
49
+
50
+ ```tsx
51
+ <ContentItem frame="framed">
52
+ <List gap="xs">
53
+ <Text flush>Move the export button into the toolbar.</Text>
54
+ <Disclosure title="AI Feedback" detail="2 suggestions" appearance="embedded">
55
+ <Text flush tone="quiet">Group Export and Share in one control group.</Text>
56
+ </Disclosure>
57
+ </List>
58
+ </ContentItem>;
59
+ ```
60
+
61
+ Use `embedded` only inside owner chrome. On a pane or a list, the default
62
+ geometry is what puts the Disclosure on the shared content column.
29
63
 
30
64
  ## Open state
31
65
 
package/docs/layout.md CHANGED
@@ -175,10 +175,15 @@ Add `accent` (usually the artwork's most vivid color) to re-derive the brand
175
175
  ramp too: `tint={{ color, scheme, accent }}`. Loud fills (primary buttons, the
176
176
  current popup row, checked controls) and their text, brand text and links,
177
177
  text on brand fills, and the focus ring all take the accent's hue. Lightness
178
- is clamped so each pair keeps AA for any accent: in a light scope the fill
179
- stays at or below 50% OKLCH lightness under white text and brand text at most
180
- 45%; in a dark scope the fill stays between 72% and 85% under near-black text
181
- and brand text at least 80%.
178
+ is clamped so each pair keeps AA for any accent, including vivid green and
179
+ cyan after gamut clipping: in a light scope the fill stays at or below 46%
180
+ OKLCH lightness under white text, brand text at most 36%, and text on brand
181
+ fills at most 30%; in a dark scope the fill stays between 72% and 85% under
182
+ near-black text, brand text at least 94% against a raised tint surface, and
183
+ text on brand fills at least 95% with chroma capped at 0.12. The dark focus
184
+ ring starts at 78% to stay visible on raised tinted surfaces. The browser
185
+ regression sweeps 36 hues, four chroma levels, and three seed lightnesses in
186
+ both schemes with and without the Web Awesome theme.
182
187
 
183
188
  `PaneConfig.tint` forwards like `background`. `NavStack`, `TabNavigator`, and
184
189
  each `TabNavigatorTab` take `tint` for the stack, the navigator, or one scene.
@@ -249,7 +254,13 @@ it to its compact stack through `compactStack`.
249
254
 
250
255
  For an app-owned arrangement outside a `Pane`, name the scroller and its chrome
251
256
  by `id` in `targets`; a `Toolbar` or `List` named as chrome draws the divider
252
- on its side facing the scroller:
257
+ on its side facing the scroller. Both take an `id` prop, so the components
258
+ themselves are named, never a wrapper:
259
+
260
+ ```tsx
261
+ <Toolbar id="results-toolbar" label="Results" leading={title} />
262
+ <List id="results" scrollable flex>{rows}</List>
263
+ ```
253
264
 
254
265
  ```ts
255
266
  wireScrollDividers(appRoot, {