@transferwise/components 46.141.0 → 46.143.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 (490) hide show
  1. package/build/accordion/AccordionItem/AccordionItem.js +1 -1
  2. package/build/accordion/AccordionItem/AccordionItem.mjs +1 -1
  3. package/build/actionButton/ActionButton.js +1 -1
  4. package/build/actionButton/ActionButton.mjs +1 -1
  5. package/build/actionOption/ActionOption.js +1 -1
  6. package/build/actionOption/ActionOption.mjs +1 -1
  7. package/build/alert/Alert.js +1 -1
  8. package/build/alert/Alert.mjs +1 -1
  9. package/build/alert/inlineMarkdown/InlineMarkdown.js +1 -1
  10. package/build/alert/inlineMarkdown/InlineMarkdown.mjs +1 -1
  11. package/build/avatar/Avatar.js +1 -1
  12. package/build/avatar/Avatar.mjs +1 -1
  13. package/build/avatarLayout/AvatarLayout.js +16 -2
  14. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  15. package/build/avatarLayout/AvatarLayout.mjs +16 -2
  16. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  17. package/build/avatarView/AvatarView.js +7 -3
  18. package/build/avatarView/AvatarView.js.map +1 -1
  19. package/build/avatarView/AvatarView.mjs +7 -3
  20. package/build/avatarView/AvatarView.mjs.map +1 -1
  21. package/build/avatarView/Dot.js +8 -0
  22. package/build/avatarView/Dot.js.map +1 -1
  23. package/build/avatarView/Dot.mjs +8 -0
  24. package/build/avatarView/Dot.mjs.map +1 -1
  25. package/build/avatarWrapper/AvatarWrapper.js +1 -1
  26. package/build/avatarWrapper/AvatarWrapper.mjs +1 -1
  27. package/build/badge/Badge.js +1 -1
  28. package/build/badge/Badge.mjs +1 -1
  29. package/build/button/Button.js +1 -1
  30. package/build/button/Button.mjs +1 -1
  31. package/build/button/LegacyButton.js +1 -1
  32. package/build/button/LegacyButton.mjs +1 -1
  33. package/build/button/classMap.js +1 -1
  34. package/build/button/classMap.mjs +1 -1
  35. package/build/button/legacyUtils/legacyUtils.js +1 -1
  36. package/build/button/legacyUtils/legacyUtils.mjs +1 -1
  37. package/build/card/Card.js +1 -1
  38. package/build/card/Card.mjs +1 -1
  39. package/build/checkbox/Checkbox.js +1 -1
  40. package/build/checkbox/Checkbox.mjs +1 -1
  41. package/build/chevron/Chevron.js +1 -1
  42. package/build/chevron/Chevron.mjs +1 -1
  43. package/build/chips/Chip.js +1 -1
  44. package/build/chips/Chip.mjs +1 -1
  45. package/build/circularButton/CircularButton.js +2 -2
  46. package/build/circularButton/CircularButton.js.map +1 -1
  47. package/build/circularButton/CircularButton.mjs +2 -2
  48. package/build/circularButton/CircularButton.mjs.map +1 -1
  49. package/build/common/bottomSheet/BottomSheet.js +2 -2
  50. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  51. package/build/common/bottomSheet/BottomSheet.mjs +2 -2
  52. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  53. package/build/common/circle/Circle.js +8 -4
  54. package/build/common/circle/Circle.js.map +1 -1
  55. package/build/common/circle/Circle.mjs +8 -4
  56. package/build/common/circle/Circle.mjs.map +1 -1
  57. package/build/common/hooks/useLayout/useLayout.js +6 -6
  58. package/build/common/hooks/useLayout/useLayout.js.map +1 -1
  59. package/build/common/hooks/useLayout/useLayout.mjs +1 -1
  60. package/build/common/hooks/useLayout/useLayout.mjs.map +1 -1
  61. package/build/common/hooks/useScreenSize.js.map +1 -1
  62. package/build/common/hooks/useScreenSize.mjs.map +1 -1
  63. package/build/common/panel/Panel.js +1 -1
  64. package/build/common/panel/Panel.mjs +1 -1
  65. package/build/common/responsivePanel/ResponsivePanel.js +1 -1
  66. package/build/common/responsivePanel/ResponsivePanel.mjs +1 -1
  67. package/build/criticalBanner/CriticalCommsBanner.js +1 -1
  68. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  69. package/build/dateInput/DateInput.js +1 -1
  70. package/build/dateInput/DateInput.mjs +1 -1
  71. package/build/dateLookup/DateLookup.js +2 -2
  72. package/build/dateLookup/DateLookup.js.map +1 -1
  73. package/build/dateLookup/DateLookup.mjs +1 -1
  74. package/build/dateLookup/DateLookup.mjs.map +1 -1
  75. package/build/dateLookup/dateHeader/DateHeader.js +1 -1
  76. package/build/dateLookup/dateHeader/DateHeader.mjs +1 -1
  77. package/build/dateLookup/dateTrigger/DateTrigger.js +1 -1
  78. package/build/dateLookup/dateTrigger/DateTrigger.mjs +1 -1
  79. package/build/decision/Decision.js +3 -3
  80. package/build/decision/Decision.js.map +1 -1
  81. package/build/decision/Decision.mjs +1 -1
  82. package/build/decision/Decision.mjs.map +1 -1
  83. package/build/definitionList/DefinitionList.js +1 -1
  84. package/build/definitionList/DefinitionList.mjs +1 -1
  85. package/build/dimmer/Dimmer.js +1 -1
  86. package/build/dimmer/Dimmer.mjs +1 -1
  87. package/build/display/Display.js +1 -1
  88. package/build/display/Display.mjs +1 -1
  89. package/build/drawer/Drawer.js +1 -1
  90. package/build/drawer/Drawer.mjs +1 -1
  91. package/build/expressiveMoneyInput/amountInput/AmountInput.js +1 -1
  92. package/build/expressiveMoneyInput/amountInput/AmountInput.js.map +1 -1
  93. package/build/expressiveMoneyInput/amountInput/AmountInput.mjs +1 -1
  94. package/build/expressiveMoneyInput/amountInput/AmountInput.mjs.map +1 -1
  95. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +1 -1
  96. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +1 -1
  97. package/build/field/Field.js +64 -33
  98. package/build/field/Field.js.map +1 -1
  99. package/build/field/Field.messages.js +14 -0
  100. package/build/field/Field.messages.js.map +1 -0
  101. package/build/field/Field.messages.mjs +10 -0
  102. package/build/field/Field.messages.mjs.map +1 -0
  103. package/build/field/Field.mjs +66 -35
  104. package/build/field/Field.mjs.map +1 -1
  105. package/build/flowNavigation/FlowNavigation.js +3 -3
  106. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  107. package/build/flowNavigation/FlowNavigation.mjs +1 -1
  108. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  109. package/build/header/Header.js +1 -1
  110. package/build/header/Header.mjs +1 -1
  111. package/build/i18n/en.json +1 -0
  112. package/build/i18n/en.json.js +1 -0
  113. package/build/i18n/en.json.js.map +1 -1
  114. package/build/i18n/en.json.mjs +1 -0
  115. package/build/i18n/en.json.mjs.map +1 -1
  116. package/build/image/Image.js +1 -1
  117. package/build/image/Image.mjs +1 -1
  118. package/build/index.js +2 -2
  119. package/build/index.mjs +1 -1
  120. package/build/info/Info.js +1 -1
  121. package/build/info/Info.mjs +1 -1
  122. package/build/inlineAlert/InlineAlert.js +1 -1
  123. package/build/inlineAlert/InlineAlert.mjs +1 -1
  124. package/build/inputs/SearchInput.js +1 -1
  125. package/build/inputs/SearchInput.mjs +1 -1
  126. package/build/inputs/SelectInput/SelectInput.js +2 -2
  127. package/build/inputs/SelectInput/SelectInput.js.map +1 -1
  128. package/build/inputs/SelectInput/SelectInput.mjs +1 -1
  129. package/build/inputs/SelectInput/SelectInput.mjs.map +1 -1
  130. package/build/inputs/TextArea.js +5 -0
  131. package/build/inputs/TextArea.js.map +1 -1
  132. package/build/inputs/TextArea.mjs +6 -1
  133. package/build/inputs/TextArea.mjs.map +1 -1
  134. package/build/inputs/contexts.js +16 -0
  135. package/build/inputs/contexts.js.map +1 -1
  136. package/build/inputs/contexts.mjs +16 -2
  137. package/build/inputs/contexts.mjs.map +1 -1
  138. package/build/instructionsList/InstructionsList.js +1 -1
  139. package/build/instructionsList/InstructionsList.mjs +1 -1
  140. package/build/link/Link.js +1 -1
  141. package/build/link/Link.mjs +1 -1
  142. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +1 -1
  143. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +1 -1
  144. package/build/listItem/ListItem.js +1 -1
  145. package/build/listItem/ListItem.mjs +1 -1
  146. package/build/listItem/Prompt/ListItemPrompt.js +1 -1
  147. package/build/listItem/Prompt/ListItemPrompt.mjs +1 -1
  148. package/build/loader/Loader.js +1 -1
  149. package/build/loader/Loader.mjs +1 -1
  150. package/build/logo/Logo.js +3 -3
  151. package/build/logo/Logo.js.map +1 -1
  152. package/build/logo/Logo.mjs +2 -2
  153. package/build/logo/Logo.mjs.map +1 -1
  154. package/build/main.css +350 -402
  155. package/build/markdown/Markdown.js +1 -1
  156. package/build/markdown/Markdown.mjs +1 -1
  157. package/build/modal/Modal.js +3 -3
  158. package/build/modal/Modal.js.map +1 -1
  159. package/build/modal/Modal.mjs +3 -3
  160. package/build/modal/Modal.mjs.map +1 -1
  161. package/build/moneyInput/MoneyInput.js +1 -1
  162. package/build/moneyInput/MoneyInput.mjs +1 -1
  163. package/build/navigationOption/NavigationOption.js +1 -1
  164. package/build/navigationOption/NavigationOption.mjs +1 -1
  165. package/build/nudge/Nudge.js +1 -1
  166. package/build/nudge/Nudge.mjs +1 -1
  167. package/build/overlayHeader/OverlayHeader.js +1 -1
  168. package/build/overlayHeader/OverlayHeader.mjs +1 -1
  169. package/build/phoneNumberInput/PhoneNumberInput.js +1 -1
  170. package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -1
  171. package/build/popover/Popover.js +1 -1
  172. package/build/popover/Popover.mjs +1 -1
  173. package/build/processIndicator/ProcessIndicator.js +1 -1
  174. package/build/processIndicator/ProcessIndicator.mjs +1 -1
  175. package/build/progressBar/ProgressBar.js +1 -1
  176. package/build/progressBar/ProgressBar.mjs +1 -1
  177. package/build/promoCard/PromoCard.js +1 -1
  178. package/build/promoCard/PromoCard.mjs +1 -1
  179. package/build/promoCard/PromoCardIndicator.js +1 -1
  180. package/build/promoCard/PromoCardIndicator.mjs +1 -1
  181. package/build/prompt/ActionPrompt/ActionPrompt.js +2 -2
  182. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  183. package/build/prompt/ActionPrompt/ActionPrompt.mjs +2 -2
  184. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  185. package/build/prompt/CriticalBanner/CriticalBanner.js +2 -2
  186. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -1
  187. package/build/prompt/CriticalBanner/CriticalBanner.mjs +1 -1
  188. package/build/prompt/InfoPrompt/InfoPrompt.js +1 -1
  189. package/build/prompt/InfoPrompt/InfoPrompt.mjs +1 -1
  190. package/build/prompt/InlinePrompt/InlinePrompt.js +1 -1
  191. package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -1
  192. package/build/provider/Provider.js +1 -1
  193. package/build/provider/Provider.mjs +1 -1
  194. package/build/radio/Radio.js +1 -1
  195. package/build/radio/Radio.mjs +1 -1
  196. package/build/segmentedControl/SegmentedControl.js +1 -1
  197. package/build/segmentedControl/SegmentedControl.mjs +1 -1
  198. package/build/select/Select.js +1 -1
  199. package/build/select/Select.mjs +1 -1
  200. package/build/select/option/Option.js +1 -1
  201. package/build/select/option/Option.mjs +1 -1
  202. package/build/statusIcon/StatusIcon.js +2 -2
  203. package/build/statusIcon/StatusIcon.js.map +1 -1
  204. package/build/statusIcon/StatusIcon.mjs +2 -2
  205. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  206. package/build/stepper/Stepper.js +1 -1
  207. package/build/stepper/Stepper.mjs +1 -1
  208. package/build/sticky/Sticky.js +1 -1
  209. package/build/sticky/Sticky.mjs +1 -1
  210. package/build/styles/accordion/Accordion.css +1 -1
  211. package/build/styles/avatarView/AvatarView.css +4 -4
  212. package/build/styles/avatarView/Dot.css +4 -4
  213. package/build/styles/card/Card.css +2 -2
  214. package/build/styles/carousel/Carousel.css +5 -5
  215. package/build/styles/common/Option/Option.css +2 -4
  216. package/build/styles/common/baseCard/BaseCard.css +1 -1
  217. package/build/styles/container/Container.css +3 -3
  218. package/build/styles/criticalBanner/CriticalCommsBanner.css +1 -1
  219. package/build/styles/css/accordion.css +4 -4
  220. package/build/styles/css/button-groups.css +6 -6
  221. package/build/styles/css/buttons.css +1 -1
  222. package/build/styles/css/circles.css +1 -1
  223. package/build/styles/css/column-layout.css +4 -4
  224. package/build/styles/css/decision.css +4 -4
  225. package/build/styles/css/dropdowns.css +10 -10
  226. package/build/styles/css/droppable.css +8 -8
  227. package/build/styles/css/flex.css +13 -15
  228. package/build/styles/css/footer.css +3 -3
  229. package/build/styles/css/grid.css +19 -19
  230. package/build/styles/css/input-groups.css +12 -12
  231. package/build/styles/css/list-group.css +8 -8
  232. package/build/styles/css/modals.css +6 -6
  233. package/build/styles/css/navbar.css +62 -62
  234. package/build/styles/css/navs.css +2 -2
  235. package/build/styles/css/neptune.css +274 -328
  236. package/build/styles/css/panels.css +9 -9
  237. package/build/styles/css/popovers.css +13 -13
  238. package/build/styles/css/select.css +1 -1
  239. package/build/styles/css/sequences.css +6 -6
  240. package/build/styles/css/table.css +6 -6
  241. package/build/styles/css/utilities.css +8 -20
  242. package/build/styles/css/wells.css +4 -18
  243. package/build/styles/dateInput/DateInput.css +1 -1
  244. package/build/styles/definitionList/DefinitionList.css +2 -2
  245. package/build/styles/drawer/Drawer.css +2 -2
  246. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  247. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +2 -0
  248. package/build/styles/field/Field.css +19 -3
  249. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  250. package/build/styles/inputs/Input.css +3 -3
  251. package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +2 -2
  252. package/build/styles/inputs/SelectInput/SelectInput.css +2 -2
  253. package/build/styles/inputs/TextArea.css +3 -3
  254. package/build/styles/less/legacy-variables.less +34 -47
  255. package/build/styles/main.css +350 -402
  256. package/build/styles/modal/Modal.css +7 -20
  257. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  258. package/build/styles/popover/Popover.css +3 -3
  259. package/build/styles/promoCard/PromoCard.css +1 -1
  260. package/build/styles/prompt/ActionPrompt/ActionPrompt.css +1 -1
  261. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +1 -1
  262. package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -1
  263. package/build/styles/props/custom-media.css +23 -11
  264. package/build/styles/snackbar/Snackbar.css +2 -2
  265. package/build/styles/stepper/Stepper.css +2 -2
  266. package/build/styles/styles/less/accordion.css +4 -4
  267. package/build/styles/styles/less/button-groups.css +6 -6
  268. package/build/styles/styles/less/buttons.css +1 -1
  269. package/build/styles/styles/less/circles.css +1 -1
  270. package/build/styles/styles/less/column-layout.css +4 -4
  271. package/build/styles/styles/less/decision.css +4 -4
  272. package/build/styles/styles/less/dropdowns.css +10 -10
  273. package/build/styles/styles/less/droppable.css +8 -8
  274. package/build/styles/styles/less/flex.css +13 -15
  275. package/build/styles/styles/less/footer.css +3 -3
  276. package/build/styles/styles/less/forms/bootstrap-forms.css +9 -9
  277. package/build/styles/styles/less/grid.css +19 -19
  278. package/build/styles/styles/less/input-groups.css +12 -12
  279. package/build/styles/styles/less/list-group.css +8 -8
  280. package/build/styles/styles/less/modals.css +6 -6
  281. package/build/styles/styles/less/navbar.css +62 -62
  282. package/build/styles/styles/less/navs.css +2 -2
  283. package/build/styles/styles/less/neptune.css +274 -328
  284. package/build/styles/styles/less/panels.css +9 -9
  285. package/build/styles/styles/less/popovers.css +13 -13
  286. package/build/styles/styles/less/select.css +1 -1
  287. package/build/styles/styles/less/sequences.css +6 -6
  288. package/build/styles/styles/less/table.css +6 -6
  289. package/build/styles/styles/less/utilities.css +8 -20
  290. package/build/styles/styles/less/wells.css +4 -18
  291. package/build/styles/styles/props/custom-media.css +1 -11
  292. package/build/styles/table/Table.css +1 -1
  293. package/build/styles/tabs/Tabs.css +2 -2
  294. package/build/styles/typeahead/Typeahead.css +1 -1
  295. package/build/summary/Summary.js +1 -1
  296. package/build/summary/Summary.mjs +1 -1
  297. package/build/table/Table.js +1 -1
  298. package/build/table/Table.mjs +1 -1
  299. package/build/table/TableRow.js +1 -1
  300. package/build/table/TableRow.mjs +1 -1
  301. package/build/table/TableStatusText.js +1 -1
  302. package/build/table/TableStatusText.mjs +1 -1
  303. package/build/tabs/Tabs.js +1 -1
  304. package/build/tabs/Tabs.mjs +1 -1
  305. package/build/tile/Tile.js +1 -1
  306. package/build/tile/Tile.mjs +1 -1
  307. package/build/title/Title.js +1 -1
  308. package/build/title/Title.mjs +1 -1
  309. package/build/tooltip/Tooltip.js +1 -1
  310. package/build/tooltip/Tooltip.mjs +1 -1
  311. package/build/typeahead/Typeahead.js +1 -1
  312. package/build/typeahead/Typeahead.mjs +1 -1
  313. package/build/types/avatarView/AvatarView.d.ts +1 -1
  314. package/build/types/avatarView/AvatarView.d.ts.map +1 -1
  315. package/build/types/avatarView/Dot.d.ts.map +1 -1
  316. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  317. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  318. package/build/types/common/circle/Circle.d.ts +1 -1
  319. package/build/types/common/circle/Circle.d.ts.map +1 -1
  320. package/build/types/common/hooks/useScreenSize.d.ts +1 -1
  321. package/build/types/common/hooks/useScreenSize.d.ts.map +1 -1
  322. package/build/types/common/index.d.ts +1 -1
  323. package/build/types/common/index.d.ts.map +1 -1
  324. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  325. package/build/types/decision/Decision.d.ts.map +1 -1
  326. package/build/types/field/Field.d.ts.map +1 -1
  327. package/build/types/field/Field.messages.d.ts +8 -0
  328. package/build/types/field/Field.messages.d.ts.map +1 -0
  329. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  330. package/build/types/index.d.ts +2 -1
  331. package/build/types/index.d.ts.map +1 -1
  332. package/build/types/inputs/TextArea.d.ts.map +1 -1
  333. package/build/types/inputs/contexts.d.ts +6 -0
  334. package/build/types/inputs/contexts.d.ts.map +1 -1
  335. package/build/types/logo/Logo.d.ts +1 -1
  336. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  337. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  338. package/build/types/test-utils/index.d.ts +2 -0
  339. package/build/types/test-utils/index.d.ts.map +1 -1
  340. package/build/upload/Upload.js +1 -1
  341. package/build/upload/Upload.mjs +1 -1
  342. package/build/upload/steps/completeStep/completeStep.js +1 -1
  343. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  344. package/build/upload/steps/processingStep/processingStep.js +1 -1
  345. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  346. package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
  347. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -1
  348. package/build/uploadInput/UploadInput.js +1 -1
  349. package/build/uploadInput/UploadInput.mjs +1 -1
  350. package/build/uploadInput/uploadButton/UploadButton.js +1 -1
  351. package/build/uploadInput/uploadButton/UploadButton.mjs +1 -1
  352. package/build/uploadInput/uploadButton/defaults.js +1 -1
  353. package/build/uploadInput/uploadButton/defaults.mjs +1 -1
  354. package/build/uploadInput/uploadItem/UploadItem.js +1 -1
  355. package/build/uploadInput/uploadItem/UploadItem.mjs +1 -1
  356. package/build/withDisplayFormat/WithDisplayFormat.js +1 -1
  357. package/build/withDisplayFormat/WithDisplayFormat.mjs +1 -1
  358. package/package.json +3 -3
  359. package/src/accordion/Accordion.css +1 -1
  360. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  361. package/src/avatarLayout/AvatarLayout.tsx +4 -0
  362. package/src/avatarView/AvatarView.css +4 -4
  363. package/src/avatarView/AvatarView.story.tsx +17 -13
  364. package/src/avatarView/AvatarView.tsx +5 -1
  365. package/src/avatarView/Dot.css +4 -4
  366. package/src/avatarView/Dot.less +6 -6
  367. package/src/avatarView/Dot.tsx +2 -0
  368. package/src/card/Card.css +2 -2
  369. package/src/carousel/Carousel.css +5 -5
  370. package/src/carousel/Carousel.less +3 -3
  371. package/src/circularButton/CircularButton.tsx +3 -2
  372. package/src/common/Option/Option.css +2 -4
  373. package/src/common/Option/Option.less +2 -4
  374. package/src/common/baseCard/BaseCard.css +1 -1
  375. package/src/common/bottomSheet/BottomSheet.tsx +2 -2
  376. package/src/common/circle/Circle.tsx +7 -3
  377. package/src/common/hooks/useLayout/useLayout.ts +1 -1
  378. package/src/common/hooks/useScreenSize.ts +1 -1
  379. package/src/common/index.ts +1 -1
  380. package/src/common/responsivePanel/ResponsivePanel.test.js +3 -2
  381. package/src/container/Container.css +3 -3
  382. package/src/criticalBanner/CriticalCommsBanner.css +1 -1
  383. package/src/dateInput/DateInput.css +1 -1
  384. package/src/dateLookup/DateLookup.tsx +1 -1
  385. package/src/decision/Decision.test.tsx +2 -1
  386. package/src/decision/Decision.tsx +2 -1
  387. package/src/definitionList/DefinitionList.css +2 -2
  388. package/src/definitionList/DefinitionList.less +2 -2
  389. package/src/drawer/Drawer.css +2 -2
  390. package/src/drawer/Drawer.less +4 -3
  391. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  392. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +43 -0
  393. package/src/expressiveMoneyInput/amountInput/AmountInput.css +2 -0
  394. package/src/expressiveMoneyInput/amountInput/AmountInput.less +2 -0
  395. package/src/expressiveMoneyInput/amountInput/AmountInput.tsx +1 -1
  396. package/src/field/Field.css +19 -3
  397. package/src/field/Field.less +17 -3
  398. package/src/field/Field.messages.ts +8 -0
  399. package/src/field/Field.story.tsx +5 -1
  400. package/src/field/Field.test.tsx +90 -0
  401. package/src/field/Field.tsx +84 -37
  402. package/src/flowNavigation/FlowNavigation.css +1 -1
  403. package/src/flowNavigation/FlowNavigation.less +2 -1
  404. package/src/flowNavigation/FlowNavigation.story.tsx +6 -3
  405. package/src/flowNavigation/FlowNavigation.test.js +1 -1
  406. package/src/flowNavigation/FlowNavigation.tsx +2 -1
  407. package/src/i18n/en.json +1 -0
  408. package/src/index.ts +1 -1
  409. package/src/inputs/Input.css +3 -3
  410. package/src/inputs/SelectInput/Options/SelectInputOptions.css +2 -2
  411. package/src/inputs/SelectInput/SelectInput.css +2 -2
  412. package/src/inputs/SelectInput/SelectInput.tsx +1 -1
  413. package/src/inputs/TextArea.css +3 -3
  414. package/src/inputs/TextArea.story.tsx +97 -0
  415. package/src/inputs/TextArea.test.story.tsx +142 -0
  416. package/src/inputs/TextArea.tsx +7 -2
  417. package/src/inputs/contexts.tsx +18 -1
  418. package/src/logo/Logo.tsx +1 -1
  419. package/src/main.css +350 -402
  420. package/src/modal/Modal.css +7 -20
  421. package/src/modal/Modal.less +7 -19
  422. package/src/modal/Modal.tsx +2 -2
  423. package/src/overlayHeader/OverlayHeader.css +1 -1
  424. package/src/overlayHeader/OverlayHeader.less +3 -2
  425. package/src/popover/Popover.css +3 -3
  426. package/src/popover/Popover.test.tsx +2 -1
  427. package/src/promoCard/PromoCard.css +1 -1
  428. package/src/prompt/ActionPrompt/ActionPrompt.css +1 -1
  429. package/src/prompt/ActionPrompt/ActionPrompt.less +1 -1
  430. package/src/prompt/ActionPrompt/ActionPrompt.test.tsx +37 -6
  431. package/src/prompt/ActionPrompt/ActionPrompt.tsx +3 -2
  432. package/src/prompt/CriticalBanner/CriticalBanner.css +1 -1
  433. package/src/prompt/CriticalBanner/CriticalBanner.less +2 -2
  434. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -1
  435. package/src/prompt/PrimitivePrompt/PrimitivePrompt.less +1 -1
  436. package/src/select/Select.test.tsx +1 -1
  437. package/src/snackbar/Snackbar.css +2 -2
  438. package/src/statusIcon/StatusIcon.tsx +3 -2
  439. package/src/stepper/Stepper.css +2 -2
  440. package/src/styles/less/accordion.css +4 -4
  441. package/src/styles/less/addons/_display-utilities.less +13 -27
  442. package/src/styles/less/button-groups.css +6 -6
  443. package/src/styles/less/buttons.css +1 -1
  444. package/src/styles/less/circles.css +1 -1
  445. package/src/styles/less/column-layout.css +4 -4
  446. package/src/styles/less/core/_typography-utilities.less +10 -22
  447. package/src/styles/less/core/_typography.less +28 -6
  448. package/src/styles/less/decision.css +4 -4
  449. package/src/styles/less/dropdowns.css +10 -10
  450. package/src/styles/less/droppable.css +8 -8
  451. package/src/styles/less/flex.css +13 -15
  452. package/src/styles/less/flex.less +1 -3
  453. package/src/styles/less/footer.css +3 -3
  454. package/src/styles/less/forms/bootstrap-forms.css +9 -9
  455. package/src/styles/less/forms/bootstrap-forms.less +1 -1
  456. package/src/styles/less/grid.css +19 -19
  457. package/src/styles/less/input-groups.css +12 -12
  458. package/src/styles/less/list-group.css +8 -8
  459. package/src/styles/less/modals.css +6 -6
  460. package/src/styles/less/modals.less +4 -4
  461. package/src/styles/less/navbar.css +62 -62
  462. package/src/styles/less/navbar.less +2 -2
  463. package/src/styles/less/navs.css +2 -2
  464. package/src/styles/less/neptune.bundle.less +1 -0
  465. package/src/styles/less/neptune.css +274 -328
  466. package/src/styles/less/panels.css +9 -9
  467. package/src/styles/less/popovers.css +13 -13
  468. package/src/styles/less/popovers.less +6 -6
  469. package/src/styles/less/select.css +1 -1
  470. package/src/styles/less/sequences.css +6 -6
  471. package/src/styles/less/table.css +6 -6
  472. package/src/styles/less/table.less +1 -1
  473. package/src/styles/less/utilities.css +8 -20
  474. package/src/styles/less/utilities.less +6 -14
  475. package/src/styles/less/wells.css +4 -18
  476. package/src/styles/less/wells.less +3 -5
  477. package/src/styles/props/custom-media.css +1 -11
  478. package/src/styles/variables/legacy-variables.less +4 -47
  479. package/src/table/Table.css +1 -1
  480. package/src/tabs/Tabs.css +2 -2
  481. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +1 -0
  482. package/src/typeahead/Typeahead.css +1 -1
  483. package/src/uploadInput/uploadItem/UploadItem.less +2 -2
  484. package/build/common/propsValues/breakpoint.js +0 -12
  485. package/build/common/propsValues/breakpoint.js.map +0 -1
  486. package/build/common/propsValues/breakpoint.mjs +0 -12
  487. package/build/common/propsValues/breakpoint.mjs.map +0 -1
  488. package/build/types/common/propsValues/breakpoint.d.ts +0 -9
  489. package/build/types/common/propsValues/breakpoint.d.ts.map +0 -1
  490. package/src/common/propsValues/breakpoint.ts +0 -8
