@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-a322f91

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 (647) hide show
  1. package/build/accordion/AccordionItem/AccordionItem.js +2 -1
  2. package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
  3. package/build/accordion/AccordionItem/AccordionItem.mjs +2 -1
  4. package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
  5. package/build/actionButton/ActionButton.js +2 -1
  6. package/build/actionButton/ActionButton.js.map +1 -1
  7. package/build/actionButton/ActionButton.mjs +2 -1
  8. package/build/actionButton/ActionButton.mjs.map +1 -1
  9. package/build/actionOption/ActionOption.js +2 -1
  10. package/build/actionOption/ActionOption.js.map +1 -1
  11. package/build/actionOption/ActionOption.mjs +2 -1
  12. package/build/actionOption/ActionOption.mjs.map +1 -1
  13. package/build/alert/Alert.js +2 -1
  14. package/build/alert/Alert.js.map +1 -1
  15. package/build/alert/Alert.mjs +2 -1
  16. package/build/alert/Alert.mjs.map +1 -1
  17. package/build/alert/inlineMarkdown/InlineMarkdown.js +2 -1
  18. package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
  19. package/build/alert/inlineMarkdown/InlineMarkdown.mjs +2 -1
  20. package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
  21. package/build/avatar/Avatar.js +2 -1
  22. package/build/avatar/Avatar.js.map +1 -1
  23. package/build/avatar/Avatar.mjs +2 -1
  24. package/build/avatar/Avatar.mjs.map +1 -1
  25. package/build/avatarLayout/AvatarLayout.js +1 -1
  26. package/build/avatarLayout/AvatarLayout.mjs +1 -1
  27. package/build/avatarView/AvatarView.js +2 -1
  28. package/build/avatarView/AvatarView.js.map +1 -1
  29. package/build/avatarView/AvatarView.mjs +2 -1
  30. package/build/avatarView/AvatarView.mjs.map +1 -1
  31. package/build/avatarWrapper/AvatarWrapper.js +2 -1
  32. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  33. package/build/avatarWrapper/AvatarWrapper.mjs +2 -1
  34. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  35. package/build/badge/Badge.js +2 -1
  36. package/build/badge/Badge.js.map +1 -1
  37. package/build/badge/Badge.mjs +2 -1
  38. package/build/badge/Badge.mjs.map +1 -1
  39. package/build/badge/BadgeAssets.js +2 -1
  40. package/build/badge/BadgeAssets.js.map +1 -1
  41. package/build/badge/BadgeAssets.mjs +2 -1
  42. package/build/badge/BadgeAssets.mjs.map +1 -1
  43. package/build/button/Button.js +2 -1
  44. package/build/button/Button.js.map +1 -1
  45. package/build/button/Button.mjs +2 -1
  46. package/build/button/Button.mjs.map +1 -1
  47. package/build/button/LegacyButton.js +2 -1
  48. package/build/button/LegacyButton.js.map +1 -1
  49. package/build/button/LegacyButton.mjs +2 -1
  50. package/build/button/LegacyButton.mjs.map +1 -1
  51. package/build/button/classMap.js +2 -1
  52. package/build/button/classMap.js.map +1 -1
  53. package/build/button/classMap.mjs +2 -1
  54. package/build/button/classMap.mjs.map +1 -1
  55. package/build/button/legacyUtils/legacyUtils.js +2 -1
  56. package/build/button/legacyUtils/legacyUtils.js.map +1 -1
  57. package/build/button/legacyUtils/legacyUtils.mjs +2 -1
  58. package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
  59. package/build/card/Card.js +2 -1
  60. package/build/card/Card.js.map +1 -1
  61. package/build/card/Card.mjs +2 -1
  62. package/build/card/Card.mjs.map +1 -1
  63. package/build/checkbox/Checkbox.js +2 -1
  64. package/build/checkbox/Checkbox.js.map +1 -1
  65. package/build/checkbox/Checkbox.mjs +2 -1
  66. package/build/checkbox/Checkbox.mjs.map +1 -1
  67. package/build/chevron/Chevron.js +2 -1
  68. package/build/chevron/Chevron.js.map +1 -1
  69. package/build/chevron/Chevron.mjs +2 -1
  70. package/build/chevron/Chevron.mjs.map +1 -1
  71. package/build/chips/Chip.js +2 -1
  72. package/build/chips/Chip.js.map +1 -1
  73. package/build/chips/Chip.mjs +2 -1
  74. package/build/chips/Chip.mjs.map +1 -1
  75. package/build/circularButton/CircularButton.js +3 -2
  76. package/build/circularButton/CircularButton.js.map +1 -1
  77. package/build/circularButton/CircularButton.mjs +3 -2
  78. package/build/circularButton/CircularButton.mjs.map +1 -1
  79. package/build/common/bottomSheet/BottomSheet.js +2 -2
  80. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  81. package/build/common/bottomSheet/BottomSheet.mjs +2 -2
  82. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  83. package/build/common/circle/Circle.js +2 -2
  84. package/build/common/circle/Circle.js.map +1 -1
  85. package/build/common/circle/Circle.mjs +2 -2
  86. package/build/common/circle/Circle.mjs.map +1 -1
  87. package/build/common/hooks/useLayout/useLayout.js +6 -6
  88. package/build/common/hooks/useLayout/useLayout.js.map +1 -1
  89. package/build/common/hooks/useLayout/useLayout.mjs +1 -1
  90. package/build/common/hooks/useLayout/useLayout.mjs.map +1 -1
  91. package/build/common/hooks/useScreenSize.js.map +1 -1
  92. package/build/common/hooks/useScreenSize.mjs.map +1 -1
  93. package/build/common/locale/index.js +9 -4
  94. package/build/common/locale/index.js.map +1 -1
  95. package/build/common/locale/index.mjs +9 -4
  96. package/build/common/locale/index.mjs.map +1 -1
  97. package/build/common/panel/Panel.js +51 -55
  98. package/build/common/panel/Panel.js.map +1 -1
  99. package/build/common/panel/Panel.mjs +56 -60
  100. package/build/common/panel/Panel.mjs.map +1 -1
  101. package/build/common/responsivePanel/ResponsivePanel.js +2 -1
  102. package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
  103. package/build/common/responsivePanel/ResponsivePanel.mjs +2 -1
  104. package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
  105. package/build/criticalBanner/CriticalCommsBanner.js +2 -1
  106. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  107. package/build/criticalBanner/CriticalCommsBanner.mjs +2 -1
  108. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  109. package/build/dateInput/DateInput.js +2 -2
  110. package/build/dateInput/DateInput.mjs +2 -2
  111. package/build/dateLookup/DateLookup.js +3 -3
  112. package/build/dateLookup/DateLookup.js.map +1 -1
  113. package/build/dateLookup/DateLookup.mjs +2 -2
  114. package/build/dateLookup/DateLookup.mjs.map +1 -1
  115. package/build/dateLookup/dateHeader/DateHeader.js +2 -1
  116. package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
  117. package/build/dateLookup/dateHeader/DateHeader.mjs +2 -1
  118. package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
  119. package/build/dateLookup/dateTrigger/DateTrigger.js +1 -1
  120. package/build/dateLookup/dateTrigger/DateTrigger.mjs +1 -1
  121. package/build/decision/Decision.js +4 -3
  122. package/build/decision/Decision.js.map +1 -1
  123. package/build/decision/Decision.mjs +2 -1
  124. package/build/decision/Decision.mjs.map +1 -1
  125. package/build/definitionList/DefinitionList.js +2 -1
  126. package/build/definitionList/DefinitionList.js.map +1 -1
  127. package/build/definitionList/DefinitionList.mjs +2 -1
  128. package/build/definitionList/DefinitionList.mjs.map +1 -1
  129. package/build/dimmer/Dimmer.js +2 -1
  130. package/build/dimmer/Dimmer.js.map +1 -1
  131. package/build/dimmer/Dimmer.mjs +2 -1
  132. package/build/dimmer/Dimmer.mjs.map +1 -1
  133. package/build/display/Display.js +2 -1
  134. package/build/display/Display.js.map +1 -1
  135. package/build/display/Display.mjs +2 -1
  136. package/build/display/Display.mjs.map +1 -1
  137. package/build/drawer/Drawer.js +2 -1
  138. package/build/drawer/Drawer.js.map +1 -1
  139. package/build/drawer/Drawer.mjs +2 -1
  140. package/build/drawer/Drawer.mjs.map +1 -1
  141. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +5 -4
  142. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
  143. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +5 -4
  144. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
  145. package/build/field/Field.js +6 -6
  146. package/build/field/Field.mjs +6 -6
  147. package/build/flowNavigation/FlowNavigation.js +4 -3
  148. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  149. package/build/flowNavigation/FlowNavigation.mjs +2 -1
  150. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  151. package/build/header/Header.js +2 -1
  152. package/build/header/Header.js.map +1 -1
  153. package/build/header/Header.mjs +2 -1
  154. package/build/header/Header.mjs.map +1 -1
  155. package/build/i18n/en.json +0 -2
  156. package/build/i18n/en.json.js +0 -2
  157. package/build/i18n/en.json.js.map +1 -1
  158. package/build/i18n/en.json.mjs +0 -2
  159. package/build/i18n/en.json.mjs.map +1 -1
  160. package/build/image/Image.js +1 -1
  161. package/build/image/Image.mjs +1 -1
  162. package/build/index.js +2 -4
  163. package/build/index.js.map +1 -1
  164. package/build/index.mjs +1 -2
  165. package/build/index.mjs.map +1 -1
  166. package/build/info/Info.js +2 -1
  167. package/build/info/Info.js.map +1 -1
  168. package/build/info/Info.mjs +2 -1
  169. package/build/info/Info.mjs.map +1 -1
  170. package/build/inlineAlert/InlineAlert.js +2 -1
  171. package/build/inlineAlert/InlineAlert.js.map +1 -1
  172. package/build/inlineAlert/InlineAlert.mjs +2 -1
  173. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  174. package/build/inputs/SearchInput.js +2 -1
  175. package/build/inputs/SearchInput.js.map +1 -1
  176. package/build/inputs/SearchInput.mjs +2 -1
  177. package/build/inputs/SearchInput.mjs.map +1 -1
  178. package/build/inputs/SelectInput/SelectInput.js +2 -2
  179. package/build/inputs/SelectInput/SelectInput.js.map +1 -1
  180. package/build/inputs/SelectInput/SelectInput.mjs +1 -1
  181. package/build/inputs/SelectInput/SelectInput.mjs.map +1 -1
  182. package/build/instructionsList/InstructionsList.js +2 -1
  183. package/build/instructionsList/InstructionsList.js.map +1 -1
  184. package/build/instructionsList/InstructionsList.mjs +2 -1
  185. package/build/instructionsList/InstructionsList.mjs.map +1 -1
  186. package/build/link/Link.js +2 -1
  187. package/build/link/Link.js.map +1 -1
  188. package/build/link/Link.mjs +2 -1
  189. package/build/link/Link.mjs.map +1 -1
  190. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +2 -1
  191. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -1
  192. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +2 -1
  193. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -1
  194. package/build/listItem/ListItem.js +2 -1
  195. package/build/listItem/ListItem.js.map +1 -1
  196. package/build/listItem/ListItem.mjs +2 -1
  197. package/build/listItem/ListItem.mjs.map +1 -1
  198. package/build/listItem/Prompt/ListItemPrompt.js +6 -6
  199. package/build/listItem/Prompt/ListItemPrompt.mjs +6 -6
  200. package/build/loader/Loader.js +2 -1
  201. package/build/loader/Loader.js.map +1 -1
  202. package/build/loader/Loader.mjs +2 -1
  203. package/build/loader/Loader.mjs.map +1 -1
  204. package/build/logo/Logo.js +1 -1
  205. package/build/logo/Logo.js.map +1 -1
  206. package/build/logo/Logo.mjs +1 -1
  207. package/build/logo/Logo.mjs.map +1 -1
  208. package/build/main.css +351 -418
  209. package/build/markdown/Markdown.js +2 -1
  210. package/build/markdown/Markdown.js.map +1 -1
  211. package/build/markdown/Markdown.mjs +2 -1
  212. package/build/markdown/Markdown.mjs.map +1 -1
  213. package/build/modal/Modal.js +2 -1
  214. package/build/modal/Modal.js.map +1 -1
  215. package/build/modal/Modal.mjs +2 -1
  216. package/build/modal/Modal.mjs.map +1 -1
  217. package/build/moneyInput/MoneyInput.js +29 -13
  218. package/build/moneyInput/MoneyInput.js.map +1 -1
  219. package/build/moneyInput/MoneyInput.mjs +31 -15
  220. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  221. package/build/moneyInput/currencyFormatting.js +8 -2
  222. package/build/moneyInput/currencyFormatting.js.map +1 -1
  223. package/build/moneyInput/currencyFormatting.mjs +5 -4
  224. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  225. package/build/navigationOption/NavigationOption.js +2 -1
  226. package/build/navigationOption/NavigationOption.js.map +1 -1
  227. package/build/navigationOption/NavigationOption.mjs +2 -1
  228. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  229. package/build/nudge/Nudge.js +2 -1
  230. package/build/nudge/Nudge.js.map +1 -1
  231. package/build/nudge/Nudge.mjs +2 -1
  232. package/build/nudge/Nudge.mjs.map +1 -1
  233. package/build/overlayHeader/OverlayHeader.js +2 -1
  234. package/build/overlayHeader/OverlayHeader.js.map +1 -1
  235. package/build/overlayHeader/OverlayHeader.mjs +2 -1
  236. package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
  237. package/build/phoneNumberInput/PhoneNumberInput.js +2 -1
  238. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  239. package/build/phoneNumberInput/PhoneNumberInput.mjs +2 -1
  240. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  241. package/build/popover/Popover.js +2 -1
  242. package/build/popover/Popover.js.map +1 -1
  243. package/build/popover/Popover.mjs +2 -1
  244. package/build/popover/Popover.mjs.map +1 -1
  245. package/build/processIndicator/ProcessIndicator.js +2 -1
  246. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  247. package/build/processIndicator/ProcessIndicator.mjs +2 -1
  248. package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
  249. package/build/progressBar/ProgressBar.js +2 -1
  250. package/build/progressBar/ProgressBar.js.map +1 -1
  251. package/build/progressBar/ProgressBar.mjs +2 -1
  252. package/build/progressBar/ProgressBar.mjs.map +1 -1
  253. package/build/promoCard/PromoCard.js +2 -1
  254. package/build/promoCard/PromoCard.js.map +1 -1
  255. package/build/promoCard/PromoCard.mjs +2 -1
  256. package/build/promoCard/PromoCard.mjs.map +1 -1
  257. package/build/promoCard/PromoCardIndicator.js +2 -1
  258. package/build/promoCard/PromoCardIndicator.js.map +1 -1
  259. package/build/promoCard/PromoCardIndicator.mjs +2 -1
  260. package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
  261. package/build/prompt/ActionPrompt/ActionPrompt.js +43 -10
  262. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  263. package/build/prompt/ActionPrompt/ActionPrompt.mjs +42 -9
  264. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  265. package/build/prompt/InfoPrompt/InfoPrompt.js +2 -1
  266. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  267. package/build/prompt/InfoPrompt/InfoPrompt.mjs +2 -1
  268. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  269. package/build/prompt/InlinePrompt/InlinePrompt.js +2 -1
  270. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  271. package/build/prompt/InlinePrompt/InlinePrompt.mjs +2 -1
  272. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  273. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +0 -2
  274. package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
  275. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +0 -2
  276. package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
  277. package/build/provider/Provider.js +1 -1
  278. package/build/provider/Provider.mjs +1 -1
  279. package/build/radio/Radio.js +2 -1
  280. package/build/radio/Radio.js.map +1 -1
  281. package/build/radio/Radio.mjs +2 -1
  282. package/build/radio/Radio.mjs.map +1 -1
  283. package/build/segmentedControl/SegmentedControl.js +2 -1
  284. package/build/segmentedControl/SegmentedControl.js.map +1 -1
  285. package/build/segmentedControl/SegmentedControl.mjs +2 -1
  286. package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
  287. package/build/select/Select.js +3 -2
  288. package/build/select/Select.js.map +1 -1
  289. package/build/select/Select.mjs +3 -2
  290. package/build/select/Select.mjs.map +1 -1
  291. package/build/select/option/Option.js +2 -1
  292. package/build/select/option/Option.js.map +1 -1
  293. package/build/select/option/Option.mjs +2 -1
  294. package/build/select/option/Option.mjs.map +1 -1
  295. package/build/statusIcon/StatusIcon.js +3 -2
  296. package/build/statusIcon/StatusIcon.js.map +1 -1
  297. package/build/statusIcon/StatusIcon.mjs +3 -2
  298. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  299. package/build/stepper/Stepper.js +2 -1
  300. package/build/stepper/Stepper.js.map +1 -1
  301. package/build/stepper/Stepper.mjs +2 -1
  302. package/build/stepper/Stepper.mjs.map +1 -1
  303. package/build/sticky/Sticky.js +2 -1
  304. package/build/sticky/Sticky.js.map +1 -1
  305. package/build/sticky/Sticky.mjs +2 -1
  306. package/build/sticky/Sticky.mjs.map +1 -1
  307. package/build/styles/accordion/Accordion.css +1 -1
  308. package/build/styles/card/Card.css +2 -2
  309. package/build/styles/carousel/Carousel.css +5 -5
  310. package/build/styles/common/Option/Option.css +1 -1
  311. package/build/styles/common/baseCard/BaseCard.css +1 -1
  312. package/build/styles/criticalBanner/CriticalCommsBanner.css +1 -1
  313. package/build/styles/css/accordion.css +4 -4
  314. package/build/styles/css/button-groups.css +6 -6
  315. package/build/styles/css/buttons.css +1 -1
  316. package/build/styles/css/circles.css +1 -1
  317. package/build/styles/css/column-layout.css +4 -4
  318. package/build/styles/css/decision.css +4 -4
  319. package/build/styles/css/dropdowns.css +10 -10
  320. package/build/styles/css/droppable.css +8 -8
  321. package/build/styles/css/flex.css +14 -14
  322. package/build/styles/css/footer.css +3 -3
  323. package/build/styles/css/grid.css +19 -19
  324. package/build/styles/css/input-groups.css +12 -12
  325. package/build/styles/css/list-group.css +8 -8
  326. package/build/styles/css/modals.css +3 -3
  327. package/build/styles/css/navbar.css +62 -62
  328. package/build/styles/css/navs.css +2 -2
  329. package/build/styles/css/neptune.css +280 -269
  330. package/build/styles/css/panels.css +9 -9
  331. package/build/styles/css/popovers.css +13 -13
  332. package/build/styles/css/select.css +1 -1
  333. package/build/styles/css/sequences.css +6 -6
  334. package/build/styles/css/table.css +6 -6
  335. package/build/styles/css/utilities.css +4 -4
  336. package/build/styles/css/wells.css +4 -4
  337. package/build/styles/dateInput/DateInput.css +1 -1
  338. package/build/styles/definitionList/DefinitionList.css +2 -2
  339. package/build/styles/drawer/Drawer.css +1 -1
  340. package/build/styles/inputs/Input.css +3 -3
  341. package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +2 -2
  342. package/build/styles/inputs/SelectInput/SelectInput.css +2 -2
  343. package/build/styles/inputs/TextArea.css +3 -3
  344. package/build/styles/less/legacy-variables.less +34 -47
  345. package/build/styles/less/neptune-tokens.less +5 -4
  346. package/build/styles/logo/Logo.css +2 -2
  347. package/build/styles/main.css +351 -418
  348. package/build/styles/modal/Modal.css +5 -5
  349. package/build/styles/popover/Popover.css +3 -3
  350. package/build/styles/promoCard/PromoCard.css +1 -1
  351. package/build/styles/prompt/ActionPrompt/ActionPrompt.css +1 -1
  352. package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -1
  353. package/build/styles/props/custom-media.css +23 -11
  354. package/build/styles/props/neptune-tokens.css +3 -2
  355. package/build/styles/select/Select.css +2 -1
  356. package/build/styles/snackbar/Snackbar.css +2 -2
  357. package/build/styles/stepper/Stepper.css +2 -2
  358. package/build/styles/styles/less/accordion.css +4 -4
  359. package/build/styles/styles/less/button-groups.css +6 -6
  360. package/build/styles/styles/less/buttons.css +1 -1
  361. package/build/styles/styles/less/circles.css +1 -1
  362. package/build/styles/styles/less/column-layout.css +4 -4
  363. package/build/styles/styles/less/decision.css +4 -4
  364. package/build/styles/styles/less/dropdowns.css +10 -10
  365. package/build/styles/styles/less/droppable.css +8 -8
  366. package/build/styles/styles/less/flex.css +14 -14
  367. package/build/styles/styles/less/footer.css +3 -3
  368. package/build/styles/styles/less/forms/bootstrap-forms.css +9 -9
  369. package/build/styles/styles/less/grid.css +19 -19
  370. package/build/styles/styles/less/input-groups.css +12 -12
  371. package/build/styles/styles/less/list-group.css +8 -8
  372. package/build/styles/styles/less/modals.css +3 -3
  373. package/build/styles/styles/less/navbar.css +62 -62
  374. package/build/styles/styles/less/navs.css +2 -2
  375. package/build/styles/styles/less/neptune.css +280 -269
  376. package/build/styles/styles/less/panels.css +9 -9
  377. package/build/styles/styles/less/popovers.css +13 -13
  378. package/build/styles/styles/less/select.css +1 -1
  379. package/build/styles/styles/less/sequences.css +6 -6
  380. package/build/styles/styles/less/table.css +6 -6
  381. package/build/styles/styles/less/utilities.css +4 -4
  382. package/build/styles/styles/less/wells.css +4 -4
  383. package/build/styles/styles/props/custom-media.css +1 -11
  384. package/build/styles/table/Table.css +1 -1
  385. package/build/styles/tabs/Tabs.css +2 -2
  386. package/build/styles/typeahead/Typeahead.css +1 -1
  387. package/build/summary/Summary.js +2 -1
  388. package/build/summary/Summary.js.map +1 -1
  389. package/build/summary/Summary.mjs +2 -1
  390. package/build/summary/Summary.mjs.map +1 -1
  391. package/build/table/Table.js +2 -1
  392. package/build/table/Table.js.map +1 -1
  393. package/build/table/Table.mjs +2 -1
  394. package/build/table/Table.mjs.map +1 -1
  395. package/build/table/TableRow.js +2 -1
  396. package/build/table/TableRow.js.map +1 -1
  397. package/build/table/TableRow.mjs +2 -1
  398. package/build/table/TableRow.mjs.map +1 -1
  399. package/build/table/TableStatusText.js +2 -1
  400. package/build/table/TableStatusText.js.map +1 -1
  401. package/build/table/TableStatusText.mjs +2 -1
  402. package/build/table/TableStatusText.mjs.map +1 -1
  403. package/build/tabs/Tabs.js +2 -1
  404. package/build/tabs/Tabs.js.map +1 -1
  405. package/build/tabs/Tabs.mjs +2 -1
  406. package/build/tabs/Tabs.mjs.map +1 -1
  407. package/build/tile/Tile.js +2 -1
  408. package/build/tile/Tile.js.map +1 -1
  409. package/build/tile/Tile.mjs +2 -1
  410. package/build/tile/Tile.mjs.map +1 -1
  411. package/build/title/Title.js +2 -1
  412. package/build/title/Title.js.map +1 -1
  413. package/build/title/Title.mjs +2 -1
  414. package/build/title/Title.mjs.map +1 -1
  415. package/build/tooltip/Tooltip.js +31 -51
  416. package/build/tooltip/Tooltip.js.map +1 -1
  417. package/build/tooltip/Tooltip.mjs +32 -52
  418. package/build/tooltip/Tooltip.mjs.map +1 -1
  419. package/build/typeahead/Typeahead.js +6 -6
  420. package/build/typeahead/Typeahead.mjs +6 -6
  421. package/build/types/badge/BadgeAssets.d.ts.map +1 -1
  422. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  423. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  424. package/build/types/common/hooks/useScreenSize.d.ts +1 -1
  425. package/build/types/common/hooks/useScreenSize.d.ts.map +1 -1
  426. package/build/types/common/index.d.ts +1 -1
  427. package/build/types/common/index.d.ts.map +1 -1
  428. package/build/types/common/locale/index.d.ts +1 -1
  429. package/build/types/common/locale/index.d.ts.map +1 -1
  430. package/build/types/common/panel/Panel.d.ts.map +1 -1
  431. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  432. package/build/types/decision/Decision.d.ts.map +1 -1
  433. package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
  434. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  435. package/build/types/index.d.ts +4 -3
  436. package/build/types/index.d.ts.map +1 -1
  437. package/build/types/logo/Logo.d.ts +1 -1
  438. package/build/types/moneyInput/MoneyInput.d.ts +6 -0
  439. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  440. package/build/types/moneyInput/currencyFormatting.d.ts +4 -3
  441. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  442. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +11 -2
  443. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  444. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +3 -8
  445. package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
  446. package/build/types/prompt/index.d.ts +0 -2
  447. package/build/types/prompt/index.d.ts.map +1 -1
  448. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  449. package/build/types/test-utils/index.d.ts +0 -4
  450. package/build/types/test-utils/index.d.ts.map +1 -1
  451. package/build/types/tooltip/Tooltip.d.ts.map +1 -1
  452. package/build/upload/Upload.js +2 -1
  453. package/build/upload/Upload.js.map +1 -1
  454. package/build/upload/Upload.mjs +2 -1
  455. package/build/upload/Upload.mjs.map +1 -1
  456. package/build/upload/steps/completeStep/completeStep.js +2 -1
  457. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  458. package/build/upload/steps/completeStep/completeStep.mjs +2 -1
  459. package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
  460. package/build/upload/steps/processingStep/processingStep.js +2 -1
  461. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  462. package/build/upload/steps/processingStep/processingStep.mjs +2 -1
  463. package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
  464. package/build/upload/steps/uploadImageStep/uploadImageStep.js +2 -1
  465. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  466. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +2 -1
  467. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  468. package/build/uploadInput/UploadInput.js +2 -1
  469. package/build/uploadInput/UploadInput.js.map +1 -1
  470. package/build/uploadInput/UploadInput.mjs +2 -1
  471. package/build/uploadInput/UploadInput.mjs.map +1 -1
  472. package/build/uploadInput/uploadButton/UploadButton.js +2 -1
  473. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  474. package/build/uploadInput/uploadButton/UploadButton.mjs +2 -1
  475. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  476. package/build/uploadInput/uploadButton/defaults.js +2 -1
  477. package/build/uploadInput/uploadButton/defaults.js.map +1 -1
  478. package/build/uploadInput/uploadButton/defaults.mjs +2 -1
  479. package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
  480. package/build/uploadInput/uploadItem/UploadItem.js +2 -1
  481. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  482. package/build/uploadInput/uploadItem/UploadItem.mjs +2 -1
  483. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  484. package/build/withDisplayFormat/WithDisplayFormat.js +2 -1
  485. package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
  486. package/build/withDisplayFormat/WithDisplayFormat.mjs +2 -1
  487. package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
  488. package/package.json +20 -22
  489. package/src/accordion/Accordion.css +1 -1
  490. package/src/avatarView/AvatarView.story.tsx +1 -1
  491. package/src/avatarView/AvatarView.test.story.tsx +108 -1
  492. package/src/badge/BadgeAssets.tsx +2 -0
  493. package/src/card/Card.css +2 -2
  494. package/src/carousel/Carousel.css +5 -5
  495. package/src/circularButton/CircularButton.tsx +3 -2
  496. package/src/common/Option/Option.css +1 -1
  497. package/src/common/baseCard/BaseCard.css +1 -1
  498. package/src/common/bottomSheet/BottomSheet.tsx +2 -2
  499. package/src/common/circle/Circle.tsx +2 -2
  500. package/src/common/hooks/useLayout/useLayout.ts +1 -1
  501. package/src/common/hooks/useScreenSize.ts +1 -1
  502. package/src/common/index.ts +1 -1
  503. package/src/common/locale/index.test.ts +13 -4
  504. package/src/common/locale/index.ts +9 -3
  505. package/src/common/panel/Panel.tsx +56 -49
  506. package/src/common/responsivePanel/ResponsivePanel.test.js +3 -2
  507. package/src/criticalBanner/CriticalCommsBanner.css +1 -1
  508. package/src/dateInput/DateInput.css +1 -1
  509. package/src/dateLookup/DateLookup.tsx +1 -1
  510. package/src/decision/Decision.test.tsx +2 -1
  511. package/src/decision/Decision.tsx +2 -1
  512. package/src/definitionList/DefinitionList.css +2 -2
  513. package/src/definitionList/DefinitionList.less +2 -2
  514. package/src/drawer/Drawer.css +1 -1
  515. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +18 -0
  516. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx +119 -1
  517. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +4 -3
  518. package/src/flowNavigation/FlowNavigation.test.js +1 -1
  519. package/src/flowNavigation/FlowNavigation.tsx +2 -1
  520. package/src/i18n/en.json +0 -2
  521. package/src/index.ts +3 -3
  522. package/src/inputs/Input.css +3 -3
  523. package/src/inputs/SelectInput/Options/SelectInputOptions.css +2 -2
  524. package/src/inputs/SelectInput/SelectInput.css +2 -2
  525. package/src/inputs/SelectInput/SelectInput.tsx +1 -1
  526. package/src/inputs/TextArea.css +3 -3
  527. package/src/logo/Logo.css +2 -2
  528. package/src/logo/Logo.story.tsx +3 -3
  529. package/src/logo/Logo.tsx +1 -1
  530. package/src/main.css +351 -418
  531. package/src/main.less +1 -3
  532. package/src/modal/Modal.css +5 -5
  533. package/src/moneyInput/MoneyInput.story.tsx +10 -1
  534. package/src/moneyInput/MoneyInput.test.story.tsx +141 -1
  535. package/src/moneyInput/MoneyInput.test.tsx +45 -0
  536. package/src/moneyInput/MoneyInput.tsx +27 -3
  537. package/src/moneyInput/currencyFormatting.ts +11 -5
  538. package/src/popover/Popover.css +3 -3
  539. package/src/popover/Popover.test.tsx +2 -1
  540. package/src/promoCard/PromoCard.css +1 -1
  541. package/src/prompt/ActionPrompt/ActionPrompt.css +1 -1
  542. package/src/prompt/ActionPrompt/ActionPrompt.test.tsx +3 -3
  543. package/src/prompt/ActionPrompt/ActionPrompt.tsx +64 -10
  544. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -1
  545. package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +2 -9
  546. package/src/prompt/index.ts +0 -4
  547. package/src/section/Section.story.tsx +2 -8
  548. package/src/select/Select.css +2 -1
  549. package/src/select/Select.less +6 -5
  550. package/src/select/Select.test.story.tsx +59 -0
  551. package/src/select/Select.test.tsx +1 -1
  552. package/src/select/Select.tsx +1 -1
  553. package/src/sentimentSurface/SentimentSurface.story.tsx +17 -43
  554. package/src/snackbar/Snackbar.css +2 -2
  555. package/src/statusIcon/StatusIcon.test.tsx +0 -2
  556. package/src/statusIcon/StatusIcon.tsx +3 -2
  557. package/src/stepper/Stepper.css +2 -2
  558. package/src/styles/less/accordion.css +4 -4
  559. package/src/styles/less/button-groups.css +6 -6
  560. package/src/styles/less/buttons.css +1 -1
  561. package/src/styles/less/circles.css +1 -1
  562. package/src/styles/less/column-layout.css +4 -4
  563. package/src/styles/less/decision.css +4 -4
  564. package/src/styles/less/dropdowns.css +10 -10
  565. package/src/styles/less/droppable.css +8 -8
  566. package/src/styles/less/flex.css +14 -14
  567. package/src/styles/less/footer.css +3 -3
  568. package/src/styles/less/forms/bootstrap-forms.css +9 -9
  569. package/src/styles/less/forms/bootstrap-forms.less +1 -1
  570. package/src/styles/less/grid.css +19 -19
  571. package/src/styles/less/input-groups.css +12 -12
  572. package/src/styles/less/list-group.css +8 -8
  573. package/src/styles/less/modals.css +3 -3
  574. package/src/styles/less/navbar.css +62 -62
  575. package/src/styles/less/navbar.less +2 -2
  576. package/src/styles/less/navs.css +2 -2
  577. package/src/styles/less/neptune.bundle.less +1 -0
  578. package/src/styles/less/neptune.css +280 -269
  579. package/src/styles/less/panels.css +9 -9
  580. package/src/styles/less/popovers.css +13 -13
  581. package/src/styles/less/select.css +1 -1
  582. package/src/styles/less/sequences.css +6 -6
  583. package/src/styles/less/table.css +6 -6
  584. package/src/styles/less/table.less +1 -1
  585. package/src/styles/less/utilities.css +4 -4
  586. package/src/styles/less/wells.css +4 -4
  587. package/src/styles/props/custom-media.css +1 -11
  588. package/src/styles/variables/legacy-variables.less +4 -47
  589. package/src/table/Table.css +1 -1
  590. package/src/tabs/Tabs.css +2 -2
  591. package/src/tooltip/Tooltip.tsx +26 -45
  592. package/src/typeahead/Typeahead.css +1 -1
  593. package/build/common/propsValues/breakpoint.js +0 -12
  594. package/build/common/propsValues/breakpoint.js.map +0 -1
  595. package/build/common/propsValues/breakpoint.mjs +0 -12
  596. package/build/common/propsValues/breakpoint.mjs.map +0 -1
  597. package/build/prompt/CriticalBanner/CriticalBanner.js +0 -143
  598. package/build/prompt/CriticalBanner/CriticalBanner.js.map +0 -1
  599. package/build/prompt/CriticalBanner/CriticalBanner.mjs +0 -141
  600. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +0 -1
  601. package/build/prompt/CriticalBanner/helpers.js +0 -29
  602. package/build/prompt/CriticalBanner/helpers.js.map +0 -1
  603. package/build/prompt/CriticalBanner/helpers.mjs +0 -26
  604. package/build/prompt/CriticalBanner/helpers.mjs.map +0 -1
  605. package/build/prompt/common/Expander/Expander.js +0 -47
  606. package/build/prompt/common/Expander/Expander.js.map +0 -1
  607. package/build/prompt/common/Expander/Expander.messages.js +0 -17
  608. package/build/prompt/common/Expander/Expander.messages.js.map +0 -1
  609. package/build/prompt/common/Expander/Expander.messages.mjs +0 -13
  610. package/build/prompt/common/Expander/Expander.messages.mjs.map +0 -1
  611. package/build/prompt/common/Expander/Expander.mjs +0 -44
  612. package/build/prompt/common/Expander/Expander.mjs.map +0 -1
  613. package/build/prompt/helpers/promptMedia.js +0 -52
  614. package/build/prompt/helpers/promptMedia.js.map +0 -1
  615. package/build/prompt/helpers/promptMedia.mjs +0 -50
  616. package/build/prompt/helpers/promptMedia.mjs.map +0 -1
  617. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +0 -59
  618. package/build/styles/prompt/common/Expander/Expander.css +0 -8
  619. package/build/types/common/propsValues/breakpoint.d.ts +0 -9
  620. package/build/types/common/propsValues/breakpoint.d.ts.map +0 -1
  621. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +0 -33
  622. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +0 -1
  623. package/build/types/prompt/CriticalBanner/helpers.d.ts +0 -18
  624. package/build/types/prompt/CriticalBanner/helpers.d.ts.map +0 -1
  625. package/build/types/prompt/CriticalBanner/index.d.ts +0 -3
  626. package/build/types/prompt/CriticalBanner/index.d.ts.map +0 -1
  627. package/build/types/prompt/common/Expander/Expander.d.ts +0 -20
  628. package/build/types/prompt/common/Expander/Expander.d.ts.map +0 -1
  629. package/build/types/prompt/common/Expander/Expander.messages.d.ts +0 -14
  630. package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +0 -1
  631. package/build/types/prompt/helpers/promptMedia.d.ts +0 -22
  632. package/build/types/prompt/helpers/promptMedia.d.ts.map +0 -1
  633. package/src/common/propsValues/breakpoint.ts +0 -8
  634. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +0 -113
  635. package/src/prompt/CriticalBanner/CriticalBanner.css +0 -59
  636. package/src/prompt/CriticalBanner/CriticalBanner.less +0 -64
  637. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +0 -632
  638. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +0 -285
  639. package/src/prompt/CriticalBanner/CriticalBanner.tsx +0 -182
  640. package/src/prompt/CriticalBanner/helpers.ts +0 -39
  641. package/src/prompt/CriticalBanner/index.ts +0 -2
  642. package/src/prompt/common/Expander/Expander.css +0 -8
  643. package/src/prompt/common/Expander/Expander.less +0 -9
  644. package/src/prompt/common/Expander/Expander.messages.ts +0 -14
  645. package/src/prompt/common/Expander/Expander.test.tsx +0 -167
  646. package/src/prompt/common/Expander/Expander.tsx +0 -83
  647. package/src/prompt/helpers/promptMedia.tsx +0 -79
