@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/link/Link.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { AnchorHTMLAttributes } from 'react';
4
4
  import { useIntl } from 'react-intl';
5
5
 
@@ -32,12 +32,7 @@ const Link = ({
32
32
  <a
33
33
  href={href}
34
34
  target={target}
35
- className={classNames(
36
- 'np-link',
37
- type ? `np-text-${type}` : undefined,
38
- 'd-inline-flex',
39
- className,
40
- )}
35
+ className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
41
36
  aria-label={ariaLabel}
42
37
  rel={isBlank ? 'noreferrer' : undefined}
43
38
  onClick={onClick}
package/src/listItem/ListItem.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { ElementType, FC, ReactNode } from 'react';
3
3
 
4
4
  import Body from '../body/Body';
@@ -27,14 +27,14 @@ const ListItem: FC<ListItemProps> = ({
27
27
 
28
28
  return (
29
29
  <Element
30
- className={classNames('np-list-item d-flex align-items-center p-y-2', className, {
30
+ className={clsx('np-list-item d-flex align-items-center p-y-2', className, {
31
31
  'p-x-2': !isContainerAligned,
32
32
  })}
33
33
  {...rest}
34
34
  >
35
35
  {media}
36
36
 
37
- <div className={classNames('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
37
+ <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
38
38
  <Body type="body-default" className="text-secondary m-b-0">
39
39
  {title}
40
40
  </Body>
package/src/loader/Loader.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useTheme } from '@wise/components-theming';
2
- import classnames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { useEffect, useState } from 'react';
4
4
 
5
5
  import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
@@ -74,7 +74,7 @@ const Loader = ({
74
74
 
75
75
  return (
76
76
  <div
77
- className={classnames(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
77
+ className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
78
78
  'tw-loader--visible': hasDebounced,
79
79
  })}
80
80
  data-testid={restProps['data-testid']}
package/src/logo/Logo.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
4
4
  import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
@@ -49,7 +49,7 @@ export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
49
49
  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
50
50
 
51
51
  return (
52
- <span aria-label={labelByType[type]} role="img" className={classNames(className, 'np-logo')}>
52
+ <span aria-label={labelByType[type]} role="img" className={clsx(className, 'np-logo')}>
53
53
  <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
54
54
  <LogoMd className="np-logo-svg np-logo-svg--size-md" />
55
55
  </span>
package/src/modal/Modal.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { ReactNode, useContext, useId, useRef } from 'react';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
 
@@ -92,7 +92,7 @@ const Modal = ({
92
92
  >
93
93
  <div
94
94
  ref={contentReference}
95
- className={classNames(
95
+ className={clsx(
96
96
  'tw-modal',
97
97
  'd-flex',
98
98
  'fade',
@@ -107,12 +107,12 @@ const Modal = ({
107
107
  role="dialog"
108
108
  aria-modal
109
109
  aria-labelledby={titleId}
110
- className={classNames('tw-modal-dialog', 'd-flex', {
110
+ className={clsx('tw-modal-dialog', 'd-flex', {
111
111
  [`tw-modal-${size}`]: size,
112
112
  })}
113
113
  >
114
114
  <div
115
- className={classNames(
115
+ className={clsx(
116
116
  'tw-modal-content',
117
117
  'd-flex',
118
118
  'flex-column',
@@ -124,7 +124,7 @@ const Modal = ({
124
124
  )}
125
125
  >
126
126
  <div
127
- className={classNames(
127
+ className={clsx(
128
128
  'tw-modal-header',
129
129
  'd-flex',
130
130
  'align-items-center',
@@ -141,7 +141,7 @@ const Modal = ({
141
141
  <CloseButton onClick={onClose} />
142
142
  </div>
143
143
  <div
144
- className={classNames('tw-modal-body', {
144
+ className={clsx('tw-modal-body', {
145
145
  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,
146
146
  })}
147
147
  >
@@ -149,15 +149,9 @@ const Modal = ({
149
149
  </div>
150
150
  {footer && (
151
151
  <div
152
- className={classNames(
153
- 'tw-modal-footer',
154
- 'd-flex',
155
- 'align-items-center',
156
- 'flex-wrap',
157
- {
158
- 'modal--withoutborder': noDivider,
159
- },
160
- )}
152
+ className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {
153
+ 'modal--withoutborder': noDivider,
154
+ })}
161
155
  >
162
156
  {footer}
163
157
  </div>
package/src/moneyInput/MoneyInput.story.tsx CHANGED
@@ -149,40 +149,6 @@ export const BalanceCurrencies: Story = {
149
149
  },
150
150
  };
151
151
 
152
- export const MaxLengthOverride: Story = {
153
- args: {
154
- ...SingleCurrency.args,
155
- maxLengthOverride: 5,
156
- },
157
- play: async ({ canvasElement }) => {
158
- await userEvent.tab();
159
- await userEvent.keyboard('12.345');
160
-
161
- await expect(within(canvasElement).getByRole('textbox')).toHaveValue('12.34');
162
- },
163
- };
164
-
165
- export const MaxLengthOverrideWithCommaDecimalSeparator: Story = {
166
- ...MaxLengthOverride,
167
- decorators: [
168
- (Story) => {
169
- const locale = 'de';
170
- return (
171
- <Provider i18n={{ locale, messages: translations[locale] }}>
172
- <Story />
173
- </Provider>
174
- );
175
- },
176
- ],
177
- play: async ({ canvasElement }) => {
178
- await userEvent.tab();
179
- await userEvent.keyboard('12,345');
180
- await userEvent.tab();
181
-
182
- await expect(within(canvasElement).getByRole('textbox')).toHaveValue('12.34');
183
- },
184
- };
185
-
186
152
  export const OpenedInput: Story = {
187
153
  ...MultipleCurrencies,
188
154
  play: async ({ canvasElement }) => {
package/src/moneyInput/MoneyInput.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { isEmpty, isNumber, isNull } from '@transferwise/neptune-validation';
2
2
  import { Flag } from '@wise/art';
3
- import classNames from 'classnames';
3
+ import { clsx } from 'clsx';
4
4
  import { Component } from 'react';
5
5
  import { injectIntl, WrappedComponentProps } from 'react-intl';
6
6
 
@@ -41,16 +41,11 @@ const formatAmountIfSet = ({
41
41
  amount,
42
42
  currency,
43
43
  locale,
44
- maxLengthOverride,
45
44
  }: {
46
45
  amount: number | null | undefined;
47
46
  currency: string;
48
47
  locale: string;
49
- maxLengthOverride?: number;
50
48
  }) => {
51
- if (maxLengthOverride) {
52
- return amount != null ? String(amount) : '';
53
- }
54
49
  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
55
50
  };
56
51
 
@@ -58,16 +53,11 @@ const parseNumber = ({
58
53
  amount,
59
54
  currency,
60
55
  locale,
61
- maxLengthOverride,
62
56
  }: {
63
57
  amount: string;
64
58
  currency: string;
65
59
  locale: string;
66
- maxLengthOverride?: number;
67
60
  }) => {
68
- if (maxLengthOverride && amount.length > maxLengthOverride) {
69
- return 0;
70
- }
71
61
  return parseAmount(amount, currency, locale);
72
62
  };
73
63
 
@@ -105,7 +95,6 @@ export interface MoneyInputProps extends WrappedComponentProps {
105
95
  onCustomAction?: () => void;
106
96
  classNames?: Record<string, string>;
107
97
  selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
108
- maxLengthOverride?: number;
109
98
  }
110
99
 
111
100
  type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
@@ -136,7 +125,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
136
125
  amount: props.amount,
137
126
  currency: props.selectedCurrency.currency,
138
127
  locale: props.intl.locale,
139
- maxLengthOverride: props.maxLengthOverride,
140
128
  }),
141
129
  locale: props.intl.locale,
142
130
  };
@@ -151,7 +139,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
151
139
  amount: nextProps.amount,
152
140
  currency: nextProps.selectedCurrency.currency,
153
141
  locale: nextProps.intl.locale,
154
- maxLengthOverride: nextProps.maxLengthOverride,
155
142
  }),
156
143
  });
157
144
  }
@@ -179,7 +166,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
179
166
  amount: paste,
180
167
  currency: this.props.selectedCurrency.currency,
181
168
  locale,
182
- maxLengthOverride: this.props.maxLengthOverride,
183
169
  });
184
170
 
185
171
  if (isNumberOrNull(parsed)) {
@@ -188,7 +174,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
188
174
  amount: parsed,
189
175
  currency: this.props.selectedCurrency.currency,
190
176
  locale,
191
- maxLengthOverride: this.props.maxLengthOverride,
192
177
  }),
193
178
  });
194
179
  this.props.onAmountChange?.(parsed);
@@ -208,7 +193,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
208
193
  amount: value,
209
194
  currency: this.props.selectedCurrency.currency,
210
195
  locale: this.state.locale,
211
- maxLengthOverride: this.props.maxLengthOverride,
212
196
  });
213
197
  if (isNumberOrNull(parsed)) {
214
198
  this.props.onAmountChange?.(parsed);
@@ -256,7 +240,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
256
240
  amount: previousState.formattedAmount,
257
241
  currency: this.props.selectedCurrency.currency,
258
242
  locale: previousState.locale,
259
- maxLengthOverride: this.props.maxLengthOverride,
260
243
  });
261
244
  if (!isNumberOrNull(parsed)) {
262
245
  return {
@@ -268,7 +251,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
268
251
  amount: parsed,
269
252
  currency: this.props.selectedCurrency.currency,
270
253
  locale: previousState.locale,
271
- maxLengthOverride: this.props.maxLengthOverride,
272
254
  }),
273
255
  };
274
256
  });
@@ -304,7 +286,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
304
286
  size,
305
287
  addon,
306
288
  selectProps,
307
- maxLengthOverride,
308
289
  } = this.props;
309
290
  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
310
291
 
@@ -340,7 +321,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
340
321
  role="group"
341
322
  {...inputAttributes}
342
323
  aria-labelledby={ariaLabelledBy}
343
- className={classNames(
324
+ className={clsx(
344
325
  this.style('tw-money-input'),
345
326
  this.style('input-group'),
346
327
  this.style(`input-group-${size}`),
@@ -351,12 +332,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
351
332
  value={this.state.formattedAmount}
352
333
  inputMode="decimal"
353
334
  disabled={disabled}
354
- maxLength={maxLengthOverride}
355
335
  placeholder={formatAmountIfSet({
356
336
  amount: this.props.placeholder,
357
337
  currency: this.props.selectedCurrency.currency,
358
338
  locale: this.state.locale,
359
- maxLengthOverride: this.props.maxLengthOverride,
360
339
  })}
361
340
  autoComplete="off"
362
341
  onKeyDown={this.handleKeyDown}
@@ -367,7 +346,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
367
346
  />
368
347
  {addon && (
369
348
  <span
370
- className={classNames(
349
+ className={clsx(
371
350
  this.style('input-group-addon'),
372
351
  this.style(`input-${size}`),
373
352
  disabled ? this.style('disabled') : '',
@@ -378,7 +357,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
378
357
  )}
379
358
  {isFixedCurrency ? (
380
359
  <div
381
- className={classNames(
360
+ className={clsx(
382
361
  this.style('input-group-addon'),
383
362
  this.style(`input-${size}`),
384
363
  this.style('tw-money-input__fixed-currency'),
@@ -386,9 +365,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
386
365
  )}
387
366
  >
388
367
  {(size === 'lg' || size === 'md') && (
389
- <span
390
- className={classNames(this.style('money-input-currency-flag'), this.style('m-r-2'))}
391
- >
368
+ <span className={clsx(this.style('money-input-currency-flag'), this.style('m-r-2'))}>
392
369
  <Flag code={selectedCurrency.currency.toLowerCase()} intrinsicSize={24} />
393
370
  </span>
394
371
  )}
@@ -402,7 +379,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
402
379
  </div>
403
380
  ) : (
404
381
  <div
405
- className={classNames(
382
+ className={clsx(
406
383
  this.style('input-group-btn'),
407
384
  this.style('amount-currency-select-btn'),
408
385
  )}
package/src/navigationOption/NavigationOption.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { forwardRef } from 'react';
3
3
 
4
4
  import Chevron from '../chevron';
@@ -19,7 +19,7 @@ const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
19
19
  {...rest}
20
20
  ref={reference}
21
21
  as={component}
22
- className={classNames('np-navigation-option', className)}
22
+ className={clsx('np-navigation-option', className)}
23
23
  button={<Chevron orientation={Position.RIGHT} disabled={disabled} className="d-block" />}
24
24
  disabled={disabled}
25
25
  onClick={(event) => {
package/src/nudge/Nudge.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Illustration, Assets, IllustrationNames } from '@wise/art';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { ReactNode, useEffect, useState, MouseEvent } from 'react';
4
4
 
5
5
  import Body from '../body';
@@ -135,12 +135,12 @@ const Nudge = ({
135
135
  }
136
136
 
137
137
  return (
138
- <div className={classNames('wds-nudge', className)} id={id}>
138
+ <div className={clsx('wds-nudge', className)} id={id}>
139
139
  {!!mediaName && (
140
140
  <div className="wds-nudge-media">
141
141
  <Illustration
142
142
  name={mediaName as IllustrationNames}
143
- className={classNames(`wds-nudge-media-${mediaName}`)}
143
+ className={clsx(`wds-nudge-media-${mediaName}`)}
144
144
  size="small"
145
145
  disablePadding
146
146
  alt=""
@@ -149,7 +149,7 @@ const Nudge = ({
149
149
  )}
150
150
  <div className="wds-nudge-container">
151
151
  <div className="wds-nudge-content">
152
- <Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>
152
+ <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
153
153
  {title}
154
154
  </Body>
155
155
  {link && (
package/src/overlayHeader/OverlayHeader.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  import { Size } from '../common';
4
4
  import { CloseButton } from '../common/closeButton';
@@ -23,9 +23,9 @@ export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: O
23
23
  className="np-overlay-header__content p-a-3"
24
24
  leftContent={logo}
25
25
  rightContent={
26
- <div className={classNames('d-flex', 'align-items-center', 'order-2')}>
26
+ <div className={clsx('d-flex', 'align-items-center', 'order-2')}>
27
27
  {avatar}
28
- {avatar && closeButton && <span className={classNames('m-x-1')} />}
28
+ {avatar && closeButton && <span className={clsx('m-x-1')} />}
29
29
  {closeButton}
30
30
  </div>
31
31
  }
package/src/popover/Popover.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useTheme } from '@wise/components-theming';
2
- import classnames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
4
4
 
5
5
  import { Position, Typography } from '../common';
@@ -69,7 +69,7 @@ export default function Popover({
69
69
  };
70
70
 
71
71
  return (
72
- <span className={classnames('np-popover', className)}>
72
+ <span className={clsx('np-popover', className)}>
73
73
  <span ref={anchorReference} className="d-inline-block">
74
74
  {isValidElement<{ onClick?: () => void }>(children)
75
75
  ? cloneElement(children, {
package/src/processIndicator/ProcessIndicator.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { Component } from 'react';
3
3
 
4
4
  import { Status, Size } from '../common';
@@ -89,7 +89,7 @@ export default class ProcessIndicator extends Component<
89
89
  render() {
90
90
  const { className, 'data-testid': dataTestId } = this.props;
91
91
  const { size, status } = this.state;
92
- const classes = classNames(`process process-${size}`, className, {
92
+ const classes = clsx(`process process-${size}`, className, {
93
93
  [`process-danger`]: status === Status.FAILED,
94
94
  [`process-stopped`]: status === Status.HIDDEN,
95
95
  [`process-success`]: status === Status.SUCCEEDED,
package/src/progress/Progress.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classnames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
 
3
3
  export type ProgressProps = {
4
4
  className?: string;
@@ -8,7 +8,7 @@ export type ProgressProps = {
8
8
 
9
9
  const Progress = ({ className, id, progress }: ProgressProps) => {
10
10
  return (
11
- <progress id={id} className={classnames('np-progress d-block', className)} {...progress}>
11
+ <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>
12
12
  {Math.floor((progress.value / progress.max) * 100)}%
13
13
  </progress>
14
14
  );
package/src/progressBar/ProgressBar.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useTheme } from '@wise/components-theming';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
 
4
4
  import Body from '../body';
5
5
  import { Typography } from '../common';
@@ -25,7 +25,7 @@ const ProgressBar = ({
25
25
  }: ProgressBarProps) => {
26
26
  const { isModern } = useTheme();
27
27
  return (
28
- <div className={classNames('np-progress-bar', className)}>
28
+ <div className={clsx('np-progress-bar', className)}>
29
29
  <label className="np-progress-bar__title m-b-1" htmlFor={id}>
30
30
  <Title
31
31
  type={Typography.TITLE_BODY}
package/src/promoCard/PromoCard.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Check } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';
4
4
 
5
5
  import Body from '../body';
@@ -237,7 +237,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
237
237
  // is truthy.
238
238
  const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();
239
239
  const [checked, setChecked] = useState(
240
- type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false,
240
+ type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,
241
241
  );
242
242
 
243
243
  const handleClick = () => {
@@ -276,7 +276,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
276
276
 
277
277
  // Define all class names string based on the values of the `href`, `type`,
278
278
  // `checked`, and `className` props.
279
- const commonClasses = classNames(
279
+ const commonClasses = clsx(
280
280
  {
281
281
  'np-Card--promoCard': true,
282
282
  'np-Card--checked': !href && type,
@@ -380,7 +380,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
380
380
  <Body className="np-Card-description">{description}</Body>
381
381
 
382
382
  {imageSource && (
383
- <div className={classNames('np-Card-image', { imageClass })}>
383
+ <div className={clsx('np-Card-image', { imageClass })}>
384
384
  <Image src={imageSource} alt={imageAlt || ''} loading="lazy" />
385
385
  </div>
386
386
  )}
package/src/promoCard/PromoCardGroup.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';
3
3
 
4
4
  import { PromoCardProps } from './PromoCard';
@@ -89,7 +89,7 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
89
89
  return { state, isDisabled, onChange: handleOnChange };
90
90
  }, [state, isDisabled, onChange]);
91
91
 
92
- const commonClasses = classNames(
92
+ const commonClasses = clsx(
93
93
  {
94
94
  'np-CardGroup': true,
95
95
  'is-disabled': isDisabled,
package/src/promoCard/PromoCardIndicator.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ArrowRight, Check, Download } from '@transferwise/icons';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
  import { ReactElement, ReactNode } from 'react';
4
4
 
5
5
  import Avatar, { AvatarType } from '../avatar';
@@ -62,7 +62,7 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
62
62
  }[icon];
63
63
 
64
64
  return (
65
- <div className={classNames('np-Card-indicator', className)} data-testid={testid} {...rest}>
65
+ <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>
66
66
  {label && (
67
67
  <Body as="span" type={Typography.BODY_LARGE_BOLD} className="np-Card-indicatorText">
68
68
  {label}
package/src/radio/Radio.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useTheme } from '@wise/components-theming';
2
- import classNames from 'classnames';
2
+ import { clsx } from 'clsx';
3
3
 
4
4
  import Body from '../body/Body';
5
5
  import { Typography } from '../common';
@@ -25,7 +25,7 @@ export default function Radio<T extends string | number = ''>({
25
25
  const { isModern } = useTheme();
26
26
  return (
27
27
  <div
28
- className={classNames(
28
+ className={clsx(
29
29
  'radio np-radio',
30
30
  {
31
31
  'radio-lg': secondary,
@@ -34,8 +34,8 @@ export default function Radio<T extends string | number = ''>({
34
34
  className,
35
35
  )}
36
36
  >
37
- <label className={classNames({ disabled })} htmlFor={id}>
38
- <span className={classNames(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button')}>
37
+ <label className={clsx({ disabled })} htmlFor={id}>
38
+ <span className={clsx(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button')}>
39
39
  <RadioButton id={id} disabled={disabled} {...otherProps} />
40
40
  </span>
41
41
  <Body
@@ -45,7 +45,7 @@ export default function Radio<T extends string | number = ''>({
45
45
  >
46
46
  {label}
47
47
  {secondary && (
48
- <Body as="span" className={classNames({ secondary: !isModern })}>
48
+ <Body as="span" className={clsx({ secondary: !isModern })}>
49
49
  {secondary}
50
50
  </Body>
51
51
  )}
package/src/section/Section.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { PropsWithChildren } from 'react';
3
3
 
4
4
  import { CommonProps } from '../common';
@@ -17,7 +17,7 @@ type SectionProps = PropsWithChildren<
17
17
  const Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {
18
18
  return (
19
19
  <div
20
- className={classNames('np-section', className, {
20
+ className={clsx('np-section', className, {
21
21
  'np-section--with-horizontal-padding': withHorizontalPadding,
22
22
  })}
23
23
  >
package/src/segmentedControl/SegmentedControl.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import classNames from 'classnames';
1
+ import { clsx } from 'clsx';
2
2
  import { createRef, useEffect, useRef, useState } from 'react';
3
3
 
4
4
  import Body from '../body';
@@ -87,12 +87,12 @@ const SegmentedControl = ({
87
87
  <div
88
88
  ref={segmentsRef}
89
89
  data-testid="segmented-control"
90
- className={classNames('segmented-control', {
90
+ className={clsx('segmented-control', {
91
91
  'segmented-control--input': mode === 'input',
92
92
  })}
93
93
  >
94
94
  <div
95
- className={classNames('segmented-control__segments', {
95
+ className={clsx('segmented-control__segments', {
96
96
  'segmented-control__segments--no-animate': !animate,
97
97
  })}
98
98
  role={mode !== 'input' ? 'tablist' : undefined}
@@ -107,7 +107,7 @@ const SegmentedControl = ({
107
107
  ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}
108
108
  key={segment.id}
109
109
  htmlFor={segment.id}
110
- className={classNames('segmented-control__segment', {
110
+ className={clsx('segmented-control__segment', {
111
111
  'segmented-control__selected-segment': value === segment.value,
112
112
  })}
113
113
  >
@@ -139,7 +139,7 @@ const SegmentedControl = ({
139
139
  id={segment.id}
140
140
  aria-controls={segment.controls}
141
141
  aria-selected={value === segment.value}
142
- className={classNames('segmented-control__segment', 'segmented-control__button', {
142
+ className={clsx('segmented-control__segment', 'segmented-control__button', {
143
143
  'segmented-control__selected-segment': value === segment.value,
144
144
  })}
145
145
  onClick={onSelect}