@transferwise/components 46.50.1 → 46.52.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 (493) hide show
  1. package/build/accordion/AccordionItem/AccordionItem.js +3 -7
  2. package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
  3. package/build/accordion/AccordionItem/AccordionItem.mjs +3 -3
  4. package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
  5. package/build/actionButton/ActionButton.js +2 -6
  6. package/build/actionButton/ActionButton.js.map +1 -1
  7. package/build/actionButton/ActionButton.mjs +2 -2
  8. package/build/actionButton/ActionButton.mjs.map +1 -1
  9. package/build/actionOption/ActionOption.js +2 -6
  10. package/build/actionOption/ActionOption.js.map +1 -1
  11. package/build/actionOption/ActionOption.mjs +2 -2
  12. package/build/actionOption/ActionOption.mjs.map +1 -1
  13. package/build/alert/Alert.js +3 -7
  14. package/build/alert/Alert.js.map +1 -1
  15. package/build/alert/Alert.mjs +3 -3
  16. package/build/alert/Alert.mjs.map +1 -1
  17. package/build/avatar/Avatar.js +2 -6
  18. package/build/avatar/Avatar.js.map +1 -1
  19. package/build/avatar/Avatar.mjs +2 -2
  20. package/build/avatar/Avatar.mjs.map +1 -1
  21. package/build/badge/Badge.js +2 -6
  22. package/build/badge/Badge.js.map +1 -1
  23. package/build/badge/Badge.mjs +2 -2
  24. package/build/badge/Badge.mjs.map +1 -1
  25. package/build/body/Body.js +2 -6
  26. package/build/body/Body.js.map +1 -1
  27. package/build/body/Body.mjs +2 -2
  28. package/build/body/Body.mjs.map +1 -1
  29. package/build/button/Button.js +2 -6
  30. package/build/button/Button.js.map +1 -1
  31. package/build/button/Button.mjs +2 -2
  32. package/build/button/Button.mjs.map +1 -1
  33. package/build/card/Card.js +4 -8
  34. package/build/card/Card.js.map +1 -1
  35. package/build/card/Card.mjs +4 -4
  36. package/build/card/Card.mjs.map +1 -1
  37. package/build/carousel/Carousel.js +5 -9
  38. package/build/carousel/Carousel.js.map +1 -1
  39. package/build/carousel/Carousel.mjs +5 -5
  40. package/build/carousel/Carousel.mjs.map +1 -1
  41. package/build/checkbox/Checkbox.js +3 -7
  42. package/build/checkbox/Checkbox.js.map +1 -1
  43. package/build/checkbox/Checkbox.mjs +3 -3
  44. package/build/checkbox/Checkbox.mjs.map +1 -1
  45. package/build/checkboxButton/CheckboxButton.js +2 -6
  46. package/build/checkboxButton/CheckboxButton.js.map +1 -1
  47. package/build/checkboxButton/CheckboxButton.mjs +2 -2
  48. package/build/checkboxButton/CheckboxButton.mjs.map +1 -1
  49. package/build/chevron/Chevron.js +3 -7
  50. package/build/chevron/Chevron.js.map +1 -1
  51. package/build/chevron/Chevron.mjs +3 -3
  52. package/build/chevron/Chevron.mjs.map +1 -1
  53. package/build/chips/Chip.js +2 -6
  54. package/build/chips/Chip.js.map +1 -1
  55. package/build/chips/Chip.mjs +2 -2
  56. package/build/chips/Chip.mjs.map +1 -1
  57. package/build/chips/Chips.js +3 -7
  58. package/build/chips/Chips.js.map +1 -1
  59. package/build/chips/Chips.mjs +3 -3
  60. package/build/chips/Chips.mjs.map +1 -1
  61. package/build/circularButton/CircularButton.js +3 -7
  62. package/build/circularButton/CircularButton.js.map +1 -1
  63. package/build/circularButton/CircularButton.mjs +3 -3
  64. package/build/circularButton/CircularButton.mjs.map +1 -1
  65. package/build/common/Option/Option.js +3 -7
  66. package/build/common/Option/Option.js.map +1 -1
  67. package/build/common/Option/Option.mjs +3 -3
  68. package/build/common/Option/Option.mjs.map +1 -1
  69. package/build/common/RadioButton/RadioButton.js +2 -6
  70. package/build/common/RadioButton/RadioButton.js.map +1 -1
  71. package/build/common/RadioButton/RadioButton.mjs +2 -2
  72. package/build/common/RadioButton/RadioButton.mjs.map +1 -1
  73. package/build/common/action/Action.js +2 -6
  74. package/build/common/action/Action.js.map +1 -1
  75. package/build/common/action/Action.mjs +2 -2
  76. package/build/common/action/Action.mjs.map +1 -1
  77. package/build/common/bottomSheet/BottomSheet.js +2 -6
  78. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  79. package/build/common/bottomSheet/BottomSheet.mjs +2 -2
  80. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  81. package/build/common/card/Card.js +2 -6
  82. package/build/common/card/Card.js.map +1 -1
  83. package/build/common/card/Card.mjs +2 -2
  84. package/build/common/card/Card.mjs.map +1 -1
  85. package/build/common/closeButton/CloseButton.js +2 -6
  86. package/build/common/closeButton/CloseButton.js.map +1 -1
  87. package/build/common/closeButton/CloseButton.mjs +2 -2
  88. package/build/common/closeButton/CloseButton.mjs.map +1 -1
  89. package/build/common/flowHeader/FlowHeader.js +3 -6
  90. package/build/common/flowHeader/FlowHeader.js.map +1 -1
  91. package/build/common/flowHeader/FlowHeader.mjs +3 -3
  92. package/build/common/flowHeader/FlowHeader.mjs.map +1 -1
  93. package/build/common/panel/Panel.js +4 -8
  94. package/build/common/panel/Panel.js.map +1 -1
  95. package/build/common/panel/Panel.mjs +4 -4
  96. package/build/common/panel/Panel.mjs.map +1 -1
  97. package/build/criticalBanner/CriticalCommsBanner.js +4 -8
  98. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  99. package/build/criticalBanner/CriticalCommsBanner.mjs +4 -4
  100. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  101. package/build/dateInput/DateInput.js +2 -6
  102. package/build/dateInput/DateInput.js.map +1 -1
  103. package/build/dateInput/DateInput.mjs +2 -2
  104. package/build/dateInput/DateInput.mjs.map +1 -1
  105. package/build/dateLookup/DateLookup.js +2 -6
  106. package/build/dateLookup/DateLookup.js.map +1 -1
  107. package/build/dateLookup/DateLookup.mjs +2 -2
  108. package/build/dateLookup/DateLookup.mjs.map +1 -1
  109. package/build/dateLookup/dateHeader/DateHeader.js +2 -6
  110. package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
  111. package/build/dateLookup/dateHeader/DateHeader.mjs +2 -2
  112. package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
  113. package/build/dateLookup/tableLink/TableLink.js +15 -21
  114. package/build/dateLookup/tableLink/TableLink.js.map +1 -1
  115. package/build/dateLookup/tableLink/TableLink.mjs +16 -18
  116. package/build/dateLookup/tableLink/TableLink.mjs.map +1 -1
  117. package/build/decision/Decision.js +3 -7
  118. package/build/decision/Decision.js.map +1 -1
  119. package/build/decision/Decision.mjs +3 -3
  120. package/build/decision/Decision.mjs.map +1 -1
  121. package/build/definitionList/DefinitionList.js +4 -8
  122. package/build/definitionList/DefinitionList.js.map +1 -1
  123. package/build/definitionList/DefinitionList.mjs +4 -4
  124. package/build/definitionList/DefinitionList.mjs.map +1 -1
  125. package/build/dimmer/Dimmer.js +6 -10
  126. package/build/dimmer/Dimmer.js.map +1 -1
  127. package/build/dimmer/Dimmer.mjs +6 -6
  128. package/build/dimmer/Dimmer.mjs.map +1 -1
  129. package/build/display/Display.js +2 -6
  130. package/build/display/Display.js.map +1 -1
  131. package/build/display/Display.mjs +2 -2
  132. package/build/display/Display.mjs.map +1 -1
  133. package/build/drawer/Drawer.js +5 -9
  134. package/build/drawer/Drawer.js.map +1 -1
  135. package/build/drawer/Drawer.mjs +5 -5
  136. package/build/drawer/Drawer.mjs.map +1 -1
  137. package/build/field/Field.js +2 -6
  138. package/build/field/Field.js.map +1 -1
  139. package/build/field/Field.mjs +2 -2
  140. package/build/field/Field.mjs.map +1 -1
  141. package/build/flowNavigation/FlowNavigation.js +4 -8
  142. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  143. package/build/flowNavigation/FlowNavigation.mjs +4 -4
  144. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  145. package/build/flowNavigation/animatedLabel/AnimatedLabel.js +3 -7
  146. package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
  147. package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs +3 -3
  148. package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map +1 -1
  149. package/build/flowNavigation/backButton/BackButton.js +2 -6
  150. package/build/flowNavigation/backButton/BackButton.js.map +1 -1
  151. package/build/flowNavigation/backButton/BackButton.mjs +2 -2
  152. package/build/flowNavigation/backButton/BackButton.mjs.map +1 -1
  153. package/build/header/Header.js +3 -7
  154. package/build/header/Header.js.map +1 -1
  155. package/build/header/Header.mjs +3 -3
  156. package/build/header/Header.mjs.map +1 -1
  157. package/build/i18n/zh-HK.json +2 -0
  158. package/build/i18n/zh-HK.json.js +2 -0
  159. package/build/i18n/zh-HK.json.js.map +1 -1
  160. package/build/i18n/zh-HK.json.mjs +2 -0
  161. package/build/i18n/zh-HK.json.mjs.map +1 -1
  162. package/build/image/Image.js +2 -6
  163. package/build/image/Image.js.map +1 -1
  164. package/build/image/Image.mjs +2 -2
  165. package/build/image/Image.mjs.map +1 -1
  166. package/build/info/Info.js +2 -6
  167. package/build/info/Info.js.map +1 -1
  168. package/build/info/Info.mjs +2 -2
  169. package/build/info/Info.mjs.map +1 -1
  170. package/build/inlineAlert/InlineAlert.js +2 -6
  171. package/build/inlineAlert/InlineAlert.js.map +1 -1
  172. package/build/inlineAlert/InlineAlert.mjs +2 -2
  173. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  174. package/build/inputs/Input.js +2 -6
  175. package/build/inputs/Input.js.map +1 -1
  176. package/build/inputs/Input.mjs +2 -2
  177. package/build/inputs/Input.mjs.map +1 -1
  178. package/build/inputs/InputGroup.js +3 -7
  179. package/build/inputs/InputGroup.js.map +1 -1
  180. package/build/inputs/InputGroup.mjs +3 -3
  181. package/build/inputs/InputGroup.mjs.map +1 -1
  182. package/build/inputs/SelectInput.js +118 -48
  183. package/build/inputs/SelectInput.js.map +1 -1
  184. package/build/inputs/SelectInput.mjs +120 -49
  185. package/build/inputs/SelectInput.mjs.map +1 -1
  186. package/build/inputs/TextArea.js +2 -6
  187. package/build/inputs/TextArea.js.map +1 -1
  188. package/build/inputs/TextArea.mjs +2 -2
  189. package/build/inputs/TextArea.mjs.map +1 -1
  190. package/build/inputs/_BottomSheet.js +2 -6
  191. package/build/inputs/_BottomSheet.js.map +1 -1
  192. package/build/inputs/_BottomSheet.mjs +2 -2
  193. package/build/inputs/_BottomSheet.mjs.map +1 -1
  194. package/build/inputs/_ButtonInput.js +2 -6
  195. package/build/inputs/_ButtonInput.js.map +1 -1
  196. package/build/inputs/_ButtonInput.mjs +2 -2
  197. package/build/inputs/_ButtonInput.mjs.map +1 -1
  198. package/build/inputs/_Popover.js +3 -7
  199. package/build/inputs/_Popover.js.map +1 -1
  200. package/build/inputs/_Popover.mjs +3 -3
  201. package/build/inputs/_Popover.mjs.map +1 -1
  202. package/build/inputs/_common.js +2 -6
  203. package/build/inputs/_common.js.map +1 -1
  204. package/build/inputs/_common.mjs +2 -2
  205. package/build/inputs/_common.mjs.map +1 -1
  206. package/build/instructionsList/InstructionsList.js +2 -6
  207. package/build/instructionsList/InstructionsList.js.map +1 -1
  208. package/build/instructionsList/InstructionsList.mjs +2 -2
  209. package/build/instructionsList/InstructionsList.mjs.map +1 -1
  210. package/build/label/Label.js +2 -6
  211. package/build/label/Label.js.map +1 -1
  212. package/build/label/Label.mjs +2 -2
  213. package/build/label/Label.mjs.map +1 -1
  214. package/build/link/Link.js +2 -6
  215. package/build/link/Link.js.map +1 -1
  216. package/build/link/Link.mjs +2 -2
  217. package/build/link/Link.mjs.map +1 -1
  218. package/build/listItem/ListItem.js +3 -7
  219. package/build/listItem/ListItem.js.map +1 -1
  220. package/build/listItem/ListItem.mjs +3 -3
  221. package/build/listItem/ListItem.mjs.map +1 -1
  222. package/build/loader/Loader.js +2 -6
  223. package/build/loader/Loader.js.map +1 -1
  224. package/build/loader/Loader.mjs +4 -4
  225. package/build/loader/Loader.mjs.map +1 -1
  226. package/build/logo/Logo.js +2 -6
  227. package/build/logo/Logo.js.map +1 -1
  228. package/build/logo/Logo.mjs +2 -2
  229. package/build/logo/Logo.mjs.map +1 -1
  230. package/build/main.css +10 -0
  231. package/build/modal/Modal.js +7 -11
  232. package/build/modal/Modal.js.map +1 -1
  233. package/build/modal/Modal.mjs +7 -7
  234. package/build/modal/Modal.mjs.map +1 -1
  235. package/build/moneyInput/MoneyInput.js +17 -39
  236. package/build/moneyInput/MoneyInput.js.map +1 -1
  237. package/build/moneyInput/MoneyInput.mjs +17 -35
  238. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  239. package/build/navigationOption/NavigationOption.js +2 -6
  240. package/build/navigationOption/NavigationOption.js.map +1 -1
  241. package/build/navigationOption/NavigationOption.mjs +2 -2
  242. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  243. package/build/nudge/Nudge.js +4 -8
  244. package/build/nudge/Nudge.js.map +1 -1
  245. package/build/nudge/Nudge.mjs +4 -4
  246. package/build/nudge/Nudge.mjs.map +1 -1
  247. package/build/overlayHeader/OverlayHeader.js +3 -7
  248. package/build/overlayHeader/OverlayHeader.js.map +1 -1
  249. package/build/overlayHeader/OverlayHeader.mjs +3 -3
  250. package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
  251. package/build/popover/Popover.js +2 -6
  252. package/build/popover/Popover.js.map +1 -1
  253. package/build/popover/Popover.mjs +2 -2
  254. package/build/popover/Popover.mjs.map +1 -1
  255. package/build/processIndicator/ProcessIndicator.js +2 -6
  256. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  257. package/build/processIndicator/ProcessIndicator.mjs +2 -2
  258. package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
  259. package/build/progress/Progress.js +2 -6
  260. package/build/progress/Progress.js.map +1 -1
  261. package/build/progress/Progress.mjs +2 -2
  262. package/build/progress/Progress.mjs.map +1 -1
  263. package/build/progressBar/ProgressBar.js +2 -6
  264. package/build/progressBar/ProgressBar.js.map +1 -1
  265. package/build/progressBar/ProgressBar.mjs +2 -2
  266. package/build/progressBar/ProgressBar.mjs.map +1 -1
  267. package/build/promoCard/PromoCard.js +3 -4
  268. package/build/promoCard/PromoCard.js.map +1 -1
  269. package/build/promoCard/PromoCard.mjs +3 -3
  270. package/build/promoCard/PromoCard.mjs.map +1 -1
  271. package/build/promoCard/PromoCardGroup.js +2 -3
  272. package/build/promoCard/PromoCardGroup.js.map +1 -1
  273. package/build/promoCard/PromoCardGroup.mjs +2 -2
  274. package/build/promoCard/PromoCardGroup.mjs.map +1 -1
  275. package/build/promoCard/PromoCardIndicator.js +2 -6
  276. package/build/promoCard/PromoCardIndicator.js.map +1 -1
  277. package/build/promoCard/PromoCardIndicator.mjs +2 -2
  278. package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
  279. package/build/radio/Radio.js +5 -9
  280. package/build/radio/Radio.js.map +1 -1
  281. package/build/radio/Radio.mjs +5 -5
  282. package/build/radio/Radio.mjs.map +1 -1
  283. package/build/section/Section.js +2 -6
  284. package/build/section/Section.js.map +1 -1
  285. package/build/section/Section.mjs +2 -2
  286. package/build/section/Section.mjs.map +1 -1
  287. package/build/segmentedControl/SegmentedControl.js +5 -9
  288. package/build/segmentedControl/SegmentedControl.js.map +1 -1
  289. package/build/segmentedControl/SegmentedControl.mjs +5 -5
  290. package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
  291. package/build/select/Select.js +9 -10
  292. package/build/select/Select.js.map +1 -1
  293. package/build/select/Select.mjs +9 -9
  294. package/build/select/Select.mjs.map +1 -1
  295. package/build/select/option/Option.js +2 -6
  296. package/build/select/option/Option.js.map +1 -1
  297. package/build/select/option/Option.mjs +2 -2
  298. package/build/select/option/Option.mjs.map +1 -1
  299. package/build/select/searchBox/SearchBox.js +4 -8
  300. package/build/select/searchBox/SearchBox.js.map +1 -1
  301. package/build/select/searchBox/SearchBox.mjs +6 -6
  302. package/build/select/searchBox/SearchBox.mjs.map +1 -1
  303. package/build/selectOption/SelectOption.js +4 -8
  304. package/build/selectOption/SelectOption.js.map +1 -1
  305. package/build/selectOption/SelectOption.mjs +4 -4
  306. package/build/selectOption/SelectOption.mjs.map +1 -1
  307. package/build/slidingPanel/SlidingPanel.js +2 -6
  308. package/build/slidingPanel/SlidingPanel.js.map +1 -1
  309. package/build/slidingPanel/SlidingPanel.mjs +2 -2
  310. package/build/slidingPanel/SlidingPanel.mjs.map +1 -1
  311. package/build/statusIcon/StatusIcon.js +3 -7
  312. package/build/statusIcon/StatusIcon.js.map +1 -1
  313. package/build/statusIcon/StatusIcon.mjs +3 -3
  314. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  315. package/build/stepper/Stepper.js +3 -7
  316. package/build/stepper/Stepper.js.map +1 -1
  317. package/build/stepper/Stepper.mjs +3 -3
  318. package/build/stepper/Stepper.mjs.map +1 -1
  319. package/build/styles/inputs/SelectInput.css +10 -0
  320. package/build/styles/main.css +10 -0
  321. package/build/summary/Summary.js +2 -6
  322. package/build/summary/Summary.js.map +1 -1
  323. package/build/summary/Summary.mjs +2 -2
  324. package/build/summary/Summary.mjs.map +1 -1
  325. package/build/switch/Switch.js +2 -6
  326. package/build/switch/Switch.js.map +1 -1
  327. package/build/switch/Switch.mjs +2 -2
  328. package/build/switch/Switch.mjs.map +1 -1
  329. package/build/tabs/Tab.js +6 -7
  330. package/build/tabs/Tab.js.map +1 -1
  331. package/build/tabs/Tab.mjs +6 -6
  332. package/build/tabs/Tab.mjs.map +1 -1
  333. package/build/tabs/Tabs.js +2 -3
  334. package/build/tabs/Tabs.js.map +1 -1
  335. package/build/tabs/Tabs.mjs +2 -2
  336. package/build/tabs/Tabs.mjs.map +1 -1
  337. package/build/tile/Tile.js +3 -7
  338. package/build/tile/Tile.js.map +1 -1
  339. package/build/tile/Tile.mjs +3 -3
  340. package/build/tile/Tile.mjs.map +1 -1
  341. package/build/title/Title.js +3 -7
  342. package/build/title/Title.js.map +1 -1
  343. package/build/title/Title.mjs +3 -3
  344. package/build/title/Title.mjs.map +1 -1
  345. package/build/tooltip/Tooltip.js +3 -7
  346. package/build/tooltip/Tooltip.js.map +1 -1
  347. package/build/tooltip/Tooltip.mjs +3 -3
  348. package/build/tooltip/Tooltip.mjs.map +1 -1
  349. package/build/typeahead/Typeahead.js +6 -7
  350. package/build/typeahead/Typeahead.js.map +1 -1
  351. package/build/typeahead/Typeahead.mjs +6 -6
  352. package/build/typeahead/Typeahead.mjs.map +1 -1
  353. package/build/typeahead/typeaheadInput/TypeaheadInput.js +2 -6
  354. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  355. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +2 -2
  356. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
  357. package/build/typeahead/typeaheadOption/TypeaheadOption.js +2 -6
  358. package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
  359. package/build/typeahead/typeaheadOption/TypeaheadOption.mjs +2 -2
  360. package/build/typeahead/typeaheadOption/TypeaheadOption.mjs.map +1 -1
  361. package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
  362. package/build/types/chevron/Chevron.d.ts.map +1 -1
  363. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  364. package/build/types/dateLookup/tableLink/TableLink.d.ts.map +1 -1
  365. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  366. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  367. package/build/types/link/Link.d.ts.map +1 -1
  368. package/build/types/modal/Modal.d.ts.map +1 -1
  369. package/build/types/moneyInput/MoneyInput.d.ts +0 -1
  370. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  371. package/build/types/select/searchBox/SearchBox.d.ts.map +1 -1
  372. package/build/types/tabs/Tab.d.ts.map +1 -1
  373. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  374. package/build/upload/Upload.js +2 -6
  375. package/build/upload/Upload.js.map +1 -1
  376. package/build/upload/Upload.mjs +2 -2
  377. package/build/upload/Upload.mjs.map +1 -1
  378. package/build/uploadInput/UploadInput.js +2 -6
  379. package/build/uploadInput/UploadInput.js.map +1 -1
  380. package/build/uploadInput/UploadInput.mjs +2 -2
  381. package/build/uploadInput/UploadInput.mjs.map +1 -1
  382. package/build/uploadInput/uploadButton/UploadButton.js +5 -9
  383. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  384. package/build/uploadInput/uploadButton/UploadButton.mjs +5 -5
  385. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  386. package/build/uploadInput/uploadItem/UploadItem.js +3 -7
  387. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  388. package/build/uploadInput/uploadItem/UploadItem.mjs +3 -3
  389. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  390. package/build/uploadInput/uploadItem/UploadItemLink.js +2 -6
  391. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
  392. package/build/uploadInput/uploadItem/UploadItemLink.mjs +2 -2
  393. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
  394. package/package.json +6 -5
  395. package/src/accordion/AccordionItem/AccordionItem.tsx +5 -9
  396. package/src/actionButton/ActionButton.tsx +2 -2
  397. package/src/actionOption/ActionOption.tsx +2 -2
  398. package/src/alert/Alert.tsx +3 -3
  399. package/src/avatar/Avatar.tsx +2 -2
  400. package/src/badge/Badge.tsx +2 -2
  401. package/src/body/Body.tsx +2 -2
  402. package/src/button/Button.tsx +2 -2
  403. package/src/card/Card.tsx +4 -4
  404. package/src/carousel/Carousel.tsx +5 -5
  405. package/src/checkbox/Checkbox.tsx +3 -3
  406. package/src/checkboxButton/CheckboxButton.tsx +2 -2
  407. package/src/chevron/Chevron.tsx +3 -12
  408. package/src/chips/Chip.tsx +2 -2
  409. package/src/chips/Chips.tsx +3 -3
  410. package/src/circularButton/CircularButton.tsx +4 -7
  411. package/src/common/Option/Option.tsx +3 -3
  412. package/src/common/RadioButton/RadioButton.tsx +2 -2
  413. package/src/common/action/Action.tsx +2 -2
  414. package/src/common/bottomSheet/BottomSheet.tsx +2 -2
  415. package/src/common/card/Card.tsx +2 -2
  416. package/src/common/closeButton/CloseButton.tsx +2 -2
  417. package/src/common/flowHeader/FlowHeader.tsx +3 -3
  418. package/src/common/panel/Panel.tsx +4 -4
  419. package/src/criticalBanner/CriticalCommsBanner.tsx +4 -4
  420. package/src/dateInput/DateInput.tsx +2 -2
  421. package/src/dateLookup/DateLookup.tsx +2 -2
  422. package/src/dateLookup/dateHeader/DateHeader.tsx +2 -2
  423. package/src/dateLookup/tableLink/TableLink.tsx +3 -5
  424. package/src/decision/Decision.tsx +3 -3
  425. package/src/definitionList/DefinitionList.tsx +4 -4
  426. package/src/dimmer/Dimmer.tsx +6 -6
  427. package/src/display/Display.tsx +2 -2
  428. package/src/drawer/Drawer.tsx +5 -5
  429. package/src/field/Field.tsx +3 -3
  430. package/src/flowNavigation/FlowNavigation.tsx +6 -7
  431. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +3 -3
  432. package/src/flowNavigation/backButton/BackButton.tsx +2 -2
  433. package/src/header/Header.tsx +3 -3
  434. package/src/i18n/zh-HK.json +2 -0
  435. package/src/image/Image.tsx +2 -2
  436. package/src/info/Info.tsx +2 -2
  437. package/src/inlineAlert/InlineAlert.tsx +2 -2
  438. package/src/inputs/Input.tsx +2 -2
  439. package/src/inputs/InputGroup.tsx +3 -3
  440. package/src/inputs/SelectInput.css +10 -0
  441. package/src/inputs/SelectInput.less +12 -0
  442. package/src/inputs/SelectInput.story.tsx +22 -2
  443. package/src/inputs/SelectInput.tsx +156 -58
  444. package/src/inputs/TextArea.tsx +2 -2
  445. package/src/inputs/_BottomSheet.tsx +2 -2
  446. package/src/inputs/_ButtonInput.tsx +2 -2
  447. package/src/inputs/_Popover.tsx +3 -3
  448. package/src/inputs/_common.ts +2 -2
  449. package/src/instructionsList/InstructionsList.tsx +3 -3
  450. package/src/label/Label.tsx +2 -2
  451. package/src/link/Link.tsx +2 -7
  452. package/src/listItem/ListItem.tsx +3 -3
  453. package/src/loader/Loader.tsx +2 -2
  454. package/src/logo/Logo.tsx +2 -2
  455. package/src/main.css +10 -0
  456. package/src/modal/Modal.tsx +9 -15
  457. package/src/moneyInput/MoneyInput.story.tsx +0 -34
  458. package/src/moneyInput/MoneyInput.tsx +6 -29
  459. package/src/navigationOption/NavigationOption.tsx +2 -2
  460. package/src/nudge/Nudge.tsx +4 -4
  461. package/src/overlayHeader/OverlayHeader.tsx +3 -3
  462. package/src/popover/Popover.tsx +2 -2
  463. package/src/processIndicator/ProcessIndicator.tsx +2 -2
  464. package/src/progress/Progress.tsx +2 -2
  465. package/src/progressBar/ProgressBar.tsx +2 -2
  466. package/src/promoCard/PromoCard.tsx +4 -4
  467. package/src/promoCard/PromoCardGroup.tsx +2 -2
  468. package/src/promoCard/PromoCardIndicator.tsx +2 -2
  469. package/src/radio/Radio.tsx +5 -5
  470. package/src/section/Section.tsx +2 -2
  471. package/src/segmentedControl/SegmentedControl.tsx +5 -5
  472. package/src/select/Select.js +9 -9
  473. package/src/select/option/Option.tsx +2 -2
  474. package/src/select/searchBox/SearchBox.tsx +4 -7
  475. package/src/selectOption/SelectOption.tsx +5 -5
  476. package/src/slidingPanel/SlidingPanel.tsx +2 -2
  477. package/src/statusIcon/StatusIcon.tsx +3 -3
  478. package/src/stepper/Stepper.tsx +3 -3
  479. package/src/summary/Summary.tsx +2 -2
  480. package/src/switch/Switch.tsx +2 -2
  481. package/src/tabs/Tab.js +8 -12
  482. package/src/tabs/Tabs.js +2 -2
  483. package/src/tile/Tile.tsx +3 -3
  484. package/src/title/Title.tsx +3 -3
  485. package/src/tooltip/Tooltip.tsx +3 -3
  486. package/src/typeahead/Typeahead.tsx +6 -6
  487. package/src/typeahead/typeaheadInput/TypeaheadInput.tsx +2 -2
  488. package/src/typeahead/typeaheadOption/TypeaheadOption.tsx +2 -2
  489. package/src/upload/Upload.tsx +2 -2
  490. package/src/uploadInput/UploadInput.tsx +2 -2
  491. package/src/uploadInput/uploadButton/UploadButton.tsx +5 -9
  492. package/src/uploadInput/uploadItem/UploadItem.tsx +3 -3
  493. package/src/uploadInput/uploadItem/UploadItemLink.tsx +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.50.1",
