@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

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 (479) hide show
  1. package/.changeset/bright-kiwis-repeat.md +5 -0
  2. package/.changeset/chilled-games-stare.md +5 -0
  3. package/.changeset/gold-radios-reply.md +5 -0
  4. package/.changeset/light-lions-explode.md +5 -0
  5. package/.changeset/pre.json +7 -5
  6. package/.changeset/ten-rockets-double.md +5 -0
  7. package/.changeset/wild-donkeys-attack.md +5 -0
  8. package/.github/workflows/pages-html-proofer.yml +1 -1
  9. package/.prettierignore +0 -1
  10. package/.storybook/main.js +4 -11
  11. package/.storybook/preview.js +1 -1
  12. package/.stylelintrc +16 -24
  13. package/CHANGELOG.md +32 -0
  14. package/CONTRIBUTING.md +1 -1
  15. package/bundles.browser.json +1 -0
  16. package/bundles.css +1 -0
  17. package/bundles.js +1 -0
  18. package/bundles.mjs +1 -0
  19. package/chart-legend.browser.json +1 -0
  20. package/chart-legend.css +1 -0
  21. package/chart-legend.js +1 -0
  22. package/chart-legend.mjs +1 -0
  23. package/dist/alert-dialog/alert-dialog.css +84 -72
  24. package/dist/alert-dialog/alert-dialog.css.map +1 -0
  25. package/dist/avatar/avatar.css +81 -62
  26. package/dist/avatar/avatar.css.map +1 -0
  27. package/dist/badge/badge.css +16 -11
  28. package/dist/badge/badge.css.map +1 -0
  29. package/dist/breadcrumbs/breadcrumbs.css +85 -58
  30. package/dist/breadcrumbs/breadcrumbs.css.map +1 -0
  31. package/dist/bundles/skin-default.css +10068 -0
  32. package/dist/bundles/skin-default.css.map +1 -0
  33. package/dist/bundles/skin-full.css +10252 -0
  34. package/dist/bundles/skin-full.css.map +1 -0
  35. package/dist/bundles/skin-headless.css +9680 -0
  36. package/dist/bundles/skin-headless.css.map +1 -0
  37. package/dist/button/button.css +590 -415
  38. package/dist/button/button.css.map +1 -0
  39. package/dist/calendar/calendar.css +148 -102
  40. package/dist/calendar/calendar.css.map +1 -0
  41. package/dist/carousel/carousel.css +231 -205
  42. package/dist/carousel/carousel.css.map +1 -0
  43. package/dist/chart-legend/chart-legend.css +77 -0
  44. package/dist/chart-legend/chart-legend.css.map +1 -0
  45. package/dist/checkbox/checkbox.css +77 -54
  46. package/dist/checkbox/checkbox.css.map +1 -0
  47. package/dist/chip/chip.css +41 -34
  48. package/dist/chip/chip.css.map +1 -0
  49. package/dist/chips-combobox/chips-combobox.css +77 -62
  50. package/dist/chips-combobox/chips-combobox.css.map +1 -0
  51. package/dist/combobox/combobox.css +244 -161
  52. package/dist/combobox/combobox.css.map +1 -0
  53. package/dist/confirm-dialog/confirm-dialog.css +86 -73
  54. package/dist/confirm-dialog/confirm-dialog.css.map +1 -0
  55. package/dist/cta-button/cta-button.css +96 -70
  56. package/dist/cta-button/cta-button.css.map +1 -0
  57. package/dist/date-textbox/date-textbox.css +24 -15
  58. package/dist/date-textbox/date-textbox.css.map +1 -0
  59. package/dist/details/details.css +34 -27
  60. package/dist/details/details.css.map +1 -0
  61. package/dist/donut-chart/donut-chart.css +91 -0
  62. package/dist/donut-chart/donut-chart.css.map +1 -0
  63. package/dist/drawer-dialog/drawer-dialog.css +133 -118
  64. package/dist/drawer-dialog/drawer-dialog.css.map +1 -0
  65. package/dist/education-notice/education-notice.css +62 -34
  66. package/dist/education-notice/education-notice.css.map +1 -0
  67. package/dist/eek/eek.css +97 -74
  68. package/dist/eek/eek.css.map +1 -0
  69. package/dist/field/field.css +87 -53
  70. package/dist/field/field.css.map +1 -0
  71. package/dist/filter-button/filter-button.css +115 -75
  72. package/dist/filter-button/filter-button.css.map +1 -0
  73. package/dist/filter-menu/filter-menu.css +168 -113
  74. package/dist/filter-menu/filter-menu.css.map +1 -0
  75. package/dist/filter-menu-button/filter-menu-button.css +298 -173
  76. package/dist/filter-menu-button/filter-menu-button.css.map +1 -0
  77. package/dist/flag/flag.css +528 -272
  78. package/dist/flag/flag.css.map +1 -0
  79. package/dist/floating-label/floating-label.css +100 -51
  80. package/dist/floating-label/floating-label.css.map +1 -0
  81. package/dist/fullscreen-dialog/fullscreen-dialog.css +112 -99
  82. package/dist/fullscreen-dialog/fullscreen-dialog.css.map +1 -0
  83. package/dist/global/global.css +32 -13
  84. package/dist/global/global.css.map +1 -0
  85. package/dist/icon/icon.css +50 -2946
  86. package/dist/icon/icon.css.map +1 -0
  87. package/dist/icon-button/icon-button.css +307 -212
  88. package/dist/icon-button/icon-button.css.map +1 -0
  89. package/dist/image-placeholder/image-placeholder.css +6 -4
  90. package/dist/image-placeholder/image-placeholder.css.map +1 -0
  91. package/dist/infotip/infotip.css +121 -93
  92. package/dist/infotip/infotip.css.map +1 -0
  93. package/dist/inline-notice/inline-notice.css +16 -9
  94. package/dist/inline-notice/inline-notice.css.map +1 -0
  95. package/dist/lightbox-dialog/lightbox-dialog.css +239 -183
  96. package/dist/lightbox-dialog/lightbox-dialog.css.map +1 -0
  97. package/dist/link/link.css +37 -19
  98. package/dist/link/link.css.map +1 -0
  99. package/dist/listbox/listbox.css +86 -58
  100. package/dist/listbox/listbox.css.map +1 -0
  101. package/dist/listbox-button/listbox-button.css +240 -134
  102. package/dist/listbox-button/listbox-button.css.map +1 -0
  103. package/dist/marketsans/marketsans.css +34 -12
  104. package/dist/marketsans/marketsans.css.map +1 -0
  105. package/dist/menu/menu.css +136 -99
  106. package/dist/menu/menu.css.map +1 -0
  107. package/dist/menu-button/menu-button.css +236 -157
  108. package/dist/menu-button/menu-button.css.map +1 -0
  109. package/dist/mixins/_typography-mixins.scss +136 -0
  110. package/dist/mixins/_utility-mixins.scss +62 -0
  111. package/dist/page-grid/page-grid.css +57 -46
  112. package/dist/page-grid/page-grid.css.map +1 -0
  113. package/dist/page-notice/page-notice.css +142 -85
  114. package/dist/page-notice/page-notice.css.map +1 -0
  115. package/dist/pagination/pagination.css +109 -80
  116. package/dist/pagination/pagination.css.map +1 -0
  117. package/dist/panel-dialog/panel-dialog.css +115 -98
  118. package/dist/panel-dialog/panel-dialog.css.map +1 -0
  119. package/dist/phone-input/phone-input.css +100 -88
  120. package/dist/phone-input/phone-input.css.map +1 -0
  121. package/dist/progress-bar/progress-bar.css +32 -15
  122. package/dist/progress-bar/progress-bar.css.map +1 -0
  123. package/dist/progress-bar-expressive/progress-bar-expressive.css +302 -203
  124. package/dist/progress-bar-expressive/progress-bar-expressive.css.map +1 -0
  125. package/dist/progress-spinner/progress-spinner.css +24 -20
  126. package/dist/progress-spinner/progress-spinner.css.map +1 -0
  127. package/dist/progress-stepper/progress-stepper.css +229 -117
  128. package/dist/progress-stepper/progress-stepper.css.map +1 -0
  129. package/dist/radio/radio.css +71 -52
  130. package/dist/radio/radio.css.map +1 -0
  131. package/dist/section-notice/section-notice.css +102 -72
  132. package/dist/section-notice/section-notice.css.map +1 -0
  133. package/dist/section-title/section-title.css +66 -52
  134. package/dist/section-title/section-title.css.map +1 -0
  135. package/dist/segmented-buttons/segmented-buttons.css +49 -38
  136. package/dist/segmented-buttons/segmented-buttons.css.map +1 -0
  137. package/dist/select/select.css +96 -60
  138. package/dist/select/select.css.map +1 -0
  139. package/dist/signal/signal.css +25 -16
  140. package/dist/signal/signal.css.map +1 -0
  141. package/dist/skeleton/skeleton.css +131 -108
  142. package/dist/skeleton/skeleton.css.map +1 -0
  143. package/dist/snackbar-dialog/snackbar-dialog.css +82 -52
  144. package/dist/snackbar-dialog/snackbar-dialog.css.map +1 -0
  145. package/dist/split-button/split-button.css +3 -1
  146. package/dist/split-button/split-button.css.map +1 -0
  147. package/dist/star-rating/star-rating.css +40 -19
  148. package/dist/star-rating/star-rating.css.map +1 -0
  149. package/dist/star-rating-select/star-rating-select.css +67 -39
  150. package/dist/star-rating-select/star-rating-select.css.map +1 -0
  151. package/dist/svg/icons.svg +21 -21
  152. package/dist/switch/switch.css +119 -78
  153. package/dist/switch/switch.css.map +1 -0
  154. package/dist/tabs/tabs.css +70 -51
  155. package/dist/tabs/tabs.css.map +1 -0
  156. package/dist/textbox/textbox.css +167 -112
  157. package/dist/textbox/textbox.css.map +1 -0
  158. package/dist/toast-dialog/toast-dialog.css +140 -90
  159. package/dist/toast-dialog/toast-dialog.css.map +1 -0
  160. package/dist/toggle-button/toggle-button.css +154 -114
  161. package/dist/toggle-button/toggle-button.css.map +1 -0
  162. package/dist/toggle-button-group/toggle-button-group.css +610 -60
  163. package/dist/toggle-button-group/toggle-button-group.css.map +1 -0
  164. package/dist/tokens/evo-core.css +139 -67
  165. package/dist/tokens/evo-dark.css +57 -62
  166. package/dist/tokens/evo-light.css +76 -76
  167. package/dist/tooltip/tooltip.css +117 -85
  168. package/dist/tooltip/tooltip.css.map +1 -0
  169. package/dist/tourtip/tourtip.css +141 -108
  170. package/dist/tourtip/tourtip.css.map +1 -0
  171. package/dist/typography/typography.css +86 -59
  172. package/dist/typography/typography.css.map +1 -0
  173. package/dist/utility/utility.css +75 -72
  174. package/dist/utility/utility.css.map +1 -0
  175. package/dist/variables/_variables.scss +64 -0
  176. package/dist/video/video.css +46 -34
  177. package/dist/video/video.css.map +1 -0
  178. package/donut-chart.browser.json +1 -0
  179. package/donut-chart.css +1 -0
  180. package/donut-chart.js +1 -0
  181. package/donut-chart.mjs +1 -0
  182. package/gh.browser.json +4 -4
  183. package/index.browser.json +3 -0
  184. package/index.css +3 -0
  185. package/index.js +3 -0
  186. package/index.mjs +3 -0
  187. package/package.json +79 -60
  188. package/postcss.config.js +17 -0
  189. package/scripts/README.md +1 -1
  190. package/scripts/generate-bundle.js +13 -12
  191. package/scripts/generate-images.js +34 -23
  192. package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss} +14 -12
  193. package/src/sass/avatar/avatar.scss +134 -0
  194. package/src/sass/badge/badge.scss +21 -0
  195. package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss} +23 -12
  196. package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js +12 -12
  197. package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js +15 -15
  198. package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js +5 -5
  199. package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js +12 -12
  200. package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js +15 -15
  201. package/src/{less → sass}/breadcrumbs/stories/links.stories.js +5 -5
  202. package/src/sass/bundles/skin-default.scss +9 -0
  203. package/src/sass/bundles/skin-full.scss +10 -0
  204. package/src/sass/bundles/skin-headless.scss +72 -0
  205. package/src/{less/button/button.less → sass/button/button.scss} +183 -69
  206. package/src/{less → sass}/button/stories/button/base.stories.js +5 -5
  207. package/src/{less → sass}/button/stories/button/borderless.stories.js +4 -4
  208. package/src/{less → sass}/button/stories/button/cascade.stories.js +3 -3
  209. package/src/{less → sass}/button/stories/button/dimensions.stories.js +2 -2
  210. package/src/{less → sass}/button/stories/button/primary.stories.js +4 -4
  211. package/src/{less → sass}/button/stories/button/secondary.stories.js +4 -4
  212. package/src/{less → sass}/button/stories/button/tertiary.stories.js +4 -4
  213. package/src/{less → sass}/button/stories/button/text-spacing.stories.js +1 -1
  214. package/src/{less → sass}/button/stories/destructive-button/primary.stories.js +3 -3
  215. package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js +3 -3
  216. package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js +3 -3
  217. package/src/{less → sass}/button/stories/fake-button/base.stories.js +2 -2
  218. package/src/{less → sass}/button/stories/fake-button/cascade.stories.js +3 -3
  219. package/src/{less → sass}/button/stories/fake-button/dimensions.stories.js +1 -1
  220. package/src/{less → sass}/button/stories/fake-button/primary.stories.js +4 -4
  221. package/src/{less → sass}/button/stories/fake-button/secondary.stories.js +4 -4
  222. package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js +1 -1
  223. package/src/{less/calendar/calendar.less → sass/calendar/calendar.scss} +43 -18
  224. package/src/{less → sass}/calendar/stories/calendar.stories.js +6 -6
  225. package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss} +66 -49
  226. package/src/{less → sass}/carousel/stories/carousel.stories.js +25 -25
  227. package/src/sass/chart-legend/chart-legend.scss +74 -0
  228. package/src/sass/chart-legend/stories/chart-legend.stories.js +65 -0
  229. package/src/{less/checkbox/checkbox.less → sass/checkbox/checkbox.scss} +25 -24
  230. package/src/{less/chip/chip.less → sass/chip/chip.scss} +1 -1
  231. package/src/{less → sass}/chip/stories/interactive-chip.stories.js +17 -17
  232. package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss} +7 -7
  233. package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js +38 -38
  234. package/src/{less → sass}/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  235. package/src/{less/combobox/combobox.less → sass/combobox/combobox.scss} +76 -35
  236. package/src/{less → sass}/combobox/stories/combobox.stories.js +11 -11
  237. package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss} +14 -12
  238. package/src/sass/cta-button/cta-button.scss +105 -0
  239. package/src/{less → sass}/cta-button/stories/cascade.stories.js +3 -3
  240. package/src/{less → sass}/cta-button/stories/cta-button.stories.js +2 -2
  241. package/src/{less → sass}/cta-button/stories/dimensions.stories.js +2 -2
  242. package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss} +10 -6
  243. package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js +23 -7
  244. package/src/{less/details/details.less → sass/details/details.scss} +9 -5
  245. package/src/{less → sass}/details/stories/cascade.stories.js +3 -3
  246. package/src/{less → sass}/details/stories/details.stories.js +5 -5
  247. package/src/sass/donut-chart/donut-chart.scss +98 -0
  248. package/src/sass/donut-chart/stories/donut-chart.stories.js +39 -0
  249. package/src/{less/drawer-dialog/drawer-dialog.less → sass/drawer-dialog/drawer-dialog.scss} +24 -21
  250. package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js +7 -7
  251. package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss} +26 -8
  252. package/src/{less → sass}/education-notice/stories/base.stories.js +13 -13
  253. package/src/{less/eek/eek.less → sass/eek/eek.scss} +43 -42
  254. package/src/{less/field/field.less → sass/field/field.scss} +23 -13
  255. package/src/{less → sass}/field/stories/stacked.stories.js +8 -8
  256. package/src/{less → sass}/field/stories/unstacked.stories.js +4 -4
  257. package/src/sass/filter-button/filter-button.scss +112 -0
  258. package/src/{less/filter-menu/filter-menu.less → sass/filter-menu/filter-menu.scss} +22 -10
  259. package/src/{less → sass}/filter-menu/stories/filter-menu.stories.js +24 -24
  260. package/src/{less/filter-menu-button/filter-menu-button.less → sass/filter-menu-button/filter-menu-button.scss} +103 -36
  261. package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js +124 -124
  262. package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss} +31 -15
  263. package/src/{less → sass}/floating-label/stories/floating-label.stories.js +15 -15
  264. package/src/{less/fullscreen-dialog/fullscreen-dialog.less → sass/fullscreen-dialog/fullscreen-dialog.scss} +15 -11
  265. package/src/{less → sass}/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
  266. package/src/sass/gh/_gh-mixins.scss +197 -0
  267. package/src/sass/global/global.scss +50 -0
  268. package/src/{less → sass}/global/stories/global.stories.js +12 -12
  269. package/src/sass/icon/icon.scss +83 -0
  270. package/src/{less → sass}/icon/stories/icon.stories.js +5 -5
  271. package/src/{less/icon-button/icon-button.less → sass/icon-button/icon-button.scss} +88 -35
  272. package/src/sass/icon-button/stories/alignment.stories.js +28 -0
  273. package/src/{less → sass}/icon-button/stories/buttons.stories.js +36 -36
  274. package/src/{less → sass}/icon-button/stories/links.stories.js +36 -36
  275. package/src/sass/image-placeholder/image-placeholder.scss +10 -0
  276. package/src/sass/infotip/infotip.scss +136 -0
  277. package/src/{less → sass}/infotip/stories/infotip.stories.js +12 -12
  278. package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss} +3 -3
  279. package/src/{less → sass}/inline-notice/stories/inline.stories.js +11 -11
  280. package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss} +61 -19
  281. package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js +40 -33
  282. package/src/sass/link/link.scss +61 -0
  283. package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss} +20 -14
  284. package/src/{less → sass}/listbox/stories/cascade.stories.js +9 -9
  285. package/src/{less → sass}/listbox/stories/listbox.stories.js +18 -18
  286. package/src/sass/listbox-button/listbox-button.scss +233 -0
  287. package/src/{less → sass}/listbox-button/stories/base.stories.js +48 -48
  288. package/src/{less → sass}/listbox-button/stories/cascade.stories.js +15 -15
  289. package/src/{less → sass}/listbox-button/stories/dimensions.stories.js +5 -5
  290. package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js +38 -38
  291. package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js +15 -15
  292. package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  293. package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js +10 -10
  294. package/src/{less → sass}/listbox-button/stories/form.stories.js +15 -15
  295. package/src/{less → sass}/listbox-button/stories/subtitle.stories.js +38 -38
  296. package/src/sass/marketsans/marketsans.scss +46 -0
  297. package/src/{less/menu/menu.less → sass/menu/menu.scss} +22 -12
  298. package/src/{less → sass}/menu/stories/fake-menu.stories.js +4 -4
  299. package/src/{less → sass}/menu/stories/multiSelect.stories.js +9 -9
  300. package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss} +60 -30
  301. package/src/{less → sass}/menu-button/stories/base.stories.js +30 -30
  302. package/src/{less → sass}/menu-button/stories/cascade.stories.js +6 -6
  303. package/src/{less → sass}/menu-button/stories/dimensions.stories.js +1 -1
  304. package/src/{less → sass}/menu-button/stories/fake-menu-button.stories.js +6 -6
  305. package/src/sass/mixins/private/_bubble-mixins.scss +168 -0
  306. package/src/sass/mixins/private/_button-mixins.scss +95 -0
  307. package/src/{less/mixins/private/dialog-mixins.less → sass/mixins/private/_dialog-mixins.scss} +25 -22
  308. package/src/sass/mixins/private/_dropdown-mixins.scss +60 -0
  309. package/src/{less/mixins/private/filter-button-mixins.less → sass/mixins/private/_filter-button-mixins.scss} +6 -2
  310. package/src/sass/mixins/private/_filter-menu-mixins.scss +45 -0
  311. package/src/sass/mixins/private/_generated-icon-mixins.scss +517 -0
  312. package/src/sass/mixins/private/_icon-mixins.scss +12 -0
  313. package/src/sass/mixins/private/_listbox-mixins.scss +48 -0
  314. package/src/sass/mixins/private/_menu-mixins.scss +30 -0
  315. package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} +3 -3
  316. package/src/sass/mixins/private/_token-mixins.scss +124 -0
  317. package/src/sass/mixins/public/_typography-mixins.scss +136 -0
  318. package/src/sass/mixins/public/_utility-mixins.scss +62 -0
  319. package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss} +22 -22
  320. package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss} +66 -26
  321. package/src/{less → sass}/page-notice/stories/page-notice.stories.js +14 -14
  322. package/src/{less → sass}/page-notice/stories/test.stories.js +7 -7
  323. package/src/{less/pagination/pagination.less → sass/pagination/pagination.scss} +28 -14
  324. package/src/{less → sass}/pagination/stories/button-cascade.stories.js +6 -6
  325. package/src/{less → sass}/pagination/stories/buttons.stories.js +4 -4
  326. package/src/{less → sass}/pagination/stories/link-cascade.stories.js +6 -6
  327. package/src/{less → sass}/pagination/stories/links.stories.js +4 -4
  328. package/src/{less → sass}/pagination/stories/overflow.stories.js +20 -20
  329. package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss} +19 -16
  330. package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js +7 -7
  331. package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss} +47 -56
  332. package/src/{less → sass}/phone-input/stories/phone-input.stories.js +56 -56
  333. package/src/sass/progress-bar/progress-bar.scss +51 -0
  334. package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss} +19 -20
  335. package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss} +3 -3
  336. package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js +4 -4
  337. package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss} +55 -30
  338. package/src/{less/radio/radio.less → sass/radio/radio.scss} +25 -24
  339. package/src/{less/section-notice/section-notice.less → sass/section-notice/section-notice.scss} +42 -18
  340. package/src/{less → sass}/section-notice/stories/icon-16.stories.js +14 -14
  341. package/src/{less → sass}/section-notice/stories/iconless.stories.js +4 -4
  342. package/src/{less → sass}/section-notice/stories/test.stories.js +4 -4
  343. package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss} +15 -11
  344. package/src/{less → sass}/section-title/stories/rtl.stories.js +3 -3
  345. package/src/{less → sass}/section-title/stories/section-title.stories.js +4 -4
  346. package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss} +8 -8
  347. package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  348. package/src/{less/select/select.less → sass/select/select.scss} +52 -17
  349. package/src/{less → sass}/select/stories/cascade.stories.js +3 -3
  350. package/src/{less → sass}/select/stories/default.stories.js +9 -9
  351. package/src/{less → sass}/select/stories/floating-label.stories.js +4 -4
  352. package/src/{less/signal/signal.less → sass/signal/signal.scss} +9 -6
  353. package/src/{less/skeleton/skeleton.less → sass/skeleton/skeleton.scss} +23 -20
  354. package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss} +30 -11
  355. package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss} +1 -1
  356. package/src/{less → sass}/split-button/stories/base.stories.js +13 -13
  357. package/src/{less → sass}/split-button/stories/rtl.stories.js +6 -6
  358. package/src/{less → sass}/split-button/stories/size.stories.js +2 -2
  359. package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss} +14 -14
  360. package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss} +16 -15
  361. package/src/{less/switch/switch.less → sass/switch/switch.scss} +48 -20
  362. package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss} +17 -7
  363. package/src/{less → sass}/textbox/stories/icon.stories.js +32 -18
  364. package/src/{less → sass}/textbox/stories/rtl/icon.stories.js +27 -11
  365. package/src/sass/textbox/stories/rtl/textbox.stories.js +45 -0
  366. package/src/{less → sass}/textbox/stories/textbox.stories.js +24 -2
  367. package/src/sass/textbox/textbox.scss +238 -0
  368. package/src/{less/toast-dialog/toast-dialog.less → sass/toast-dialog/toast-dialog.scss} +67 -23
  369. package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js +3 -3
  370. package/src/{less → sass}/toggle-button/stories/list-layout.stories.js +3 -3
  371. package/src/{less/toggle-button/toggle-button.less → sass/toggle-button/toggle-button.scss} +6 -1
  372. package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js +471 -0
  373. package/src/sass/toggle-button-group/stories/gallery-layout.stories.js +564 -0
  374. package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js +507 -0
  375. package/src/sass/toggle-button-group/stories/list-layout.stories.js +505 -0
  376. package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js +291 -0
  377. package/src/sass/toggle-button-group/stories/minimal-layout.stories.js +289 -0
  378. package/src/sass/toggle-button-group/toggle-button-group.scss +342 -0
  379. package/src/{less → sass}/tooltip/stories/pointer.stories.js +12 -12
  380. package/src/{less → sass}/tooltip/stories/tooltip.stories.js +3 -3
  381. package/src/sass/tooltip/tooltip.scss +118 -0
  382. package/src/{less → sass}/tourtip/stories/tourtip.stories.js +5 -5
  383. package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss} +41 -33
  384. package/src/{less/typography/typography.less → sass/typography/typography.scss} +24 -21
  385. package/src/{less/utility/utility.less → sass/utility/utility.scss} +13 -13
  386. package/src/sass/variables/_variables.scss +64 -0
  387. package/src/{less/video/video.less → sass/video/video.scss} +3 -3
  388. package/src/svg/icons.svg +21 -21
  389. package/src/tokens/evo-core.css +139 -67
  390. package/src/tokens/evo-dark.css +57 -62
  391. package/src/tokens/evo-light.css +76 -76
  392. package/svg.svg +21 -21
  393. package/.changeset/big-wombats-greet.md +0 -5
  394. package/.changeset/khaki-fans-pretend.md +0 -5
  395. package/.changeset/lemon-bobcats-collect.md +0 -5
  396. package/.changeset/loud-rivers-pump.md +0 -5
  397. package/_cdn/skin/v17.5.0-next.0/skin-default.min.css +0 -76
  398. package/_cdn/skin/v17.5.0-next.0/skin-full.min.css +0 -160
  399. package/_cdn/skin/v17.5.0-next.0/skin-headless.min.css +0 -6
  400. package/dist/variables/variables.less +0 -70
  401. package/less[ds-4].less +0 -3
  402. package/src/less/avatar/avatar.less +0 -134
  403. package/src/less/badge/badge.less +0 -16
  404. package/src/less/bundles/skin-default.less +0 -3
  405. package/src/less/bundles/skin-full.less +0 -4
  406. package/src/less/bundles/skin-headless.less +0 -70
  407. package/src/less/cta-button/cta-button.less +0 -79
  408. package/src/less/filter-button/filter-button.less +0 -80
  409. package/src/less/global/global.less +0 -37
  410. package/src/less/icon/generated/icon.less +0 -2905
  411. package/src/less/icon/icon.less +0 -62
  412. package/src/less/icon-button/stories/alignment.stories.js +0 -28
  413. package/src/less/image-placeholder/image-placeholder.less +0 -9
  414. package/src/less/infotip/infotip.less +0 -126
  415. package/src/less/link/link.less +0 -44
  416. package/src/less/listbox-button/listbox-button.less +0 -184
  417. package/src/less/marketsans/marketsans.less +0 -45
  418. package/src/less/mixins/private/bubble-mixins.less +0 -166
  419. package/src/less/mixins/private/button-mixins.less +0 -95
  420. package/src/less/mixins/private/dropdown-mixins.less +0 -44
  421. package/src/less/mixins/private/filter-menu-mixins.less +0 -31
  422. package/src/less/mixins/private/generated-icon-mixins.less +0 -517
  423. package/src/less/mixins/private/icon-mixins.less +0 -17
  424. package/src/less/mixins/private/listbox-mixins.less +0 -35
  425. package/src/less/mixins/private/menu-mixins.less +0 -21
  426. package/src/less/mixins/private/token-mixins.less +0 -100
  427. package/src/less/progress-bar/progress-bar.less +0 -35
  428. package/src/less/textbox/stories/rtl/textbox.stories.js +0 -17
  429. package/src/less/textbox/textbox.less +0 -181
  430. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +0 -657
  431. package/src/less/toggle-button-group/stories/list-layout.stories.js +0 -611
  432. package/src/less/toggle-button-group/stories/minimal-layout.stories.js +0 -341
  433. package/src/less/toggle-button-group/toggle-button-group.less +0 -111
  434. package/src/less/tooltip/tooltip.less +0 -109
  435. package/src/less/variables/variables.less +0 -70
  436. /package/src/{less → sass}/alert-dialog/stories/alert-dialog.stories.js +0 -0
  437. /package/src/{less → sass}/avatar/stories/avatar.stories.js +0 -0
  438. /package/src/{less → sass}/badge/stories/badge.stories.js +0 -0
  439. /package/src/{less → sass}/button/stories/destructive-button/borderless.stories.js +0 -0
  440. /package/src/{less → sass}/checkbox/stories/checked.stories.js +0 -0
  441. /package/src/{less → sass}/checkbox/stories/mixed.stories.js +0 -0
  442. /package/src/{less → sass}/checkbox/stories/unchecked.stories.js +0 -0
  443. /package/src/{less → sass}/chip/stories/static-chip.stories.js +0 -0
  444. /package/src/{less → sass}/confirm-dialog/stories/confirm-dialog.stories.js +0 -0
  445. /package/src/{less → sass}/field/stories/helper-texts-stacked.stories.js +0 -0
  446. /package/src/{less → sass}/filter-button/stories/button.stories.js +0 -0
  447. /package/src/{less → sass}/filter-button/stories/group.stories.js +0 -0
  448. /package/src/{less → sass}/filter-button/stories/link.stories.js +0 -0
  449. /package/src/{less/flag/flag.less → sass/flag/flag.scss} +0 -0
  450. /package/src/{less → sass}/flag/stories/flag.stories.js +0 -0
  451. /package/src/{less → sass}/gh/gh-mixins.less +0 -0
  452. /package/src/{less → sass}/image-placeholder/stories/image-placeholder.stories.js +0 -0
  453. /package/src/{less → sass}/link/stories/link.stories.js +0 -0
  454. /package/src/{less → sass}/menu/stories/misc.stories.js +0 -0
  455. /package/src/{less → sass}/mixins/public/typography-mixins.less +0 -0
  456. /package/src/{less → sass}/mixins/public/utility-mixins.less +0 -0
  457. /package/src/{less → sass}/progress-bar/stories/progress-bar.stories.js +0 -0
  458. /package/src/{less → sass}/progress-bar-expressive/stories/progress-bar-expressive.stories.js +0 -0
  459. /package/src/{less → sass}/progress-stepper/stories/progress-stepper.stories.js +0 -0
  460. /package/src/{less → sass}/radio/stories/checked.stories.js +0 -0
  461. /package/src/{less → sass}/radio/stories/unchecked.stories.js +0 -0
  462. /package/src/{less → sass}/signal/stories/signal.stories.js +0 -0
  463. /package/src/{less → sass}/skeleton/stories/base.stories.js +0 -0
  464. /package/src/{less → sass}/skeleton/stories/composite.stories.js +0 -0
  465. /package/src/{less → sass}/skeleton/stories/rtl.stories.js +0 -0
  466. /package/src/{less → sass}/snackbar-dialog/stories/base.stories.js +0 -0
  467. /package/src/{less → sass}/snackbar-dialog/stories/font-size.stories.js +0 -0
  468. /package/src/{less → sass}/snackbar-dialog/stories/rtl.stories.js +0 -0
  469. /package/src/{less → sass}/star-rating/stories/star-rating.stories.js +0 -0
  470. /package/src/{less → sass}/star-rating-select/stories/star-rating-select.stories.js +0 -0
  471. /package/src/{less → sass}/switch/stories/form.stories.js +0 -0
  472. /package/src/{less → sass}/switch/stories/script.stories.js +0 -0
  473. /package/src/{less → sass}/tabs/stories/fake-tabs/block.stories.js +0 -0
  474. /package/src/{less → sass}/tabs/stories/fake-tabs/inlineBlock.stories.js +0 -0
  475. /package/src/{less → sass}/tabs/stories/tabs/block.stories.js +0 -0
  476. /package/src/{less → sass}/tabs/stories/tabs/inlineBlock.stories.js +0 -0
  477. /package/src/{less → sass}/toast-dialog/stories/toast-dialog.stories.js +0 -0
  478. /package/src/{less → sass}/toggle-button/stories/gallery-layout-responsive.stories.js +0 -0
  479. /package/src/{less → sass}/toggle-button/stories/minimal-layout.stories.js +0 -0