package/src/avatarView/AvatarView.story.tsx CHANGED
@@ -30,7 +30,7 @@ type Story = StoryObj<typeof AvatarView>;
30
30
 
31
31
  const profileName1 = 'Wolter White';
32
32
  const profileName2 = 'Tyler Durden';
33
- const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
33
+ const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];
34
34
 
35
35
  const withComponentGrid = (Story: () => JSX.Element) => (
36
36
  <div
@@ -97,15 +97,19 @@ export const Badge: Story = {
97
97
  gap: '1em',
98
98
  display: 'grid',
99
99
  justifyContent: 'space-between',
100
- gridTemplate: 'auto auto / repeat(7, min-content)',
100
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
101
101
  }}
102
102
  >
103
103
  {sizes.map((size) => (
104
104
  <Body type="body-large-bold">{size}</Body>
105
105
  ))}
106
106
  {sizes.map((size, index) => (
107
- <AvatarView key={size} size={size} badge={{ flagCode: currencies[index] }}>
108
- {icons[index]}
107
+ <AvatarView
108
+ key={size}
109
+ size={size}
110
+ badge={{ flagCode: currencies[index % currencies.length] }}
111
+ >
112
+ {icons[index % icons.length]}
109
113
  </AvatarView>
110
114
  ))}
111
115
 