3
+ "version": "46.52.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -93,8 +93,8 @@
93
93
  "rollup-preserve-directives": "^1.1.1",
94
94
  "storybook": "^8.2.2",
95
95
  "@transferwise/less-config": "3.1.0",
96
- "@wise/components-theming": "1.4.0",
97
- "@transferwise/neptune-css": "14.12.1"
96
+ "@transferwise/neptune-css": "14.12.1",
97
+ "@wise/components-theming": "1.5.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",
@@ -116,7 +116,7 @@
116
116
  "@react-spring/web": "~9.7.3",
117
117
  "@transferwise/formatting": "^2.13.0",
118
118
  "@transferwise/neptune-validation": "^3.3.0",
119
- "classnames": "^2.5.1",
119
+ "clsx": "^2.1.1",
120
120
  "commonmark": "0.29.1",
121
121
  "core-js": "^3.37.1",
122
122
  "lodash.clamp": "^4.0.3",
@@ -125,7 +125,8 @@
125
125
  "merge-props": "^6.0.0",
126
126
  "prop-types": "^15.8.1",
127
127
  "react-popper": "^2.3.0",
128
- "react-transition-group": "^4.4.5"
128
+ "react-transition-group": "^4.4.5",
129
+ "virtua": "^0.33.3"
129
130
  },