package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js RENAMED
@@ -5,7 +5,7 @@ export const collapsed = () => `
5
5
  <button type="button" class="filter-menu-button__button">
6
6
  <span class="filter-menu-button__button-cell">
7
7
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
8
- <svg class="icon icon--chevron-down-12" height="12" width="12">
8
+ <svg class="icon icon--12" height="12" width="12">
9
9
  <use href="#icon-chevron-down-12"></use>
10
10
  </svg>
11
11
  </span>
@@ -14,10 +14,10 @@ export const collapsed = () => `
14
14
  <div class="filter-menu-button__items" role="menu">
15
15
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
16
16
  <span class="filter-menu-button__checkbox">
17
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
17
+ <svg class="icon icon--18" height="18" width="18">
18
18
  <use href="#icon-checkbox-unchecked-18"></use>
19
19
  </svg>
20
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
20
+ <svg class="icon icon--18" height="18" width="18">
21
21
  <use href="#icon-checkbox-checked-18"></use>
22
22
  </svg>
23
23
  </span>
@@ -25,10 +25,10 @@ export const collapsed = () => `
25
25
  </div>
26
26
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
27
27
  <span class="filter-menu-button__checkbox">
28
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
28
+ <svg class="icon icon--18" height="18" width="18">
29
29
  <use href="#icon-checkbox-unchecked-18"></use>
30
30
  </svg>
31
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
31
+ <svg class="icon icon--18" height="18" width="18">
32
32
  <use href="#icon-checkbox-checked-18"></use>
33
33
  </svg>
34
34
  </span>
@@ -36,10 +36,10 @@ export const collapsed = () => `
36
36
  </div>
