@transferwise/components 46.50.1 → 46.51.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 (486) 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 +12 -13
  183. package/build/inputs/SelectInput.js.map +1 -1
  184. package/build/inputs/SelectInput.mjs +12 -12
  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/modal/Modal.js +7 -11
  231. package/build/modal/Modal.js.map +1 -1
  232. package/build/modal/Modal.mjs +7 -7
  233. package/build/modal/Modal.mjs.map +1 -1
  234. package/build/moneyInput/MoneyInput.js +17 -39
  235. package/build/moneyInput/MoneyInput.js.map +1 -1
  236. package/build/moneyInput/MoneyInput.mjs +17 -35
  237. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  238. package/build/navigationOption/NavigationOption.js +2 -6
  239. package/build/navigationOption/NavigationOption.js.map +1 -1
  240. package/build/navigationOption/NavigationOption.mjs +2 -2
  241. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  242. package/build/nudge/Nudge.js +4 -8
  243. package/build/nudge/Nudge.js.map +1 -1
  244. package/build/nudge/Nudge.mjs +4 -4
  245. package/build/nudge/Nudge.mjs.map +1 -1
  246. package/build/overlayHeader/OverlayHeader.js +3 -7
  247. package/build/overlayHeader/OverlayHeader.js.map +1 -1
  248. package/build/overlayHeader/OverlayHeader.mjs +3 -3
  249. package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
  250. package/build/popover/Popover.js +2 -6
  251. package/build/popover/Popover.js.map +1 -1
  252. package/build/popover/Popover.mjs +2 -2
  253. package/build/popover/Popover.mjs.map +1 -1
  254. package/build/processIndicator/ProcessIndicator.js +2 -6
  255. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  256. package/build/processIndicator/ProcessIndicator.mjs +2 -2
  257. package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
  258. package/build/progress/Progress.js +2 -6
  259. package/build/progress/Progress.js.map +1 -1
  260. package/build/progress/Progress.mjs +2 -2
  261. package/build/progress/Progress.mjs.map +1 -1
  262. package/build/progressBar/ProgressBar.js +2 -6
  263. package/build/progressBar/ProgressBar.js.map +1 -1
  264. package/build/progressBar/ProgressBar.mjs +2 -2
  265. package/build/progressBar/ProgressBar.mjs.map +1 -1
  266. package/build/promoCard/PromoCard.js +3 -4
  267. package/build/promoCard/PromoCard.js.map +1 -1
  268. package/build/promoCard/PromoCard.mjs +3 -3
  269. package/build/promoCard/PromoCard.mjs.map +1 -1
  270. package/build/promoCard/PromoCardGroup.js +2 -3
  271. package/build/promoCard/PromoCardGroup.js.map +1 -1
  272. package/build/promoCard/PromoCardGroup.mjs +2 -2
  273. package/build/promoCard/PromoCardGroup.mjs.map +1 -1
  274. package/build/promoCard/PromoCardIndicator.js +2 -6
  275. package/build/promoCard/PromoCardIndicator.js.map +1 -1
  276. package/build/promoCard/PromoCardIndicator.mjs +2 -2
  277. package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
  278. package/build/radio/Radio.js +5 -9
  279. package/build/radio/Radio.js.map +1 -1
  280. package/build/radio/Radio.mjs +5 -5
  281. package/build/radio/Radio.mjs.map +1 -1
  282. package/build/section/Section.js +2 -6
  283. package/build/section/Section.js.map +1 -1
  284. package/build/section/Section.mjs +2 -2
  285. package/build/section/Section.mjs.map +1 -1
  286. package/build/segmentedControl/SegmentedControl.js +5 -9
  287. package/build/segmentedControl/SegmentedControl.js.map +1 -1
  288. package/build/segmentedControl/SegmentedControl.mjs +5 -5
  289. package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
  290. package/build/select/Select.js +9 -10
  291. package/build/select/Select.js.map +1 -1
  292. package/build/select/Select.mjs +9 -9
  293. package/build/select/Select.mjs.map +1 -1
  294. package/build/select/option/Option.js +2 -6
  295. package/build/select/option/Option.js.map +1 -1
  296. package/build/select/option/Option.mjs +2 -2
  297. package/build/select/option/Option.mjs.map +1 -1
  298. package/build/select/searchBox/SearchBox.js +4 -8
  299. package/build/select/searchBox/SearchBox.js.map +1 -1
  300. package/build/select/searchBox/SearchBox.mjs +6 -6
  301. package/build/select/searchBox/SearchBox.mjs.map +1 -1
  302. package/build/selectOption/SelectOption.js +4 -8
  303. package/build/selectOption/SelectOption.js.map +1 -1
  304. package/build/selectOption/SelectOption.mjs +4 -4
  305. package/build/selectOption/SelectOption.mjs.map +1 -1
  306. package/build/slidingPanel/SlidingPanel.js +2 -6
  307. package/build/slidingPanel/SlidingPanel.js.map +1 -1
  308. package/build/slidingPanel/SlidingPanel.mjs +2 -2
  309. package/build/slidingPanel/SlidingPanel.mjs.map +1 -1
  310. package/build/statusIcon/StatusIcon.js +3 -7
  311. package/build/statusIcon/StatusIcon.js.map +1 -1
  312. package/build/statusIcon/StatusIcon.mjs +3 -3
  313. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  314. package/build/stepper/Stepper.js +3 -7
  315. package/build/stepper/Stepper.js.map +1 -1
  316. package/build/stepper/Stepper.mjs +3 -3
  317. package/build/stepper/Stepper.mjs.map +1 -1
  318. package/build/summary/Summary.js +2 -6
  319. package/build/summary/Summary.js.map +1 -1
  320. package/build/summary/Summary.mjs +2 -2
  321. package/build/summary/Summary.mjs.map +1 -1
  322. package/build/switch/Switch.js +2 -6
  323. package/build/switch/Switch.js.map +1 -1
  324. package/build/switch/Switch.mjs +2 -2
  325. package/build/switch/Switch.mjs.map +1 -1
  326. package/build/tabs/Tab.js +6 -7
  327. package/build/tabs/Tab.js.map +1 -1
  328. package/build/tabs/Tab.mjs +6 -6
  329. package/build/tabs/Tab.mjs.map +1 -1
  330. package/build/tabs/Tabs.js +2 -3
  331. package/build/tabs/Tabs.js.map +1 -1
  332. package/build/tabs/Tabs.mjs +2 -2
  333. package/build/tabs/Tabs.mjs.map +1 -1
  334. package/build/tile/Tile.js +3 -7
  335. package/build/tile/Tile.js.map +1 -1
  336. package/build/tile/Tile.mjs +3 -3
  337. package/build/tile/Tile.mjs.map +1 -1
  338. package/build/title/Title.js +3 -7
  339. package/build/title/Title.js.map +1 -1
  340. package/build/title/Title.mjs +3 -3
  341. package/build/title/Title.mjs.map +1 -1
  342. package/build/tooltip/Tooltip.js +3 -7
  343. package/build/tooltip/Tooltip.js.map +1 -1
  344. package/build/tooltip/Tooltip.mjs +3 -3
  345. package/build/tooltip/Tooltip.mjs.map +1 -1
  346. package/build/typeahead/Typeahead.js +6 -7
  347. package/build/typeahead/Typeahead.js.map +1 -1
  348. package/build/typeahead/Typeahead.mjs +6 -6
  349. package/build/typeahead/Typeahead.mjs.map +1 -1
  350. package/build/typeahead/typeaheadInput/TypeaheadInput.js +2 -6
  351. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  352. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +2 -2
  353. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
  354. package/build/typeahead/typeaheadOption/TypeaheadOption.js +2 -6
  355. package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
  356. package/build/typeahead/typeaheadOption/TypeaheadOption.mjs +2 -2
  357. package/build/typeahead/typeaheadOption/TypeaheadOption.mjs.map +1 -1
  358. package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
  359. package/build/types/chevron/Chevron.d.ts.map +1 -1
  360. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  361. package/build/types/dateLookup/tableLink/TableLink.d.ts.map +1 -1
  362. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  363. package/build/types/link/Link.d.ts.map +1 -1
  364. package/build/types/modal/Modal.d.ts.map +1 -1
  365. package/build/types/moneyInput/MoneyInput.d.ts +0 -1
  366. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  367. package/build/types/select/searchBox/SearchBox.d.ts.map +1 -1
  368. package/build/types/tabs/Tab.d.ts.map +1 -1
  369. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  370. package/build/upload/Upload.js +2 -6
  371. package/build/upload/Upload.js.map +1 -1
  372. package/build/upload/Upload.mjs +2 -2
  373. package/build/upload/Upload.mjs.map +1 -1
  374. package/build/uploadInput/UploadInput.js +2 -6
  375. package/build/uploadInput/UploadInput.js.map +1 -1
  376. package/build/uploadInput/UploadInput.mjs +2 -2
  377. package/build/uploadInput/UploadInput.mjs.map +1 -1
  378. package/build/uploadInput/uploadButton/UploadButton.js +5 -9
  379. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  380. package/build/uploadInput/uploadButton/UploadButton.mjs +5 -5
  381. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  382. package/build/uploadInput/uploadItem/UploadItem.js +3 -7
  383. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  384. package/build/uploadInput/uploadItem/UploadItem.mjs +3 -3
  385. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  386. package/build/uploadInput/uploadItem/UploadItemLink.js +2 -6
  387. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
  388. package/build/uploadInput/uploadItem/UploadItemLink.mjs +2 -2
  389. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
  390. package/package.json +4 -4
  391. package/src/accordion/AccordionItem/AccordionItem.tsx +5 -9
  392. package/src/actionButton/ActionButton.tsx +2 -2
  393. package/src/actionOption/ActionOption.tsx +2 -2
  394. package/src/alert/Alert.tsx +3 -3
  395. package/src/avatar/Avatar.tsx +2 -2
  396. package/src/badge/Badge.tsx +2 -2
  397. package/src/body/Body.tsx +2 -2
  398. package/src/button/Button.tsx +2 -2
  399. package/src/card/Card.tsx +4 -4
  400. package/src/carousel/Carousel.tsx +5 -5
  401. package/src/checkbox/Checkbox.tsx +3 -3
  402. package/src/checkboxButton/CheckboxButton.tsx +2 -2
  403. package/src/chevron/Chevron.tsx +3 -12
  404. package/src/chips/Chip.tsx +2 -2
  405. package/src/chips/Chips.tsx +3 -3
  406. package/src/circularButton/CircularButton.tsx +4 -7
  407. package/src/common/Option/Option.tsx +3 -3
  408. package/src/common/RadioButton/RadioButton.tsx +2 -2
  409. package/src/common/action/Action.tsx +2 -2
  410. package/src/common/bottomSheet/BottomSheet.tsx +2 -2
  411. package/src/common/card/Card.tsx +2 -2
  412. package/src/common/closeButton/CloseButton.tsx +2 -2
  413. package/src/common/flowHeader/FlowHeader.tsx +3 -3
  414. package/src/common/panel/Panel.tsx +4 -4
  415. package/src/criticalBanner/CriticalCommsBanner.tsx +4 -4
  416. package/src/dateInput/DateInput.tsx +2 -2
  417. package/src/dateLookup/DateLookup.tsx +2 -2
  418. package/src/dateLookup/dateHeader/DateHeader.tsx +2 -2
  419. package/src/dateLookup/tableLink/TableLink.tsx +3 -5
  420. package/src/decision/Decision.tsx +3 -3
  421. package/src/definitionList/DefinitionList.tsx +4 -4
  422. package/src/dimmer/Dimmer.tsx +6 -6
  423. package/src/display/Display.tsx +2 -2
  424. package/src/drawer/Drawer.tsx +5 -5
  425. package/src/field/Field.tsx +3 -3
  426. package/src/flowNavigation/FlowNavigation.tsx +6 -7
  427. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +3 -3
  428. package/src/flowNavigation/backButton/BackButton.tsx +2 -2
  429. package/src/header/Header.tsx +3 -3
  430. package/src/i18n/zh-HK.json +2 -0
  431. package/src/image/Image.tsx +2 -2
  432. package/src/info/Info.tsx +2 -2
  433. package/src/inlineAlert/InlineAlert.tsx +2 -2
  434. package/src/inputs/Input.tsx +2 -2
  435. package/src/inputs/InputGroup.tsx +3 -3
  436. package/src/inputs/SelectInput.story.tsx +2 -2
  437. package/src/inputs/SelectInput.tsx +12 -12
  438. package/src/inputs/TextArea.tsx +2 -2
  439. package/src/inputs/_BottomSheet.tsx +2 -2
  440. package/src/inputs/_ButtonInput.tsx +2 -2
  441. package/src/inputs/_Popover.tsx +3 -3
  442. package/src/inputs/_common.ts +2 -2
  443. package/src/instructionsList/InstructionsList.tsx +3 -3
  444. package/src/label/Label.tsx +2 -2
  445. package/src/link/Link.tsx +2 -7
  446. package/src/listItem/ListItem.tsx +3 -3
  447. package/src/loader/Loader.tsx +2 -2
  448. package/src/logo/Logo.tsx +2 -2
  449. package/src/modal/Modal.tsx +9 -15
  450. package/src/moneyInput/MoneyInput.story.tsx +0 -34
  451. package/src/moneyInput/MoneyInput.tsx +6 -29
  452. package/src/navigationOption/NavigationOption.tsx +2 -2
  453. package/src/nudge/Nudge.tsx +4 -4
  454. package/src/overlayHeader/OverlayHeader.tsx +3 -3
  455. package/src/popover/Popover.tsx +2 -2
  456. package/src/processIndicator/ProcessIndicator.tsx +2 -2
  457. package/src/progress/Progress.tsx +2 -2
  458. package/src/progressBar/ProgressBar.tsx +2 -2
  459. package/src/promoCard/PromoCard.tsx +4 -4
  460. package/src/promoCard/PromoCardGroup.tsx +2 -2
  461. package/src/promoCard/PromoCardIndicator.tsx +2 -2
  462. package/src/radio/Radio.tsx +5 -5
  463. package/src/section/Section.tsx +2 -2
  464. package/src/segmentedControl/SegmentedControl.tsx +5 -5
  465. package/src/select/Select.js +9 -9
  466. package/src/select/option/Option.tsx +2 -2
  467. package/src/select/searchBox/SearchBox.tsx +4 -7
  468. package/src/selectOption/SelectOption.tsx +5 -5
  469. package/src/slidingPanel/SlidingPanel.tsx +2 -2
  470. package/src/statusIcon/StatusIcon.tsx +3 -3
  471. package/src/stepper/Stepper.tsx +3 -3
  472. package/src/summary/Summary.tsx +2 -2
  473. package/src/switch/Switch.tsx +2 -2
  474. package/src/tabs/Tab.js +8 -12
  475. package/src/tabs/Tabs.js +2 -2
  476. package/src/tile/Tile.tsx +3 -3
  477. package/src/title/Title.tsx +3 -3
  478. package/src/tooltip/Tooltip.tsx +3 -3
  479. package/src/typeahead/Typeahead.tsx +6 -6
  480. package/src/typeahead/typeaheadInput/TypeaheadInput.tsx +2 -2
  481. package/src/typeahead/typeaheadOption/TypeaheadOption.tsx +2 -2
  482. package/src/upload/Upload.tsx +2 -2
  483. package/src/uploadInput/UploadInput.tsx +2 -2
  484. package/src/uploadInput/uploadButton/UploadButton.tsx +5 -9
  485. package/src/uploadInput/uploadItem/UploadItem.tsx +3 -3
  486. package/src/uploadInput/uploadItem/UploadItemLink.tsx +2 -2