130
131
  "publishConfig": {
131
132
  "access": "public"
package/src/accordion/AccordionItem/AccordionItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { IdIconProps } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { FC, ReactNode, cloneElement, useId } from 'react';
4
4
 
5
5
  import Body from '../../body';
@@ -83,13 +83,9 @@ const AccordionItem: FC<AccordionItemProps> = ({
83
83
  return (
84
84
  <div
85
85
  id={accordionId}
86
- className={classNames(
87
- 'np-accordion-item',
88
- iconElement ? 'np-accordion-item--with-icon' : null,
89
- {
90
- 'np-accordion-item--open': open,
91
- },
92
- )}
86
+ className={clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
87
+ 'np-accordion-item--open': open,
88
+ })}
93
89
  >
94
90
  <Option
95
91
  aria-label={ariaLabel}
@@ -109,7 +105,7 @@ const AccordionItem: FC<AccordionItemProps> = ({
109
105
  <Body
110
106
  as="span"
111
107
  type={Typography.BODY_LARGE}
112
- className={classNames('np-accordion-item__content', 'd-block', {
108
+ className={clsx('np-accordion-item__content', 'd-block', {
113
109
  'has-icon': icon,
114
110
  })}
115
111
  >
package/src/actionButton/ActionButton.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { ButtonHTMLAttributes, forwardRef } from 'react';
3
3
 
4
4
  import { Priority, PriorityPrimary, PrioritySecondary } from '../common';
@@ -27,7 +27,7 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
27
27
  <button
28
28
  ref={reference}
29
29
  type="button"
30
- className={classNames(
30
+ className={clsx(
31
31
  'np-action-btn',
32
32
  'np-text-body-default-bold',
33
33
  priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',
package/src/actionOption/ActionOption.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  import ActionButton from '../actionButton';
4
4
  import { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';
@@ -42,7 +42,7 @@ const ActionOption = ({
42
42
  disabled,
43
43
  showMediaAtAllSizes,
44
44
  showMediaCircle,
45
- className: classNames('tw-action-option', className),
45
+ className: clsx('tw-action-option', className),
46
46
  isContainerAligned,
47
47
  as,
48
48
  };
package/src/alert/Alert.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { useState, useRef, useEffect } from 'react';
3
3
 
4
4
  import Body from '../body/Body';
@@ -134,7 +134,7 @@ export default function Alert({
134
134
 
135
135
  return (
136
136
  <div
137
- className={classNames(
137
+ className={clsx(
138
138
  'alert d-flex',
139
139
  `alert-${resolvedType}`,
140
140
  arrow != null && alertArrowClassNames(arrow),
@@ -162,7 +162,7 @@ export default function Alert({
162
162
  onTouchMove={() => setShouldFire(false)}
163
163
  >
164
164
  <div
165
- className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}
165
+ className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
166
166
  data-testid={variant}
167
167
  >
168
168
  {icon ? (
package/src/avatar/Avatar.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classnames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { useMemo } from 'react';
3
3
 
4
4
  import { Theme } from '../common';
@@ -66,7 +66,7 @@ const Avatar: React.FC<AvatarProps> = ({
66
66
 
67
67
  return (
68
68
  <div
69
- className={classnames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
69
+ className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
70
70
  'tw-avatar--outlined': outlined,
71
71
  'tw-avatar--branded': Boolean(backgroundColorFromSeed),
72
72
  'np-text-title-body': type === 'initials',
package/src/badge/Badge.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  import {
@@ -28,7 +28,7 @@ const Badge = ({
28
28
  'aria-label': ariaLabel,
29
29
  children,
30
30
  }: BadgeProps) => {
31
- const classes: string = classNames(
31
+ const classes: string = clsx(
32
32
  'tw-badge',
33
33
  {
34
34
  [`tw-badge-border-${border}`]: border,
package/src/body/Body.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { forwardRef, HTMLAttributes } from 'react';
3
3
 
4
4
  import { Typography, BodyTypes } from '../common/propsValues/typography';
@@ -39,7 +39,7 @@ const Body = forwardRef(function Body(
39
39
  // @ts-expect-error TODO: Remove when component could be rewritten with generics
40
40
  // See: https://fettblog.eu/typescript-react-generic-forward-refs/
41
41
  ref={reference}
42
- className={classNames(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}
42
+ className={clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}
43
43
  />
44
44
  );
45
45
  });
package/src/button/Button.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';
3
3
  import { useIntl } from 'react-intl';
4
4
 
@@ -79,7 +79,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
79
79
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
80
80
  const newPriority = establishNewPriority(priority, type);
81
81
 
82
- const classes = classNames(
82
+ const classes = clsx(
83
83
  `btn btn-${size}`,
84
84
  `np-btn np-btn-${size}`,
85
85
  {
package/src/card/Card.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { forwardRef } from 'react';
3
3
 
4
4
  import Body from '../body';
@@ -45,7 +45,7 @@ const Card = forwardRef(function Card(
45
45
  return (
46
46
  <Element
47
47
  ref={reference}
48
- className={classNames('np-card', className, {
48
+ className={clsx('np-card', className, {
49
49
  'np-card--expanded': isOpen,
50
50
  'np-card--inactive': !children,
51
51
  'np-card--has-icon': !!icon,
@@ -56,7 +56,7 @@ const Card = forwardRef(function Card(
56
56
  <Option
57
57
  aria-label={ariaLabel}
58
58
  as={children ? 'button' : 'div'}
59
- className={classNames('np-card__button')}
59
+ className={clsx('np-card__button')}
60
60
  media={icon}
61
61
  title={title}
62
62
  content={details}
@@ -65,7 +65,7 @@ const Card = forwardRef(function Card(
65
65
  onClick={children ? () => onClick?.(!isExpanded) : undefined}
66
66
  />
67
67
  <div
68
- className={classNames('np-card__divider', {
68
+ className={clsx('np-card__divider', {
69
69
  'np-card__divider--expanded': isOpen,
70
70
  })}
71
71
  />
package/src/carousel/Carousel.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ChevronLeft, ChevronRight } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
4
4
 
5
5
  import ActionButton from '../actionButton';
@@ -159,7 +159,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
159
159
  };
160
160
 
161
161
  return (
162
- <div className={classNames('carousel-wrapper', className)}>
162
+ <div className={clsx('carousel-wrapper', className)}>
163
163
  <div className="d-flex justify-content-between carousel__header">
164
164
  {typeof header === 'string' ? (
165
165
  <Title as="span" type="title-body">
@@ -208,7 +208,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
208
208
  {cards?.map((card, index) => {
209
209
  const sharedProps = {
210
210
  id: card.id,
211
- className: classNames('carousel__card', {
211
+ className: clsx('carousel__card', {
212
212
  'carousel__card--focused': card.id === focusedCard,
213
213
  }),
214
214
  onClick: () => {
@@ -224,7 +224,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
224
224
  card.type !== 'promo' ? (
225
225
  <div
226
226
  id={`${card.id}-content`}
227
- className={classNames('carousel__card-content', {
227
+ className={clsx('carousel__card-content', {
228
228
  [card.className ?? '']: !!card.className,
229
229
  })}
230
230
  // eslint-disable-next-line react/forbid-dom-props
@@ -320,7 +320,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
320
320
  tabIndex={-1}
321
321
  aria-hidden
322
322
  type="button"
323
- className={classNames('carousel__indicator', {
323
+ className={clsx('carousel__indicator', {
324
324
  'carousel__indicator--selected': card.id === visibleCardOnMobileView,
325
325
  })}
326
326
  onClick={() => {
package/src/checkbox/Checkbox.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  import Body from '../body/Body';
4
4
  import CheckboxButton from '../checkboxButton';
@@ -31,7 +31,7 @@ export default function Checkbox({
31
31
  onFocus,
32
32
  onBlur,
33
33
  }: CheckboxProps) {
34
- const classList = classNames(
34
+ const classList = clsx(
35
35
  'np-checkbox',
36
36
  {
37
37
  checkbox: true,
@@ -45,7 +45,7 @@ export default function Checkbox({
45
45
  return (
46
46
  <div id={id} className={classList}>
47
47
  {/* eslint-disable-next-line jsx-a11y/label-has-for */}
48
- <label className={classNames({ disabled })}>
48
+ <label className={clsx({ disabled })}>
49
49
  <CheckboxButton
50
50
  className="p-r-2"
51
51
  checked={checked}
package/src/checkboxButton/CheckboxButton.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { InputHTMLAttributes, forwardRef } from 'react';
3
3
 
4
4
  import { useInputAttributes } from '../inputs/contexts';
@@ -12,7 +12,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(functio
12
12
  const inputAttributes = useInputAttributes();
13
13
 
14
14
  return (
15
- <span className={classNames('np-checkbox-button', className, disabled && 'disabled')}>
15
+ <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>
16
16
  <input
17
17
  {...inputAttributes}
18
18
  {...rest}
package/src/chevron/Chevron.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ChevronUp } from '@transferwise/icons';
2
2
  import { IconSize } from '@transferwise/icons/lib/types';
3
- import classNames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
 
5
5
  import {
6
6
  Size,
@@ -33,11 +33,7 @@ export interface ExtraSmallChevronProps {
33
33
 
34
34
  const ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {
35
35
  return (
36
- <span
37
- className={classNames('tw-icon', 'tw-icon-chevron', className)}
38
- role="presentation"
39
- aria-hidden
40
- >
36
+ <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role="presentation" aria-hidden>
41
37
  <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" focusable="false">
42
38
  <path
43
39
  fillRule="evenodd"
@@ -54,12 +50,7 @@ const Chevron = ({
54
50
  disabled = false,
55
51
  className,
56
52
  }: ChevronProps) => {
57
- const classNameValue = classNames(
58
- 'tw-chevron',
59
- { 'chevron-color': !disabled },
60
- orientation,
61
- className,
62
- );
53
+ const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);
63
54
 
64
55
  if (size === Size.EXTRA_SMALL) {
65
56
  return <ExtraSmallChevron className={classNameValue} />;
package/src/chips/Chip.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useTheme } from '@wise/components-theming';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { useEffect, useRef } from 'react';
4
4
 
5
5
  import Body from '../body/Body';
@@ -54,7 +54,7 @@ const Chip = ({
54
54
  tabIndex={tabIndex}
55
55
  aria-label={ariaLabel}
56
56
  aria-checked={ariaChecked}
57
- className={classNames(
57
+ className={clsx(
58
58
  'np-chip',
59
59
  'd-flex',
60
60
  'align-items-center',
package/src/chips/Chips.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { useIntl } from 'react-intl';
3
3
 
4
4
  import { CommonProps, AriaLabelProperty } from '../common';
@@ -50,7 +50,7 @@ const Chips = ({
50
50
 
51
51
  return (
52
52
  <div
53
- className={classNames('np-chips d-flex', className)}
53
+ className={clsx('np-chips d-flex', className)}
54
54
  aria-label={ariaLabel}
55
55
  role={!multiple ? 'radiogroup' : undefined}
56
56
  >
@@ -64,7 +64,7 @@ const Chips = ({
64
64
  closeButton={{
65
65
  'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),
66
66
  }}
67
- className={classNames('text-xs-nowrap', {
67
+ className={clsx('text-xs-nowrap', {
68
68
  'np-chip--selected': chipSelected,
69
69
  'p-r-1': multiple && chipSelected,
70
70
  })}
package/src/circularButton/CircularButton.tsx CHANGED
@@ -1,10 +1,9 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { cloneElement } from 'react';
3
3
 
4
4
  import Body from '../body/Body';
5
5
  import { typeClassMap, priorityClassMap } from '../button/classMap';
6
- import { ControlType, Priority } from '../common';
7
- import { Typography } from '../common';
6
+ import { ControlType, Priority , Typography } from '../common';
8
7
 
9
8
  export interface CircularButtonProps {
10
9
  className?: string;
@@ -25,14 +24,12 @@ const CircularButton = ({
25
24
  type = ControlType.ACCENT,
26
25
  ...rest
27
26
  }: CircularButtonProps) => {
28
- const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
27
+ const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
29
28
 
30
29
  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
31
30
 
32
31
  return (
33
- <label
34
- className={classNames('np-circular-btn', priority, type, disabled && 'disabled', className)}
35
- >
32
+ <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
36
33
  <input
37
34
  type="button"
38
35
  aria-label={children}
package/src/common/Option/Option.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';
3
3
 
4
4
  import Body from '../../body';
@@ -58,7 +58,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
58
58
  <Element
59
59
  {...rest}
60
60
  ref={reference}
61
- className={classNames('np-option', className, {
61
+ className={clsx('np-option', className, {
62
62
  'decision-complex': complex,
63
63
  decision,
64
64
  disabled,
@@ -72,7 +72,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
72
72
  <div className="media-left">
73
73
  {showMediaCircle ? (
74
74
  <div
75
- className={classNames('circle circle-sm text-primary', {
75
+ className={clsx('circle circle-sm text-primary', {
76
76
  'circle-inverse': inverseMediaCircle,
77
77
  })}
78
78
  >
package/src/common/RadioButton/RadioButton.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  export interface RadioButtonProps<T extends string | number = string> {
4
4
  id?: string;
@@ -35,7 +35,7 @@ export default function RadioButton<T extends string | number = ''>({
35
35
  }
36
36
  }}
37
37
  />
38
- <span className={classNames('tw-radio-button', { checked, disabled: disabled || readOnly })}>
38
+ <span className={clsx('tw-radio-button', { checked, disabled: disabled || readOnly })}>
39
39
  <span className="tw-radio-check" />
40
40
  </span>
41
41
  </>
package/src/common/action/Action.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import Link from '../../link';
3
3
  import { Typography } from '../propsValues/typography';
4
4
 
@@ -35,7 +35,7 @@ export function Action({ action, className }: Props) {
35
35
  <button
36
36
  type="button"
37
37
  aria-label={action['aria-label']}
38
- className={classNames('btn-unstyled np-text-link-large', className)}
38
+ className={clsx('btn-unstyled np-text-link-large', className)}
39
39
  onClick={action.onClick}
40
40
  >
41
41
  {action.text}
package/src/common/bottomSheet/BottomSheet.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import {
3
3
  CSSProperties,
4
4
  PropsWithChildren,
@@ -190,7 +190,7 @@ const BottomSheet = (props: BottomSheetProps) => {
190
190
  ref={bottomSheetReference}
191
191
  open={props.open}
192
192
  position={Position.BOTTOM}
193
- className={classNames('np-bottom-sheet', props.className)}
193
+ className={clsx('np-bottom-sheet', props.className)}
194
194
  >
195
195
  {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
196
196
  <div
package/src/common/card/Card.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';
3
3
 
4
4
  import { CloseButton } from '../closeButton';
@@ -67,7 +67,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
67
67
  return (
68
68
  <div
69
69
  ref={ref}
70
- className={classNames(
70
+ className={clsx(
71
71
  'np-Card',
72
72
  {
73
73
  'np-Card--small': !!isSmall,
package/src/common/closeButton/CloseButton.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Cross, CrossCircleFill } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { useIntl } from 'react-intl';
5
5
 
@@ -37,7 +37,7 @@ export const CloseButton = forwardRef(function CloseButton(
37
37
  <button
38
38
  ref={reference}
39
39
  type="button"
40
- className={classNames(
40
+ className={clsx(
41
41
  'np-close-button',
42
42
  'close btn-link',
43
43
  'text-no-decoration',
package/src/common/flowHeader/FlowHeader.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import * as React from 'react';
3
3
 
4
4
  import { Layout } from '../propsValues/layouts';
@@ -27,7 +27,7 @@ const FlowHeader = React.forwardRef(
27
27
  return (
28
28
  <div
29
29
  ref={reference}
30
- className={classNames(
30
+ className={clsx(
31
31
  'np-flow-header',
32
32
  'd-flex',
33
33
  'flex-wrap',
@@ -40,7 +40,7 @@ const FlowHeader = React.forwardRef(
40
40
  {leftContent}
41
41
  {rightContent}
42
42
  <div
43
- className={classNames('align-items-center', 'd-flex', 'justify-content-center', {
43
+ className={clsx('align-items-center', 'd-flex', 'justify-content-center', {
44
44
  'flex__item--12': isVertical,
45
45
  'order-1 flex-grow-1': !isVertical,
46
46
  })}
package/src/common/panel/Panel.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classnames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import {
3
3
  CSSProperties,
4
4
  HTMLAttributes,
@@ -122,20 +122,20 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
122
122
  // eslint-disable-next-line react/forbid-dom-props
123
123
  style={{ ...styles.popper }}
124
124
  {...attributes.popper}
125
- className={classnames('np-panel', { 'np-panel--open': open }, rest.className)}
125
+ className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
126
126
  >
127
127
  <div
128
128
  ref={reference}
129
129
  /* eslint-disable-next-line react/forbid-dom-props */
130
130
  style={contentStyle}
131
- className={classnames('np-panel__content')}
131
+ className={clsx('np-panel__content')}
132
132
  >
133
133
  {children}
134
134
  {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
135
135
  {arrow && (
136
136
  <div
137
137
  ref={setArrowElement}
138
- className={classnames('np-panel__arrow')}
138
+ className={clsx('np-panel__arrow')}
139
139
  // eslint-disable-next-line react/forbid-dom-props
140
140
  style={styles.arrow}
141
141
  />
package/src/criticalBanner/CriticalCommsBanner.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';
2
2
  import { useTheme } from '@wise/components-theming';
3
- import classNames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
 
5
5
  import Avatar, { AvatarType } from '../avatar';
6
6
  import Body from '../body';
@@ -21,12 +21,12 @@ export type CriticalCommsBannerProps = {
21
21
  function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
22
22
  const { isModern } = useTheme();
23
23
  return (
24
- <div className={classNames('critical-comms', className)}>
24
+ <div className={clsx('critical-comms', className)}>
25
25
  <div className="critical-comms-body">
26
26
  <Avatar
27
27
  size={Size.MEDIUM}
28
28
  type={AvatarType.ICON}
29
- className={classNames(isModern ? 'm-r-2' : 'm-r-1')}
29
+ className={clsx(isModern ? 'm-r-2' : 'm-r-1')}
30
30
  backgroundColor={
31
31
  isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'
32
32
  }
@@ -34,7 +34,7 @@ function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCom
34
34
  {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}
35
35
  </Avatar>
36
36
  <div className="critical-comms-content d-flex align-items-center flex-grow-1">
37
- <div className={classNames('flex-grow-1', { 'p-x-2': !isModern })}>
37
+ <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>
38
38
  <Title
39
39
  type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}
40
40
  className="critical-comms--title"
package/src/dateInput/DateInput.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { useState } from 'react';
3
3
  import { useIntl } from 'react-intl';
4
4
 
@@ -234,7 +234,7 @@ const DateInput = ({
234
234
 
235
235
  const monthYearOnly = mode === DateMode.MONTH_YEAR;
236
236
 
237
- const monthWidth = classNames({
237
+ const monthWidth = clsx({
238
238
  'col-sm-8': monthYearOnly,
239
239
  'col-sm-5': !monthYearOnly,
240
240
  });
package/src/dateLookup/DateLookup.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { createRef, PureComponent, KeyboardEvent } from 'react';
3
3
 
4
4
  import {
@@ -254,7 +254,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
254
254
  const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;
255
255
  const { placeholder, monthFormat } = this.props;
256
256
  return (
257
- <div className={classNames({ 'p-a-1': !isMobile })}>
257
+ <div className={clsx({ 'p-a-1': !isMobile })}>
258
258
  {mode === 'day' && (
259
259
  <DayCalendar
260
260
  selectedDate={selectedDate}
package/src/dateLookup/dateHeader/DateHeader.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { useIntl } from 'react-intl';
3
3
 
4
4
  import Chevron from '../../chevron';
@@ -27,7 +27,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
27
27
  const intl = useIntl();
28
28
  const { isMobile } = useLayout();
29
29
  return (
30
- <div className={classNames('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
30
+ <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
31
31
  <div className="pull-left-single-direction">
32
32
  <button
33
33
  type="button"