@transferwise/components 0.0.0-experimental-c7da7db → 0.0.0-experimental-24a0a12

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 (434) hide show
  1. package/build/accordion/AccordionItem/AccordionItem.js +0 -1
  2. package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
  3. package/build/accordion/AccordionItem/AccordionItem.mjs +0 -1
  4. package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
  5. package/build/actionButton/ActionButton.js +0 -1
  6. package/build/actionButton/ActionButton.js.map +1 -1
  7. package/build/actionButton/ActionButton.mjs +0 -1
  8. package/build/actionButton/ActionButton.mjs.map +1 -1
  9. package/build/actionOption/ActionOption.js +0 -1
  10. package/build/actionOption/ActionOption.js.map +1 -1
  11. package/build/actionOption/ActionOption.mjs +0 -1
  12. package/build/actionOption/ActionOption.mjs.map +1 -1
  13. package/build/alert/Alert.js +0 -1
  14. package/build/alert/Alert.js.map +1 -1
  15. package/build/alert/Alert.mjs +0 -1
  16. package/build/alert/Alert.mjs.map +1 -1
  17. package/build/alert/inlineMarkdown/InlineMarkdown.js +0 -1
  18. package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
  19. package/build/alert/inlineMarkdown/InlineMarkdown.mjs +0 -1
  20. package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
  21. package/build/avatar/Avatar.js +0 -1
  22. package/build/avatar/Avatar.js.map +1 -1
  23. package/build/avatar/Avatar.mjs +0 -1
  24. package/build/avatar/Avatar.mjs.map +1 -1
  25. package/build/avatarView/AvatarView.js +0 -1
  26. package/build/avatarView/AvatarView.js.map +1 -1
  27. package/build/avatarView/AvatarView.mjs +0 -1
  28. package/build/avatarView/AvatarView.mjs.map +1 -1
  29. package/build/avatarWrapper/AvatarWrapper.js +0 -1
  30. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  31. package/build/avatarWrapper/AvatarWrapper.mjs +0 -1
  32. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  33. package/build/badge/Badge.js +0 -1
  34. package/build/badge/Badge.js.map +1 -1
  35. package/build/badge/Badge.mjs +0 -1
  36. package/build/badge/Badge.mjs.map +1 -1
  37. package/build/button/Button.js +0 -1
  38. package/build/button/Button.js.map +1 -1
  39. package/build/button/Button.mjs +0 -1
  40. package/build/button/Button.mjs.map +1 -1
  41. package/build/button/LegacyButton.js +0 -1
  42. package/build/button/LegacyButton.js.map +1 -1
  43. package/build/button/LegacyButton.mjs +0 -1
  44. package/build/button/LegacyButton.mjs.map +1 -1
  45. package/build/button/classMap.js +0 -1
  46. package/build/button/classMap.js.map +1 -1
  47. package/build/button/classMap.mjs +0 -1
  48. package/build/button/classMap.mjs.map +1 -1
  49. package/build/button/legacyUtils/legacyUtils.js +0 -1
  50. package/build/button/legacyUtils/legacyUtils.js.map +1 -1
  51. package/build/button/legacyUtils/legacyUtils.mjs +0 -1
  52. package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
  53. package/build/card/Card.js +0 -1
  54. package/build/card/Card.js.map +1 -1
  55. package/build/card/Card.mjs +0 -1
  56. package/build/card/Card.mjs.map +1 -1
  57. package/build/checkbox/Checkbox.js +0 -1
  58. package/build/checkbox/Checkbox.js.map +1 -1
  59. package/build/checkbox/Checkbox.mjs +0 -1
  60. package/build/checkbox/Checkbox.mjs.map +1 -1
  61. package/build/chevron/Chevron.js +0 -1
  62. package/build/chevron/Chevron.js.map +1 -1
  63. package/build/chevron/Chevron.mjs +0 -1
  64. package/build/chevron/Chevron.mjs.map +1 -1
  65. package/build/chips/Chip.js +0 -1
  66. package/build/chips/Chip.js.map +1 -1
  67. package/build/chips/Chip.mjs +0 -1
  68. package/build/chips/Chip.mjs.map +1 -1
  69. package/build/circularButton/CircularButton.js +0 -1
  70. package/build/circularButton/CircularButton.js.map +1 -1
  71. package/build/circularButton/CircularButton.mjs +0 -1
  72. package/build/circularButton/CircularButton.mjs.map +1 -1
  73. package/build/common/locale/index.js +4 -9
  74. package/build/common/locale/index.js.map +1 -1
  75. package/build/common/locale/index.mjs +4 -9
  76. package/build/common/locale/index.mjs.map +1 -1
  77. package/build/common/panel/Panel.js +56 -41
  78. package/build/common/panel/Panel.js.map +1 -1
  79. package/build/common/panel/Panel.mjs +61 -46
  80. package/build/common/panel/Panel.mjs.map +1 -1
  81. package/build/common/responsivePanel/ResponsivePanel.js +0 -1
  82. package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
  83. package/build/common/responsivePanel/ResponsivePanel.mjs +0 -1
  84. package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
  85. package/build/criticalBanner/CriticalCommsBanner.js +0 -1
  86. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  87. package/build/criticalBanner/CriticalCommsBanner.mjs +0 -1
  88. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  89. package/build/dateInput/DateInput.js +1 -1
  90. package/build/dateInput/DateInput.mjs +1 -1
  91. package/build/dateLookup/DateLookup.js +1 -1
  92. package/build/dateLookup/DateLookup.mjs +1 -1
  93. package/build/dateLookup/dateHeader/DateHeader.js +0 -1
  94. package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
  95. package/build/dateLookup/dateHeader/DateHeader.mjs +0 -1
  96. package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
  97. package/build/decision/Decision.js +0 -1
  98. package/build/decision/Decision.js.map +1 -1
  99. package/build/decision/Decision.mjs +0 -1
  100. package/build/decision/Decision.mjs.map +1 -1
  101. package/build/definitionList/DefinitionList.js +0 -1
  102. package/build/definitionList/DefinitionList.js.map +1 -1
  103. package/build/definitionList/DefinitionList.mjs +0 -1
  104. package/build/definitionList/DefinitionList.mjs.map +1 -1
  105. package/build/dimmer/Dimmer.js +0 -1
  106. package/build/dimmer/Dimmer.js.map +1 -1
  107. package/build/dimmer/Dimmer.mjs +0 -1
  108. package/build/dimmer/Dimmer.mjs.map +1 -1
  109. package/build/display/Display.js +0 -1
  110. package/build/display/Display.js.map +1 -1
  111. package/build/display/Display.mjs +0 -1
  112. package/build/display/Display.mjs.map +1 -1
  113. package/build/drawer/Drawer.js +0 -1
  114. package/build/drawer/Drawer.js.map +1 -1
  115. package/build/drawer/Drawer.mjs +0 -1
  116. package/build/drawer/Drawer.mjs.map +1 -1
  117. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +3 -4
  118. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
  119. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +3 -4
  120. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
  121. package/build/field/Field.js +5 -5
  122. package/build/field/Field.mjs +5 -5
  123. package/build/flowNavigation/FlowNavigation.js +0 -1
  124. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  125. package/build/flowNavigation/FlowNavigation.mjs +0 -1
  126. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  127. package/build/header/Header.js +0 -1
  128. package/build/header/Header.js.map +1 -1
  129. package/build/header/Header.mjs +0 -1
  130. package/build/header/Header.mjs.map +1 -1
  131. package/build/i18n/en.json +2 -0
  132. package/build/i18n/en.json.js +2 -0
  133. package/build/i18n/en.json.js.map +1 -1
  134. package/build/i18n/en.json.mjs +2 -0
  135. package/build/i18n/en.json.mjs.map +1 -1
  136. package/build/index.js +2 -0
  137. package/build/index.js.map +1 -1
  138. package/build/index.mjs +1 -0
  139. package/build/index.mjs.map +1 -1
  140. package/build/info/Info.js +0 -1
  141. package/build/info/Info.js.map +1 -1
  142. package/build/info/Info.mjs +0 -1
  143. package/build/info/Info.mjs.map +1 -1
  144. package/build/inlineAlert/InlineAlert.js +0 -1
  145. package/build/inlineAlert/InlineAlert.js.map +1 -1
  146. package/build/inlineAlert/InlineAlert.mjs +0 -1
  147. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  148. package/build/inputs/SearchInput.js +0 -1
  149. package/build/inputs/SearchInput.js.map +1 -1
  150. package/build/inputs/SearchInput.mjs +0 -1
  151. package/build/inputs/SearchInput.mjs.map +1 -1
  152. package/build/instructionsList/InstructionsList.js +0 -1
  153. package/build/instructionsList/InstructionsList.js.map +1 -1
  154. package/build/instructionsList/InstructionsList.mjs +0 -1
  155. package/build/instructionsList/InstructionsList.mjs.map +1 -1
  156. package/build/link/Link.js +0 -1
  157. package/build/link/Link.js.map +1 -1
  158. package/build/link/Link.mjs +0 -1
  159. package/build/link/Link.mjs.map +1 -1
  160. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +0 -1
  161. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -1
  162. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +0 -1
  163. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -1
  164. package/build/listItem/ListItem.js +0 -1
  165. package/build/listItem/ListItem.js.map +1 -1
  166. package/build/listItem/ListItem.mjs +0 -1
  167. package/build/listItem/ListItem.mjs.map +1 -1
  168. package/build/listItem/Prompt/ListItemPrompt.js +5 -5
  169. package/build/listItem/Prompt/ListItemPrompt.mjs +5 -5
  170. package/build/loader/Loader.js +0 -1
  171. package/build/loader/Loader.js.map +1 -1
  172. package/build/loader/Loader.mjs +0 -1
  173. package/build/loader/Loader.mjs.map +1 -1
  174. package/build/main.css +130 -51
  175. package/build/markdown/Markdown.js +0 -1
  176. package/build/markdown/Markdown.js.map +1 -1
  177. package/build/markdown/Markdown.mjs +0 -1
  178. package/build/markdown/Markdown.mjs.map +1 -1
  179. package/build/modal/Modal.js +0 -1
  180. package/build/modal/Modal.js.map +1 -1
  181. package/build/modal/Modal.mjs +0 -1
  182. package/build/modal/Modal.mjs.map +1 -1
  183. package/build/moneyInput/MoneyInput.js +12 -28
  184. package/build/moneyInput/MoneyInput.js.map +1 -1
  185. package/build/moneyInput/MoneyInput.mjs +14 -30
  186. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  187. package/build/moneyInput/currencyFormatting.js +2 -8
  188. package/build/moneyInput/currencyFormatting.js.map +1 -1
  189. package/build/moneyInput/currencyFormatting.mjs +4 -5
  190. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  191. package/build/navigationOption/NavigationOption.js +0 -1
  192. package/build/navigationOption/NavigationOption.js.map +1 -1
  193. package/build/navigationOption/NavigationOption.mjs +0 -1
  194. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  195. package/build/nudge/Nudge.js +0 -1
  196. package/build/nudge/Nudge.js.map +1 -1
  197. package/build/nudge/Nudge.mjs +0 -1
  198. package/build/nudge/Nudge.mjs.map +1 -1
  199. package/build/overlayHeader/OverlayHeader.js +0 -1
  200. package/build/overlayHeader/OverlayHeader.js.map +1 -1
  201. package/build/overlayHeader/OverlayHeader.mjs +0 -1
  202. package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
  203. package/build/phoneNumberInput/PhoneNumberInput.js +0 -1
  204. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  205. package/build/phoneNumberInput/PhoneNumberInput.mjs +0 -1
  206. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  207. package/build/popover/Popover.js +0 -1
  208. package/build/popover/Popover.js.map +1 -1
  209. package/build/popover/Popover.mjs +0 -1
  210. package/build/popover/Popover.mjs.map +1 -1
  211. package/build/processIndicator/ProcessIndicator.js +0 -1
  212. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  213. package/build/processIndicator/ProcessIndicator.mjs +0 -1
  214. package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
  215. package/build/progressBar/ProgressBar.js +0 -1
  216. package/build/progressBar/ProgressBar.js.map +1 -1
  217. package/build/progressBar/ProgressBar.mjs +0 -1
  218. package/build/progressBar/ProgressBar.mjs.map +1 -1
  219. package/build/promoCard/PromoCard.js +0 -1
  220. package/build/promoCard/PromoCard.js.map +1 -1
  221. package/build/promoCard/PromoCard.mjs +0 -1
  222. package/build/promoCard/PromoCard.mjs.map +1 -1
  223. package/build/promoCard/PromoCardIndicator.js +0 -1
  224. package/build/promoCard/PromoCardIndicator.js.map +1 -1
  225. package/build/promoCard/PromoCardIndicator.mjs +0 -1
  226. package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
  227. package/build/prompt/ActionPrompt/ActionPrompt.js +8 -41
  228. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  229. package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -41
  230. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  231. package/build/prompt/CriticalBanner/CriticalBanner.js +148 -0
  232. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
  233. package/build/prompt/CriticalBanner/CriticalBanner.mjs +146 -0
  234. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
  235. package/build/prompt/CriticalBanner/helpers.js +29 -0
  236. package/build/prompt/CriticalBanner/helpers.js.map +1 -0
  237. package/build/prompt/CriticalBanner/helpers.mjs +26 -0
  238. package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
  239. package/build/prompt/InfoPrompt/InfoPrompt.js +0 -1
  240. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  241. package/build/prompt/InfoPrompt/InfoPrompt.mjs +0 -1
  242. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  243. package/build/prompt/InlinePrompt/InlinePrompt.js +0 -1
  244. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  245. package/build/prompt/InlinePrompt/InlinePrompt.mjs +0 -1
  246. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  247. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +2 -0
  248. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
  249. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +2 -0
  250. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
  251. package/build/prompt/common/Expander/Expander.js +47 -0
  252. package/build/prompt/common/Expander/Expander.js.map +1 -0
  253. package/build/prompt/common/Expander/Expander.messages.js +17 -0
  254. package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
  255. package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
  256. package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
  257. package/build/prompt/common/Expander/Expander.mjs +44 -0
  258. package/build/prompt/common/Expander/Expander.mjs.map +1 -0
  259. package/build/prompt/helpers/promptMedia.js +52 -0
  260. package/build/prompt/helpers/promptMedia.js.map +1 -0
  261. package/build/prompt/helpers/promptMedia.mjs +50 -0
  262. package/build/prompt/helpers/promptMedia.mjs.map +1 -0
  263. package/build/radio/Radio.js +0 -1
  264. package/build/radio/Radio.js.map +1 -1
  265. package/build/radio/Radio.mjs +0 -1
  266. package/build/radio/Radio.mjs.map +1 -1
  267. package/build/segmentedControl/SegmentedControl.js +0 -1
  268. package/build/segmentedControl/SegmentedControl.js.map +1 -1
  269. package/build/segmentedControl/SegmentedControl.mjs +0 -1
  270. package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
  271. package/build/select/Select.js +0 -1
  272. package/build/select/Select.js.map +1 -1
  273. package/build/select/Select.mjs +0 -1
  274. package/build/select/Select.mjs.map +1 -1
  275. package/build/select/option/Option.js +0 -1
  276. package/build/select/option/Option.js.map +1 -1
  277. package/build/select/option/Option.mjs +0 -1
  278. package/build/select/option/Option.mjs.map +1 -1
  279. package/build/statusIcon/StatusIcon.js +0 -1
  280. package/build/statusIcon/StatusIcon.js.map +1 -1
  281. package/build/statusIcon/StatusIcon.mjs +0 -1
  282. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  283. package/build/stepper/Stepper.js +0 -1
  284. package/build/stepper/Stepper.js.map +1 -1
  285. package/build/stepper/Stepper.mjs +0 -1
  286. package/build/stepper/Stepper.mjs.map +1 -1
  287. package/build/sticky/Sticky.js +0 -1
  288. package/build/sticky/Sticky.js.map +1 -1
  289. package/build/sticky/Sticky.mjs +0 -1
  290. package/build/sticky/Sticky.mjs.map +1 -1
  291. package/build/styles/css/neptune.css +22 -22
  292. package/build/styles/less/neptune-tokens.less +4 -4
  293. package/build/styles/main.css +130 -51
  294. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +59 -0
  295. package/build/styles/prompt/common/Expander/Expander.css +8 -0
  296. package/build/styles/props/neptune-tokens.css +2 -2
  297. package/build/styles/styles/less/neptune.css +22 -22
  298. package/build/summary/Summary.js +0 -1
  299. package/build/summary/Summary.js.map +1 -1
  300. package/build/summary/Summary.mjs +0 -1
  301. package/build/summary/Summary.mjs.map +1 -1
  302. package/build/table/Table.js +0 -1
  303. package/build/table/Table.js.map +1 -1
  304. package/build/table/Table.mjs +0 -1
  305. package/build/table/Table.mjs.map +1 -1
  306. package/build/table/TableRow.js +0 -1
  307. package/build/table/TableRow.js.map +1 -1
  308. package/build/table/TableRow.mjs +0 -1
  309. package/build/table/TableRow.mjs.map +1 -1
  310. package/build/table/TableStatusText.js +0 -1
  311. package/build/table/TableStatusText.js.map +1 -1
  312. package/build/table/TableStatusText.mjs +0 -1
  313. package/build/table/TableStatusText.mjs.map +1 -1
  314. package/build/tabs/Tabs.js +0 -1
  315. package/build/tabs/Tabs.js.map +1 -1
  316. package/build/tabs/Tabs.mjs +0 -1
  317. package/build/tabs/Tabs.mjs.map +1 -1
  318. package/build/tile/Tile.js +0 -1
  319. package/build/tile/Tile.js.map +1 -1
  320. package/build/tile/Tile.mjs +0 -1
  321. package/build/tile/Tile.mjs.map +1 -1
  322. package/build/title/Title.js +0 -1
  323. package/build/title/Title.js.map +1 -1
  324. package/build/title/Title.mjs +0 -1
  325. package/build/title/Title.mjs.map +1 -1
  326. package/build/tooltip/Tooltip.js +50 -30
  327. package/build/tooltip/Tooltip.js.map +1 -1
  328. package/build/tooltip/Tooltip.mjs +51 -31
  329. package/build/tooltip/Tooltip.mjs.map +1 -1
  330. package/build/typeahead/Typeahead.js +5 -5
  331. package/build/typeahead/Typeahead.mjs +5 -5
  332. package/build/types/common/locale/index.d.ts +1 -1
  333. package/build/types/common/locale/index.d.ts.map +1 -1
  334. package/build/types/common/panel/Panel.d.ts.map +1 -1
  335. package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
  336. package/build/types/index.d.ts +2 -2
  337. package/build/types/index.d.ts.map +1 -1
  338. package/build/types/moneyInput/MoneyInput.d.ts +0 -6
  339. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  340. package/build/types/moneyInput/currencyFormatting.d.ts +3 -4
  341. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  342. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
  343. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  344. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +40 -0
  345. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
  346. package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
  347. package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
  348. package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
  349. package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
  350. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +8 -3
  351. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
  352. package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
  353. package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
  354. package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
  355. package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
  356. package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
  357. package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
  358. package/build/types/prompt/index.d.ts +2 -0
  359. package/build/types/prompt/index.d.ts.map +1 -1
  360. package/build/types/test-utils/index.d.ts +4 -0
  361. package/build/types/test-utils/index.d.ts.map +1 -1
  362. package/build/types/tooltip/Tooltip.d.ts.map +1 -1
  363. package/build/upload/Upload.js +0 -1
  364. package/build/upload/Upload.js.map +1 -1
  365. package/build/upload/Upload.mjs +0 -1
  366. package/build/upload/Upload.mjs.map +1 -1
  367. package/build/upload/steps/completeStep/completeStep.js +0 -1
  368. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  369. package/build/upload/steps/completeStep/completeStep.mjs +0 -1
  370. package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
  371. package/build/upload/steps/processingStep/processingStep.js +0 -1
  372. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  373. package/build/upload/steps/processingStep/processingStep.mjs +0 -1
  374. package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
  375. package/build/upload/steps/uploadImageStep/uploadImageStep.js +0 -1
  376. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  377. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +0 -1
  378. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  379. package/build/uploadInput/UploadInput.js +0 -1
  380. package/build/uploadInput/UploadInput.js.map +1 -1
  381. package/build/uploadInput/UploadInput.mjs +0 -1
  382. package/build/uploadInput/UploadInput.mjs.map +1 -1
  383. package/build/uploadInput/uploadButton/UploadButton.js +0 -1
  384. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  385. package/build/uploadInput/uploadButton/UploadButton.mjs +0 -1
  386. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  387. package/build/uploadInput/uploadButton/defaults.js +0 -1
  388. package/build/uploadInput/uploadButton/defaults.js.map +1 -1
  389. package/build/uploadInput/uploadButton/defaults.mjs +0 -1
  390. package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
  391. package/build/uploadInput/uploadItem/UploadItem.js +0 -1
  392. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  393. package/build/uploadInput/uploadItem/UploadItem.mjs +0 -1
  394. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  395. package/build/withDisplayFormat/WithDisplayFormat.js +0 -1
  396. package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
  397. package/build/withDisplayFormat/WithDisplayFormat.mjs +0 -1
  398. package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
  399. package/package.json +16 -14
  400. package/src/common/locale/index.test.ts +4 -13
  401. package/src/common/locale/index.ts +3 -9
  402. package/src/common/panel/Panel.tsx +50 -42
  403. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +0 -18
  404. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx +1 -119
  405. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +3 -4
  406. package/src/i18n/en.json +2 -0
  407. package/src/index.ts +2 -2
  408. package/src/main.css +130 -51
  409. package/src/main.less +3 -1
  410. package/src/moneyInput/MoneyInput.story.tsx +1 -10
  411. package/src/moneyInput/MoneyInput.test.story.tsx +1 -141
  412. package/src/moneyInput/MoneyInput.test.tsx +0 -45
  413. package/src/moneyInput/MoneyInput.tsx +3 -27
  414. package/src/moneyInput/currencyFormatting.ts +5 -11
  415. package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
  416. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
  417. package/src/prompt/CriticalBanner/CriticalBanner.css +59 -0
  418. package/src/prompt/CriticalBanner/CriticalBanner.less +64 -0
  419. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +645 -0
  420. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +285 -0
  421. package/src/prompt/CriticalBanner/CriticalBanner.tsx +194 -0
  422. package/src/prompt/CriticalBanner/helpers.ts +39 -0
  423. package/src/prompt/CriticalBanner/index.ts +2 -0
  424. package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +9 -2
  425. package/src/prompt/common/Expander/Expander.css +8 -0
  426. package/src/prompt/common/Expander/Expander.less +9 -0
  427. package/src/prompt/common/Expander/Expander.messages.ts +14 -0
  428. package/src/prompt/common/Expander/Expander.test.tsx +167 -0
  429. package/src/prompt/common/Expander/Expander.tsx +83 -0
  430. package/src/prompt/helpers/promptMedia.tsx +79 -0
  431. package/src/prompt/index.ts +4 -0
  432. package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
  433. package/src/styles/less/neptune.css +22 -22
  434. package/src/tooltip/Tooltip.tsx +45 -26
