@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/src/select/option/Option.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { IdIconProps } from '@transferwise/icons';
2
2
  import { Flag } from '@wise/art';
3
- import classNames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
  import { cloneElement, ReactElement, ReactNode } from 'react';
5
5
 
6
6
  import Body from '../../body';
@@ -45,7 +45,7 @@ function Option<T>({
45
45
  );
46
46
 
47
47
  const secondaryElement = secondary && (
48
- <Body className={classNames(selected && 'text-ellipsis')}>{secondary}</Body>
48
+ <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>
49
49
  );
50
50
 
51
51
  return iconElement ? (
package/src/select/searchBox/SearchBox.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Search as SearchIcon } from '@transferwise/icons';
2
- import classnames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { forwardRef, InputHTMLAttributes } from 'react';
4
4
 
5
5
  import { Input } from '../../inputs/Input';
@@ -28,18 +28,15 @@ const SearchBox = forwardRef<HTMLInputElement, Props>(
28
28
  <li className={style('border-bottom')}>
29
29
  <a className={`${style('np-select-filter-link')} ${style('p-a-0')}`}>
30
30
  <div className={style('input-group')}>
31
- <span className={classnames('input-group-addon', 'input-group-addon--search')}>
32
- <SearchIcon
33
- className={classnames(style('tw-icon'), style('tw-icon-search'))}
34
- size={24}
35
- />
31
+ <span className={clsx('input-group-addon', 'input-group-addon--search')}>
32
+ <SearchIcon className={clsx(style('tw-icon'), style('tw-icon-search'))} size={24} />
36
33
  </span>
37
34
  <Input
38
35
  ref={reference}
39
36
  id={id}
40
37
  role="searchbox"
41
38
  inputMode="search"
42
- className={classnames(style('np-select-filter'))}
39
+ className={clsx(style('np-select-filter'))}
43
40
  placeholder={placeholder}
44
41
  value={value}
45
42
  spellCheck="false"
package/src/selectOption/SelectOption.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useRef, useState } from 'react';
2
2
  import { ActionButtonProps } from '../actionButton';
3
- import classNames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
  import Option from '../common/Option';
5
5
  import type { OptionProps } from '../common/Option/Option';
6
6
  import { Breakpoint, Position } from '../common';
@@ -75,9 +75,9 @@ export default function SelectOption<T>({
75
75
 
76
76
  function getOptions(isLargeScreen = false) {
77
77
  return (
78
- <div className={classNames({ 'np-select-option-list': isLargeScreen })}>
78
+ <div className={clsx({ 'np-select-option-list': isLargeScreen })}>
79
79
  {options.map((optionsSection, index) => (
80
- <Section key={index} className={classNames({ 'p-x-2 p-y-1': isLargeScreen })}>
80
+ <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>
81
81
  {optionsSection.title && <Header title={optionsSection.title} />}
82
82
  <NavigationOptionsList>
83
83
  {optionsSection.options.map((option, index) => {
@@ -107,10 +107,10 @@ export default function SelectOption<T>({
107
107
  showMediaAtAllSizes
108
108
  disabled={disabled}
109
109
  decision={false}
110
- media={hasSelected ? selected.media : placeholder.media ?? <Plus size={24} />}
110
+ media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}
111
111
  title={(hasSelected ? selected : placeholder).title}
112
112
  content={(hasSelected ? selected : placeholder).content}
113
- className={classNames(
113
+ className={clsx(
114
114
  'np-select-option',
115
115
  'clickable',
116
116
  hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',
package/src/slidingPanel/SlidingPanel.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { forwardRef, useImperativeHandle, useRef } from 'react';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
 
@@ -47,7 +47,7 @@ const SlidingPanel = forwardRef(
47
47
  <div
48
48
  ref={localReference}
49
49
  data-testid={testId}
50
- className={classNames(
50
+ className={clsx(
51
51
  'sliding-panel',
52
52
  `sliding-panel--open-${position}`,
53
53
  showSlidingPanelBorder && `sliding-panel--border-${position}`,
package/src/statusIcon/StatusIcon.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
 
4
4
  import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
5
5
 
@@ -26,9 +26,9 @@ const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) =>
26
26
  return (
27
27
  <span
28
28
  data-testid="status-icon"
29
- className={classNames('status-circle', `status-circle-${size}`, sentiment)}
29
+ className={clsx('status-circle', `status-circle-${size}`, sentiment)}
30
30
  >
31
- <Icon className={classNames('status-icon', iconColor)} />
31
+ <Icon className={clsx('status-icon', iconColor)} />
32
32
  </span>
33
33
  );
34
34
  };
package/src/stepper/Stepper.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 { Position } from '../common';
@@ -57,7 +57,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
57
57
  return (
58
58
  <li
59
59
  key={index}
60
- className={classNames(
60
+ className={clsx(
61
61
  'hidden-xs',
62
62
  'tw-stepper__step',
63
63
  active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',
@@ -83,7 +83,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
83
83
  };
84
84
 
85
85
  return (
86
- <div className={classNames('tw-stepper', className)}>
86
+ <div className={clsx('tw-stepper', className)}>
87
87
  <div className="progress">
88
88
  <div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
89
89
  </div>
package/src/summary/Summary.tsx CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  CheckCircleFill as CheckCircleIcon,
4
4
  ClockFill as PendingCircleIcon,
5
5
  } from '@transferwise/icons';
6
- import classNames from 'classnames';
6
+ import { clsx } from 'clsx';
7
7
  import { ElementType, cloneElement, ReactNode } from 'react';
8
8
  import { useIntl } from 'react-intl';
9
9
 
@@ -120,7 +120,7 @@ const Summary = ({
120
120
 
121
121
  return (
122
122
  <Element
123
- className={classNames('np-summary d-flex align-items-start', className)}
123
+ className={clsx('np-summary d-flex align-items-start', className)}
124
124
  // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
125
125
  aria-label={status && intl.formatMessage(messages[statusLabels[status]])}
126
126
  >
package/src/switch/Switch.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
2
2
  import { useTheme } from '@wise/components-theming';
3
- import classnames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
  import type { KeyboardEventHandler, MouseEvent } from 'react';
5
5
 
6
6
  import type { CommonProps } from '../common';
@@ -68,7 +68,7 @@ const Switch = (props: SwitchProps) => {
68
68
 
69
69
  return (
70
70
  <span
71
- className={classnames(
71
+ className={clsx(
72
72
  'np-switch',
73
73
 
74
74
  {
package/src/tabs/Tab.js CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import PropTypes from 'prop-types';
3
3
  import { forwardRef, useEffect, useRef } from 'react';
4
4
 
@@ -27,15 +27,11 @@ const Tab = forwardRef(
27
27
  return (
28
28
  <li
29
29
  ref={reference}
30
- className={classNames(
31
- 'tabs__tab',
32
- selected ? 'np-text-body-large-bold' : 'np-text-body-large',
33
- {
34
- 'tabs__tab--selected': selected,
35
- clickable: !disabled,
36
- disabled: disabled,
37
- },
38
- )}
30
+ className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
31
+ 'tabs__tab--selected': selected,
32
+ clickable: !disabled,
33
+ disabled,
34
+ })}
39
35
  role="tab"
40
36
  id={id}
41
37
  aria-selected={selected ? 'true' : 'false'}
@@ -66,10 +62,10 @@ Tab.propTypes = {
66
62
  selected: PropTypes.bool,
67
63
  id: PropTypes.string.isRequired,
68
64
  panelId: PropTypes.string.isRequired,
69
- onKeyDown: PropTypes.func.isRequired,
70
- onClick: PropTypes.func,
71
65
  style: PropTypes.shape({ width: PropTypes.string }),
72
66
  focusTab: PropTypes.func,
67
+ onKeyDown: PropTypes.func.isRequired,
68
+ onClick: PropTypes.func,
73
69
  };
74
70
 
75
71
  export default Tab;
package/src/tabs/Tabs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable react/forbid-dom-props */
2
2
  import { Spring, SpringValue, animated } from '@react-spring/web';
3
- import classNames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
  import clamp from 'lodash.clamp';
5
5
  import PropTypes from 'prop-types';
6
6
  import { Component, createRef, Fragment } from 'react';
@@ -451,7 +451,7 @@ class Tabs extends Component {
451
451
  return (
452
452
  <div
453
453
  ref={this.containerReference}
454
- className={classNames('tabs', className, {
454
+ className={clsx('tabs', className, {
455
455
  'tabs--auto-width': headerWidth === Width.AUTO,
456
456
  })}
457
457
  onTouchStart={changeTabOnSwipe ? this.handleTouchStart : undefined}
package/src/tile/Tile.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  import Body from '../body';
4
4
  import { Size, Typography } from '../common';
@@ -36,7 +36,7 @@ export default function Tile({
36
36
 
37
37
  return (
38
38
  <Element
39
- className={classNames(
39
+ className={clsx(
40
40
  'decision',
41
41
  'flex-column',
42
42
  'np-tile',
@@ -63,7 +63,7 @@ export default function Tile({
63
63
  }
64
64
  >
65
65
  <div className="np-tile__media d-flex justify-content-center">{media}</div>
66
- <Title type={Typography.TITLE_SUBSECTION} className={classNames(isSmall ? 'm-t-1' : 'm-t-2')}>
66
+ <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>
67
67
  {title}
68
68
  </Title>
69
69
  {description ? (
package/src/title/Title.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
3
3
 
4
4
  import { TitleTypes, Typography, Heading } from '../common';
@@ -30,10 +30,10 @@ function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
30
30
  const isTypeSupported = mapping !== undefined;
31
31
  if (isTypeSupported) {
32
32
  const HeaderTag = as ?? mapping;
33
- return <HeaderTag {...props} className={classNames(`np-text-${type}`, className)} />;
33
+ return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
34
34
  }
35
35
  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
36
- return <HeaderTag {...props} className={classNames(`np-text-${DEFAULT_TYPE}`, className)} />;
36
+ return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
37
37
  }
38
38
 
39
39
  export default Title;
package/src/tooltip/Tooltip.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable @typescript-eslint/ban-ts-comment */
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import {
4
4
  AriaAttributes,
5
5
  PropsWithChildren,
@@ -92,7 +92,7 @@ const Tooltip = ({
92
92
  <div
93
93
  // @ts-expect-error
94
94
  ref={setPopperElement}
95
- className={classNames(
95
+ className={clsx(
96
96
  'np-tooltip',
97
97
  'np-panel',
98
98
  open ? `np-panel--open np-tooltip--open` : null,
@@ -110,7 +110,7 @@ const Tooltip = ({
110
110
  <div
111
111
  // @ts-expect-error
112
112
  ref={setArrowElement}
113
- className={classNames('np-panel__arrow')}
113
+ className={clsx('np-panel__arrow')}
114
114
  // eslint-disable-next-line react/forbid-dom-props
115
115
  style={styles.arrow}
116
116
  />
package/src/typeahead/Typeahead.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  /* eslint-disable jsx-a11y/no-static-element-interactions */
4
4
 
5
5
  import { Cross as CrossIcon } from '@transferwise/icons';
6
- import classNames from 'classnames';
6
+ import { clsx } from 'clsx';
7
7
  import { DebouncedFunc } from 'lodash';
8
8
  import clamp from 'lodash.clamp';
9
9
  import debounce from 'lodash.debounce';
@@ -359,7 +359,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
359
359
  <Chip
360
360
  key={idx}
361
361
  label={option.label}
362
- className={classNames('m-t-1', {
362
+ className={clsx('m-t-1', {
363
363
  'has-error': !valid,
364
364
  'np-chip--valid': valid,
365
365
  })}
@@ -397,7 +397,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
397
397
  }
398
398
  return (
399
399
  <div
400
- className={classNames('dropdown btn-group btn-block', { open: dropdownOpen })}
400
+ className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
401
401
  id={`menu-${id}`}
402
402
  >
403
403
  <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@@ -468,7 +468,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
468
468
  role="group"
469
469
  {...inputAttributes}
470
470
  id={id}
471
- className={classNames('typeahead', `typeahead-${size}`, {
471
+ className={clsx('typeahead', `typeahead-${size}`, {
472
472
  'typeahead--has-value': selected.length > 0,
473
473
  'typeahead--empty': selected.length === 0,
474
474
  'typeahead--multiple': multiple,
@@ -477,14 +477,14 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
477
477
  onClick={stopPropagation}
478
478
  >
479
479
  <div
480
- className={classNames('form-group', {
480
+ className={clsx('form-group', {
481
481
  'has-error': hasError,
482
482
  'has-warning': hasWarning,
483
483
  'has-info': hasInfo,
484
484
  })}
485
485
  >
486
486
  <div
487
- className={classNames(`input-group input-group-${size}`, {
487
+ className={clsx(`input-group input-group-${size}`, {
488
488
  'input-group--has-error': hasError,
489
489
  })}
490
490
  >
package/src/typeahead/typeaheadInput/TypeaheadInput.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable jsx-a11y/no-autofocus */
2
2
  /* eslint-disable jsx-a11y/click-events-have-key-events */
3
3
  /* eslint-disable jsx-a11y/no-static-element-interactions */
4
- import classnames from 'classnames';
4
+ import { clsx } from 'clsx';
5
5
  import { Component, createRef, ReactNode } from 'react';
6
6
 
7
7
  import { Input } from '../../inputs/Input';
@@ -83,7 +83,7 @@ export default class TypeaheadInput<T> extends Component<
83
83
  return (
84
84
  <Input
85
85
  ref={this.inputRef}
86
- className={classnames(multiple && 'typeahead__input')}
86
+ className={clsx(multiple && 'typeahead__input')}
87
87
  name={name}
88
88
  id={`input-${typeaheadId}`}
89
89
  autoFocus={autoFocus}
package/src/typeahead/typeaheadOption/TypeaheadOption.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable jsx-a11y/anchor-is-valid */
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
 
4
4
  import { TypeaheadOption } from '../Typeahead';
5
5
  import highlight from '../util/highlight';
@@ -19,7 +19,7 @@ const Option = <T,>(props: TypeaheadOptionProps<T>) => {
19
19
  <li
20
20
  role="option"
21
21
  aria-selected="false"
22
- className={classNames('typeahead__option tw-dropdown-item clickable', {
22
+ className={clsx('typeahead__option tw-dropdown-item clickable', {
23
23
  'tw-dropdown-item--focused': selected,
24
24
  })}
25
25
  >
package/src/upload/Upload.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Plus as PlusIcon } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { Component } from 'react';
4
4
  import { injectIntl, WrappedComponentProps } from 'react-intl';
5
5
 
@@ -352,7 +352,7 @@ export class Upload extends Component<UploadProps, UploadState> {
352
352
 
353
353
  return (
354
354
  <div
355
- className={classNames('droppable-area', {
355
+ className={clsx('droppable-area', {
356
356
  droppable: true,
357
357
  'tw-droppable-sm droppable-sm': size === 'sm',
358
358
  'tw-droppable-md droppable-md': size === 'md' || !size,
package/src/uploadInput/UploadInput.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import { useIntl } from 'react-intl';
4
4
 
@@ -304,7 +304,7 @@ const UploadInput = ({
304
304
  <>
305
305
  <div
306
306
  role="group"
307
- className={classNames('np-upload-input', className, { disabled })}
307
+ className={clsx('np-upload-input', className, { disabled })}
308
308
  {...inputAttributes}
309
309
  >
310
310
  {uploadedFiles.map((file) => (
package/src/uploadInput/uploadButton/UploadButton.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { ChangeEvent, DragEvent, useRef, useState } from 'react';
4
4
  import { useIntl } from 'react-intl';
5
5
 
@@ -169,7 +169,7 @@ const UploadButton = ({
169
169
 
170
170
  function renderDescription() {
171
171
  return (
172
- <Body className={classNames({ 'text-primary': !disabled })}>
172
+ <Body className={clsx({ 'text-primary': !disabled })}>
173
173
  {getDescription()}
174
174
  {maxFiles && (
175
175
  <>
@@ -190,7 +190,7 @@ const UploadButton = ({
190
190
 
191
191
  return (
192
192
  <div
193
- className={classNames('np-upload-button-container', 'droppable', {
193
+ className={clsx('np-upload-button-container', 'droppable', {
194
194
  'droppable-dropping': isDropping,
195
195
  })}
196
196
  {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
@@ -208,7 +208,7 @@ const UploadButton = ({
208
208
  onChange={filesSelected}
209
209
  />
210
210
  {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
211
- <label htmlFor={id} className={classNames('btn', 'np-upload-button')}>
211
+ <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>
212
212
  <div className="media">
213
213
  <div className="np-upload-icon media-middle media-left">
214
214
  <UploadIcon size={24} className="text-link" />
@@ -225,11 +225,7 @@ const UploadButton = ({
225
225
  {/* Drop area overlay */}
226
226
  {isDropping && (
227
227
  <div
228
- className={classNames(
229
- 'droppable-card',
230
- 'droppable-dropping-card',
231
- 'droppable-card-content',
232
- )}
228
+ className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}
233
229
  >
234
230
  <PlusIcon className="m-x-1" size={24} />
235
231
  <div>{formatMessage(MESSAGES.dropFile)}</div>
package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { useIntl } from 'react-intl';
4
4
 
5
5
  import Body from '../../body';
@@ -132,7 +132,7 @@ const UploadItem = ({
132
132
 
133
133
  return (
134
134
  <div
135
- className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
135
+ className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
136
136
  data-testid={TEST_IDS.uploadItem}
137
137
  >
138
138
  <div className="np-upload-item__body">
@@ -154,7 +154,7 @@ const UploadItem = ({
154
154
  {canDelete && (
155
155
  <button
156
156
  aria-label={formatMessage(MESSAGES.removeFile, { filename })}
157
- className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {
157
+ className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
158
158
  'np-upload-item--single-file': singleFileUpload,
159
159
  })}
160
160
  type="button"
package/src/uploadInput/uploadItem/UploadItemLink.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PropsWithChildren, MouseEvent } from 'react';
2
- import classnames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
 
4
4
  type UploadItemLinkProps = PropsWithChildren<{
5
5
  url?: string;
@@ -22,7 +22,7 @@ export const UploadItemLink = ({
22
22
  href={url}
23
23
  target="_blank"
24
24
  rel="noopener noreferrer"
25
- className={classnames(
25
+ className={clsx(
26
26
  'np-upload-item__link',
27
27
  singleFileUpload ? 'np-upload-item--single-file' : '',
28
28
  )}