@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96

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 (385) hide show
  1. package/README.md +95 -55
  2. package/ai/component-catalog.json +1328 -94
  3. package/ai/component-composition-rules.json +11 -0
  4. package/ai/component-composition.d.ts +3 -0
  5. package/ai/component-composition.json +955 -23
  6. package/ai/component-composition.schema.json +4 -0
  7. package/ai/components/README.md +12 -0
  8. package/ai/components/badge.md +6 -2
  9. package/ai/components/choice-chips.md +80 -0
  10. package/ai/components/column-track.md +78 -0
  11. package/ai/components/combobox.md +88 -0
  12. package/ai/components/content-item.md +2 -0
  13. package/ai/components/content-swap.md +78 -0
  14. package/ai/components/corner-status.md +88 -0
  15. package/ai/components/document-baseline.md +3 -1
  16. package/ai/components/edge-activity-indicator.md +81 -0
  17. package/ai/components/file-picker.md +88 -0
  18. package/ai/components/foundation.md +1 -1
  19. package/ai/components/framed-list.md +80 -0
  20. package/ai/components/grid.md +2 -1
  21. package/ai/components/icon-button.md +82 -0
  22. package/ai/components/icon-toggle-button.md +80 -0
  23. package/ai/components/list-action-row.md +19 -7
  24. package/ai/components/list-item.md +16 -7
  25. package/ai/components/list.md +5 -2
  26. package/ai/components/nav-stack.md +2 -1
  27. package/ai/components/popup-menu.md +2 -2
  28. package/ai/components/row.md +1 -1
  29. package/ai/components/select.md +2 -1
  30. package/ai/components/split-button.md +80 -0
  31. package/ai/components/split-view.md +1 -1
  32. package/ai/components/state-banner.md +4 -2
  33. package/ai/components/summary-row.md +85 -0
  34. package/ai/components/sunken-panel.md +1 -1
  35. package/ai/components/surface-scaffold.md +8 -2
  36. package/ai/components/text.md +3 -0
  37. package/ai/components/toolbar-control-group.md +4 -2
  38. package/ai/components/toolbar-text.md +1 -0
  39. package/ai/components/toolbar.md +1 -0
  40. package/ai/components/value-table.md +9 -2
  41. package/ai/components/wa-button-group.md +2 -1
  42. package/ai/components/wa-button.md +5 -1
  43. package/ai/public-api-signatures-v1.md +1063 -52
  44. package/ai/skill.md +54 -52
  45. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  46. package/dist/anchored-surface.d.ts +13 -2
  47. package/dist/anchored-surface.js +1 -1
  48. package/dist/app-tab.js +1 -1
  49. package/dist/badge.d.ts +31 -2
  50. package/dist/badge.js +2 -1
  51. package/dist/browser/choice-chips.js +3 -0
  52. package/dist/browser/column-track.js +3 -0
  53. package/dist/browser/combobox.js +3 -0
  54. package/dist/browser/content-swap.js +3 -0
  55. package/dist/browser/corner-status.js +3 -0
  56. package/dist/browser/edge-activity-indicator.js +3 -0
  57. package/dist/browser/file-picker.js +3 -0
  58. package/dist/browser/framed-list.js +3 -0
  59. package/dist/browser/icon-button.js +4 -0
  60. package/dist/browser/icon-toggle-button.js +4 -0
  61. package/dist/browser/list-action-row.js +1 -0
  62. package/dist/browser/split-button.js +5 -0
  63. package/dist/browser/summary-row.js +3 -0
  64. package/dist/catalog-resources.d.ts +1 -0
  65. package/dist/catalog.d.ts +1 -0
  66. package/dist/catalog.js +16 -13
  67. package/dist/catalog.js.map +1 -1
  68. package/dist/chip.d.ts +1 -0
  69. package/dist/choice-chips.d.ts +58 -0
  70. package/dist/choice-chips.js +3 -0
  71. package/dist/choice-chips.js.map +1 -0
  72. package/dist/chunk-2MSPNRWJ.js +82 -0
  73. package/dist/chunk-2MSPNRWJ.js.map +1 -0
  74. package/dist/{chunk-3PO7JEK7.js → chunk-36TL6BCR.js} +18 -4
  75. package/dist/chunk-36TL6BCR.js.map +1 -0
  76. package/dist/{chunk-MORVLMDG.js → chunk-44A6LP54.js} +3 -3
  77. package/dist/chunk-44A6LP54.js.map +1 -0
  78. package/dist/{chunk-7QQ3HE47.js → chunk-4LOK4634.js} +7 -3
  79. package/dist/chunk-4LOK4634.js.map +1 -0
  80. package/dist/chunk-4UB5Z3ZZ.js +68 -0
  81. package/dist/chunk-4UB5Z3ZZ.js.map +1 -0
  82. package/dist/{chunk-PGL6TXFW.js → chunk-6BRRUPJY.js} +6 -2
  83. package/dist/chunk-6BRRUPJY.js.map +1 -0
  84. package/dist/{chunk-KAJVVN7Q.js → chunk-6NOLL5KG.js} +2 -2
  85. package/dist/{chunk-KAJVVN7Q.js.map → chunk-6NOLL5KG.js.map} +1 -1
  86. package/dist/{chunk-IOS2NXW7.js → chunk-76PWEN5Y.js} +13 -2
  87. package/dist/chunk-76PWEN5Y.js.map +1 -0
  88. package/dist/{chunk-B3TROLC2.js → chunk-7IUEBNCO.js} +7 -3
  89. package/dist/chunk-7IUEBNCO.js.map +1 -0
  90. package/dist/{chunk-75YOTZ25.js → chunk-AYHC62OZ.js} +10 -6
  91. package/dist/chunk-AYHC62OZ.js.map +1 -0
  92. package/dist/{chunk-RZYQFGMM.js → chunk-BBU2SPRE.js} +4 -4
  93. package/dist/{chunk-RZYQFGMM.js.map → chunk-BBU2SPRE.js.map} +1 -1
  94. package/dist/{chunk-QCLLBMLA.js → chunk-BU23Z5HZ.js} +37 -12
  95. package/dist/chunk-BU23Z5HZ.js.map +1 -0
  96. package/dist/{chunk-BYHGRKC3.js → chunk-CMLPFIC5.js} +3 -1
  97. package/dist/chunk-CMLPFIC5.js.map +1 -0
  98. package/dist/{chunk-3XPGJUUQ.js → chunk-D5RGM3XA.js} +3 -2
  99. package/dist/chunk-D5RGM3XA.js.map +1 -0
  100. package/dist/chunk-EIET4QLK.js +51 -0
  101. package/dist/chunk-EIET4QLK.js.map +1 -0
  102. package/dist/chunk-ETCWQLJV.js +85 -0
  103. package/dist/chunk-ETCWQLJV.js.map +1 -0
  104. package/dist/chunk-FDZNYD4C.js +138 -0
  105. package/dist/chunk-FDZNYD4C.js.map +1 -0
  106. package/dist/{chunk-XKZPBRU7.js → chunk-FOQK4F3L.js} +25 -5
  107. package/dist/chunk-FOQK4F3L.js.map +1 -0
  108. package/dist/{chunk-FL6J644M.js → chunk-GJYQ27C2.js} +4 -2
  109. package/dist/chunk-GJYQ27C2.js.map +1 -0
  110. package/dist/{chunk-DL55BSQX.js → chunk-GZE2XVKC.js} +8 -1
  111. package/dist/chunk-GZE2XVKC.js.map +1 -0
  112. package/dist/{chunk-YP2G67S7.js → chunk-HO6FU3G7.js} +2 -2
  113. package/dist/{chunk-YP2G67S7.js.map → chunk-HO6FU3G7.js.map} +1 -1
  114. package/dist/{chunk-3DXHNLME.js → chunk-IGTWXPTN.js} +25 -8
  115. package/dist/chunk-IGTWXPTN.js.map +1 -0
  116. package/dist/chunk-IKS72C6P.js +53 -0
  117. package/dist/chunk-IKS72C6P.js.map +1 -0
  118. package/dist/chunk-JYD7G4RG.js +130 -0
  119. package/dist/chunk-JYD7G4RG.js.map +1 -0
  120. package/dist/{chunk-LAZLBC2Q.js → chunk-KH4KEMSP.js} +33 -2
  121. package/dist/chunk-KH4KEMSP.js.map +1 -0
  122. package/dist/chunk-LL45C7BB.js +122 -0
  123. package/dist/chunk-LL45C7BB.js.map +1 -0
  124. package/dist/chunk-M2NRCFRO.js +45 -0
  125. package/dist/chunk-M2NRCFRO.js.map +1 -0
  126. package/dist/chunk-MJ5RU6XT.js +173 -0
  127. package/dist/chunk-MJ5RU6XT.js.map +1 -0
  128. package/dist/{chunk-GIUOXAVL.js → chunk-P74VXMB6.js} +39 -19
  129. package/dist/chunk-P74VXMB6.js.map +1 -0
  130. package/dist/{chunk-TKDDTLG5.js → chunk-PBT3CPPY.js} +31 -3
  131. package/dist/chunk-PBT3CPPY.js.map +1 -0
  132. package/dist/chunk-PRG4CL3Q.js +88 -0
  133. package/dist/chunk-PRG4CL3Q.js.map +1 -0
  134. package/dist/chunk-QH5KOFNS.js +39 -0
  135. package/dist/chunk-QH5KOFNS.js.map +1 -0
  136. package/dist/{chunk-CD5TOO22.js → chunk-QIAPOWHH.js} +2 -2
  137. package/dist/{chunk-CD5TOO22.js.map → chunk-QIAPOWHH.js.map} +1 -1
  138. package/dist/chunk-QQ3TTWFH.js +29 -0
  139. package/dist/chunk-QQ3TTWFH.js.map +1 -0
  140. package/dist/chunk-QYMJHS4K.js +36 -0
  141. package/dist/chunk-QYMJHS4K.js.map +1 -0
  142. package/dist/chunk-R42D2BAO.js +44 -0
  143. package/dist/chunk-R42D2BAO.js.map +1 -0
  144. package/dist/chunk-S2XULQEK.js +52 -0
  145. package/dist/chunk-S2XULQEK.js.map +1 -0
  146. package/dist/{chunk-NMWDHZVM.js → chunk-S4Y3YTAI.js} +2 -2
  147. package/dist/{chunk-NMWDHZVM.js.map → chunk-S4Y3YTAI.js.map} +1 -1
  148. package/dist/{chunk-O27D24CA.js → chunk-TDMHA7C3.js} +3 -2
  149. package/dist/chunk-TDMHA7C3.js.map +1 -0
  150. package/dist/chunk-U6QYTMDB.js +85 -0
  151. package/dist/chunk-U6QYTMDB.js.map +1 -0
  152. package/dist/{chunk-QQICWWNX.js → chunk-V6W56V3N.js} +18 -7
  153. package/dist/chunk-V6W56V3N.js.map +1 -0
  154. package/dist/chunk-W4IK7AWD.js +73 -0
  155. package/dist/chunk-W4IK7AWD.js.map +1 -0
  156. package/dist/{chunk-TNG3XKHB.js → chunk-Y3LC7JQO.js} +26 -8
  157. package/dist/chunk-Y3LC7JQO.js.map +1 -0
  158. package/dist/chunk-YWQGSUF2.js +84 -0
  159. package/dist/chunk-YWQGSUF2.js.map +1 -0
  160. package/dist/{chunk-MTCTX25G.js → chunk-YXOMI7ES.js} +1 -1
  161. package/dist/chunk-YXOMI7ES.js.map +1 -0
  162. package/dist/chunk-ZKKO4MHC.js +25 -0
  163. package/dist/chunk-ZKKO4MHC.js.map +1 -0
  164. package/dist/collapsible-panel.d.ts +10 -3
  165. package/dist/collapsible-panel.js +8 -5
  166. package/dist/collapsible-panel.js.map +1 -1
  167. package/dist/column-track.d.ts +41 -0
  168. package/dist/column-track.js +4 -0
  169. package/dist/column-track.js.map +1 -0
  170. package/dist/combobox.d.ts +40 -0
  171. package/dist/combobox.js +3 -0
  172. package/dist/combobox.js.map +1 -0
  173. package/dist/content-item.d.ts +21 -4
  174. package/dist/content-item.js +1 -1
  175. package/dist/content-swap.d.ts +34 -0
  176. package/dist/content-swap.js +3 -0
  177. package/dist/content-swap.js.map +1 -0
  178. package/dist/corner-status.d.ts +36 -0
  179. package/dist/corner-status.js +3 -0
  180. package/dist/corner-status.js.map +1 -0
  181. package/dist/edge-activity-indicator.d.ts +28 -0
  182. package/dist/edge-activity-indicator.js +3 -0
  183. package/dist/edge-activity-indicator.js.map +1 -0
  184. package/dist/extension-attributes-mu8MFUl0.d.ts +13 -0
  185. package/dist/file-picker.d.ts +47 -0
  186. package/dist/file-picker.js +3 -0
  187. package/dist/file-picker.js.map +1 -0
  188. package/dist/framed-list.d.ts +47 -0
  189. package/dist/framed-list.js +4 -0
  190. package/dist/framed-list.js.map +1 -0
  191. package/dist/grid.js +1 -1
  192. package/dist/help-tags-register.js +1 -1
  193. package/dist/icon-button.d.ts +46 -0
  194. package/dist/icon-button.js +6 -0
  195. package/dist/icon-button.js.map +1 -0
  196. package/dist/icon-toggle-button.d.ts +42 -0
  197. package/dist/icon-toggle-button.js +6 -0
  198. package/dist/icon-toggle-button.js.map +1 -0
  199. package/dist/index.d.ts +23 -6
  200. package/dist/index.js +44 -27
  201. package/dist/list-action-row.d.ts +47 -10
  202. package/dist/list-action-row.js +2 -1
  203. package/dist/list-header.js +1 -1
  204. package/dist/list-inset-text.js +1 -1
  205. package/dist/list-item.d.ts +10 -2
  206. package/dist/list-item.js +1 -1
  207. package/dist/list.d.ts +37 -5
  208. package/dist/list.js +1 -1
  209. package/dist/nav-stack.d.ts +1 -0
  210. package/dist/nav-stack.js +2 -1
  211. package/dist/pane.js +2 -1
  212. package/dist/popup-menu-register.js +18 -1
  213. package/dist/popup-menu-register.js.map +1 -1
  214. package/dist/popup-menu.d.ts +28 -3
  215. package/dist/popup-menu.js +1 -1
  216. package/dist/row.d.ts +6 -2
  217. package/dist/row.js +1 -1
  218. package/dist/select-register.js +1 -1
  219. package/dist/select.js +2 -1
  220. package/dist/split-button.d.ts +57 -0
  221. package/dist/split-button.js +7 -0
  222. package/dist/split-button.js.map +1 -0
  223. package/dist/split-view.d.ts +20 -2
  224. package/dist/split-view.js +22 -1
  225. package/dist/split-view.js.map +1 -1
  226. package/dist/state-banner.d.ts +17 -2
  227. package/dist/state-banner.js +2 -1
  228. package/dist/styles/badge.css +27 -0
  229. package/dist/styles/catalog/components/catalog-example.css +7 -3
  230. package/dist/styles/choice-chips.css +154 -0
  231. package/dist/styles/column-track.css +57 -0
  232. package/dist/styles/combobox.css +113 -0
  233. package/dist/styles/components/actions/icon-button/icon-button.css +22 -0
  234. package/dist/styles/components/actions/icon-toggle-button/icon-toggle-button.css +83 -0
  235. package/dist/styles/components/actions/popup-menu/popup-menu.css +69 -1
  236. package/dist/styles/components/actions/split-button/split-button.css +95 -0
  237. package/dist/styles/components/actions/toolbar/toolbar.css +16 -9
  238. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +144 -48
  239. package/dist/styles/components/actions/toolbar-text/toolbar-text.css +23 -0
  240. package/dist/styles/components/collections/framed-list/framed-list.css +47 -0
  241. package/dist/styles/components/collections/list/list.css +44 -0
  242. package/dist/styles/components/collections/list-action-row/list-action-row.css +39 -0
  243. package/dist/styles/components/collections/list-item/list-item.css +45 -0
  244. package/dist/styles/components/collections/summary-row/summary-row.css +161 -0
  245. package/dist/styles/components/data-display/value-table/value-table.css +76 -0
  246. package/dist/styles/components/feedback/badge/badge.css +27 -0
  247. package/dist/styles/components/feedback/corner-status/corner-status.css +60 -0
  248. package/dist/styles/components/feedback/edge-activity-indicator/edge-activity-indicator.css +127 -0
  249. package/dist/styles/components/feedback/state-banner/state-banner.css +38 -0
  250. package/dist/styles/components/forms/choice-chips/choice-chips.css +154 -0
  251. package/dist/styles/components/forms/combobox/combobox.css +113 -0
  252. package/dist/styles/components/forms/file-picker/file-picker.css +81 -0
  253. package/dist/styles/components/forms/token-search-field/token-search-field.css +12 -1
  254. package/dist/styles/components/layout/column-track/column-track.css +57 -0
  255. package/dist/styles/components/layout/content-swap/content-swap.css +154 -0
  256. package/dist/styles/components/layout/pane/pane.css +2 -8
  257. package/dist/styles/components/layout/workbench/workbench.css +2 -8
  258. package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +1 -4
  259. package/dist/styles/components/surfaces/content-item/content-item.css +18 -0
  260. package/dist/styles/components/surfaces/sunken-panel/sunken-panel.css +1 -4
  261. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +119 -0
  262. package/dist/styles/components/typography/text/text.css +62 -0
  263. package/dist/styles/content-item.css +18 -0
  264. package/dist/styles/content-swap.css +154 -0
  265. package/dist/styles/corner-status.css +60 -0
  266. package/dist/styles/document.css +65 -0
  267. package/dist/styles/edge-activity-indicator.css +127 -0
  268. package/dist/styles/file-picker.css +81 -0
  269. package/dist/styles/foundation.css +8 -0
  270. package/dist/styles/framed-list.css +47 -0
  271. package/dist/styles/icon-button.css +22 -0
  272. package/dist/styles/icon-toggle-button.css +83 -0
  273. package/dist/styles/list-action-row.css +39 -0
  274. package/dist/styles/list-item.css +45 -0
  275. package/dist/styles/list.css +44 -0
  276. package/dist/styles/pane.css +2 -8
  277. package/dist/styles/popup-menu.css +69 -1
  278. package/dist/styles/split-button.css +95 -0
  279. package/dist/styles/state-banner.css +38 -0
  280. package/dist/styles/styles.css +12 -0
  281. package/dist/styles/summary-row.css +161 -0
  282. package/dist/styles/sunken-panel.css +1 -4
  283. package/dist/styles/surface-scaffold.css +119 -0
  284. package/dist/styles/tab-navigator.css +1 -4
  285. package/dist/styles/text.css +62 -0
  286. package/dist/styles/token-search-field.css +12 -1
  287. package/dist/styles/toolbar-control-group.css +144 -48
  288. package/dist/styles/toolbar-text.css +23 -0
  289. package/dist/styles/toolbar.css +16 -9
  290. package/dist/styles/value-table.css +76 -0
  291. package/dist/styles/webawesome.css +4 -4
  292. package/dist/styles/workbench.css +2 -8
  293. package/dist/summary-row.d.ts +56 -0
  294. package/dist/summary-row.js +4 -0
  295. package/dist/summary-row.js.map +1 -0
  296. package/dist/sunken-panel.d.ts +8 -1
  297. package/dist/sunken-panel.js +2 -1
  298. package/dist/surface-scaffold-register.js +7 -1
  299. package/dist/surface-scaffold-register.js.map +1 -1
  300. package/dist/surface-scaffold.d.ts +75 -2
  301. package/dist/surface-scaffold.js +2 -1
  302. package/dist/tab-navigator.js +4 -1
  303. package/dist/tab-navigator.js.map +1 -1
  304. package/dist/text.d.ts +39 -4
  305. package/dist/text.js +1 -1
  306. package/dist/toolbar-control-group.d.ts +8 -1
  307. package/dist/toolbar-control-group.js +1 -1
  308. package/dist/toolbar-text.d.ts +14 -1
  309. package/dist/toolbar-text.js +1 -1
  310. package/dist/toolbar.d.ts +14 -3
  311. package/dist/toolbar.js +1 -1
  312. package/dist/value-table.d.ts +20 -2
  313. package/dist/value-table.js +1 -1
  314. package/dist/wire-catalog.d.ts +1 -0
  315. package/dist/wire-comboboxes.d.ts +26 -0
  316. package/dist/wire-comboboxes.js +3 -0
  317. package/dist/wire-comboboxes.js.map +1 -0
  318. package/dist/wire-corner-status.d.ts +11 -0
  319. package/dist/wire-corner-status.js +3 -0
  320. package/dist/wire-corner-status.js.map +1 -0
  321. package/dist/wire-file-pickers.d.ts +26 -0
  322. package/dist/wire-file-pickers.js +3 -0
  323. package/dist/wire-file-pickers.js.map +1 -0
  324. package/dist/wire-list-reorder.d.ts +41 -0
  325. package/dist/wire-list-reorder.js +3 -0
  326. package/dist/wire-list-reorder.js.map +1 -0
  327. package/dist/wire-token-search-fields.js +1 -1
  328. package/dist/workbench.d.ts +1 -0
  329. package/dist/workbench.js +2 -1
  330. package/docs/accessibility.md +45 -2
  331. package/docs/anchored-surface.md +15 -7
  332. package/docs/app-layouts.md +2 -1
  333. package/docs/component-contract.md +26 -6
  334. package/docs/component-selection.md +149 -13
  335. package/docs/design/templates/choice-chips/color-palette-dark.svg +1 -0
  336. package/docs/design/templates/choice-chips/color-palette.svg +1 -0
  337. package/docs/design/templates/choice-chips/compact-icons-dark.svg +1 -0
  338. package/docs/design/templates/choice-chips/compact-icons.svg +1 -0
  339. package/docs/design/templates/choice-chips-dark.svg +1 -0
  340. package/docs/design/templates/choice-chips.svg +1 -0
  341. package/docs/design/templates/list-action-row/trailing-menu-dark.svg +1 -0
  342. package/docs/design/templates/list-action-row/trailing-menu.svg +1 -0
  343. package/docs/design/templates/list-action-row-dark.svg +1 -1
  344. package/docs/design/templates/list-action-row.svg +1 -1
  345. package/docs/design/templates/state-banner/strip-dark.svg +1 -0
  346. package/docs/design/templates/state-banner/strip.svg +1 -0
  347. package/docs/design/templates/state-banner-dark.svg +1 -1
  348. package/docs/design/templates/state-banner.svg +1 -1
  349. package/docs/design/templates.md +1 -1
  350. package/docs/document-baseline.md +51 -0
  351. package/docs/layout.md +52 -1
  352. package/docs/split-view.md +20 -2
  353. package/docs/sunken-panel.md +13 -0
  354. package/docs/surface-scaffold.md +66 -1
  355. package/docs/ux-demo.md +1 -0
  356. package/docs/webawesome-theme.md +6 -2
  357. package/llms.txt +125 -16
  358. package/package.json +89 -1
  359. package/dist/chunk-3DXHNLME.js.map +0 -1
  360. package/dist/chunk-3PO7JEK7.js.map +0 -1
  361. package/dist/chunk-3XPGJUUQ.js.map +0 -1
  362. package/dist/chunk-4Y4L5YEI.js +0 -66
  363. package/dist/chunk-4Y4L5YEI.js.map +0 -1
  364. package/dist/chunk-75YOTZ25.js.map +0 -1
  365. package/dist/chunk-7QQ3HE47.js.map +0 -1
  366. package/dist/chunk-A7DYEERU.js +0 -59
  367. package/dist/chunk-A7DYEERU.js.map +0 -1
  368. package/dist/chunk-B3TROLC2.js.map +0 -1
  369. package/dist/chunk-BYHGRKC3.js.map +0 -1
  370. package/dist/chunk-DL55BSQX.js.map +0 -1
  371. package/dist/chunk-FL6J644M.js.map +0 -1
  372. package/dist/chunk-GIUOXAVL.js.map +0 -1
  373. package/dist/chunk-IOS2NXW7.js.map +0 -1
  374. package/dist/chunk-J3AWE5I4.js +0 -50
  375. package/dist/chunk-J3AWE5I4.js.map +0 -1
  376. package/dist/chunk-LAZLBC2Q.js.map +0 -1
  377. package/dist/chunk-MORVLMDG.js.map +0 -1
  378. package/dist/chunk-MTCTX25G.js.map +0 -1
  379. package/dist/chunk-O27D24CA.js.map +0 -1
  380. package/dist/chunk-PGL6TXFW.js.map +0 -1
  381. package/dist/chunk-QCLLBMLA.js.map +0 -1
  382. package/dist/chunk-QQICWWNX.js.map +0 -1
  383. package/dist/chunk-TKDDTLG5.js.map +0 -1
  384. package/dist/chunk-TNG3XKHB.js.map +0 -1
  385. package/dist/chunk-XKZPBRU7.js.map +0 -1