package/src/moneyInput/MoneyInput.test.story.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
- import { within, userEvent, fireEvent, expect } from 'storybook/test';
2
+ import { within, fireEvent } from 'storybook/test';
3
3
  import { allModes } from '../../.storybook/modes';
4
4
  import { lorem500 } from '../test-utils';
5
5
  import { Field } from '../field/Field';
@@ -102,143 +102,3 @@ export const SmoothScrollReset: Story = {
102
102
  },
103
103
  },
104
104
  };
105
-
106
- export const WithDecimals: Story = {
107
- args: {
108
- currencies: [],
109
- decimals: 4,
110
- amount: 1234.5678,
111
- },
112
- play: async ({ canvas }) => {
113
- const input = canvas.getByRole('textbox');
114
- await expect(input).toHaveValue('1,234.5678');
115
- await userEvent.clear(input);
116
- await userEvent.type(input, '99.123456789');
117
- await userEvent.tab();
118
- await expect(input).toHaveValue('99.1235');
119
- },
120
- };
121
-
122
- const eur = {
123
- value: 'EUR',
124
- label: 'EUR',
125
- note: 'Euro',
126
- currency: 'eur',
127
- } as const;
128
-
129
- const bhd = {
130
- value: 'BHD',
131
- label: 'BHD',
132
- note: 'Bahraini dinar',
133
- currency: 'bhd',
134
- } as const;
135
-
136
- const jpy = {
137
- value: 'JPY',
138
- label: 'JPY',
139
- note: 'Japanese yen',
140
- currency: 'jpy',
141
- } as const;
142
-
143
- const sharedProps = {
144
- currencies: [],
145
- onAmountChange: () => {},
146
- onCurrencyChange: () => {},
147
- } as const;
148
-
149
- function Row({
150
- label,
151
- amount,
152
- currency,
153
- decimals,
154
- }: {
155
- label: string;
156
- amount: number;
157
- currency: { value: string; label: string; note: string; currency: string };
158
- decimals: number;
159
- }) {
160
- return (
161
- <div
162
- style={{
163
- display: 'grid',
164
- gridTemplateColumns: '240px 1fr 1fr',
165
- gap: 12,
166
- alignItems: 'center',
167
- }}
168
- >
169
- <Body as="span" style={{ fontSize: 13, color: '#6b7280' }}>
170
- {label}
171
- </Body>
172
- <Field label={`No decimals prop (${currency.value})`}>
173
- <MoneyInput {...sharedProps} selectedCurrency={currency} amount={amount} />
174
- </Field>
175
- <Field label={`decimals={${decimals}} (${currency.value})`}>
176
- <MoneyInput
177
- {...sharedProps}
178
- selectedCurrency={currency}
179
- amount={amount}
180
- decimals={decimals}
181
- />
182
- </Field>
183
- </div>
184
- );
185
- }
186
-
187
- /**
188
- * Side-by-side comparison of formatAmount (no decimals prop) vs formatNumber (with decimals prop)
189
- * when decimals matches the currency default. Differences indicate a formatting parity issue.
190
- *
191
- * Problem 1: Trailing zero stripping — formatAmount strips ".00" for whole numbers,
192
- * formatNumber always pads to the requested precision.
193
- *
194
- * Problem 2: BHD decimal count — formatAmount renders 2 fractional digits for BHD,
195
- * but the currencyDecimals map says BHD has 3. formatNumber with decimals=3 shows 3.
196
- */
197
- export const DecimalsFormatParity: Story = {
198
- render: () => (
199
- <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
200
- <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
201
- EUR — whole numbers (trailing zero stripping)
202
- </Body>
203
- <Row label="amount=0" amount={0} currency={eur} decimals={2} />
204
- <Row label="amount=1" amount={1} currency={eur} decimals={2} />
205
- <Row label="amount=42" amount={42} currency={eur} decimals={2} />
206
- <Row label="amount=100" amount={100} currency={eur} decimals={2} />
207
- <Row label="amount=1000" amount={1000} currency={eur} decimals={2} />
208
- <Row label="amount=9999999" amount={9999999} currency={eur} decimals={2} />
209
-
210
- <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
211
- EUR — fractional amounts (should match)
212
- </Body>
213
- <Row label="amount=0.01" amount={0.01} currency={eur} decimals={2} />
214
- <Row label="amount=0.1" amount={0.1} currency={eur} decimals={2} />
215
- <Row label="amount=99.9" amount={99.9} currency={eur} decimals={2} />
216
- <Row label="amount=1234567.89" amount={1234567.89} currency={eur} decimals={2} />
217
-
218
- <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
219
- BHD — all amounts (formatAmount uses 2 digits, formatNumber uses 3)
220
- </Body>
221
- <Row label="amount=0" amount={0} currency={bhd} decimals={3} />
222
- <Row label="amount=0.001" amount={0.001} currency={bhd} decimals={3} />
223
- <Row label="amount=0.01" amount={0.01} currency={bhd} decimals={3} />
224
- <Row label="amount=0.1" amount={0.1} currency={bhd} decimals={3} />
225
- <Row label="amount=42" amount={42} currency={bhd} decimals={3} />
226
- <Row label="amount=99.9" amount={99.9} currency={bhd} decimals={3} />
227
- <Row label="amount=999.99" amount={999.99} currency={bhd} decimals={3} />
228
- <Row label="amount=1234567.89" amount={1234567.89} currency={bhd} decimals={3} />
229
-
230
- <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
231
- JPY — zero-decimal currency (should always match)
232
- </Body>
233
- <Row label="amount=0" amount={0} currency={jpy} decimals={0} />
234
- <Row label="amount=1" amount={1} currency={jpy} decimals={0} />
235
- <Row label="amount=1000" amount={1000} currency={jpy} decimals={0} />
236
- <Row label="amount=1234567" amount={1234567} currency={jpy} decimals={0} />
237
- </div>
238
- ),
239
- parameters: {
240
- chromatic: {
241
- disableSnapshot: true,
242
- },
243
- },
244
- };
package/src/moneyInput/MoneyInput.test.tsx CHANGED
@@ -253,45 +253,6 @@ describe('Money Input', () => {
253
253
  await userEvent.tab();
254
254
  expect(input).toHaveValue('1,234,567.65');
255
255
  });