package/build/chips/Chip.js CHANGED
@@ -7,8 +7,8 @@ var React = require('react');
7
7
  var Body = require('../body/Body.js');
8
8
  require('../common/theme.js');
9
9
  require('../common/direction.js');
10
+ require('@transferwise/neptune-tokens');
10
11
  require('../common/propsValues/control.js');
11
- require('../common/propsValues/breakpoint.js');
12
12
  require('../common/propsValues/size.js');
13
13
  var typography = require('../common/propsValues/typography.js');
14
14
  require('../common/propsValues/width.js');
@@ -24,6 +24,7 @@ require('../common/propsValues/variant.js');
24
24
  require('../common/propsValues/scroll.js');
25
25
  require('../common/propsValues/markdownNodeType.js');
26
26
  require('../common/fileType.js');
27
+ require('@transferwise/formatting');
27
28
  var CloseButton = require('../common/closeButton/CloseButton.js');
28
29
  var jsxRuntime = require('react/jsx-runtime');
29
30
 
package/build/chips/Chip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
package/build/chips/Chip.mjs CHANGED
@@ -3,8 +3,8 @@ import { useRef, useEffect } from 'react';
3
3
  import Body from '../body/Body.mjs';
4
4
  import '../common/theme.mjs';
5
5
  import '../common/direction.mjs';