37
37
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
38
38
  <span class="filter-menu-button__checkbox">
39
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
39
+ <svg class="icon icon--18" height="18" width="18">
40
40
  <use href="#icon-checkbox-unchecked-18"></use>
41
41
  </svg>
42
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
42
+ <svg class="icon icon--18" height="18" width="18">
43
43
  <use href="#icon-checkbox-checked-18"></use>
44
44
  </svg>
45
45
  </span>
@@ -56,7 +56,7 @@ export const expanded = () => `
56
56
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
57
57
  <span class="filter-menu-button__button-cell">
58
58
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
59
- <svg class="icon icon--chevron-down-12" height="12" width="12">
59
+ <svg class="icon icon--12" height="12" width="12">
60
60
  <use href="#icon-chevron-down-12"></use>
61
61
  </svg>
62
62
  </span>
@@ -65,10 +65,10 @@ export const expanded = () => `
65
65
  <div class="filter-menu-button__items" role="menu">
66
66
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
67
67
  <span class="filter-menu-button__checkbox">
68
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
68
+ <svg class="icon icon--18" height="18" width="18">
69
69
  <use href="#icon-checkbox-unchecked-18"></use>
70
70
  </svg>
71
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
71
+ <svg class="icon icon--18" height="18" width="18">
72
72
  <use href="#icon-checkbox-checked-18"></use>