256
-
257
- it('uses custom decimals when specified', async () => {
258
- customRender({ decimals: 4 });
259
- const input = getInput();
260
- await userEvent.clear(input);
261
- await userEvent.type(input, '1234.56789');
262
- await userEvent.tab();
263
- expect(input).toHaveValue('1,234.5679');
264
- });
265
-
266
- it('uses custom decimals of 0', async () => {
267
- customRender({ decimals: 0 });
268
- const input = getInput();
269
- await userEvent.clear(input);
270
- await userEvent.type(input, '1234.56');
271
- await userEvent.tab();
272
- expect(input).toHaveValue('1,235');
273
- });
274
-
275
- it('ignores custom decimals override for zero-decimal currencies like JPY', async () => {
276
- const jpyCurrency: CurrencyOptionItem = {
277
- value: 'JPY',
278
- label: 'JPY',
279
- note: 'Japanese yen',
280
- currency: 'jpy',
281
- };
282
- customRender({
283
- decimals: 4,
284
- selectedCurrency: jpyCurrency,
285
- currencies: [jpyCurrency],
286
- amount: 1234,
287
- });
288
- const input = getInput();
289
- expect(input).toHaveValue('1,234');
290
- await userEvent.clear(input);
291
- await userEvent.type(input, '5678.9999');
292
- await userEvent.tab();
293
- expect(input).toHaveValue('5,679');
294
- });
295
256
  });