6
+ import '@transferwise/neptune-tokens';
6
7
  import '../common/propsValues/control.mjs';
7
- import '../common/propsValues/breakpoint.mjs';
8
8
  import '../common/propsValues/size.mjs';
9
9
  import { Typography } from '../common/propsValues/typography.mjs';
10
10
  import '../common/propsValues/width.mjs';
@@ -20,6 +20,7 @@ import '../common/propsValues/variant.mjs';
20
20
  import '../common/propsValues/scroll.mjs';
21
21
  import '../common/propsValues/markdownNodeType.mjs';
22
22
  import '../common/fileType.mjs';
23
+ import '@transferwise/formatting';
23
24
  import { CloseButton } from '../common/closeButton/CloseButton.mjs';
24
25
  import { jsxs, jsx } from 'react/jsx-runtime';
25
26
 
package/build/chips/Chip.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;;;"}
package/build/circularButton/CircularButton.js CHANGED
@@ -3,11 +3,11 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var clsx = require('clsx');
6
+ var neptuneTokens = require('@transferwise/neptune-tokens');
6
7
  var Body = require('../body/Body.js');
7
8
  require('../common/theme.js');
8
9
  require('../common/direction.js');
9
10
  var control = require('../common/propsValues/control.js');
10
- var breakpoint = require('../common/propsValues/breakpoint.js');
11
11
  require('../common/propsValues/size.js');