73
73
  </svg>
74
74
  </span>
@@ -76,10 +76,10 @@ export const expanded = () => `
76
76
  </div>
77
77
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
78
78
  <span class="filter-menu-button__checkbox">
79
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
79
+ <svg class="icon icon--18" height="18" width="18">
80
80
  <use href="#icon-checkbox-unchecked-18"></use>
81
81
  </svg>
82
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
82
+ <svg class="icon icon--18" height="18" width="18">
83
83
  <use href="#icon-checkbox-checked-18"></use>
84
84
  </svg>
85
85
  </span>
@@ -87,10 +87,10 @@ export const expanded = () => `
87
87
  </div>
88
88
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
89
89
  <span class="filter-menu-button__checkbox">
90
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
90
+ <svg class="icon icon--18" height="18" width="18">
91
91
  <use href="#icon-checkbox-unchecked-18"></use>
92
92
  </svg>
93
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
93
+ <svg class="icon icon--18" height="18" width="18">
94
94
  <use href="#icon-checkbox-checked-18"></use>
95
95
  </svg>
96
96
  </span>
@@ -107,7 +107,7 @@ export const pressed = () => `
107
107
  <button type="button" class="filter-menu-button__button" aria-expanded="true" aria-pressed="true">
108
108
  <span class="filter-menu-button__button-cell">
109
109
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
110
- <svg class="icon icon--chevron-down-12" height="12" width="12">
110
+ <svg class="icon icon--12" height="12" width="12">
111
111
  <use href="#icon-chevron-down-12"></use>
112
112
  </svg>
113
113
  </span>
@@ -116,10 +116,10 @@ export const pressed = () => `
116
116
  <div class="filter-menu-button__items" role="menu">