296
257
 
297
258
  it('calls onAmountChange with parsed and formatted value', async () => {
@@ -302,12 +263,6 @@ describe('Money Input', () => {
302
263
  expect(initialProps.onAmountChange).toHaveBeenCalledWith(1000.65);
303
264
  });
304
265
 
305
- it('calls onAmountChange with value rounded to custom decimals', async () => {
306
- customRender({ decimals: 4, amount: null });
307
- await userEvent.type(getInput(), '12.34567');
308
- expect(initialProps.onAmountChange).toHaveBeenCalledWith(12.3457);
309
- });
310
-
311
266
  it('calls onAmountChange when input value is empty', async () => {
312
267
  customRender();
313
268
  await userEvent.clear(getInput());
package/src/moneyInput/MoneyInput.tsx CHANGED
@@ -24,7 +24,7 @@ import {
24
24
  import Title from '../title';
25
25
 
26
26
  import messages from './MoneyInput.messages';
27
- import { formatAmount, formatNumber, getCurrencyDecimals, parseAmount } from './currencyFormatting';
27
+ import { formatAmount, parseAmount } from './currencyFormatting';
28
28
  import withId from '../withId';
29
29
 
30
30
  export interface CurrencyOptionItem {
@@ -48,34 +48,24 @@ const formatAmountIfSet = ({
48
48
  amount,
49
49
  currency,
50
50
  locale,
51
- decimals,
52
51
  }: {
53
52
  amount: number | null | undefined;
54
53
  currency: string;
55
54
  locale: string;
56
- decimals?: number;
57
55
  }) => {
58
- if (typeof amount !== 'number') {
59
- return '';
60
- }
61
- if (decimals != null && getCurrencyDecimals(currency) !== 0) {
62
- return formatNumber(amount, locale, decimals);
63
- }
64
- return formatAmount(amount, currency, locale);
56
+ return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
65
57
  };
66
58
 
67
59
  const parseNumber = ({
68
60
  amount,
69
61
  currency,
70
62
  locale,
71
- decimals,
72
63
  }: {
73
64
  amount: string;
74
65
  currency: string;
75
66
  locale: string;
76
- decimals?: number;
77
67
  }) => {
78
- return parseAmount(amount, currency, locale, decimals);
68
+ return parseAmount(amount, currency, locale);
79
69
  };
80
70
 
81
71
  const allowedInputKeys = new Set([
@@ -112,12 +102,6 @@ export interface MoneyInputProps extends WrappedComponentProps {
112
102
  onCustomAction?: () => void;
113
103
  classNames?: Record<string, string>;
114
104
  selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
115
- /**
116
- * Specify the number of decimal places to format the amount. When not specified, the number of
117
- * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
118
- * This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
119
- */
120
- decimals?: number;
121
105
  }
122
106
 
123
107
  export type MoneyInputPropsWithInputAttributes = MoneyInputProps &
@@ -149,7 +133,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
149
133
  amount: props.amount,
150
134
  currency: props.selectedCurrency.currency,
151
135
  locale: props.intl.locale,
152
- decimals: props.decimals,
153
136
  }),
154
137
  locale: props.intl.locale,
155
138
  };
@@ -164,7 +147,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
164
147
  amount: nextProps.amount,
165
148
  currency: nextProps.selectedCurrency.currency,
166
149
  locale: nextProps.intl.locale,
167
- decimals: nextProps.decimals,
168
150
  }),
169
151
  });
170
152
  }