@@ -129,43 +133,43 @@ export const Badge: Story = {
129
133
 
130
134
  {sizes.map((size, index) => (
131
135
  <AvatarView key={size} size={size} badge={{ imgSrc: '../tapestry-01.png' }}>
132
- {icons[index]}
136
+ {icons[index % icons.length]}
133
137
  </AvatarView>
134
138
  ))}
135
139
 
136
140
  {sizes.map((size, index) => (
137
141
  <AvatarView key={size} size={size} badge={{ status: 'warning' }}>
138
- {icons[index]}
142
+ {icons[index % icons.length]}
139
143
  </AvatarView>
140
144
  ))}
141
145
 
142
146
  {sizes.map((size, index) => (
143
147
  <AvatarView key={size} size={size} badge={{ status: 'neutral' }}>
144
- {icons[index]}
148
+ {icons[index % icons.length]}
145
149
  </AvatarView>
146
150
  ))}
147
151
 
148
152
  {sizes.map((size, index) => (
149
153
  <AvatarView key={size} size={size} badge={{ status: 'negative' }}>
150
- {icons[index]}
154
+ {icons[index % icons.length]}
151
155
  </AvatarView>
152
156
  ))}
153
157
 
154
158
  {sizes.map((size, index) => (
155
159
  <AvatarView key={size} size={size} badge={{ icon: <FastFlag /> }}>
156
- {icons[index]}
160
+ {icons[index % icons.length]}
157
161
  </AvatarView>
158
162
  ))}
159
163
 
160
164
  {sizes.map((size, index) => (
161
165
  <AvatarView key={size} size={size} badge={{ type: 'reference' }}>
162
- {icons[index]}
166
+ {icons[index % icons.length]}
163
167
  </AvatarView>
164
168
  ))}
165
169
 
166
170
  {sizes.map((size, index) => (
167
171
  <AvatarView key={size} size={size} badge={{ type: 'action' }}>
168
- {icons[index]}
172
+ {icons[index % icons.length]}
169
173
  </AvatarView>
170
174
  ))}
171
175
 
@@ -322,7 +326,7 @@ export const Images: Story = {
322
326
  gap: '1em',
323
327
  display: 'grid',
324
328
  justifyContent: 'space-between',
325
- gridTemplate: 'auto auto / repeat(7, min-content)',
329
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
326
330
  }}