117
117
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
118
118
  <span class="filter-menu-button__checkbox">
119
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
119
+ <svg class="icon icon--18" height="18" width="18">
120
120
  <use href="#icon-checkbox-unchecked-18"></use>
121
121
  </svg>
122
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
122
+ <svg class="icon icon--18" height="18" width="18">
123
123
  <use href="#icon-checkbox-checked-18"></use>
124
124
  </svg>
125
125
  </span>
@@ -127,10 +127,10 @@ export const pressed = () => `
127
127
  </div>
128
128
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
129
129
  <span class="filter-menu-button__checkbox">
130
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
130
+ <svg class="icon icon--18" height="18" width="18">
131
131
  <use href="#icon-checkbox-unchecked-18"></use>
132
132
  </svg>
133
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
133
+ <svg class="icon icon--18" height="18" width="18">
134
134
  <use href="#icon-checkbox-checked-18"></use>
135
135
  </svg>
136
136
  </span>
@@ -138,10 +138,10 @@ export const pressed = () => `
138
138
  </div>
139
139
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
140
140
  <span class="filter-menu-button__checkbox">
141
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
141
+ <svg class="icon icon--18" height="18" width="18">
142
142
  <use href="#icon-checkbox-unchecked-18"></use>
143
143
  </svg>
144
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
144
+ <svg class="icon icon--18" height="18" width="18">
145
145
  <use href="#icon-checkbox-checked-18"></use>
146
146
  </svg>
147
147
  </span>
@@ -158,7 +158,7 @@ export const disabled = () => `
158
158
  <button aria-expaned="true" type="button" class="filter-menu-button__button" disabled>
159
159
  <span class="filter-menu-button__button-cell">
160
160
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
161
- <svg class="icon icon--chevron-down-12" height="12" width="12">
161
+ <svg class="icon icon--12" height="12" width="12">
162
162
  <use href="#icon-chevron-down-12"></use>
163
163
  </svg>
164
164
  </span>
@@ -167,10 +167,10 @@ export const disabled = () => `
167
167
  <div class="filter-menu-button__items" role="menu">
168
168
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
169
169
  <span class="filter-menu-button__checkbox">
170
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
170
+ <svg class="icon icon--18" height="18" width="18">
171
171
  <use href="#icon-checkbox-unchecked-18"></use>
172
172
  </svg>
173
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
173
+ <svg class="icon icon--18" height="18" width="18">
174
174
  <use href="#icon-checkbox-checked-18"></use>
175
175
  </svg>
176
176
  </span>
@@ -178,10 +178,10 @@ export const disabled = () => `
178
178
  </div>
179
179
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
180
180
  <span class="filter-menu-button__checkbox">
181
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
181
+ <svg class="icon icon--18" height="18" width="18">
182
182
  <use href="#icon-checkbox-unchecked-18"></use>
183
183
  </svg>
184
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
184
+ <svg class="icon icon--18" height="18" width="18">
185
185
  <use href="#icon-checkbox-checked-18"></use>
186
186
  </svg>
187
187
  </span>
@@ -189,10 +189,10 @@ export const disabled = () => `
189
189
  </div>
190
190
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
191
191
  <span class="filter-menu-button__checkbox">
192
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
192
+ <svg class="icon icon--18" height="18" width="18">
193
193
  <use href="#icon-checkbox-unchecked-18"></use>
194
194
  </svg>
195
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
195
+ <svg class="icon icon--18" height="18" width="18">
196
196
  <use href="#icon-checkbox-checked-18"></use>
197
197
  </svg>
198
198
  </span>
@@ -208,7 +208,7 @@ export const overflow = () => `
208
208
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
209
209
  <span class="filter-menu-button__button-cell">
210
210
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
211
- <svg class="icon icon--chevron-down-12" height="12" width="12">
211
+ <svg class="icon icon--12" height="12" width="12">
212
212
  <use href="#icon-chevron-down-12"></use>
213
213
  </svg>
214
214
  </span>
@@ -217,10 +217,10 @@ export const overflow = () => `
217
217
  <div class="filter-menu-button__items" role="menu">
218
218
  <div class="filter-menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
219
219
  <span class="filter-menu-button__checkbox">