@@ -192,7 +174,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
192
174
  amount: paste,
193
175
  currency: this.props.selectedCurrency.currency,
194
176
  locale,
195
- decimals: this.props.decimals,
196
177
  });
197
178
 
198
179
  if (isNumberOrNull(parsed)) {
@@ -201,7 +182,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
201
182
  amount: parsed,
202
183
  currency: this.props.selectedCurrency.currency,
203
184
  locale,
204
- decimals: this.props.decimals,
205
185
  }),
206
186
  });
207
187
  this.props.onAmountChange?.(parsed);
@@ -221,7 +201,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
221
201
  amount: value,
222
202
  currency: this.props.selectedCurrency.currency,
223
203
  locale: this.state.locale,
224
- decimals: this.props.decimals,
225
204
  });
226
205
  if (isNumberOrNull(parsed)) {
227
206
  this.props.onAmountChange?.(parsed);
@@ -269,7 +248,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
269
248
  amount: previousState.formattedAmount,
270
249
  currency: this.props.selectedCurrency.currency,
271
250
  locale: previousState.locale,
272
- decimals: this.props.decimals,
273
251
  });
274
252
  if (!isNumberOrNull(parsed)) {
275
253
  return {
@@ -281,7 +259,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
281
259
  amount: parsed,
282
260
  currency: this.props.selectedCurrency.currency,
283
261
  locale: previousState.locale,
284
- decimals: this.props.decimals,
285
262
  }),