package/docs/design/templates/choice-chips-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632 308" width="632" height="308"><defs><clipPath id="cp0"><rect x="16" y="38" width="600" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="600" height="80"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="600" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="600" height="136" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="190" width="600" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="212" width="600" height="80" rx="0"/></clipPath></defs><rect x="0" y="0" width="632" height="308" 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)">Wrapping color palette</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="600" height="136"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg4ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg4ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="svgimg4ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg4ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg4ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg4ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg4ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg4ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg4ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg4ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg4ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg4ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg4ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg4ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg4ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg4ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg4ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="svgimg4ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Transparent</text></g></g><g clip-path="url(#svgimg4ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(250,250,255,0.32)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(255, 105, 108)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg4ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#svgimg4ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp5)"><g clip-path="url(#svgimg4ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#svgimg4ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp8)"><g clip-path="url(#svgimg4ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#svgimg4ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp11)"><g clip-path="url(#svgimg4ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#svgimg4ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp14)"><g clip-path="url(#svgimg4ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#svgimg4ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp17)"><g clip-path="url(#svgimg4ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#svgimg4ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp20)"><g clip-path="url(#svgimg4ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#svgimg4ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp23)"><g clip-path="url(#svgimg4ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#svgimg4ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp26)"><g clip-path="url(#svgimg4ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Gray</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact with icons</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="212" width="600" height="80"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg7ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="svgimg7cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="svgimg7cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg7ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg7cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="svgimg7cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="svgimg7ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg7ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg7cp1)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg7svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg7svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp3)"><g clip-path="url(#svgimg7ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(28,28,30)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg7cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg7svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp7)"><g clip-path="url(#svgimg7ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">List</text></g></g></g></g></g></g></svg>
package/docs/design/templates/choice-chips.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632 308" width="632" height="308"><defs><clipPath id="cp0"><rect x="16" y="38" width="600" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="600" height="80"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="600" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="600" height="136" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="190" width="600" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="212" width="600" height="80" rx="0"/></clipPath></defs><rect x="0" y="0" width="632" height="308" 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)">Wrapping color palette</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="600" height="136"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg4ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg4ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="svgimg4ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg4ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg4ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg4ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg4ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg4ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg4ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg4ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg4ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg4ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg4ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg4ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg4ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg4ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg4ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg4cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="svgimg4ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Transparent</text></g></g><g clip-path="url(#svgimg4ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(0,0,13,0.318)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(194, 11, 32)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg4ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#svgimg4ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp5)"><g clip-path="url(#svgimg4ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#svgimg4ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp8)"><g clip-path="url(#svgimg4ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#svgimg4ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp11)"><g clip-path="url(#svgimg4ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#svgimg4ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp14)"><g clip-path="url(#svgimg4ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#svgimg4ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp17)"><g clip-path="url(#svgimg4ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#svgimg4ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp20)"><g clip-path="url(#svgimg4ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#svgimg4ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp23)"><g clip-path="url(#svgimg4ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#svgimg4ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp26)"><g clip-path="url(#svgimg4ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Gray</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact with icons</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="212" width="600" height="80"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg7ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="svgimg7cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="svgimg7cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg7ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg7cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="svgimg7cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="svgimg7ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg7ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#svgimg7cp1)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg7svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg7svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" 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(#svgimg7cp3)"><g clip-path="url(#svgimg7ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(26,93,207)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(255,255,255)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg7cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg7svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" 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"/><path d="M3 12z" 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"/><path d="M3 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"/><path d="M8 5h13" 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"/><path d="M8 12h13" 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"/><path d="M8 19h13" 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(#svgimg7cp7)"><g clip-path="url(#svgimg7ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">List</text></g></g></g></g></g></g></svg>
package/docs/design/templates/list-action-row/trailing-menu-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#cp1)"><g color="rgb(245, 245, 247)"><clipPath id="svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic2)"><g transform="translate(362 34)scale(.66667)"><circle cx="12" cy="12" r="1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="19" cy="12" r="1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="5" cy="12" r="1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">preview.example.com</text></g></g></g></g><g clip-path="url(#cp7)"><g color="rgb(245, 245, 247)"><clipPath id="svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgic8)"><g transform="translate(37 30)"><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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
package/docs/design/templates/list-action-row/trailing-menu.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#cp1)"><g color="rgb(29, 29, 31)"><clipPath id="svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic2)"><g transform="translate(362 34)scale(.66667)"><circle cx="12" cy="12" r="1" 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"/><circle cx="19" cy="12" r="1" 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"/><circle cx="5" cy="12" r="1" 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(#cp3)"><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">preview.example.com</text></g></g></g></g><g clip-path="url(#cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgic8)"><g transform="translate(37 30)"><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(29, 29, 31)" 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(29, 29, 31)" 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(29, 29, 31)" 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(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></svg>
package/docs/design/templates/list-action-row-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 276" width="452" height="276"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="276" 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)">Primary with a trailing action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg4cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg4cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg4ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg4cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg4ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg4cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#svgimg4ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp1)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg4svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg4svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M10 11v6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 11v6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 6h18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp3)"><g clip-path="url(#svgimg4ov4)"><g clip-path="url(#svgimg4cp5)"><g clip-path="url(#svgimg4ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">staging.example.com</text></g></g></g></g><g clip-path="url(#svgimg4cp7)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg4svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="translate(37 30)"><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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Selected primary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg7ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg7cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg7cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg7ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg7cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg7ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg7cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg7ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(53,92,109)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg7cp1)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp3)"><g clip-path="url(#svgimg7ov4)"><g clip-path="url(#svgimg7cp5)"><g clip-path="url(#svgimg7ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">production.example.com</text></g></g></g></g><g clip-path="url(#svgimg7cp7)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg7svgic8)"><g transform="translate(37 30)"><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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 406" width="452" height="406"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="406" 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)">Primary with a trailing action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg5cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg5cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg5ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg5cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg5ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg5cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#svgimg5ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp1)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg5svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M10 11v6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 11v6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 6h18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg5cp3)"><g clip-path="url(#svgimg5ov4)"><g clip-path="url(#svgimg5cp5)"><g clip-path="url(#svgimg5ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">staging.example.com</text></g></g></g></g><g clip-path="url(#svgimg5cp7)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg5svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg5svgic8)"><g transform="translate(37 30)"><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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Selected primary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg8ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg8cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg8cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg8ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg8cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg8ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg8cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg8ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(53,92,109)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg8cp1)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg8svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg8cp3)"><g clip-path="url(#svgimg8ov4)"><g clip-path="url(#svgimg8cp5)"><g clip-path="url(#svgimg8ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">production.example.com</text></g></g></g></g><g clip-path="url(#svgimg8cp7)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg8svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg8svgic8)"><g transform="translate(37 30)"><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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Trailing overflow menu</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg11ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg11cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg11ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg11cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg11ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg11cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#svgimg11ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp1)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg11svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic2)"><g transform="translate(362 34)scale(.66667)"><circle cx="12" cy="12" r="1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="19" cy="12" r="1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="5" cy="12" r="1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg11cp3)"><g clip-path="url(#svgimg11ov4)"><g clip-path="url(#svgimg11cp5)"><g clip-path="url(#svgimg11ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">preview.example.com</text></g></g></g></g><g clip-path="url(#svgimg11cp7)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg11svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg11svgic8)"><g transform="translate(37 30)"><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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/list-action-row.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 276" width="452" height="276"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="276" 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)">Primary with a trailing action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg4cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg4cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg4ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg4cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg4ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg4cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#svgimg4ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg4cp1)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg4svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg4svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M10 11v6" 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"/><path d="M14 11v6" 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"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" 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"/><path d="M3 6h18" 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"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" 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(#svgimg4cp3)"><g clip-path="url(#svgimg4ov4)"><g clip-path="url(#svgimg4cp5)"><g clip-path="url(#svgimg4ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">staging.example.com</text></g></g></g></g><g clip-path="url(#svgimg4cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg4svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="translate(37 30)"><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(29, 29, 31)" 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(29, 29, 31)" 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(29, 29, 31)" 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(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><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Selected primary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg7ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg7cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg7cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg7ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg7cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg7ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg7cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg7ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,207,242)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg7cp1)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" 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"/><path d="m15 5 4 4" 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(#svgimg7cp3)"><g clip-path="url(#svgimg7ov4)"><g clip-path="url(#svgimg7cp5)"><g clip-path="url(#svgimg7ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">production.example.com</text></g></g></g></g><g clip-path="url(#svgimg7cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg7svgic8)"><g transform="translate(37 30)"><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(29, 29, 31)" 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(29, 29, 31)" 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(29, 29, 31)" 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(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>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 406" width="452" height="406"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="406" 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)">Primary with a trailing action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg5cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg5cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg5ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg5cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg5ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg5cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#svgimg5ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp1)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg5svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg5svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M10 11v6" 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"/><path d="M14 11v6" 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"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" 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"/><path d="M3 6h18" 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"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" 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(#svgimg5cp3)"><g clip-path="url(#svgimg5ov4)"><g clip-path="url(#svgimg5cp5)"><g clip-path="url(#svgimg5ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">staging.example.com</text></g></g></g></g><g clip-path="url(#svgimg5cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg5svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg5svgic8)"><g transform="translate(37 30)"><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(29, 29, 31)" 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(29, 29, 31)" 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(29, 29, 31)" 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(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><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Selected primary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg8ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg8cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg8cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg8ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg8cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg8ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg8cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg8ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,207,242)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg8cp1)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg8svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic2)"><g transform="translate(362 34)scale(.66667)"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" 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"/><path d="m15 5 4 4" 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(#svgimg8cp3)"><g clip-path="url(#svgimg8ov4)"><g clip-path="url(#svgimg8cp5)"><g clip-path="url(#svgimg8ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">production.example.com</text></g></g></g></g><g clip-path="url(#svgimg8cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg8svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg8svgic8)"><g transform="translate(37 30)"><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(29, 29, 31)" 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(29, 29, 31)" 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(29, 29, 31)" 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(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><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Trailing overflow menu</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg11ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="svgimg11cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="svgimg11ov4"><rect x="69" y="28" width="271" height="28" rx="0"/></clipPath><clipPath id="svgimg11cp5"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg11ct6"><rect x="69" y="33" width="271" height="18"/></clipPath><clipPath id="svgimg11cp7"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#svgimg11ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp1)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg11svgic2"><rect x="362" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic2)"><g transform="translate(362 34)scale(.66667)"><circle cx="12" cy="12" r="1" 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"/><circle cx="19" cy="12" r="1" 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"/><circle cx="5" cy="12" r="1" 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(#svgimg11cp3)"><g clip-path="url(#svgimg11ov4)"><g clip-path="url(#svgimg11cp5)"><g clip-path="url(#svgimg11ct6)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">preview.example.com</text></g></g></g></g><g clip-path="url(#svgimg11cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg11svgic8"><rect x="37" y="30" width="24" height="24"/></clipPath><g clip-path="url(#svgimg11svgic8)"><g transform="translate(37 30)"><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(29, 29, 31)" 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(29, 29, 31)" 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(29, 29, 31)" 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(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/state-banner/strip-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="cp0"><rect x="37" y="36" width="16" height="16"/></clipPath><clipPath id="ct2"><rect x="61" y="28" width="125" height="15"/></clipPath><clipPath id="ct3"><rect x="61" y="47" width="230.7" height="13"/></clipPath><clipPath id="ct4"><rect x="434.6" y="29.6" width="68.4" height="28.8"/></clipPath></defs><rect x="20" y="20" width="500" height="49" rx="0" fill="rgb(48,44,27)"/><polygon points="520,69 20,69 20,68 520,68" fill="rgb(251,221,104)"/><g clip-path="url(#cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgic1"><rect x="37" y="36" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(37 36)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="40" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,216,74)">Notifications paused</text><text x="61" y="58" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,216,74)">Desktop alerts resume when you reconnect.</text><rect x="434.6" y="29.6" width="68.4" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="435.5" y="30.5" width="67" height="27" rx="13.5" fill="none" stroke="rgb(255,216,74)" stroke-width="1"/><text x="446.83" y="48.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,216,74)">Resume</text></svg>
package/docs/design/templates/state-banner/strip.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="cp0"><rect x="37" y="36" width="16" height="16"/></clipPath><clipPath id="ct2"><rect x="61" y="28" width="125" height="15"/></clipPath><clipPath id="ct3"><rect x="61" y="47" width="230.7" height="13"/></clipPath><clipPath id="ct4"><rect x="434.6" y="29.6" width="68.4" height="28.8"/></clipPath></defs><rect x="20" y="20" width="500" height="49" rx="0" fill="rgb(255,250,232)"/><polygon points="520,69 20,69 20,68 520,68" fill="rgb(160,131,13)"/><g clip-path="url(#cp0)"><g color="rgb(143, 94, 0)"><clipPath id="svgic1"><rect x="37" y="36" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(37 36)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="40" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(143,94,0)">Notifications paused</text><text x="61" y="58" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(143,94,0)">Desktop alerts resume when you reconnect.</text><rect x="434.6" y="29.6" width="68.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="435.5" y="30.5" width="67" height="27" rx="13.5" fill="none" stroke="rgb(143,94,0)" stroke-width="1"/><text x="446.83" y="48.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(143,94,0)">Resume</text></svg>
package/docs/design/templates/state-banner-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 786" width="592" height="786"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="116"/></clipPath><clipPath id="cp1"><rect x="16" y="192" width="560" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="346" width="560" height="116"/></clipPath><clipPath id="cp3"><rect x="16" y="500" width="560" height="116"/></clipPath><clipPath id="cp4"><rect x="16" y="654" width="560" height="116"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="786" 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)">Info</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg7cp3"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg7ct4"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg7ct5"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg7svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Draft not published</text><g clip-path="url(#svgimg7cp3)"><g clip-path="url(#svgimg7ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(138,203,255)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Publish</text></g></g></g></g><text x="16" y="182" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Info with badge</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg10ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg10ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg10ct4"><rect x="437.3" y="29" width="65.7" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg10svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Unanswered questions</text><rect x="206.6" y="33.4" width="20" height="20" rx="10" fill="rgb(138,203,255)"/><rect x="207.5" y="33.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="213.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(28,28,30)">1</text><rect x="437.3" y="29" width="65.7" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="437.5" y="29.5" width="65" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.47" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Answer</text></g></g></g></g><text x="16" y="336" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Success</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg13cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg13ct2"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg13cp3"><rect x="61" y="44" width="259.7" height="13"/></clipPath><clipPath id="svgimg13ct4"><rect x="61" y="44" width="259.7" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46" rx="12" fill="rgb(31,52,38)"/><rect x="28.5" y="20.5" width="483" height="45" rx="11.5" fill="none" stroke="rgb(40,113,59)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg13svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg13svgic1)"><g transform="translate(37 35)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(99,230,133)">Deployment complete</text><g clip-path="url(#svgimg13cp3)"><g clip-path="url(#svgimg13ct4)"><text x="61" y="55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(99,230,133)">production.example.com is serving the new build.</text></g></g></g></g></g></g><text x="16" y="490" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Warning</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg16cp3"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg16ct4"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg16ct5"><rect x="431.1" y="29" width="71.9" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(48,44,27)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(251,221,104)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg16svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg16svgic1)"><g transform="translate(37 35.39)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,216,74)">Approaching your plan limit</text><g clip-path="url(#svgimg16cp3)"><g clip-path="url(#svgimg16ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,216,74)">You have used 92% of this month’s build minutes.</text></g></g><rect x="431.1" y="29" width="71.9" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="431.5" y="29.5" width="71" height="28" rx="13.9" fill="none" stroke="rgb(255,216,74)" stroke-width="1"/><text x="443.28" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,216,74)">Upgrade</text></g></g></g></g><text x="16" y="644" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Danger (alert)</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg19ct2"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg19cp3"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg19ct4"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg19ct5"><rect x="431.7" y="29" width="71.3" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(44,30,32)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g color="rgb(255, 160, 162)"><clipPath id="svgimg19svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg19svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,160,162)">Build failed</text><g clip-path="url(#svgimg19cp3)"><g clip-path="url(#svgimg19ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,160,162)">Step “test” exited with code 1.</text></g></g><rect x="431.7" y="29" width="71.3" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="432.5" y="29.5" width="70" height="28" rx="13.9" fill="none" stroke="rgb(255,160,162)" stroke-width="1"/><text x="443.88" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,160,162)">View log</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 940" width="592" height="940"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="116"/></clipPath><clipPath id="cp1"><rect x="16" y="192" width="560" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="346" width="560" height="116"/></clipPath><clipPath id="cp3"><rect x="16" y="500" width="560" height="116"/></clipPath><clipPath id="cp4"><rect x="16" y="654" width="560" height="116"/></clipPath><clipPath id="cp5"><rect x="16" y="808" width="560" height="116"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="786" width="560" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="808" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="940" 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)">Info</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct2"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg8cp3"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg8ct4"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg8ct5"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg8cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg8svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Draft not published</text><g clip-path="url(#svgimg8cp3)"><g clip-path="url(#svgimg8ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(138,203,255)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Publish</text></g></g></g></g><text x="16" y="182" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Info with badge</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg11cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg11ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg11ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg11ct4"><rect x="437.3" y="29" width="65.7" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg11svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Unanswered questions</text><rect x="206.6" y="33.4" width="20" height="20" rx="10" fill="rgb(138,203,255)"/><rect x="207.5" y="33.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="213.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(28,28,30)">1</text><rect x="437.3" y="29" width="65.7" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="437.5" y="29.5" width="65" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.47" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Answer</text></g></g></g></g><text x="16" y="336" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Success</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg14cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg14ct2"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg14cp3"><rect x="61" y="44" width="259.7" height="13"/></clipPath><clipPath id="svgimg14ct4"><rect x="61" y="44" width="259.7" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46" rx="12" fill="rgb(31,52,38)"/><rect x="28.5" y="20.5" width="483" height="45" rx="11.5" fill="none" stroke="rgb(40,113,59)" stroke-width="1"/><g clip-path="url(#svgimg14cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg14svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><g transform="translate(37 35)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(99,230,133)">Deployment complete</text><g clip-path="url(#svgimg14cp3)"><g clip-path="url(#svgimg14ct4)"><text x="61" y="55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(99,230,133)">production.example.com is serving the new build.</text></g></g></g></g></g></g><text x="16" y="490" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Warning</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg17cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg17cp3"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg17ct4"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg17ct5"><rect x="431.1" y="29" width="71.9" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(48,44,27)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(251,221,104)" stroke-width="1"/><g clip-path="url(#svgimg17cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg17svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg17svgic1)"><g transform="translate(37 35.39)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,216,74)">Approaching your plan limit</text><g clip-path="url(#svgimg17cp3)"><g clip-path="url(#svgimg17ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,216,74)">You have used 92% of this month’s build minutes.</text></g></g><rect x="431.1" y="29" width="71.9" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="431.5" y="29.5" width="71" height="28" rx="13.9" fill="none" stroke="rgb(255,216,74)" stroke-width="1"/><text x="443.28" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,216,74)">Upgrade</text></g></g></g></g><text x="16" y="644" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Danger (alert)</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg20cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg20ct2"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg20cp3"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg20ct4"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg20ct5"><rect x="431.7" y="29" width="71.3" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(44,30,32)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg20cp0)"><g color="rgb(255, 160, 162)"><clipPath id="svgimg20svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,160,162)">Build failed</text><g clip-path="url(#svgimg20cp3)"><g clip-path="url(#svgimg20ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,160,162)">Step “test” exited with code 1.</text></g></g><rect x="431.7" y="29" width="71.3" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="432.5" y="29.5" width="70" height="28" rx="13.9" fill="none" stroke="rgb(255,160,162)" stroke-width="1"/><text x="443.88" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,160,162)">View log</text></g></g></g></g><text x="16" y="798" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Strip (full-width band)</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="808" width="560" height="116"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 808)"><defs><clipPath id="svgimg23cp0"><rect x="37" y="36" width="16" height="16"/></clipPath><clipPath id="svgimg23ct2"><rect x="61" y="28" width="125" height="15"/></clipPath><clipPath id="svgimg23ct3"><rect x="61" y="47" width="230.7" height="13"/></clipPath><clipPath id="svgimg23ct4"><rect x="434.6" y="29.6" width="68.4" height="28.8"/></clipPath></defs><rect x="20" y="20" width="500" height="49" rx="0" fill="rgb(48,44,27)"/><polygon points="520,69 20,69 20,68 520,68" fill="rgb(251,221,104)"/><g clip-path="url(#svgimg23cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg23svgic1"><rect x="37" y="36" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic1)"><g transform="translate(37 36)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="40" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,216,74)">Notifications paused</text><text x="61" y="58" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,216,74)">Desktop alerts resume when you reconnect.</text><rect x="434.6" y="29.6" width="68.4" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="435.5" y="30.5" width="67" height="27" rx="13.5" fill="none" stroke="rgb(255,216,74)" stroke-width="1"/><text x="446.83" y="48.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,216,74)">Resume</text></g></g></g></g></svg>