220
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
220
+ <svg class="icon icon--18" height="18" width="18">
221
221
  <use href="#icon-checkbox-unchecked-18"></use>
222
222
  </svg>
223
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
223
+ <svg class="icon icon--18" height="18" width="18">
224
224
  <use href="#icon-checkbox-checked-18"></use>
225
225
  </svg>
226
226
  </span>
@@ -228,10 +228,10 @@ export const overflow = () => `
228
228
  </div>
229
229
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
230
230
  <span class="filter-menu-button__checkbox">
231
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
231
+ <svg class="icon icon--18" height="18" width="18">
232
232
  <use href="#icon-checkbox-unchecked-18"></use>
233
233
  </svg>
234
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
234
+ <svg class="icon icon--18" height="18" width="18">
235
235
  <use href="#icon-checkbox-checked-18"></use>
236
236
  </svg>
237
237
  </span>
@@ -239,10 +239,10 @@ export const overflow = () => `
239
239
  </div>
240
240
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
241
241
  <span class="filter-menu-button__checkbox">
242
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
242
+ <svg class="icon icon--18" height="18" width="18">
243
243
  <use href="#icon-checkbox-unchecked-18"></use>
244
244
  </svg>
245
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
245
+ <svg class="icon icon--18" height="18" width="18">
246
246
  <use href="#icon-checkbox-checked-18"></use>
247
247
  </svg>
248
248
  </span>
@@ -250,10 +250,10 @@ export const overflow = () => `
250
250
  </div>
251
251
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
252
252
  <span class="filter-menu-button__checkbox">
253
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
253
+ <svg class="icon icon--18" height="18" width="18">
254
254
  <use href="#icon-checkbox-unchecked-18"></use>
255
255
  </svg>
256
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
256
+ <svg class="icon icon--18" height="18" width="18">
257
257
  <use href="#icon-checkbox-checked-18"></use>
258
258
  </svg>
259
259
  </span>
@@ -261,10 +261,10 @@ export const overflow = () => `
261
261
  </div>
262
262
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
263
263
  <span class="filter-menu-button__checkbox">
264
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
264
+ <svg class="icon icon--18" height="18" width="18">
265
265
  <use href="#icon-checkbox-unchecked-18"></use>
266
266
  </svg>
267
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
267
+ <svg class="icon icon--18" height="18" width="18">
268
268
  <use href="#icon-checkbox-checked-18"></use>
269
269
  </svg>
270
270
  </span>
@@ -272,10 +272,10 @@ export const overflow = () => `
272
272
  </div>
273
273
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
274
274
  <span class="filter-menu-button__checkbox">
275
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
275
+ <svg class="icon icon--18" height="18" width="18">
276
276
  <use href="#icon-checkbox-unchecked-18"></use>
277
277
  </svg>
278
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
278
+ <svg class="icon icon--18" height="18" width="18">
279
279
  <use href="#icon-checkbox-checked-18"></use>
280
280
  </svg>
281
281
  </span>
@@ -283,10 +283,10 @@ export const overflow = () => `
283
283
  </div>
284
284
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
285
285
  <span class="filter-menu-button__checkbox">
286
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
286
+ <svg class="icon icon--18" height="18" width="18">
287
287
  <use href="#icon-checkbox-unchecked-18"></use>
288
288
  </svg>
289
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
289
+ <svg class="icon icon--18" height="18" width="18">
290
290
  <use href="#icon-checkbox-checked-18"></use>
291
291
  </svg>
292
292
  </span>
@@ -294,10 +294,10 @@ export const overflow = () => `
294
294
  </div>
295
295
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
296
296
  <span class="filter-menu-button__checkbox">
297
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
297
+ <svg class="icon icon--18" height="18" width="18">
298
298
  <use href="#icon-checkbox-unchecked-18"></use>
299
299
  </svg>
300
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
300
+ <svg class="icon icon--18" height="18" width="18">
301
301
  <use href="#icon-checkbox-checked-18"></use>
302
302
  </svg>
303
303
  </span>
@@ -305,10 +305,10 @@ export const overflow = () => `
305
305
  </div>
306
306
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
307
307
  <span class="filter-menu-button__checkbox">
308
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
308
+ <svg class="icon icon--18" height="18" width="18">
309
309
  <use href="#icon-checkbox-unchecked-18"></use>
310
310
  </svg>
311
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
311
+ <svg class="icon icon--18" height="18" width="18">
312
312
  <use href="#icon-checkbox-checked-18"></use>
313
313
  </svg>
314
314
  </span>
@@ -316,10 +316,10 @@ export const overflow = () => `
316
316
  </div>
317
317
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
318
318
  <span class="filter-menu-button__checkbox">
319
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
319
+ <svg class="icon icon--18" height="18" width="18">
320
320
  <use href="#icon-checkbox-unchecked-18"></use>
321
321
  </svg>
322
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
322
+ <svg class="icon icon--18" height="18" width="18">
323
323
  <use href="#icon-checkbox-checked-18"></use>
324
324
  </svg>
325
325
  </span>
@@ -327,10 +327,10 @@ export const overflow = () => `
327
327
  </div>
328
328
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
329
329
  <span class="filter-menu-button__checkbox">
330
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
330
+ <svg class="icon icon--18" height="18" width="18">
331
331
  <use href="#icon-checkbox-unchecked-18"></use>
332
332
  </svg>
333
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
333
+ <svg class="icon icon--18" height="18" width="18">
334
334
  <use href="#icon-checkbox-checked-18"></use>
335
335
  </svg>
336
336
  </span>
@@ -338,10 +338,10 @@ export const overflow = () => `
338
338
  </div>
339
339
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
340
340
  <span class="filter-menu-button__checkbox">
341
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
341
+ <svg class="icon icon--18" height="18" width="18">
342
342
  <use href="#icon-checkbox-unchecked-18"></use>
343
343
  </svg>
344
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
344
+ <svg class="icon icon--18" height="18" width="18">
345
345
  <use href="#icon-checkbox-checked-18"></use>
346
346
  </svg>
347
347
  </span>
@@ -349,10 +349,10 @@ export const overflow = () => `
349
349
  </div>
350
350
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
351
351
  <span class="filter-menu-button__checkbox">
352
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
352
+ <svg class="icon icon--18" height="18" width="18">
353
353
  <use href="#icon-checkbox-unchecked-18"></use>
354
354
  </svg>
355
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
355
+ <svg class="icon icon--18" height="18" width="18">
356
356
  <use href="#icon-checkbox-checked-18"></use>
357
357
  </svg>
358
358
  </span>
@@ -360,10 +360,10 @@ export const overflow = () => `
360
360
  </div>
361
361
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
362
362
  <span class="filter-menu-button__checkbox">
363
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
363
+ <svg class="icon icon--18" height="18" width="18">
364
364
  <use href="#icon-checkbox-unchecked-18"></use>
365
365
  </svg>
366
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
366
+ <svg class="icon icon--18" height="18" width="18">
367
367
  <use href="#icon-checkbox-checked-18"></use>
368
368
  </svg>
369
369
  </span>
@@ -371,10 +371,10 @@ export const overflow = () => `
371
371
  </div>
372
372
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
373
373
  <span class="filter-menu-button__checkbox">
374
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
374
+ <svg class="icon icon--18" height="18" width="18">
375
375
  <use href="#icon-checkbox-unchecked-18"></use>
376
376
  </svg>
377
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
377
+ <svg class="icon icon--18" height="18" width="18">
378
378
  <use href="#icon-checkbox-checked-18"></use>
379
379
  </svg>
380
380
  </span>
@@ -382,10 +382,10 @@ export const overflow = () => `
382
382
  </div>
383
383
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
384
384
  <span class="filter-menu-button__checkbox">
385
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
385
+ <svg class="icon icon--18" height="18" width="18">
386
386
  <use href="#icon-checkbox-unchecked-18"></use>
387
387
  </svg>
388
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
388
+ <svg class="icon icon--18" height="18" width="18">
389
389
  <use href="#icon-checkbox-checked-18"></use>
390
390
  </svg>
391
391
  </span>
@@ -393,10 +393,10 @@ export const overflow = () => `
393
393
  </div>
394
394
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
395
395
  <span class="filter-menu-button__checkbox">
396
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
396
+ <svg class="icon icon--18" height="18" width="18">
397
397
  <use href="#icon-checkbox-unchecked-18"></use>
398
398
  </svg>