286
263
  };
287
264
  });
@@ -363,7 +340,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
363
340
  amount: this.props.placeholder,
364
341
  currency: this.props.selectedCurrency.currency,
365
342
  locale: this.state.locale,
366
- decimals: this.props.decimals,
367
343
  })}
368
344
  autoComplete="off"
369
345
  aria-describedby={selectedCurrencyElementId}
package/src/moneyInput/currencyFormatting.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { formatAmount, formatNumber } from '@transferwise/formatting';
1
+ import { formatAmount } from '@transferwise/formatting';
2
2
 
3
3
  import { DEFAULT_LOCALE } from '../common/locale';
4
4
 
5
- export { formatAmount, formatNumber };
5
+ export { formatAmount };
6
6
 
7
7
  // TODO: do not duplicate this between formatting and components
8
8
  const currencyDecimals: Record<string, number> = {
@@ -52,7 +52,7 @@ function getValidLocale(locale: string) {
52
52
  }
53
53
  }
54
54
 
55
- export function getCurrencyDecimals(currency: string) {
55
+ function getCurrencyDecimals(currency: string) {
56
56
  const upperCaseCurrency = currency.toUpperCase();
57
57
  return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
58
58
  }
@@ -61,16 +61,10 @@ function getDecimalSeparator(locale: string) {
61
61
  return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
62
62
  }
63
63
 
64
- export function parseAmount(
65
- number: string,
66
- currency: string,
67
- locale = DEFAULT_LOCALE,
68
- decimals?: number,
69
- ) {
64
+ export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
70
65
  const validLocale = getValidLocale(locale);
71
66
 
72
- const currencyDefault = getCurrencyDecimals(currency);
73
- const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);
67
+ const precision = getCurrencyDecimals(currency);
74
68
  const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
75
69
  const decimalSeparator = getDecimalSeparator(validLocale);
76
70
  const numberWithStandardDecimalSeparator = (number || '')
package/src/prompt/ActionPrompt/ActionPrompt.tsx CHANGED
@@ -1,31 +1,19 @@
1
1
  import { AriaAttributes, ReactNode, useId } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
 
4
- import StatusIcon from '../../statusIcon';
5
4
  import Body from '../../body';
6
5
  import Button from '../../button';
7
6
  import { Breakpoint, Typography } from '../../common';
8
- import AvatarView, { AvatarViewProps } from '../../avatarView';
9
- import Image from '../../image';
10
7
  import { ButtonProps } from '../../button/Button.types';
11
8
  import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
12
- import { BadgeAssetsProps } from '../../badge';
13
- import { GiftBox } from '@transferwise/icons';
14
9
  import { useScreenSize } from '../../common/hooks/useScreenSize';
10
+ import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
15
11
 
16
12
  export type ActionPromptProps = {
17
13
  title: ReactNode;
18
14
  description?: ReactNode;
19
15
  /** @default {} */
20
- media?: {
21
- imgSrc?: string;
22
- avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
23
- asset?: AvatarViewProps['children'];
24
- badge?: Pick<BadgeAssetsProps, 'flagCode'>;
25
- };
26
- 'aria-label'?: string;
27
- 'aria-hidden'?: boolean;
28
- };
16
+ media?: PromptMedia;
29
17
  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
30
18
  label: ButtonProps['children'];
31
19
  };