12
12
  var typography = require('../common/propsValues/typography.js');
13
13
  require('../common/propsValues/width.js');
@@ -23,6 +23,7 @@ require('../common/propsValues/variant.js');
23
23
  require('../common/propsValues/scroll.js');
24
24
  require('../common/propsValues/markdownNodeType.js');
25
25
  require('../common/fileType.js');
26
+ require('@transferwise/formatting');
26
27
  require('@transferwise/icons');
27
28
  require('react');
28
29
  require('react-intl');
@@ -40,7 +41,7 @@ const CircularButton = ({
40
41
  priority = control.Priority.PRIMARY,
41
42
  type = 'default'
42
43
  }) => {
43
- const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
44
+ const isTinyViewport = useMedia.useMedia(`(max-width: ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
44
45
  return /*#__PURE__*/jsxRuntime.jsxs("label", {
45
46
  className: clsx.clsx('np-circular-btn', `np-circular-btn-${priority}-${type}`, {
46
47
  'np-circular-btn-disabled': disabled
package/build/circularButton/CircularButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated Use `'default'` instead.\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG;AAAS,CACI,KAAI;EACxB,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;AACxE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,SAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,cAAA,CAACC,kBAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,SAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE;AAAI,KACK,CACZ,eAAAY,cAAA,CAACI,YAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,SAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,qBAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA;AAAQ,KACL,CACR;AAAA,GAAO,CAAC;AAEZ;;;;"}
1
+ {"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport Body from '../body/Body';\nimport { ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated Use `'default'` instead.\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG;AAAS,CACI,KAAI;EACxB,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,wBAAU,CAACC,WAAW,CAAA,GAAA,CAAK,CAAC;AAC3E,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,SAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,cAAA,CAACC,kBAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,SAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE;AAAI,KACK,CACZ,eAAAY,cAAA,CAACI,YAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,SAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,qBAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA;AAAQ,KACL,CACR;AAAA,GAAO,CAAC;AAEZ;;;;"}
package/build/circularButton/CircularButton.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import { clsx } from 'clsx';
2
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
3
  import Body from '../body/Body.mjs';
3
4
  import '../common/theme.mjs';
4
5
  import '../common/direction.mjs';
5
6
  import { Priority } from '../common/propsValues/control.mjs';
6
- import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
7
7
  import '../common/propsValues/size.mjs';
8
8
  import { Typography } from '../common/propsValues/typography.mjs';
9
9
  import '../common/propsValues/width.mjs';
@@ -19,6 +19,7 @@ import '../common/propsValues/variant.mjs';
19
19
  import '../common/propsValues/scroll.mjs';
20
20
  import '../common/propsValues/markdownNodeType.mjs';
21
21
  import '../common/fileType.mjs';
22
+ import '@transferwise/formatting';
22
23
  import '@transferwise/icons';
23
24
  import 'react';
24
25
  import 'react-intl';
@@ -36,7 +37,7 @@ const CircularButton = ({
36
37
  priority = Priority.PRIMARY,
37
38
  type = 'default'
38
39
  }) => {
39
- const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
40
+ const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
40
41
  return /*#__PURE__*/jsxs("label", {
41
42
  className: clsx('np-circular-btn', `np-circular-btn-${priority}-${type}`, {
42
43
  'np-circular-btn-disabled': disabled
package/build/circularButton/CircularButton.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated Use `'default'` instead.\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG;AAAS,CACI,KAAI;EACxB,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;AACxE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,IAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,IAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE;AAAI,KACK,CACZ,eAAAY,GAAA,CAACI,IAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,IAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,UAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA;AAAQ,KACL,CACR;AAAA,GAAO,CAAC;AAEZ;;;;"}
1
+ {"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport Body from '../body/Body';\nimport { ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated Use `'default'` instead.\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG;AAAS,CACI,KAAI;EACxB,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,WAAW,CAAA,GAAA,CAAK,CAAC;AAC3E,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,IAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,IAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE;AAAI,KACK,CACZ,eAAAY,GAAA,CAACI,IAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,IAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,UAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA;AAAQ,KACL,CACR;AAAA,GAAO,CAAC;AAEZ;;;;"}
package/build/common/bottomSheet/BottomSheet.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var clsx = require('clsx');
6
6
  var React = require('react');
7
+ var neptuneTokens = require('@transferwise/neptune-tokens');
7
8
  var Dimmer = require('../../dimmer/Dimmer.js');
8
9
  var Drawer = require('../../drawer/Drawer.js');
9
10
  var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
@@ -12,7 +13,6 @@ var CloseButton = require('../closeButton/CloseButton.js');
12
13
  var documentIosClick = require('../domHelpers/documentIosClick.js');
13
14
  var useConditionalListener = require('../hooks/useConditionalListener/useConditionalListener.js');
14
15
  require('../../provider/direction/DirectionProvider.js');
15
- var breakpoint = require('../propsValues/breakpoint.js');
16
16
  var useMedia = require('../hooks/useMedia.js');
17
17
  var position = require('../propsValues/position.js');
18
18
  var jsxRuntime = require('react/jsx-runtime');
@@ -147,7 +147,7 @@ const BottomSheet = ({
147
147
  maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
148
148
  };
149
149
  }
150
- const is400Zoom = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
150
+ const is400Zoom = useMedia.useMedia(`(max-width: ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
151
151
  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
152
152
  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer.default, {
153
153
  "aria-labelledby": props['aria-labelledby'],
package/build/common/bottomSheet/BottomSheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event | SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /**\n * Used to track `requestAnimationFrame` requests\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n */\n const animationId = useRef<number>(0);\n\n /**\n * Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n *\n * @see {@link calculateOffsetAfterMove}\n */\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event | SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /**\n * Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n *\n * @param afterMoveYCoordinate\n */\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /**\n * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n */\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /**\n * Calculate _real_ height of the screen (taking into account parts of browser interface).\n *\n * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n */\n const screenHeight = `${windowHight * 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] || undefined}\n aria-label={props['aria-label'] || undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event | SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /**\n * Used to track `requestAnimationFrame` requests\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n */\n const animationId = useRef<number>(0);\n\n /**\n * Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n *\n * @see {@link calculateOffsetAfterMove}\n */\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event | SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /**\n * Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n *\n * @param afterMoveYCoordinate\n */\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /**\n * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n */\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /**\n * Calculate _real_ height of the screen (taking into account parts of browser interface).\n *\n * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n */\n const screenHeight = `${windowHight * 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] || undefined}\n aria-label={props['aria-label'] || undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","EXTRA_SMALL","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
package/build/common/bottomSheet/BottomSheet.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { useRef, useState, useContext } from 'react';
3
+ import { Breakpoint } from '@transferwise/neptune-tokens';
3
4
  import Dimmer from '../../dimmer/Dimmer.mjs';
4
5
  import Drawer from '../../drawer/Drawer.mjs';
5
6
  import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
@@ -8,7 +9,6 @@ import { CloseButton } from '../closeButton/CloseButton.mjs';
8
9
  import { isServerSide } from '../domHelpers/documentIosClick.mjs';
9
10
  import { useConditionalListener } from '../hooks/useConditionalListener/useConditionalListener.mjs';
10
11
  import '../../provider/direction/DirectionProvider.mjs';
11
- import { Breakpoint } from '../propsValues/breakpoint.mjs';
12
12
  import { useMedia } from '../hooks/useMedia.mjs';
13
13
  import { Position } from '../propsValues/position.mjs';
14
14
  import { jsx, jsxs } from 'react/jsx-runtime';
@@ -143,7 +143,7 @@ const BottomSheet = ({
143
143
  maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
144
144
  };
145
145
  }
146
- const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
146
+ const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
147
147
  const overlayId = useContext(OverlayIdContext);
148
148
  return is400Zoom ? /*#__PURE__*/jsx(Drawer, {
149
149
  "aria-labelledby": props['aria-labelledby'],
package/build/common/bottomSheet/BottomSheet.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event | SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /**\n * Used to track `requestAnimationFrame` requests\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n */\n const animationId = useRef<number>(0);\n\n /**\n * Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n *\n * @see {@link calculateOffsetAfterMove}\n */\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event | SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /**\n * Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n *\n * @param afterMoveYCoordinate\n */\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /**\n * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n */\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /**\n * Calculate _real_ height of the screen (taking into account parts of browser interface).\n *\n * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n */\n const screenHeight = `${windowHight * 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] || undefined}\n aria-label={props['aria-label'] || undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n SyntheticEvent,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n {\n onClose?: (event: Event | SyntheticEvent) => void;\n open: boolean;\n } & CommonProps &\n Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n const bottomSheetReference = useRef<HTMLDivElement>(null);\n const topBarReference = useRef<HTMLDivElement>(null);\n const contentReference = useRef<HTMLDivElement>(null);\n\n const [pressed, setPressed] = useState<boolean>(false);\n\n /**\n * Used to track `requestAnimationFrame` requests\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n */\n const animationId = useRef<number>(0);\n\n /**\n * Difference between initial coordinate ({@link initialYCoordinate})\n * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n *\n * @see {@link calculateOffsetAfterMove}\n */\n const moveOffset = useRef<number>(0);\n const initialYCoordinate = useRef<number>(0);\n\n // apply shadow to the bottom of top-bar when scroll over content\n useConditionalListener({\n attachListener: props.open && !isServerSide(),\n callback: () => {\n if (topBarReference.current !== null) {\n const { classList } = topBarReference.current;\n if (!isContentScrollPositionAtTop()) {\n classList.add('np-bottom-sheet--top-bar--shadow');\n } else {\n classList.remove('np-bottom-sheet--top-bar--shadow');\n }\n }\n },\n eventType: 'scroll',\n parent: isServerSide() ? undefined : document,\n });\n\n function move(newHeight: number): void {\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n }\n }\n\n function close(event: Event | SyntheticEvent): void {\n setPressed(false);\n moveOffset.current = INITIAL_Y_POSITION;\n if (bottomSheetReference.current !== null) {\n bottomSheetReference.current.style.removeProperty('transform');\n }\n if (props.onClose) {\n props.onClose(event);\n }\n }\n\n const onSwipeStart = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n setPressed(true);\n };\n\n const onSwipeMove = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void => {\n if (pressed) {\n const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n const offset = calculateOffsetAfterMove(clientY);\n // check whether move is to the bottom only and content scroll position is at the top\n if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n moveOffset.current = offset;\n animationId.current = requestAnimationFrame(() => {\n if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n move(offset);\n }\n });\n }\n }\n };\n\n function onSwipeEnd(\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n ): void {\n // stop moving component\n cancelAnimationFrame(animationId.current);\n setPressed(false);\n // check whether move down is strong enough\n // and content scroll position is at the top to close the component\n if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n close(event);\n }\n // otherwise move component back to default (initial) position\n else {\n move(INITIAL_Y_POSITION);\n }\n moveOffset.current = INITIAL_Y_POSITION;\n }\n\n function isContentScrollPositionAtTop(): boolean {\n return (\n contentReference?.current?.scrollTop !== undefined &&\n contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n );\n }\n\n /**\n * Calculates how hard user moves component,\n * result value used to determine whether to hide component or re-position to default state\n *\n * @param afterMoveYCoordinate\n */\n function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n return afterMoveYCoordinate - initialYCoordinate.current;\n }\n\n /**\n * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n * and ensures space for safe zone (32px) at the top.\n */\n function setContentMaxHeight(): CSSProperties {\n const safeZoneHeight = '64px';\n const topbarHeight = '32px';\n const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n /**\n * Calculate _real_ height of the screen (taking into account parts of browser interface).\n *\n * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n */\n const screenHeight = `${windowHight * 0.01 * 100}px`;\n return {\n maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n };\n }\n\n const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n\n const overlayId = useContext(OverlayIdContext);\n\n return is400Zoom ? (\n <Drawer\n aria-labelledby={props['aria-labelledby']}\n aria-label={props['aria-label']}\n role={role}\n open={props.open}\n className={props.className}\n onClose={close}\n >\n {props.children}\n </Drawer>\n ) : (\n <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n <SlidingPanel\n ref={bottomSheetReference}\n open={props.open}\n position={Position.BOTTOM}\n className={clsx('np-bottom-sheet', props.className)}\n >\n <div\n id={overlayId}\n aria-labelledby={props['aria-labelledby'] || undefined}\n aria-label={props['aria-label'] || undefined}\n role={role}\n aria-modal\n onTouchStart={onSwipeStart}\n onTouchMove={onSwipeMove}\n onTouchEnd={onSwipeEnd}\n onMouseDown={onSwipeStart}\n onMouseMove={onSwipeMove}\n onMouseUp={onSwipeEnd}\n >\n <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n <div className=\"np-bottom-sheet--handler\" />\n <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n </div>\n <div\n ref={contentReference}\n style={setContentMaxHeight()}\n className=\"np-bottom-sheet--content\"\n >\n {props.children}\n </div>\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","EXTRA_SMALL","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
package/build/common/circle/Circle.js CHANGED
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var clsx = require('clsx');
7
+ var neptuneTokens = require('@transferwise/neptune-tokens');
7
8
  var useMedia = require('../hooks/useMedia.js');
8
- var breakpoint = require('../propsValues/breakpoint.js');
9
9
  var jsxRuntime = require('react/jsx-runtime');
10
10
 
11
11
  const MAP_ICON_SIZE = {
@@ -41,7 +41,7 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
41
41
  style,
42
42
  ...props
43
43
  }, ref) {
44
- const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
44
+ const isTinyViewport = useMedia.useMedia(`(max-width: ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
45
45
  return /*#__PURE__*/jsxRuntime.jsx(Element, {
46
46
  ...props,
47
47
  ref: ref,
package/build/common/circle/Circle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useMedia } from '../hooks/useMedia';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,wBAAU,CAACC,WAAW,CAAA,GAAA,CAAK,CAAC;EAC3E,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
package/build/common/circle/Circle.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { forwardRef } from 'react';
2
2
  import { clsx } from 'clsx';
3
+ import { Breakpoint } from '@transferwise/neptune-tokens';
3
4
  import { useMedia } from '../hooks/useMedia.mjs';
4
- import { Breakpoint } from '../propsValues/breakpoint.mjs';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
7
7
  const MAP_ICON_SIZE = {
@@ -37,7 +37,7 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
37
37
  style,
38
38
  ...props
39
39
  }, ref) {
40
- const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
40
+ const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
41
41
  return /*#__PURE__*/jsx(Element, {
42
42
  ...props,
43
43
  ref: ref,
package/build/common/circle/Circle.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useMedia } from '../hooks/useMedia';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n 16: 8,\n 24: 12,\n 32: 14,\n 40: 18,\n 48: 22,\n 56: 26,\n 72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n enableBorder = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-border': enableBorder },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","clsx"],"mappings":";;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,WAAW,CAAA,GAAA,CAAK,CAAC;EAC3E,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
package/build/common/hooks/useLayout/useLayout.js CHANGED
@@ -1,17 +1,17 @@
1
1
  'use strict';
2
2
 
3
- var breakpoint = require('../../propsValues/breakpoint.js');
3
+ var neptuneTokens = require('@transferwise/neptune-tokens');
4
4
  var useScreenSize = require('../useScreenSize.js');
5
5
 
6
6
  /**
7
7
  * @deprecated Prefer `useScreenSize` instead.
8
8
  */
9
9
  const useLayout = () => {
10
- const screenXs = useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_SMALL);
11
- const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
12
- const screenMd = useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
13
- const screenLg = useScreenSize.useScreenSize(breakpoint.Breakpoint.LARGE);
14
- const screenXl = useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_LARGE);
10
+ const screenXs = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.EXTRA_SMALL);
11
+ const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
12
+ const screenMd = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.MEDIUM);
13
+ const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
14
+ const screenXl = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.EXTRA_LARGE);
15
15
  return {
16
16
  isMobile: screenSm != null ? !screenSm : undefined,
17
17
  isExtraSmall: screenXs,
package/build/common/hooks/useLayout/useLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useLayout.js","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '../../propsValues/breakpoint';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n isMobile: boolean | undefined;\n isExtraSmall: boolean | undefined;\n isSmall: boolean | undefined;\n isMedium: boolean | undefined;\n isLarge: boolean | undefined;\n isExtraLarge: boolean | undefined;\n} => {\n const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenMd = useScreenSize(Breakpoint.MEDIUM);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n return {\n isMobile: screenSm != null ? !screenSm : undefined,\n isExtraSmall: screenXs,\n isSmall: screenSm,\n isMedium: screenMd,\n isLarge: screenLg,\n isExtraLarge: screenXl,\n };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,2BAAa,CAACC,qBAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,2BAAa,CAACC,qBAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,2BAAa,CAACC,qBAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}
1
+ {"version":3,"file":"useLayout.js","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n isMobile: boolean | undefined;\n isExtraSmall: boolean | undefined;\n isSmall: boolean | undefined;\n isMedium: boolean | undefined;\n isLarge: boolean | undefined;\n isExtraLarge: boolean | undefined;\n} => {\n const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenMd = useScreenSize(Breakpoint.MEDIUM);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n return {\n isMobile: screenSm != null ? !screenSm : undefined,\n isExtraSmall: screenXs,\n isSmall: screenSm,\n isMedium: screenMd,\n isLarge: screenLg,\n isExtraLarge: screenXl,\n };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,wBAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,wBAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,2BAAa,CAACC,wBAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,2BAAa,CAACC,wBAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,2BAAa,CAACC,wBAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}
package/build/common/hooks/useLayout/useLayout.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Breakpoint } from '../../propsValues/breakpoint.mjs';
1
+ import { Breakpoint } from '@transferwise/neptune-tokens';
2
2
  import { useScreenSize } from '../useScreenSize.mjs';
3
3
 
4
4
  /**
package/build/common/hooks/useLayout/useLayout.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useLayout.mjs","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '../../propsValues/breakpoint';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n isMobile: boolean | undefined;\n isExtraSmall: boolean | undefined;\n isSmall: boolean | undefined;\n isMedium: boolean | undefined;\n isLarge: boolean | undefined;\n isExtraLarge: boolean | undefined;\n} => {\n const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenMd = useScreenSize(Breakpoint.MEDIUM);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n return {\n isMobile: screenSm != null ? !screenSm : undefined,\n isExtraSmall: screenXs,\n isSmall: screenSm,\n isMedium: screenMd,\n isLarge: screenLg,\n isExtraLarge: screenXl,\n };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,aAAa,CAACC,UAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,aAAa,CAACC,UAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,aAAa,CAACC,UAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}
1
+ {"version":3,"file":"useLayout.mjs","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n isMobile: boolean | undefined;\n isExtraSmall: boolean | undefined;\n isSmall: boolean | undefined;\n isMedium: boolean | undefined;\n isLarge: boolean | undefined;\n isExtraLarge: boolean | undefined;\n} => {\n const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenMd = useScreenSize(Breakpoint.MEDIUM);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n return {\n isMobile: screenSm != null ? !screenSm : undefined,\n isExtraSmall: screenXs,\n isSmall: screenSm,\n isMedium: screenMd,\n isLarge: screenLg,\n isExtraLarge: screenXl,\n };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,aAAa,CAACC,UAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,aAAa,CAACC,UAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,aAAa,CAACC,UAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}
package/build/common/hooks/useScreenSize.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useScreenSize.js","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '../propsValues/breakpoint';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;;;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,iBAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}
1
+ {"version":3,"file":"useScreenSize.js","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;;;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,iBAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}
package/build/common/hooks/useScreenSize.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useScreenSize.mjs","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '../propsValues/breakpoint';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,QAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}
1
+ {"version":3,"file":"useScreenSize.mjs","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,QAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}
package/build/common/locale/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var formatting = require('@transferwise/formatting');
3
4
  var direction = require('../direction.js');
4
5
 
5
6
  const DEFAULT_LANG = 'en';
@@ -80,10 +81,14 @@ function getDirectionFromLocale(locale) {
80
81
  * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.
81
82
  */
82
83
  function getLocaleCurrencyName(intl, currencyCode) {
83
- return typeof Intl.DisplayNames === 'function' ? intl.formatDisplayName(currencyCode, {
84
- type: 'currency',
85
- fallback: 'code'
86
- }) : currencyCode;
84
+ if (typeof Intl.DisplayNames === 'function') {
85
+ const localisedName = intl.formatDisplayName(currencyCode, {
86
+ type: 'currency',
87
+ fallback: 'none'
88
+ });
89
+ return localisedName != null ? localisedName : formatting.formatCurrencyCode(currencyCode);
90
+ }
91
+ return formatting.formatCurrencyCode(currencyCode);
87
92
  }
88
93
 
89
94
  exports.DEFAULT_LANG = DEFAULT_LANG;