399
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
399
+ <svg class="icon icon--18" height="18" width="18">
400
400
  <use href="#icon-checkbox-checked-18"></use>
401
401
  </svg>
402
402
  </span>
@@ -404,10 +404,10 @@ export const overflow = () => `
404
404
  </div>
405
405
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
406
406
  <span class="filter-menu-button__checkbox">
407
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
407
+ <svg class="icon icon--18" height="18" width="18">
408
408
  <use href="#icon-checkbox-unchecked-18"></use>
409
409
  </svg>
410
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
410
+ <svg class="icon icon--18" height="18" width="18">
411
411
  <use href="#icon-checkbox-checked-18"></use>
412
412
  </svg>
413
413
  </span>
@@ -415,10 +415,10 @@ export const overflow = () => `
415
415
  </div>
416
416
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
417
417
  <span class="filter-menu-button__checkbox">
418
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
418
+ <svg class="icon icon--18" height="18" width="18">
419
419
  <use href="#icon-checkbox-unchecked-18"></use>
420
420
  </svg>
421
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
421
+ <svg class="icon icon--18" height="18" width="18">
422
422
  <use href="#icon-checkbox-checked-18"></use>
423
423
  </svg>
424
424
  </span>
@@ -426,10 +426,10 @@ export const overflow = () => `
426
426
  </div>
427
427
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
428
428
  <span class="filter-menu-button__checkbox">
429
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
429
+ <svg class="icon icon--18" height="18" width="18">
430
430
  <use href="#icon-checkbox-unchecked-18"></use>
431
431
  </svg>
432
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
432
+ <svg class="icon icon--18" height="18" width="18">
433
433
  <use href="#icon-checkbox-checked-18"></use>
434
434
  </svg>
435
435
  </span>
@@ -446,7 +446,7 @@ export const textSpacing = () => `
446
446
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
447
447
  <span class="filter-menu-button__button-cell">
448
448
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
449
- <svg class="icon icon--chevron-down-12" height="12" width="12">
449
+ <svg class="icon icon--12" height="12" width="12">
450
450
  <use href="#icon-chevron-down-12"></use>
451
451
  </svg>
452
452
  </span>
@@ -455,10 +455,10 @@ export const textSpacing = () => `
455
455
  <div class="filter-menu-button__items" role="menu">
456
456
  <div class="filter-menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
457
457
  <span class="filter-menu-button__checkbox">
458
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
458
+ <svg class="icon icon--18" height="18" width="18">
459
459
  <use href="#icon-checkbox-unchecked-18"></use>
460
460
  </svg>
461
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
461
+ <svg class="icon icon--18" height="18" width="18">
462
462
  <use href="#icon-checkbox-checked-18"></use>
463
463
  </svg>
464
464
  </span>
@@ -466,10 +466,10 @@ export const textSpacing = () => `
466
466
  </div>
467
467
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
468
468
  <span class="filter-menu-button__checkbox">
469
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
469
+ <svg class="icon icon--18" height="18" width="18">
470
470
  <use href="#icon-checkbox-unchecked-18"></use>
471
471
  </svg>
472
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
472
+ <svg class="icon icon--18" height="18" width="18">
473
473
  <use href="#icon-checkbox-checked-18"></use>
474
474
  </svg>
475
475
  </span>
@@ -477,10 +477,10 @@ export const textSpacing = () => `
477
477
  </div>
478
478
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
479
479
  <span class="filter-menu-button__checkbox">
480
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
480
+ <svg class="icon icon--18" height="18" width="18">
481
481
  <use href="#icon-checkbox-unchecked-18"></use>
482
482
  </svg>
483
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
483
+ <svg class="icon icon--18" height="18" width="18">
484
484
  <use href="#icon-checkbox-checked-18"></use>
485
485
  </svg>
486
486
  </span>
@@ -488,10 +488,10 @@ export const textSpacing = () => `
488
488
  </div>
489
489
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
490
490
  <span class="filter-menu-button__checkbox">
491
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
491
+ <svg class="icon icon--18" height="18" width="18">
492
492
  <use href="#icon-checkbox-unchecked-18"></use>
493
493
  </svg>
494
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
494
+ <svg class="icon icon--18" height="18" width="18">
495
495
  <use href="#icon-checkbox-checked-18"></use>
496
496
  </svg>
497
497
  </span>
@@ -499,10 +499,10 @@ export const textSpacing = () => `
499
499
  </div>
500
500
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
501
501
  <span class="filter-menu-button__checkbox">
502
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
502
+ <svg class="icon icon--18" height="18" width="18">
503
503
  <use href="#icon-checkbox-unchecked-18"></use>
504
504
  </svg>
505
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
505
+ <svg class="icon icon--18" height="18" width="18">
506
506
  <use href="#icon-checkbox-checked-18"></use>
507
507
  </svg>
508
508
  </span>
@@ -510,10 +510,10 @@ export const textSpacing = () => `
510
510
  </div>
511
511
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
512
512
  <span class="filter-menu-button__checkbox">
513
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
513
+ <svg class="icon icon--18" height="18" width="18">
514
514
  <use href="#icon-checkbox-unchecked-18"></use>
515
515
  </svg>
516
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
516
+ <svg class="icon icon--18" height="18" width="18">
517
517
  <use href="#icon-checkbox-checked-18"></use>
518
518
  </svg>
519
519
  </span>
@@ -521,10 +521,10 @@ export const textSpacing = () => `
521
521
  </div>
522
522
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
523
523
  <span class="filter-menu-button__checkbox">
524
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
524
+ <svg class="icon icon--18" height="18" width="18">
525
525
  <use href="#icon-checkbox-unchecked-18"></use>
526
526
  </svg>
527
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
527
+ <svg class="icon icon--18" height="18" width="18">
528
528
  <use href="#icon-checkbox-checked-18"></use>
529
529
  </svg>
530
530
  </span>
@@ -532,10 +532,10 @@ export const textSpacing = () => `
532
532
  </div>
533
533
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
534
534
  <span class="filter-menu-button__checkbox">
535
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
535
+ <svg class="icon icon--18" height="18" width="18">
536
536
  <use href="#icon-checkbox-unchecked-18"></use>
537
537
  </svg>
538
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
538
+ <svg class="icon icon--18" height="18" width="18">
539
539
  <use href="#icon-checkbox-checked-18"></use>
540
540
  </svg>
541
541
  </span>
@@ -543,10 +543,10 @@ export const textSpacing = () => `
543
543
  </div>
544
544
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
545
545
  <span class="filter-menu-button__checkbox">
546
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
546
+ <svg class="icon icon--18" height="18" width="18">
547
547
  <use href="#icon-checkbox-unchecked-18"></use>
548
548
  </svg>
549
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
549
+ <svg class="icon icon--18" height="18" width="18">
550
550
  <use href="#icon-checkbox-checked-18"></use>
551
551
  </svg>
552
552
  </span>
@@ -554,10 +554,10 @@ export const textSpacing = () => `
554
554
  </div>
555
555
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
556
556
  <span class="filter-menu-button__checkbox">
557
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
557
+ <svg class="icon icon--18" height="18" width="18">
558
558
  <use href="#icon-checkbox-unchecked-18"></use>
559
559
  </svg>
560
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
560
+ <svg class="icon icon--18" height="18" width="18">
561
561
  <use href="#icon-checkbox-checked-18"></use>
562
562
  </svg>
563
563
  </span>
@@ -565,10 +565,10 @@ export const textSpacing = () => `
565
565
  </div>
566
566
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
567
567
  <span class="filter-menu-button__checkbox">
568
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
568
+ <svg class="icon icon--18" height="18" width="18">
569
569
  <use href="#icon-checkbox-unchecked-18"></use>
570
570
  </svg>
571
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
571
+ <svg class="icon icon--18" height="18" width="18">
572
572
  <use href="#icon-checkbox-checked-18"></use>
573
573
  </svg>
574
574
  </span>
@@ -576,10 +576,10 @@ export const textSpacing = () => `
576
576
  </div>
577
577
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
578
578
  <span class="filter-menu-button__checkbox">
579
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
579
+ <svg class="icon icon--18" height="18" width="18">
580
580
  <use href="#icon-checkbox-unchecked-18"></use>
581
581
  </svg>
582
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
582
+ <svg class="icon icon--18" height="18" width="18">
583
583
  <use href="#icon-checkbox-checked-18"></use>
584
584
  </svg>
585
585
  </span>