@@ -74,54 +62,13 @@ export const ActionPrompt = ({
74
62
  .filter(Boolean)
75
63
  .join(' ');
76
64
 
77
- const renderMedia = () => {
78
- if (media?.imgSrc) {
79
- return (
80
- <Image
81
- id={mediaId}
82
- src={media.imgSrc}
83
- className="wds-action-prompt--media-image"
84
- alt={media['aria-label'] ?? ''}
85
- />
86
- );
87
- }
88
- if (media?.avatar) {
89
- const badge = media.avatar.badge
90
- ? media.avatar.badge
91
- : sentiment === 'proposition'
92
- ? {}
93
- : { status: sentiment };
94
- return (
95
- <AvatarView
96
- {...media.avatar}
97
- badge={badge}
98
- aria-label={media['aria-label']}
99
- aria-hidden={media['aria-hidden']}
100
- id={mediaId}
101
- size={48}
102
- >
103
- {media.avatar.asset}
104
- </AvatarView>
105
- );
106
- }
107
- return sentiment === 'proposition' ? (
108
- <AvatarView
109
- id={mediaId}
110
- size={48}
111
- aria-label={media['aria-label']}
112
- aria-hidden={media['aria-hidden']}
113
- >
114
- <GiftBox />
115
- </AvatarView>
116
- ) : (
117
- <StatusIcon
118
- id={mediaId}
119
- size={48}
120
- sentiment={sentiment}
121
- iconLabel={media['aria-hidden'] ? null : media['aria-label']}
122
- />
123
- );
124
- };
65
+ const renderMedia = () =>
66
+ renderPromptMedia({
67
+ media,
68
+ sentiment,
69
+ mediaId,
70
+ imgClassName: 'wds-action-prompt--media-image',
71
+ });
125
72
 
126
73
  return (
127
74
  <PrimitivePrompt
package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx ADDED
@@ -0,0 +1,131 @@
1
+ import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
2
+ import * as CriticalBannerStories from './CriticalBanner.story';
3
+
4
+ <Meta title="Prompts/CriticalBanner/Accessibility" tags={['new']} />
5
+
6
+ # Accessibility
7
+
8
+ Under the hood, `CriticalBanner` is marked as `role="region"` for a section of content that users might want to navigate to directly.
9
+
10
+ By default, it's labelled by the `title` and described by the `description`.
11
+
12
+ ## Announcement Behavior
13
+
14
+ `CriticalBanner` is designed for critical messages that require immediate attention. It always uses **`aria-live="assertive"`** to immediately interrupt and announce changes to screen readers.
15
+
16
+ Unlike `InfoPrompt` which offers configurable politeness levels, `CriticalBanner` is always assertive because it communicates critical, time-sensitive information that users must be aware of immediately.
17
+
18
+ ### What Gets Announced
19
+
20
+ The component intelligently announces only **visible content**, respecting the collapsed/expanded state:
21
+
22
+ - **Collapsed with title**: Announces title only (description is hidden)
23
+ - **Collapsed without title**: Announces description only (visible up to 2 lines)
24
+ - **Expanded**: Announces title, description, and action button labels (all visible)
25
+
26
+ <Source
27
+ dark
28
+ code={`
29
+ // Collapsed with title - announces: "Your account requires verification"
30
+ <CriticalBanner
31
+ title="Your account requires verification"
32
+ description="Please verify your identity to continue"
33
+ action={{ label: "Verify now", onClick: handleVerify }}
34
+ expanded={false}
35
+ onToggle={handleToggle}
36
+ />
37
+
38
+ // Expanded - announces: "Your account requires verification | Please verify your identity to continue | Verify now | Learn more"
39
+
40
+ <CriticalBanner
41
+ title="Your account requires verification"
42
+ description="Please verify your identity to continue"
43
+ action={{ label: 'Verify now', onClick: handleVerify }}
44
+ actionSecondary={{ label: 'Learn more', onClick: handleLearnMore }}
45
+ expanded={true}
46
+ onToggle={handleToggle}
47
+ />
48
+
49
+ // Collapsed without title - announces: "Your verification is pending..."
50
+
51
+ <CriticalBanner
52
+ description="Your verification is pending. We'll notify you once complete."
53
+ expanded={false}
54
+ onToggle={handleToggle}
55
+ />
56
+ `}
57
+ />
58
+
59
+ ### When Announcements Trigger
60
+
61
+ Screen readers announce the banner content whenever:
62
+
63
+ - The banner first appears in the DOM
64
+ - The user toggles between collapsed and expanded states
65
+ - The content (title, description, or action labels) changes
66
+
67
+ ## Custom Labels
68
+
69
+ If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
70
+
71
+ <Source
72
+ dark
73
+ code={`
74
+ <CriticalBanner
75
+ title="Account suspended"
76
+ description="Unusual activity detected"
77
+ action={{ label: "Verify identity", onClick: handleVerify }}
78
+ aria-label="Critical: Your account has been suspended due to unusual activity. Please verify your identity immediately to restore access."
79
+ expanded={false}
80
+ onToggle={handleToggle}
81
+ />
82
+ `}
83
+ />
84
+
85
+ ## Media
86
+
87
+ Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
88
+
89
+ <Source
90
+ dark
91
+ code={`
92
+ import { Bank, AlertCircle } from '@transferwise/icons';
93
+
94
+ <CriticalBanner
95
+ title="Bank connection required"
96
+ description="Connect your bank account to continue"
97
+ media={{ avatar: { asset: <Bank title="Bank account" /> } }}
98
+ action={{ label: 'Connect now', onClick: handleConnect }}
99
+ expanded={false}
100
+ onToggle={handleToggle}
101
+ />
102
+
103
+ <CriticalBanner
104
+ title="Verification required"
105
+ description="We need to verify your identity"
106
+ media={{ avatar: { asset: <AlertCircle title="Alert" /> } }}
107
+ action={{ label: "Start verification", onClick: handleVerify }}
108
+ expanded={false}
109
+ onToggle={handleToggle}
110
+ />
111
+ `}
112
+ />
113
+
114
+ Alternatively, you can use `media['aria-label']` to provide a label for custom images:
115
+
116
+ <Source
117
+ dark
118
+ code={`
119
+ <CriticalBanner
120
+ title="Card blocked"
121
+ description="Your card has been blocked for security reasons"
122
+ media={{
123
+ imgSrc: '/wise-card.svg',
124
+ 'aria-label': 'Wise debit card'
125
+ }}
126
+ action={{ label: "Unblock card", onClick: handleUnblock }}
127
+ expanded={false}
128
+ onToggle={handleToggle}
129
+ />
130
+ `}
131
+ />
package/src/prompt/CriticalBanner/CriticalBanner.css ADDED
@@ -0,0 +1,59 @@
1
+ .wds-critical-banner {
2
+ --Prompt-padding: var(--size-16);
3
+ --Prompt-actions-gap: var(--size-8);
4
+ --Prompt-gap: var(--size-10) var(--size-16);
5
+ --Prompt-border-radius: 0;
6
+ /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
7
+ actions only go full-width below 480px (--screen-xs) */
8
+ }
9
+ .wds-critical-banner__mobile--collapsed {
10
+ max-height: 30vh;
11
+ }
12
+ .wds-critical-banner--media-image {
13
+ width: 48px;
14
+ width: var(--size-48);
15
+ height: 48px;
16
+ height: var(--size-48);
17
+ -o-object-fit: contain;
18
+ object-fit: contain;
19
+ }
20
+ .wds-critical-banner__title--collapsed {
21
+ display: -webkit-box;
22
+ -webkit-line-clamp: 2;
23
+ line-clamp: 2;
24
+ -webkit-box-orient: vertical;
25
+ overflow: hidden;
26
+ }
27
+ .wds-critical-banner__description--collapsed {
28
+ display: -webkit-box;
29
+ -webkit-line-clamp: 2;
30
+ line-clamp: 2;
31
+ -webkit-box-orient: vertical;
32
+ overflow: hidden;
33
+ }
34
+ .wds-critical-banner .wds-prompt__content-wrapper {
35
+ grid-template-columns: auto 1fr auto;
36
+ align-items: flex-start;
37
+ }
38
+ .wds-critical-banner__text-wrapper {
39
+ min-width: 0;
40
+ max-width: 480px;
41
+ height: 100%;
42
+ }
43
+ .wds-critical-banner .wds-prompt__actions-wrapper {
44
+ grid-column-start: 2;
45
+ grid-column-end: 3;
46
+ }
47
+ @media not (min-width: 480px) {
48
+ .wds-critical-banner .wds-prompt__actions-wrapper {
49
+ grid-column: span 3;
50
+ width: 100%;
51
+ }
52
+ }
53
+ @media not (min-width: 480px) {
54
+ .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
55
+ flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
56
+ min-width: -moz-fit-content;
57
+ min-width: fit-content;
58
+ }
59
+ }