327
331
  >
328
332
  {sizes.map((size) => (
@@ -376,7 +380,7 @@ export const Profiles: Story = {
376
380
  gap: '1em',
377
381
  display: 'grid',
378
382
  justifyContent: 'space-between',
379
- gridTemplate: 'auto auto / repeat(7, min-content)',
383
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
380
384
  }}
381
385
  >
382
386
  {sizes.map((size) => (
package/src/avatarView/AvatarView.tsx CHANGED
@@ -25,7 +25,7 @@ export type Props = {
25
25
  */
26
26
  profileName?: string | null;
27
27
  profileType?: ProfileTypeBusiness | ProfileTypePersonal;
28
- size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
28
+ size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
29
29
  badge?: AvatarViewBadgeProps;
30
30
  interactive?: boolean;
31
31
  selected?: boolean;
@@ -92,6 +92,8 @@ const MAP_BADGE_ASSET_SIZE = {
92
92
  48: 16,
93
93
  56: 24,
94
94
  72: 24,
95
+ 88: 24,
96
+ 96: 24,
95
97
  } satisfies Record<number, BadgeAssetsProps['size']>;
96
98
 
97
99
  /** Border width for `selected` state determined by avatar size */
@@ -103,6 +105,8 @@ const MAP_SELECTED_BORDER_WIDTH = {
103
105
  48: 2,
104
106
  56: 2,
105
107
  72: 2,
108
+ 88: 2,
109
+ 96: 2,
106
110
  };
107
111
 
108
112
  /** Certain sizes of AvatarView has a custom offset for badge */
package/src/avatarView/Dot.css CHANGED
@@ -4,10 +4,10 @@
4
4
  display: inline-block;
5
5
  }
6
6
  .np-dot-mask {
7
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
8
- mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
9
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
10
- mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
7
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
8
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
9
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
10
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
11
11
  }
12
12
  .np-dot-badge {
13
13
  position: absolute;
package/src/avatarView/Dot.less CHANGED
@@ -5,11 +5,11 @@
5
5
 
6
6
  &-mask {
7
7
  mask-image: radial-gradient(
8
- circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
9
- left calc(100% - calc(var(--np-dot-size) / 2)),
10
- transparent 0,
11
- transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
12
- black 0
8
+ circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left
9
+ calc(100% - calc(var(--np-dot-size) / 2)),
10
+ transparent 0,
11
+ transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
12
+ black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px)
13
13
  );
14
14
  }
15
15
 
@@ -19,7 +19,7 @@
19
19
  height: var(--np-dot-size);
20
20
  border-radius: var(--radius-full);
21
21
  right: 0;
22
-
22
+
23
23
  &-notification {
24
24
  background-color: var(--color-sentiment-negative);
25
25
  }
package/src/avatarView/Dot.tsx CHANGED
@@ -18,6 +18,8 @@ const MAP_STYLE_CONFIG = {
18
18
  48: { size: 14, offset: 2 },
19
19
  56: { size: 16, offset: 3 },
20
20
  72: { size: 20, offset: 3 },
21
+ 88: { size: 24, offset: 4 },
22
+ 96: { size: 24, offset: 4 },
21
23
  };
22
24
 
23
25
  export default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {
package/src/card/Card.css CHANGED
@@ -24,13 +24,13 @@
24
24
  .np-card--inactive .decision {
25
25
  cursor: default;
26
26
  }
27
- @media (min-width: 480px) {
27
+ @media (min-width: 320.02px) {
28
28
  .np-card--has-icon .np-card__content {
29
29
  padding: 24px 72px;
30
30
  padding: var(--size-24) var(--size-72);
31
31
  }
32
32
  }
33
- @media (min-width: 480px) {
33
+ @media (min-width: 320.02px) {
34
34
  .np-card--has-icon .np-card__divider--expanded {
35
35
  margin: 0 72px;
36
36
  margin: 0 var(--size-72);
package/src/carousel/Carousel.css CHANGED
@@ -13,7 +13,7 @@
13
13
  padding: 8px;
14
14
  padding: var(--size-8);
15
15
  }
16
- @media (max-width: 767px) {
16
+ @media (max-width: 839.98px) {
17
17
  .carousel {
18
18
  gap: 8px;
19
19
  gap: var(--size-8);
@@ -51,14 +51,14 @@
51
51
  -webkit-scroll-snap-align: center;
52
52
  transition: all 0.4s !important;
53
53
  }
54
- @media (min-width: 1200px) {
54
+ @media (min-width: 1160px) {
55
55
  .carousel__card {
56
56
  min-width: 280px;
57
57
  width: 280px;
58
58
  height: 280px;
59
59
  }
60
60
  }
61
- @media (min-width: 768px) {
61
+ @media (min-width: 840px) {
62
62
  .carousel-wrapper {
63
63
  overflow: visible;
64
64
  }
@@ -67,14 +67,14 @@
67
67
  margin: 0 calc(-1 * var(--size-8));
68
68
  }
69
69
  }
70
- @media (max-width: 1199px) {
70
+ @media (max-width: 1159.98px) {
71
71
  .carousel__card {
72
72
  min-width: 242px;
73
73
  width: 242px;
74
74
  height: 242px;
75
75
  }
76
76
  }
77
- @media (max-width: 767px) {
77
+ @media (max-width: 839.98px) {
78
78
  .carousel__card {
79
79
  min-width: 336px;
80
80
  width: 336px;
package/src/carousel/Carousel.less CHANGED
@@ -51,7 +51,7 @@
51
51
  transition: all 0.4s !important;
52
52
  }
53
53
 
54
- @media (--screen-xl) {
54
+ @media (--screen-lg) {
55
55
  .carousel__card {
56
56
  min-width: 280px;
57
57
  width: 280px;
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
 
73
- @media (--screen-lg-max) {
73
+ @media (--screen-md-max) {
74
74
  .carousel__card {
75
75
  min-width: 242px;
76
76
  width: 242px;
@@ -132,4 +132,4 @@
132
132
  .carousel__indicator--selected:hover {
133
133
  background: var(--color-interactive-primary);
134
134
  width: var(--size-24);
135
- }
135
+ }
package/src/circularButton/CircularButton.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import { clsx } from 'clsx';
2
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
3
 
3
4
  import Body from '../body/Body';
4
- import { Breakpoint, ControlType, Priority, Typography } from '../common';
5
+ import { ControlType, Priority, Typography } from '../common';
5
6
  import IconButton, { IconButtonProps } from '../iconButton';
6
7
  import { useMedia } from '../common/hooks/useMedia';
7
8
 
@@ -34,7 +35,7 @@ const CircularButton = ({
34
35
  priority = Priority.PRIMARY,
35
36
  type = 'default',
36
37
  }: CircularButtonProps) => {
37
- const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
38
+ const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
38
39
  return (
39
40
  <label
40
41
  className={clsx(
package/src/common/Option/Option.css CHANGED
@@ -92,7 +92,7 @@ button.np-option {
92
92
  max-width: none;
93
93
  width: auto;
94
94
  }
95
- @media (min-width: 576px) {
95
+ @media (min-width: 600px) {
96
96
  .np-theme-personal .np-option {
97
97
  border-radius: 10px;
98
98
  border-radius: var(--radius-small);
@@ -109,13 +109,11 @@ button.np-option {
109
109
  max-width: -moz-fit-content;
110
110
  max-width: fit-content;
111
111
  }
112
- @media (max-width: 480px) {
112
+ @media (max-width: 320px) {
113
113
  .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
114
114
  margin-left: 16px;
115
115
  margin-left: var(--size-16);
116
116
  }
117
- }
118
- @media (max-width: 320px) {
119
117
  .np-theme-personal .np-option-additional-content {
120
118
  margin-top: -3px;
121
119
  }
package/src/common/Option/Option.less CHANGED
@@ -95,7 +95,7 @@ button.np-option {
95
95
  }
96
96
  }
97
97
  }
98
-
98
+
99
99
  .np-option-additional-content {
100
100
  margin-left: var(--size-80);
101
101
  margin-right: var(--size-16);
@@ -104,13 +104,11 @@ button.np-option {
104
104
  max-width:fit-content;
105
105
  }
106
106
 
107
- @media (max-width: 480px) {
107
+ @media (--screen-400-zoom) {
108
108
  :not(.np-option__sm-media) > .np-option-additional-content {
109
109
  margin-left: var(--size-16);
110
110
  }
111
- }
112
111
 
113
- @media (--screen-400-zoom) {
114
112
  .np-option-additional-content {
115
113
  margin-top: -3px;
116
114
  }
package/src/common/baseCard/BaseCard.css CHANGED
@@ -21,7 +21,7 @@
21
21
  box-sizing: border-box;
22
22
  overflow: hidden;
23
23
  }
24
- @media (min-width: 576px) {
24
+ @media (min-width: 600px) {
25
25
  .np-Card {
26
26
  max-width: var(--Card-max-width);
27
27
  }
package/src/common/bottomSheet/BottomSheet.tsx CHANGED
@@ -8,6 +8,7 @@ import {
8
8
  useRef,
9
9
  useState,
10
10
  } from 'react';
11
+ import { Breakpoint } from '@transferwise/neptune-tokens';
11
12
 
12
13
  import Dimmer from '../../dimmer';
13
14
  import Drawer from '../../drawer';
@@ -18,7 +19,6 @@ import { CommonProps } from '../commonProps';
18
19
  import { isServerSide } from '../domHelpers';
19
20
  import { useConditionalListener } from '../hooks';
20
21
  import { useMedia } from '../hooks/useMedia';
21
- import { Breakpoint } from '../propsValues/breakpoint';
22
22
  import { Position } from '../propsValues/position';
23
23
 
24
24
  const INITIAL_Y_POSITION = 0;
@@ -178,7 +178,7 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
178
178
  };
179
179
  }
180
180
 
181
- const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
181
+ const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
182
182
 
183
183
  const overlayId = useContext(OverlayIdContext);
184
184
 
package/src/common/circle/Circle.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import { HTMLAttributes, forwardRef } from 'react';
2
2
  import { clsx } from 'clsx';
3
+ import { Breakpoint } from '@transferwise/neptune-tokens';
3
4
  import { useMedia } from '../hooks/useMedia';
4
- import { Breakpoint } from '../propsValues/breakpoint';
5
5
 
6
- export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
6
+ export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
7
7
 
8
8
  export type Props = {
9
9
  /**
@@ -33,6 +33,8 @@ const MAP_ICON_SIZE = {
33
33
  48: 24,
34
34
  56: 28,
35
35
  72: 36,
36
+ 88: 44,
37
+ 96: 48,
36
38
  };
37
39
 
38
40
  /**
@@ -48,6 +50,8 @@ const MAP_FONT_SIZE = {
48
50
  48: 22,
49
51
  56: 26,
50
52
  72: 30,
53
+ 88: 36,
54
+ 96: 40,
51
55
  };
52
56
 
53
57
  const Circle = forwardRef(function Circle(
@@ -63,7 +67,7 @@ const Circle = forwardRef(function Circle(
63
67
  }: Props,
64
68
  ref,
65
69
  ) {
66
- const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
70
+ const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
67
71
  return (
68
72
  <Element
69
73
  {...props}
package/src/common/hooks/useLayout/useLayout.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Breakpoint } from '../../propsValues/breakpoint';
1
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
2
  import { useScreenSize } from '../useScreenSize';
3
3
 
4
4
  /**
package/src/common/hooks/useScreenSize.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Breakpoint } from '../propsValues/breakpoint';
1
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
2
 
3
3
  import { useMedia } from './useMedia';
4
4
 
package/src/common/index.ts CHANGED
@@ -4,8 +4,8 @@ export { addNoScrollClass, removeNoScrollClass } from './DOMOperations';
4
4
  export * from './theme';
5
5
  export * from './direction';
6
6
  // Props
7
+ export { Breakpoint } from '@transferwise/neptune-tokens';
7
8
  export * from './propsValues/control';
8
- export { Breakpoint } from './propsValues/breakpoint';
9
9
  export * from './propsValues/size';
10
10
  export * from './propsValues/typography';
11
11
  export * from './propsValues/width';
package/src/common/responsivePanel/ResponsivePanel.test.js CHANGED
@@ -1,6 +1,7 @@
1
- import { Breakpoint, Position } from '..';
1
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
+ import { Position } from '..';
2
3
  import { mockMatchMedia, render, screen } from '../../test-utils';
3
- import React, { forwardRef } from 'react';
4
+ import React from 'react';
4
5
 
5
6
  import ResponsivePanel from './ResponsivePanel';
6
7
 
package/src/container/Container.css CHANGED
@@ -9,17 +9,17 @@
9
9
  padding-inline: 16px;
10
10
  padding-inline: var(--wds-container-padding-inline);
11
11
  }
12
- @media (min-width: 576px) {
12
+ @media (min-width: 600px) {
13
13
  .wds-container {
14
14
  --wds-container-padding-inline: var(--size-16);
15
15
  }
16
16
  }
17
- @media (min-width: 768px) {
17
+ @media (min-width: 840px) {
18
18
  .wds-container {
19
19
  --wds-container-padding-inline: var(--size-32);
20
20
  }
21
21
  }
22
- @media (min-width: 992px) {
22
+ @media (min-width: 1160px) {
23
23
  .wds-container {
24
24
  --wds-container-padding-inline: var(--size-40);
25
25
  }
package/src/criticalBanner/CriticalCommsBanner.css CHANGED
@@ -44,7 +44,7 @@
44
44
  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
45
45
  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
46
46
  }
47
- @media (min-width: 768px) {
47
+ @media (min-width: 840px) {
48
48
  .critical-comms .alert-warning .alert__message,
49
49
  .critical-comms .alert-negative .alert__message,
50
50
  .critical-comms .alert-neutral .alert__message {
package/src/dateInput/DateInput.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .tw-date .tw-date--day {
10
10
  margin-bottom: 0;
11
11
  }
12
- @media (min-width: 576px) {
12
+ @media (min-width: 600px) {
13
13
  .np-theme-personal .tw-date label {
14
14
  margin-bottom: 0;
15
15
  }
package/src/dateLookup/DateLookup.tsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { createRef, PureComponent, KeyboardEvent } from 'react';
3
+ import { Breakpoint } from '@transferwise/neptune-tokens';
3
4
 
4
5
  import {
5
6
  Size,
6
7
  MonthFormat,
7
8
  Position,
8
- Breakpoint,
9
9
  type SizeSmall,
10
10
  type SizeMedium,
11
11
  type SizeLarge,
package/src/decision/Decision.test.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { Breakpoint, Size } from '../common';
1
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
+ import { Size } from '../common';
2
3
  import { mockMatchMedia } from '../mocks';
3
4
  import { render, screen } from '../test-utils';
4
5
 
package/src/decision/Decision.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { clsx } from 'clsx';
2
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
3
 
3
- import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
4
+ import { Size, SizeSmall, SizeMedium } from '../common';
4
5
  import { useScreenSize } from '../common/hooks/useScreenSize';
5
6
  import NavigationOption from '../navigationOption';
6
7
  import Tile from '../tile';
package/src/definitionList/DefinitionList.css CHANGED
@@ -9,12 +9,12 @@
9
9
  .tw-definition-list__button {
10
10
  margin-top: -50%;
11
11
  }
12
- @media (max-width: 576px) {
12
+ @media (max-width: 599.98px) {
13
13
  .tw-definition-list--right-aligned-desktop {
14
14
  justify-content: space-between;
15
15
  }
16
16
  }
17
- @media (min-width: 576px) {
17
+ @media (min-width: 600px) {
18
18
  .tw-definition-list--right-aligned-desktop {
19
19
  justify-content: flex-end;
20
20
  }
package/src/definitionList/DefinitionList.less CHANGED
@@ -15,13 +15,13 @@
15
15
  margin-top: -50%;
16
16
  }
17
17
 
18
- @media (max-width: 576px) {
18
+ @media (--screen-xs-max) {
19
19
  &--right-aligned-desktop {
20
20
  justify-content: space-between;
21
21
  }
22
22
  }
23
23
 
24
- @media (min-width: 576px) {
24
+ @media (--screen-sm) {
25
25
  &--right-aligned-desktop {
26
26
  justify-content: flex-end;
27
27
  }
package/src/drawer/Drawer.css CHANGED
@@ -9,7 +9,7 @@
9
9
  max-height: 100vh;
10
10
  max-height: 100dvh;
11
11
  }
12
- @media (max-width: 770px) {
12
+ @media (max-width: 839.98px) {
13
13
  .np-drawer {
14
14
  max-width: none;
15
15
  max-width: initial;
@@ -43,7 +43,7 @@
43
43
  padding: 0 16px;
44
44
  padding: 0 var(--size-16);
45
45
  }
46
- @media (min-width: 768px) {
46
+ @media (min-width: 840px) {
47
47
  .np-drawer .np-drawer-header,
48
48
  .np-drawer .np-drawer-footer {
49
49
  padding: 24px;
package/src/drawer/Drawer.less CHANGED
@@ -4,14 +4,15 @@
4
4
  justify-content: space-between;
5
5
  width: 100vw;
6
6
  max-width: 600px;
7
- @media (max-width: 770px) {
8
- max-width: unset;
9
- }
10
7
  height: 100vh;
11
8
  height: 100dvh;
12
9
  max-height: 100vh;
13
10
  max-height: 100dvh;
14
11
 
12
+ @media (--screen-sm-max) {
13
+ max-width: unset;
14
+ }
15
+
15
16
  .np-drawer-header {
16
17
  min-height: var(--size-56);
17
18
  padding: var(--size-24);
package/src/expressiveMoneyInput/ExpressiveMoneyInput.css CHANGED
@@ -21,6 +21,7 @@
21
21
  flex-grow: 1;
22
22
  text-align: right;
23
23
  background-color: transparent;
24
+ line-height: inherit;
24
25
  }
25
26
  .wds-amount-input-input:focus-visible {
26
27
  outline: none;
@@ -29,6 +30,7 @@
29
30
  flex-grow: 0;
30
31
  display: flex;
31
32
  align-items: center;
33
+ line-height: inherit;
32
34
  }
33
35
  .wds-currency-selector:disabled {
34
36
  opacity: 1 !important;
package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { fn } from 'storybook/test';
2
3
  import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
3
4
 
4
5
  const meta: Meta<typeof ExpressiveMoneyInput> = {
@@ -21,3 +22,45 @@ export const WithAutofocus: Story = {
21
22
  autoFocus: true,
22
23
  },
23
24
  };
25
+
26
+ const locales = [
27
+ { lang: 'en', label: 'English', currency: 'GBP' },
28
+ { lang: 'cs', label: 'Czech', currency: 'CZK' },
29
+ { lang: 'de', label: 'German', currency: 'EUR' },
30
+ { lang: 'es', label: 'Spanish', currency: 'EUR' },
31
+ { lang: 'fr', label: 'French', currency: 'EUR' },
32
+ { lang: 'hu', label: 'Hungarian', currency: 'HUF', supportsDecimals: false },
33
+ { lang: 'id', label: 'Indonesian', currency: 'IDR', supportsDecimals: false },
34
+ { lang: 'it', label: 'Italian', currency: 'EUR' },
35
+ { lang: 'ja', label: 'Japanese', currency: 'JPY', supportsDecimals: false },
36
+ { lang: 'nl', label: 'Dutch', currency: 'EUR' },
37
+ { lang: 'pl', label: 'Polish', currency: 'PLN' },
38
+ { lang: 'pt', label: 'Portuguese', currency: 'EUR' },
39
+ { lang: 'ro', label: 'Romanian', currency: 'RON' },
40
+ { lang: 'ru', label: 'Russian', currency: 'RUB' },
41
+ { lang: 'th', label: 'Thai', currency: 'THB' },
42
+ { lang: 'tr', label: 'Turkish', currency: 'TRY' },
43
+ { lang: 'uk', label: 'Ukrainian', currency: 'UAH' },
44
+ { lang: 'zh-CN', label: 'Simplified Chinese', currency: 'CNY' },
45
+ { lang: 'zh-HK', label: 'Traditional Chinese', currency: 'HKD' },
46
+ ];
47
+
48
+ /**
49
+ * Verifies that the .wds-text-display--forced class correctly overrides locale-specific
50
+ * font restrictions (ja, zh-HK, zh-CN, th) so amounts render in Wise Sans across all
51
+ * supported locales. Each row represents a different language context.
52
+ */
53
+ export const LocaleFontOverride = () => (
54
+ <>
55
+ {locales.map(({ lang, label, currency, supportsDecimals = true }) => (
56
+ <div key={lang} lang={lang} className="m-b-4">
57
+ <ExpressiveMoneyInput
58
+ label={`${label} locale (${lang})`}
59
+ currency={currency}
60
+ amount={supportsDecimals ? 1234.56 : 123456}
61
+ onAmountChange={fn()}
62
+ />
63
+ </div>
64
+ ))}
65
+ </>
66
+ );