@@ -587,10 +587,10 @@ export const textSpacing = () => `
587
587
  </div>
588
588
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
589
589
  <span class="filter-menu-button__checkbox">
590
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
590
+ <svg class="icon icon--18" height="18" width="18">
591
591
  <use href="#icon-checkbox-unchecked-18"></use>
592
592
  </svg>
593
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
593
+ <svg class="icon icon--18" height="18" width="18">
594
594
  <use href="#icon-checkbox-checked-18"></use>
595
595
  </svg>
596
596
  </span>
@@ -598,10 +598,10 @@ export const textSpacing = () => `
598
598
  </div>
599
599
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
600
600
  <span class="filter-menu-button__checkbox">
601
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
601
+ <svg class="icon icon--18" height="18" width="18">
602
602
  <use href="#icon-checkbox-unchecked-18"></use>
603
603
  </svg>
604
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
604
+ <svg class="icon icon--18" height="18" width="18">
605
605
  <use href="#icon-checkbox-checked-18"></use>
606
606
  </svg>
607
607
  </span>
@@ -609,10 +609,10 @@ export const textSpacing = () => `
609
609
  </div>
610
610
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
611
611
  <span class="filter-menu-button__checkbox">
612
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
612
+ <svg class="icon icon--18" height="18" width="18">
613
613
  <use href="#icon-checkbox-unchecked-18"></use>
614
614
  </svg>
615
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
615
+ <svg class="icon icon--18" height="18" width="18">
616
616
  <use href="#icon-checkbox-checked-18"></use>
617
617
  </svg>
618
618
  </span>
@@ -620,10 +620,10 @@ export const textSpacing = () => `
620
620
  </div>
621
621
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
622
622
  <span class="filter-menu-button__checkbox">
623
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
623
+ <svg class="icon icon--18" height="18" width="18">
624
624
  <use href="#icon-checkbox-unchecked-18"></use>
625
625
  </svg>
626
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
626
+ <svg class="icon icon--18" height="18" width="18">
627
627
  <use href="#icon-checkbox-checked-18"></use>
628
628
  </svg>
629
629
  </span>
@@ -631,10 +631,10 @@ export const textSpacing = () => `
631
631
  </div>
632
632
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
633
633
  <span class="filter-menu-button__checkbox">
634
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
634
+ <svg class="icon icon--18" height="18" width="18">
635
635
  <use href="#icon-checkbox-unchecked-18"></use>
636
636
  </svg>
637
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
637
+ <svg class="icon icon--18" height="18" width="18">
638
638
  <use href="#icon-checkbox-checked-18"></use>
639
639
  </svg>
640
640
  </span>
@@ -642,10 +642,10 @@ export const textSpacing = () => `
642
642
  </div>
643
643
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
644
644
  <span class="filter-menu-button__checkbox">
645
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
645
+ <svg class="icon icon--18" height="18" width="18">
646
646
  <use href="#icon-checkbox-unchecked-18"></use>
647
647
  </svg>
648
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
648
+ <svg class="icon icon--18" height="18" width="18">
649
649
  <use href="#icon-checkbox-checked-18"></use>
650
650
  </svg>
651
651
  </span>
@@ -653,10 +653,10 @@ export const textSpacing = () => `
653
653
  </div>
654
654
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
655
655
  <span class="filter-menu-button__checkbox">
656
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
656
+ <svg class="icon icon--18" height="18" width="18">
657
657
  <use href="#icon-checkbox-unchecked-18"></use>
658
658
  </svg>
659
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
659
+ <svg class="icon icon--18" height="18" width="18">
660
660
  <use href="#icon-checkbox-checked-18"></use>
661
661
  </svg>
662
662
  </span>
@@ -664,10 +664,10 @@ export const textSpacing = () => `
664
664
  </div>
665
665
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
666
666
  <span class="filter-menu-button__checkbox">
667
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
667
+ <svg class="icon icon--18" height="18" width="18">
668
668
  <use href="#icon-checkbox-unchecked-18"></use>
669
669
  </svg>
670
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
670
+ <svg class="icon icon--18" height="18" width="18">
671
671
  <use href="#icon-checkbox-checked-18"></use>
672
672
  </svg>
673
673
  </span>
@@ -684,7 +684,7 @@ export const truncated = () => `
684
684
  <button aria-expanded="true" type="button" class="filter-menu-button__button">
685
685
  <span class="filter-menu-button__button-cell">
686
686
  <span class="filter-menu-button__button-text">Filter Menu Button with a lot of text that will truncate</span>
687
- <svg class="icon icon--chevron-down-12" height="12" width="12">
687
+ <svg class="icon icon--12" height="12" width="12">
688
688
  <use href="#icon-chevron-down-12"></use>
689
689
  </svg>
690
690
  </span>
@@ -693,10 +693,10 @@ export const truncated = () => `
693
693
  <div class="filter-menu-button__items" role="menu">
694
694
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
695
695
  <span class="filter-menu-button__checkbox">
696
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
696
+ <svg class="icon icon--18" height="18" width="18">
697
697
  <use href="#icon-checkbox-unchecked-18"></use>
698
698
  </svg>
699
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
699
+ <svg class="icon icon--18" height="18" width="18">
700
700
  <use href="#icon-checkbox-checked-18"></use>
701
701
  </svg>
702
702
  </span>
@@ -704,10 +704,10 @@ export const truncated = () => `
704
704
  </div>
705
705
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
706
706
  <span class="filter-menu-button__checkbox">
707
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
707
+ <svg class="icon icon--18" height="18" width="18">
708
708
  <use href="#icon-checkbox-unchecked-18"></use>
709
709
  </svg>
710
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
710
+ <svg class="icon icon--18" height="18" width="18">
711
711
  <use href="#icon-checkbox-checked-18"></use>
712
712
  </svg>
713
713
  </span>
@@ -715,10 +715,10 @@ export const truncated = () => `
715
715
  </div>
716
716
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
717
717
  <span class="filter-menu-button__checkbox">
718
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
718
+ <svg class="icon icon--18" height="18" width="18">
719
719
  <use href="#icon-checkbox-unchecked-18"></use>
720
720
  </svg>
721
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
721
+ <svg class="icon icon--18" height="18" width="18">
722
722
  <use href="#icon-checkbox-checked-18"></use>
723
723
  </svg>
724
724
  </span>
@@ -736,7 +736,7 @@ export const RTL = () => `
736
736
  <button type="button" class="filter-menu-button__button" aria-expanded="true">
737
737
  <span class="filter-menu-button__button-cell">
738
738
  <span class="filter-menu-button__button-text">Filter Menu Button</span>
739
- <svg class="icon icon--chevron-down-12" height="12" width="12">
739
+ <svg class="icon icon--12" height="12" width="12">
740
740
  <use href="#icon-chevron-down-12"></use>
741
741
  </svg>
742
742
  </span>
@@ -745,10 +745,10 @@ export const RTL = () => `
745
745
  <div class="filter-menu-button__items" role="menu">
746
746
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
747
747
  <span class="filter-menu-button__checkbox">
748
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
748
+ <svg class="icon icon--18" height="18" width="18">
749
749
  <use href="#icon-checkbox-unchecked-18"></use>
750
750
  </svg>
751
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
751
+ <svg class="icon icon--18" height="18" width="18">
752
752
  <use href="#icon-checkbox-checked-18"></use>
753
753
  </svg>
754
754
  </span>
@@ -756,10 +756,10 @@ export const RTL = () => `
756
756
  </div>
757
757
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
758
758
  <span class="filter-menu-button__checkbox">
759
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
759
+ <svg class="icon icon--18" height="18" width="18">
760
760
  <use href="#icon-checkbox-unchecked-18"></use>
761
761
  </svg>
762
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
762
+ <svg class="icon icon--18" height="18" width="18">
763
763
  <use href="#icon-checkbox-checked-18"></use>
764
764
  </svg>
765
765
  </span>
@@ -767,10 +767,10 @@ export const RTL = () => `
767
767
  </div>
768
768
  <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
769
769
  <span class="filter-menu-button__checkbox">
770
- <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
770
+ <svg class="icon icon--18" height="18" width="18">
771
771
  <use href="#icon-checkbox-unchecked-18"></use>
772
772
  </svg>
773
- <svg class="icon icon--checkbox-checked-18" height="18" width="18">
773
+ <svg class="icon icon--18" height="18" width="18">
774
774
  <use href="#icon-checkbox-checked-18"></use>
775
775
  </svg>
776
776
  </span>