package/src/select/Select.js 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 PropTypes from 'prop-types';
4
4
  import { useState, useEffect, useRef, useMemo, useId } from 'react';
5
5
  import { useIntl } from 'react-intl';
@@ -321,7 +321,7 @@ export default function Select({
321
321
  }
322
322
 
323
323
  function renderOptionsList({ className } = {}) {
324
- const dropdownClass = classNames(
324
+ const dropdownClass = clsx(
325
325
  s('np-dropdown-menu'),
326
326
  {
327
327
  [s('np-dropdown-menu-desktop')]: !isMobile,
@@ -369,7 +369,7 @@ export default function Select({
369
369
  return (
370
370
  /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
371
371
  <li
372
- className={classNames(s('clickable'), s('border-bottom'), s('show-more'))}
372
+ className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}
373
373
  onClick={handleOnClick}
374
374
  onKeyPress={handleOnClick}
375
375
  >
@@ -384,7 +384,7 @@ export default function Select({
384
384
  return (
385
385
  /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
386
386
  <li
387
- className={classNames(s('clickable'), s('border-bottom'))}
387
+ className={clsx(s('clickable'), s('border-bottom'))}
388
388
  onClick={createSelectHandlerForOption(placeholderOption)}
389
389
  onKeyPress={createSelectHandlerForOption(placeholderOption)}
390
390
  >
@@ -403,7 +403,7 @@ export default function Select({
403
403
  function HeaderOption({ children }) {
404
404
  return (
405
405
  <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
406
- className={classNames(s('np-dropdown-header'), s('np-text-title-group'))}
406
+ className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
407
407
  onClick={stopPropagation}
408
408
  onKeyPress={stopPropagation}
409
409
  >
@@ -432,7 +432,7 @@ export default function Select({
432
432
  !selectOption.disabled &&
433
433
  keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);
434
434
 
435
- const className = classNames(
435
+ const className = clsx(
436
436
  s('np-dropdown-item'),
437
437
  selectOption.disabled ? [s('disabled')] : s('clickable'),
438
438
  {
@@ -489,7 +489,7 @@ export default function Select({
489
489
  return (
490
490
  <div // eslint-disable-line jsx-a11y/no-static-element-interactions
491
491
  ref={selectReference}
492
- className={classNames(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}
492
+ className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}
493
493
  onKeyDown={handleKeyDown}
494
494
  onTouchMove={handleTouchStart}
495
495
  onFocus={handleOnFocus}
@@ -502,7 +502,7 @@ export default function Select({
502
502
  block={block}
503
503
  size={size}
504
504
  htmlType="button"
505
- className={classNames(
505
+ className={clsx(
506
506
  s('np-dropdown-toggle'),
507
507
  s('np-text-body-large'),
508
508
  inverse ? s('np-dropdown-toggle-navy') : null,
@@ -523,7 +523,7 @@ export default function Select({
523
523
  )}
524
524
  <Chevron
525
525
  // disabled={disabled}
526
- className={classNames(
526
+ className={clsx(
527
527
  s('tw-icon'),
528
528
  s('tw-chevron-up-icon'),
529
529
  s('tw-chevron'),
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
  )}