@transferwise/components 46.77.0 → 46.79.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (503) hide show
  1. package/build/accordion/AccordionItem/AccordionItem.js +22 -3
  2. package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
  3. package/build/accordion/AccordionItem/AccordionItem.mjs +22 -3
  4. package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
  5. package/build/actionButton/ActionButton.js +22 -1
  6. package/build/actionButton/ActionButton.js.map +1 -1
  7. package/build/actionButton/ActionButton.mjs +22 -1
  8. package/build/actionButton/ActionButton.mjs.map +1 -1
  9. package/build/actionOption/ActionOption.js +24 -2
  10. package/build/actionOption/ActionOption.js.map +1 -1
  11. package/build/actionOption/ActionOption.mjs +24 -2
  12. package/build/actionOption/ActionOption.mjs.map +1 -1
  13. package/build/alert/Alert.js +22 -6
  14. package/build/alert/Alert.js.map +1 -1
  15. package/build/alert/Alert.mjs +22 -6
  16. package/build/alert/Alert.mjs.map +1 -1
  17. package/build/alert/inlineMarkdown/InlineMarkdown.js +25 -2
  18. package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
  19. package/build/alert/inlineMarkdown/InlineMarkdown.mjs +25 -2
  20. package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
  21. package/build/avatar/Avatar.js +25 -9
  22. package/build/avatar/Avatar.js.map +1 -1
  23. package/build/avatar/Avatar.mjs +25 -9
  24. package/build/avatar/Avatar.mjs.map +1 -1
  25. package/build/avatarWrapper/AvatarWrapper.js +23 -3
  26. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  27. package/build/avatarWrapper/AvatarWrapper.mjs +23 -3
  28. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  29. package/build/badge/Badge.js +24 -12
  30. package/build/badge/Badge.js.map +1 -1
  31. package/build/badge/Badge.mjs +24 -12
  32. package/build/badge/Badge.mjs.map +1 -1
  33. package/build/button/Button.js +22 -6
  34. package/build/button/Button.js.map +1 -1
  35. package/build/button/Button.messages.js.map +1 -1
  36. package/build/button/Button.messages.mjs.map +1 -1
  37. package/build/button/Button.mjs +22 -6
  38. package/build/button/Button.mjs.map +1 -1
  39. package/build/button/classMap.js +24 -0
  40. package/build/button/classMap.js.map +1 -1
  41. package/build/button/classMap.mjs +24 -0
  42. package/build/button/classMap.mjs.map +1 -1
  43. package/build/button/legacyUtils/legacyUtils.js +30 -7
  44. package/build/button/legacyUtils/legacyUtils.js.map +1 -1
  45. package/build/button/legacyUtils/legacyUtils.mjs +30 -7
  46. package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
  47. package/build/card/Card.js +23 -3
  48. package/build/card/Card.js.map +1 -1
  49. package/build/card/Card.mjs +23 -3
  50. package/build/card/Card.mjs.map +1 -1
  51. package/build/checkbox/Checkbox.js +23 -1
  52. package/build/checkbox/Checkbox.js.map +1 -1
  53. package/build/checkbox/Checkbox.mjs +23 -1
  54. package/build/checkbox/Checkbox.mjs.map +1 -1
  55. package/build/checkboxOption/CheckboxOption.js +1 -1
  56. package/build/checkboxOption/CheckboxOption.mjs +1 -1
  57. package/build/chevron/Chevron.js +21 -1
  58. package/build/chevron/Chevron.js.map +1 -1
  59. package/build/chevron/Chevron.mjs +21 -1
  60. package/build/chevron/Chevron.mjs.map +1 -1
  61. package/build/chips/Chip.js +19 -1
  62. package/build/chips/Chip.js.map +1 -1
  63. package/build/chips/Chip.mjs +19 -1
  64. package/build/chips/Chip.mjs.map +1 -1
  65. package/build/circularButton/CircularButton.js +24 -5
  66. package/build/circularButton/CircularButton.js.map +1 -1
  67. package/build/circularButton/CircularButton.mjs +24 -5
  68. package/build/circularButton/CircularButton.mjs.map +1 -1
  69. package/build/common/bottomSheet/BottomSheet.js +3 -2
  70. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  71. package/build/common/bottomSheet/BottomSheet.mjs +3 -2
  72. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  73. package/build/common/circle/Circle.js +15 -2
  74. package/build/common/circle/Circle.js.map +1 -1
  75. package/build/common/circle/Circle.mjs +15 -2
  76. package/build/common/circle/Circle.mjs.map +1 -1
  77. package/build/common/hooks/useHasIntersected/useHasIntersected.js +10 -10
  78. package/build/common/hooks/useHasIntersected/useHasIntersected.js.map +1 -1
  79. package/build/common/hooks/useHasIntersected/useHasIntersected.mjs +10 -10
  80. package/build/common/hooks/useHasIntersected/useHasIntersected.mjs.map +1 -1
  81. package/build/common/locale/index.js +24 -0
  82. package/build/common/locale/index.js.map +1 -1
  83. package/build/common/locale/index.mjs +24 -0
  84. package/build/common/locale/index.mjs.map +1 -1
  85. package/build/common/panel/Panel.js +23 -2
  86. package/build/common/panel/Panel.js.map +1 -1
  87. package/build/common/panel/Panel.mjs +23 -2
  88. package/build/common/panel/Panel.mjs.map +1 -1
  89. package/build/common/responsivePanel/ResponsivePanel.js +27 -3
  90. package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
  91. package/build/common/responsivePanel/ResponsivePanel.mjs +27 -3
  92. package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
  93. package/build/criticalBanner/CriticalCommsBanner.js +22 -3
  94. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  95. package/build/criticalBanner/CriticalCommsBanner.mjs +22 -3
  96. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  97. package/build/dateInput/DateInput.js +22 -5
  98. package/build/dateInput/DateInput.js.map +1 -1
  99. package/build/dateInput/DateInput.mjs +22 -5
  100. package/build/dateInput/DateInput.mjs.map +1 -1
  101. package/build/dateLookup/DateLookup.js +24 -6
  102. package/build/dateLookup/DateLookup.js.map +1 -1
  103. package/build/dateLookup/DateLookup.mjs +24 -6
  104. package/build/dateLookup/DateLookup.mjs.map +1 -1
  105. package/build/dateLookup/dateHeader/DateHeader.js +26 -5
  106. package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
  107. package/build/dateLookup/dateHeader/DateHeader.mjs +26 -5
  108. package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
  109. package/build/dateLookup/dateTrigger/DateTrigger.js +19 -3
  110. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  111. package/build/dateLookup/dateTrigger/DateTrigger.mjs +19 -3
  112. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  113. package/build/decision/Decision.js +24 -3
  114. package/build/decision/Decision.js.map +1 -1
  115. package/build/decision/Decision.mjs +24 -3
  116. package/build/decision/Decision.mjs.map +1 -1
  117. package/build/definitionList/DefinitionList.js +23 -1
  118. package/build/definitionList/DefinitionList.js.map +1 -1
  119. package/build/definitionList/DefinitionList.mjs +23 -1
  120. package/build/definitionList/DefinitionList.mjs.map +1 -1
  121. package/build/dimmer/Dimmer.js +24 -2
  122. package/build/dimmer/Dimmer.js.map +1 -1
  123. package/build/dimmer/Dimmer.mjs +24 -2
  124. package/build/dimmer/Dimmer.mjs.map +1 -1
  125. package/build/display/Display.js +23 -1
  126. package/build/display/Display.js.map +1 -1
  127. package/build/display/Display.mjs +23 -1
  128. package/build/display/Display.mjs.map +1 -1
  129. package/build/drawer/Drawer.js +23 -4
  130. package/build/drawer/Drawer.js.map +1 -1
  131. package/build/drawer/Drawer.mjs +23 -4
  132. package/build/drawer/Drawer.mjs.map +1 -1
  133. package/build/field/Field.js +23 -2
  134. package/build/field/Field.js.map +1 -1
  135. package/build/field/Field.mjs +23 -2
  136. package/build/field/Field.mjs.map +1 -1
  137. package/build/flowNavigation/FlowNavigation.js +19 -2
  138. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  139. package/build/flowNavigation/FlowNavigation.mjs +19 -2
  140. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  141. package/build/header/Header.js +24 -2
  142. package/build/header/Header.js.map +1 -1
  143. package/build/header/Header.mjs +24 -2
  144. package/build/header/Header.mjs.map +1 -1
  145. package/build/i18n/de.json +5 -0
  146. package/build/i18n/de.json.js +5 -0
  147. package/build/i18n/de.json.js.map +1 -1
  148. package/build/i18n/de.json.mjs +5 -0
  149. package/build/i18n/de.json.mjs.map +1 -1
  150. package/build/i18n/es.json +5 -0
  151. package/build/i18n/es.json.js +5 -0
  152. package/build/i18n/es.json.js.map +1 -1
  153. package/build/i18n/es.json.mjs +5 -0
  154. package/build/i18n/es.json.mjs.map +1 -1
  155. package/build/i18n/fr.json +5 -0
  156. package/build/i18n/fr.json.js +5 -0
  157. package/build/i18n/fr.json.js.map +1 -1
  158. package/build/i18n/fr.json.mjs +5 -0
  159. package/build/i18n/fr.json.mjs.map +1 -1
  160. package/build/i18n/hu.json +5 -0
  161. package/build/i18n/hu.json.js +5 -0
  162. package/build/i18n/hu.json.js.map +1 -1
  163. package/build/i18n/hu.json.mjs +5 -0
  164. package/build/i18n/hu.json.mjs.map +1 -1
  165. package/build/i18n/id.json +5 -0
  166. package/build/i18n/id.json.js +5 -0
  167. package/build/i18n/id.json.js.map +1 -1
  168. package/build/i18n/id.json.mjs +5 -0
  169. package/build/i18n/id.json.mjs.map +1 -1
  170. package/build/i18n/it.json +5 -0
  171. package/build/i18n/it.json.js +5 -0
  172. package/build/i18n/it.json.js.map +1 -1
  173. package/build/i18n/it.json.mjs +5 -0
  174. package/build/i18n/it.json.mjs.map +1 -1
  175. package/build/i18n/ja.json +5 -0
  176. package/build/i18n/ja.json.js +5 -0
  177. package/build/i18n/ja.json.js.map +1 -1
  178. package/build/i18n/ja.json.mjs +5 -0
  179. package/build/i18n/ja.json.mjs.map +1 -1
  180. package/build/i18n/pl.json +5 -0
  181. package/build/i18n/pl.json.js +5 -0
  182. package/build/i18n/pl.json.js.map +1 -1
  183. package/build/i18n/pl.json.mjs +5 -0
  184. package/build/i18n/pl.json.mjs.map +1 -1
  185. package/build/i18n/pt.json +5 -0
  186. package/build/i18n/pt.json.js +5 -0
  187. package/build/i18n/pt.json.js.map +1 -1
  188. package/build/i18n/pt.json.mjs +5 -0
  189. package/build/i18n/pt.json.mjs.map +1 -1
  190. package/build/i18n/ro.json +5 -0
  191. package/build/i18n/ro.json.js +5 -0
  192. package/build/i18n/ro.json.js.map +1 -1
  193. package/build/i18n/ro.json.mjs +5 -0
  194. package/build/i18n/ro.json.mjs.map +1 -1
  195. package/build/i18n/ru.json +5 -0
  196. package/build/i18n/ru.json.js +5 -0
  197. package/build/i18n/ru.json.js.map +1 -1
  198. package/build/i18n/ru.json.mjs +5 -0
  199. package/build/i18n/ru.json.mjs.map +1 -1
  200. package/build/i18n/tr.json +5 -0
  201. package/build/i18n/tr.json.js +5 -0
  202. package/build/i18n/tr.json.js.map +1 -1
  203. package/build/i18n/tr.json.mjs +5 -0
  204. package/build/i18n/tr.json.mjs.map +1 -1
  205. package/build/image/Image.js +4 -1
  206. package/build/image/Image.js.map +1 -1
  207. package/build/image/Image.mjs +4 -1
  208. package/build/image/Image.mjs.map +1 -1
  209. package/build/index.js +69 -62
  210. package/build/index.js.map +1 -1
  211. package/build/index.mjs +27 -20
  212. package/build/index.mjs.map +1 -1
  213. package/build/info/Info.js +21 -3
  214. package/build/info/Info.js.map +1 -1
  215. package/build/info/Info.mjs +21 -3
  216. package/build/info/Info.mjs.map +1 -1
  217. package/build/inlineAlert/InlineAlert.js +24 -3
  218. package/build/inlineAlert/InlineAlert.js.map +1 -1
  219. package/build/inlineAlert/InlineAlert.mjs +24 -3
  220. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  221. package/build/inputs/SearchInput.js +23 -2
  222. package/build/inputs/SearchInput.js.map +1 -1
  223. package/build/inputs/SearchInput.mjs +23 -2
  224. package/build/inputs/SearchInput.mjs.map +1 -1
  225. package/build/instructionsList/InstructionsList.js +22 -1
  226. package/build/instructionsList/InstructionsList.js.map +1 -1
  227. package/build/instructionsList/InstructionsList.mjs +22 -1
  228. package/build/instructionsList/InstructionsList.mjs.map +1 -1
  229. package/build/loader/Loader.js +22 -1
  230. package/build/loader/Loader.js.map +1 -1
  231. package/build/loader/Loader.mjs +22 -1
  232. package/build/loader/Loader.mjs.map +1 -1
  233. package/build/main.css +46 -22
  234. package/build/markdown/Markdown.js +24 -1
  235. package/build/markdown/Markdown.js.map +1 -1
  236. package/build/markdown/Markdown.mjs +24 -1
  237. package/build/markdown/Markdown.mjs.map +1 -1
  238. package/build/modal/Modal.js +22 -5
  239. package/build/modal/Modal.js.map +1 -1
  240. package/build/modal/Modal.mjs +22 -5
  241. package/build/modal/Modal.mjs.map +1 -1
  242. package/build/moneyInput/MoneyInput.js +22 -3
  243. package/build/moneyInput/MoneyInput.js.map +1 -1
  244. package/build/moneyInput/MoneyInput.mjs +22 -3
  245. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  246. package/build/navigationOption/NavigationOption.js +23 -2
  247. package/build/navigationOption/NavigationOption.js.map +1 -1
  248. package/build/navigationOption/NavigationOption.mjs +23 -2
  249. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  250. package/build/nudge/Nudge.js +19 -1
  251. package/build/nudge/Nudge.js.map +1 -1
  252. package/build/nudge/Nudge.mjs +19 -1
  253. package/build/nudge/Nudge.mjs.map +1 -1
  254. package/build/overlayHeader/OverlayHeader.js +19 -1
  255. package/build/overlayHeader/OverlayHeader.js.map +1 -1
  256. package/build/overlayHeader/OverlayHeader.mjs +19 -1
  257. package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
  258. package/build/phoneNumberInput/PhoneNumberInput.js +23 -2
  259. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  260. package/build/phoneNumberInput/PhoneNumberInput.mjs +23 -2
  261. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  262. package/build/popover/Popover.js +24 -4
  263. package/build/popover/Popover.js.map +1 -1
  264. package/build/popover/Popover.mjs +24 -4
  265. package/build/popover/Popover.mjs.map +1 -1
  266. package/build/processIndicator/ProcessIndicator.js +22 -1
  267. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  268. package/build/processIndicator/ProcessIndicator.mjs +22 -1
  269. package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
  270. package/build/progressBar/ProgressBar.js +24 -2
  271. package/build/progressBar/ProgressBar.js.map +1 -1
  272. package/build/progressBar/ProgressBar.mjs +24 -2
  273. package/build/progressBar/ProgressBar.mjs.map +1 -1
  274. package/build/promoCard/PromoCard.js +22 -2
  275. package/build/promoCard/PromoCard.js.map +1 -1
  276. package/build/promoCard/PromoCard.mjs +22 -2
  277. package/build/promoCard/PromoCard.mjs.map +1 -1
  278. package/build/promoCard/PromoCardIndicator.js +22 -1
  279. package/build/promoCard/PromoCardIndicator.js.map +1 -1
  280. package/build/promoCard/PromoCardIndicator.mjs +22 -1
  281. package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
  282. package/build/provider/Provider.js +25 -2
  283. package/build/provider/Provider.js.map +1 -1
  284. package/build/provider/Provider.mjs +25 -2
  285. package/build/provider/Provider.mjs.map +1 -1
  286. package/build/radio/Radio.js +24 -2
  287. package/build/radio/Radio.js.map +1 -1
  288. package/build/radio/Radio.mjs +24 -2
  289. package/build/radio/Radio.mjs.map +1 -1
  290. package/build/segmentedControl/SegmentedControl.js +22 -1
  291. package/build/segmentedControl/SegmentedControl.js.map +1 -1
  292. package/build/segmentedControl/SegmentedControl.mjs +22 -1
  293. package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
  294. package/build/select/Select.js +26 -4
  295. package/build/select/Select.js.map +1 -1
  296. package/build/select/Select.mjs +26 -4
  297. package/build/select/Select.mjs.map +1 -1
  298. package/build/select/option/Option.js +22 -1
  299. package/build/select/option/Option.js.map +1 -1
  300. package/build/select/option/Option.mjs +22 -1
  301. package/build/select/option/Option.mjs.map +1 -1
  302. package/build/selectOption/SelectOption.js +24 -6
  303. package/build/selectOption/SelectOption.js.map +1 -1
  304. package/build/selectOption/SelectOption.mjs +24 -6
  305. package/build/selectOption/SelectOption.mjs.map +1 -1
  306. package/build/statusIcon/StatusIcon.js +26 -8
  307. package/build/statusIcon/StatusIcon.js.map +1 -1
  308. package/build/statusIcon/StatusIcon.mjs +26 -8
  309. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  310. package/build/stepper/Stepper.js +25 -3
  311. package/build/stepper/Stepper.js.map +1 -1
  312. package/build/stepper/Stepper.mjs +25 -3
  313. package/build/stepper/Stepper.mjs.map +1 -1
  314. package/build/stepper/deviceDetection.js +2 -3
  315. package/build/stepper/deviceDetection.js.map +1 -1
  316. package/build/stepper/deviceDetection.mjs +2 -3
  317. package/build/stepper/deviceDetection.mjs.map +1 -1
  318. package/build/sticky/Sticky.js +25 -2
  319. package/build/sticky/Sticky.js.map +1 -1
  320. package/build/sticky/Sticky.mjs +25 -2
  321. package/build/sticky/Sticky.mjs.map +1 -1
  322. package/build/styles/avatar/Avatar.css +29 -0
  323. package/build/styles/badge/Badge.css +6 -0
  324. package/build/styles/circularButton/CircularButton.css +2 -2
  325. package/build/styles/common/circle/Circle.css +4 -0
  326. package/build/styles/main.css +46 -22
  327. package/build/styles/statusIcon/StatusIcon.css +0 -20
  328. package/build/summary/Summary.js +21 -5
  329. package/build/summary/Summary.js.map +1 -1
  330. package/build/summary/Summary.mjs +21 -5
  331. package/build/summary/Summary.mjs.map +1 -1
  332. package/build/tabs/Tabs.js +23 -3
  333. package/build/tabs/Tabs.js.map +1 -1
  334. package/build/tabs/Tabs.mjs +23 -3
  335. package/build/tabs/Tabs.mjs.map +1 -1
  336. package/build/tile/Tile.js +24 -2
  337. package/build/tile/Tile.js.map +1 -1
  338. package/build/tile/Tile.mjs +24 -2
  339. package/build/tile/Tile.mjs.map +1 -1
  340. package/build/title/Title.js +23 -1
  341. package/build/title/Title.js.map +1 -1
  342. package/build/title/Title.mjs +23 -1
  343. package/build/title/Title.mjs.map +1 -1
  344. package/build/tooltip/Tooltip.js +22 -1
  345. package/build/tooltip/Tooltip.js.map +1 -1
  346. package/build/tooltip/Tooltip.mjs +22 -1
  347. package/build/tooltip/Tooltip.mjs.map +1 -1
  348. package/build/typeahead/Typeahead.js +22 -4
  349. package/build/typeahead/Typeahead.js.map +1 -1
  350. package/build/typeahead/Typeahead.mjs +22 -4
  351. package/build/typeahead/Typeahead.mjs.map +1 -1
  352. package/build/types/avatar/Avatar.d.ts.map +1 -1
  353. package/build/types/badge/Badge.d.ts.map +1 -1
  354. package/build/types/button/Button.d.ts.map +1 -1
  355. package/build/types/button/Button.messages.d.ts +7 -7
  356. package/build/types/button/Button.messages.d.ts.map +1 -1
  357. package/build/types/button/classMap.d.ts +10 -10
  358. package/build/types/button/classMap.d.ts.map +1 -1
  359. package/build/types/button/legacyUtils/index.d.ts +1 -1
  360. package/build/types/button/legacyUtils/index.d.ts.map +1 -1
  361. package/build/types/button/legacyUtils/legacyUtils.d.ts +20 -6
  362. package/build/types/button/legacyUtils/legacyUtils.d.ts.map +1 -1
  363. package/build/types/checkboxButton/index.d.ts +1 -1
  364. package/build/types/checkboxButton/index.d.ts.map +1 -1
  365. package/build/types/common/circle/Circle.d.ts +1 -1
  366. package/build/types/common/circle/Circle.d.ts.map +1 -1
  367. package/build/types/common/fakeEvents.d.ts +23 -0
  368. package/build/types/common/fakeEvents.d.ts.map +1 -0
  369. package/build/types/common/hooks/index.d.ts +4 -4
  370. package/build/types/common/hooks/index.d.ts.map +1 -1
  371. package/build/types/common/hooks/useConditionalListener/index.d.ts +1 -1
  372. package/build/types/common/hooks/useConditionalListener/index.d.ts.map +1 -1
  373. package/build/types/common/hooks/useDirection/index.d.ts +1 -1
  374. package/build/types/common/hooks/useDirection/index.d.ts.map +1 -1
  375. package/build/types/common/hooks/useHasIntersected/index.d.ts +1 -1
  376. package/build/types/common/hooks/useHasIntersected/index.d.ts.map +1 -1
  377. package/build/types/common/hooks/useHasIntersected/useHasIntersected.d.ts +15 -4
  378. package/build/types/common/hooks/useHasIntersected/useHasIntersected.d.ts.map +1 -1
  379. package/build/types/common/index.d.ts +28 -28
  380. package/build/types/common/index.d.ts.map +1 -1
  381. package/build/types/common/responsivePanel/index.d.ts +1 -1
  382. package/build/types/common/responsivePanel/index.d.ts.map +1 -1
  383. package/build/types/index.d.ts +1 -0
  384. package/build/types/index.d.ts.map +1 -1
  385. package/build/types/navigationOption/NavigationOption.d.ts +1 -0
  386. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  387. package/build/types/statusIcon/StatusIcon.d.ts +7 -3
  388. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  389. package/build/types/stepper/deviceDetection.d.ts +1 -1
  390. package/build/types/stepper/deviceDetection.d.ts.map +1 -1
  391. package/build/types/test-utils/style-mock.d.ts +1 -0
  392. package/build/types/test-utils/style-mock.d.ts.map +1 -0
  393. package/build/types/utilities/deprecatedProperty/deprecatedProperty.d.ts +8 -6
  394. package/build/types/utilities/deprecatedProperty/deprecatedProperty.d.ts.map +1 -1
  395. package/build/types/utilities/deprecatedProperty/index.d.ts +1 -1
  396. package/build/types/utilities/deprecatedProperty/index.d.ts.map +1 -1
  397. package/build/types/utilities/index.d.ts +2 -2
  398. package/build/types/utilities/index.d.ts.map +1 -1
  399. package/build/types/utilities/logActionRequired.d.ts +2 -2
  400. package/build/types/utilities/logActionRequired.d.ts.map +1 -1
  401. package/build/upload/Upload.js +21 -2
  402. package/build/upload/Upload.js.map +1 -1
  403. package/build/upload/Upload.mjs +21 -2
  404. package/build/upload/Upload.mjs.map +1 -1
  405. package/build/upload/steps/processingStep/processingStep.js +25 -3
  406. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  407. package/build/upload/steps/processingStep/processingStep.mjs +25 -3
  408. package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
  409. package/build/upload/steps/uploadImageStep/uploadImageStep.js +23 -3
  410. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  411. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +23 -3
  412. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  413. package/build/uploadInput/UploadInput.js +22 -3
  414. package/build/uploadInput/UploadInput.js.map +1 -1
  415. package/build/uploadInput/UploadInput.mjs +22 -3
  416. package/build/uploadInput/UploadInput.mjs.map +1 -1
  417. package/build/uploadInput/uploadButton/UploadButton.js +21 -2
  418. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  419. package/build/uploadInput/uploadButton/UploadButton.mjs +21 -2
  420. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  421. package/build/uploadInput/uploadButton/defaults.js +24 -0
  422. package/build/uploadInput/uploadButton/defaults.js.map +1 -1
  423. package/build/uploadInput/uploadButton/defaults.mjs +24 -0
  424. package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
  425. package/build/uploadInput/uploadItem/UploadItem.js +21 -4
  426. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  427. package/build/uploadInput/uploadItem/UploadItem.mjs +21 -4
  428. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  429. package/build/utilities/logActionRequired.js.map +1 -1
  430. package/build/utilities/logActionRequired.mjs.map +1 -1
  431. package/build/withDisplayFormat/WithDisplayFormat.js +25 -1
  432. package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
  433. package/build/withDisplayFormat/WithDisplayFormat.mjs +25 -1
  434. package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
  435. package/package.json +3 -3
  436. package/src/avatar/Avatar.css +29 -0
  437. package/src/avatar/Avatar.less +12 -0
  438. package/src/avatar/Avatar.tsx +4 -8
  439. package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +11 -22
  440. package/src/badge/Badge.css +6 -0
  441. package/src/badge/Badge.less +6 -0
  442. package/src/badge/Badge.tsx +1 -11
  443. package/src/button/Button.tsx +0 -3
  444. package/src/button/legacyUtils/legacyUtils.ts +74 -0
  445. package/src/circularButton/CircularButton.css +2 -2
  446. package/src/circularButton/CircularButton.less +1 -1
  447. package/src/circularButton/CircularButton.story.tsx +3 -0
  448. package/src/circularButton/CircularButton.tsx +1 -1
  449. package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap +10 -10
  450. package/src/common/circle/Circle.css +4 -0
  451. package/src/common/circle/Circle.less +6 -0
  452. package/src/common/circle/Circle.story.tsx +2 -2
  453. package/src/common/circle/Circle.tsx +25 -2
  454. package/src/common/{fakeEvents.js → fakeEvents.ts} +1 -1
  455. package/src/common/hooks/useHasIntersected/{useHasIntersected.js → useHasIntersected.ts} +20 -11
  456. package/src/flowNavigation/{FlowNavigation.story.js → FlowNavigation.story.tsx} +34 -16
  457. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +4 -8
  458. package/src/i18n/de.json +5 -0
  459. package/src/i18n/es.json +5 -0
  460. package/src/i18n/fr.json +5 -0
  461. package/src/i18n/hu.json +5 -0
  462. package/src/i18n/id.json +5 -0
  463. package/src/i18n/it.json +5 -0
  464. package/src/i18n/ja.json +5 -0
  465. package/src/i18n/pl.json +5 -0
  466. package/src/i18n/pt.json +5 -0
  467. package/src/i18n/ro.json +5 -0
  468. package/src/i18n/ru.json +5 -0
  469. package/src/i18n/tr.json +5 -0
  470. package/src/index.ts +1 -0
  471. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +78 -0
  472. package/src/main.css +46 -22
  473. package/src/navigationOption/{NavigationOption.story.js → NavigationOption.story.tsx} +23 -5
  474. package/src/navigationOption/NavigationOption.tsx +1 -1
  475. package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +2 -4
  476. package/src/promoCard/PromoCard.spec.tsx +1 -1
  477. package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +2 -4
  478. package/src/select/{Select.story.js → Select.story.tsx} +97 -47
  479. package/src/statusIcon/StatusIcon.css +0 -20
  480. package/src/statusIcon/StatusIcon.less +0 -17
  481. package/src/statusIcon/StatusIcon.spec.tsx +2 -21
  482. package/src/statusIcon/StatusIcon.story.tsx +32 -1
  483. package/src/statusIcon/StatusIcon.tsx +11 -10
  484. package/src/stepper/{deviceDetection.js → deviceDetection.ts} +2 -6
  485. package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts} +7 -13
  486. package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts} +23 -4
  487. package/src/utilities/{logActionRequired.js → logActionRequired.ts} +2 -2
  488. package/src/button/legacyUtils/legacyUtils.js +0 -54
  489. package/src/common/requirements.js +0 -440
  490. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js +0 -85
  491. /package/src/button/{Button.messages.js → Button.messages.ts} +0 -0
  492. /package/src/button/{classMap.js → classMap.ts} +0 -0
  493. /package/src/button/legacyUtils/{index.js → index.ts} +0 -0
  494. /package/src/checkboxButton/{index.js → index.ts} +0 -0
  495. /package/src/common/hooks/{index.js → index.ts} +0 -0
  496. /package/src/common/hooks/useConditionalListener/{index.js → index.ts} +0 -0
  497. /package/src/common/hooks/useDirection/{index.js → index.ts} +0 -0
  498. /package/src/common/hooks/useHasIntersected/{index.js → index.ts} +0 -0
  499. /package/src/common/{index.js → index.ts} +0 -0
  500. /package/src/common/responsivePanel/{index.js → index.ts} +0 -0
  501. /package/src/test-utils/{style-mock.js → style-mock.ts} +0 -0
  502. /package/src/utilities/deprecatedProperty/{index.js → index.ts} +0 -0
  503. /package/src/utilities/{index.js → index.ts} +0 -0
package/build/promoCard/PromoCardIndicator.js CHANGED
@@ -5,8 +5,29 @@ var clsx = require('clsx');
5
5
  var avatarTypes = require('../avatar/avatarTypes.js');
6
6
  var Avatar = require('../avatar/Avatar.js');
7
7
  var Body = require('../body/Body.js');
8
- var jsxRuntime = require('react/jsx-runtime');
8
+ require('../common/theme.js');
9
+ require('../common/direction.js');
10
+ require('../common/propsValues/control.js');
11
+ require('../common/propsValues/breakpoint.js');
12
+ require('../common/propsValues/size.js');
9
13
  var typography = require('../common/propsValues/typography.js');
14
+ require('../common/propsValues/width.js');
15
+ require('../common/propsValues/type.js');
16
+ require('../common/propsValues/dateMode.js');
17
+ require('../common/propsValues/monthFormat.js');
18
+ require('../common/propsValues/position.js');
19
+ require('../common/propsValues/layouts.js');
20
+ require('../common/propsValues/status.js');
21
+ require('../common/propsValues/sentiment.js');
22
+ require('../common/propsValues/profileType.js');
23
+ require('../common/propsValues/variant.js');
24
+ require('../common/propsValues/scroll.js');
25
+ require('../common/propsValues/markdownNodeType.js');
26
+ require('../common/fileType.js');
27
+ require('react');
28
+ require('react-intl');
29
+ require('../common/closeButton/CloseButton.messages.js');
30
+ var jsxRuntime = require('react/jsx-runtime');
10
31
 
11
32
  const PromoCardIndicator = ({
12
33
  className,
package/build/promoCard/PromoCardIndicator.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <Avatar\n type={AvatarType.ICON}\n size={isSmall ? 40 : 56}\n backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </Avatar>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC,cAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,cAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,MAAM,EAAA;MACLH,IAAI,EAAEI,sBAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <Avatar\n type={AvatarType.ICON}\n size={isSmall ? 40 : 56}\n backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </Avatar>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC,cAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,cAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,MAAM,EAAA;MACLH,IAAI,EAAEI,sBAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
package/build/promoCard/PromoCardIndicator.mjs CHANGED
@@ -3,8 +3,29 @@ import { clsx } from 'clsx';
3
3
  import { AvatarType } from '../avatar/avatarTypes.mjs';
4
4
  import Avatar from '../avatar/Avatar.mjs';
5
5
  import Body from '../body/Body.mjs';
6
- import { jsxs, jsx } from 'react/jsx-runtime';
6
+ import '../common/theme.mjs';
7
+ import '../common/direction.mjs';
8
+ import '../common/propsValues/control.mjs';
9
+ import '../common/propsValues/breakpoint.mjs';
10
+ import '../common/propsValues/size.mjs';
7
11
  import { Typography } from '../common/propsValues/typography.mjs';
12
+ import '../common/propsValues/width.mjs';
13
+ import '../common/propsValues/type.mjs';
14
+ import '../common/propsValues/dateMode.mjs';
15
+ import '../common/propsValues/monthFormat.mjs';
16
+ import '../common/propsValues/position.mjs';
17
+ import '../common/propsValues/layouts.mjs';
18
+ import '../common/propsValues/status.mjs';
19
+ import '../common/propsValues/sentiment.mjs';
20
+ import '../common/propsValues/profileType.mjs';
21
+ import '../common/propsValues/variant.mjs';
22
+ import '../common/propsValues/scroll.mjs';
23
+ import '../common/propsValues/markdownNodeType.mjs';
24
+ import '../common/fileType.mjs';
25
+ import 'react';
26
+ import 'react-intl';
27
+ import '../common/closeButton/CloseButton.messages.mjs';
28
+ import { jsxs, jsx } from 'react/jsx-runtime';
8
29
 
9
30
  const PromoCardIndicator = ({
10
31
  className,
package/build/promoCard/PromoCardIndicator.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromoCardIndicator.mjs","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <Avatar\n type={AvatarType.ICON}\n size={isSmall ? 40 : 56}\n backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </Avatar>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,QAAQ,EAAEC,QAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,MAAM,EAAA;MACLH,IAAI,EAAEI,UAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"PromoCardIndicator.mjs","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <Avatar\n type={AvatarType.ICON}\n size={isSmall ? 40 : 56}\n backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </Avatar>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,QAAQ,EAAEC,QAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,MAAM,EAAA;MACLH,IAAI,EAAEI,UAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
package/build/provider/Provider.js CHANGED
@@ -1,11 +1,34 @@
1
1
  'use strict';
2
2
 
3
3
  var reactIntl = require('react-intl');
4
+ require('../common/theme.js');
5
+ require('../common/direction.js');
6
+ require('../common/propsValues/control.js');
7
+ require('../common/propsValues/breakpoint.js');
8
+ require('../common/propsValues/size.js');
9
+ require('../common/propsValues/typography.js');
10
+ require('../common/propsValues/width.js');
11
+ require('../common/propsValues/type.js');
12
+ require('../common/propsValues/dateMode.js');
13
+ require('../common/propsValues/monthFormat.js');
14
+ require('../common/propsValues/position.js');
15
+ require('../common/propsValues/layouts.js');
16
+ require('../common/propsValues/status.js');
17
+ require('../common/propsValues/sentiment.js');
18
+ require('../common/propsValues/profileType.js');
19
+ require('../common/propsValues/variant.js');
20
+ require('../common/propsValues/scroll.js');
21
+ require('../common/propsValues/markdownNodeType.js');
22
+ require('../common/fileType.js');
23
+ var index = require('../common/locale/index.js');
24
+ require('@transferwise/icons');
25
+ require('clsx');
26
+ require('react');
27
+ require('../common/closeButton/CloseButton.messages.js');
28
+ var jsxRuntime = require('react/jsx-runtime');
4
29
  var en = require('../i18n/en.json.js');
5
30
  var DirectionProvider = require('./direction/DirectionProvider.js');
6
31
  var LanguageProvider = require('./language/LanguageProvider.js');
7
- var jsxRuntime = require('react/jsx-runtime');
8
- var index = require('../common/locale/index.js');
9
32
 
10
33
  function Provider({
11
34
  i18n,
package/build/provider/Provider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Provider.js","sources":["../../src/provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './direction';\nimport { LanguageProvider } from './language';\n\nexport interface ProviderProps {\n i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n const { locale, messages, defaultRichTextElements } = i18n;\n const adjustedLocale = adjustLocale(locale);\n let intlConfig;\n\n if (adjustedLocale === null) {\n // eslint-disable-next-line no-console\n console.warn(\n `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n );\n\n intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n } else {\n intlConfig = { locale: adjustedLocale, messages };\n }\n\n return (\n <DirectionProvider direction={getDirectionFromLocale(locale)}>\n <LanguageProvider locale={locale}>\n <IntlProvider\n defaultLocale={DEFAULT_LOCALE}\n locale={intlConfig.locale}\n messages={intlConfig.messages}\n defaultRichTextElements={defaultRichTextElements}\n >\n {children}\n </IntlProvider>\n </LanguageProvider>\n </DirectionProvider>\n );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":";;;;;;;;;AAcwB,SAAAA,QAAQA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,EAAA;EAChE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,uBAAAA;AAAuB,GAAE,GAAGJ,IAAI,CAAA;AAC1D,EAAA,MAAMK,cAAc,GAAGC,kBAAY,CAACJ,MAAM,CAAC,CAAA;AAC3C,EAAA,IAAIK,UAAU,CAAA;EAEd,IAAIF,cAAc,KAAK,IAAI,EAAE;AAC3B;IACAG,OAAO,CAACC,IAAI,CACV,CAAA,wCAAA,EAA2CP,MAAM,CAAqBQ,kBAAAA,EAAAA,oBAAc,GAAG,CACxF,CAAA;AAEDH,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEQ,oBAAc;AAAEP,MAAAA,QAAQ,EAAE;AAAE,QAAA,GAAGQ,EAAE;QAAE,GAAGR,QAAAA;AAAQ,OAAA;KAAI,CAAA;AAC3E,GAAC,MAAM;AACLI,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEG,cAAc;AAAEF,MAAAA,QAAAA;KAAU,CAAA;AACnD,GAAA;EAEA,oBACES,cAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEC,4BAAsB,CAACb,MAAM,CAAE;IAAAD,QAAA,eAC3DW,cAAA,CAACI,iCAAgB,EAAA;AAACd,MAAAA,MAAM,EAAEA,MAAO;MAAAD,QAAA,eAC/BW,cAAA,CAACK,sBAAY,EAAA;AACXC,QAAAA,aAAa,EAAER,oBAAe;QAC9BR,MAAM,EAAEK,UAAU,CAACL,MAAO;QAC1BC,QAAQ,EAAEI,UAAU,CAACJ,QAAS;AAC9BC,QAAAA,uBAAuB,EAAEA,uBAAwB;AAAAH,QAAAA,QAAA,EAEhDA,QAAAA;OACW,CAAA;KACE,CAAA;AACpB,GAAmB,CAAC,CAAA;AAExB;;;;"}
1
+ {"version":3,"file":"Provider.js","sources":["../../src/provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './direction';\nimport { LanguageProvider } from './language';\n\nexport interface ProviderProps {\n i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n const { locale, messages, defaultRichTextElements } = i18n;\n const adjustedLocale = adjustLocale(locale);\n let intlConfig;\n\n if (adjustedLocale === null) {\n // eslint-disable-next-line no-console\n console.warn(\n `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n );\n\n intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n } else {\n intlConfig = { locale: adjustedLocale, messages };\n }\n\n return (\n <DirectionProvider direction={getDirectionFromLocale(locale)}>\n <LanguageProvider locale={locale}>\n <IntlProvider\n defaultLocale={DEFAULT_LOCALE}\n locale={intlConfig.locale}\n messages={intlConfig.messages}\n defaultRichTextElements={defaultRichTextElements}\n >\n {children}\n </IntlProvider>\n </LanguageProvider>\n </DirectionProvider>\n );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcwB,SAAAA,QAAQA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,EAAA;EAChE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,uBAAAA;AAAuB,GAAE,GAAGJ,IAAI,CAAA;AAC1D,EAAA,MAAMK,cAAc,GAAGC,kBAAY,CAACJ,MAAM,CAAC,CAAA;AAC3C,EAAA,IAAIK,UAAU,CAAA;EAEd,IAAIF,cAAc,KAAK,IAAI,EAAE;AAC3B;IACAG,OAAO,CAACC,IAAI,CACV,CAAA,wCAAA,EAA2CP,MAAM,CAAqBQ,kBAAAA,EAAAA,oBAAc,GAAG,CACxF,CAAA;AAEDH,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEQ,oBAAc;AAAEP,MAAAA,QAAQ,EAAE;AAAE,QAAA,GAAGQ,EAAE;QAAE,GAAGR,QAAAA;AAAQ,OAAA;KAAI,CAAA;AAC3E,GAAC,MAAM;AACLI,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEG,cAAc;AAAEF,MAAAA,QAAAA;KAAU,CAAA;AACnD,GAAA;EAEA,oBACES,cAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEC,4BAAsB,CAACb,MAAM,CAAE;IAAAD,QAAA,eAC3DW,cAAA,CAACI,iCAAgB,EAAA;AAACd,MAAAA,MAAM,EAAEA,MAAO;MAAAD,QAAA,eAC/BW,cAAA,CAACK,sBAAY,EAAA;AACXC,QAAAA,aAAa,EAAER,oBAAe;QAC9BR,MAAM,EAAEK,UAAU,CAACL,MAAO;QAC1BC,QAAQ,EAAEI,UAAU,CAACJ,QAAS;AAC9BC,QAAAA,uBAAuB,EAAEA,uBAAwB;AAAAH,QAAAA,QAAA,EAEhDA,QAAAA;OACW,CAAA;KACE,CAAA;AACpB,GAAmB,CAAC,CAAA;AAExB;;;;"}
package/build/provider/Provider.mjs CHANGED
@@ -1,9 +1,32 @@
1
1
  import { IntlProvider } from 'react-intl';
2
+ import '../common/theme.mjs';
3
+ import '../common/direction.mjs';
4
+ import '../common/propsValues/control.mjs';
5
+ import '../common/propsValues/breakpoint.mjs';
6
+ import '../common/propsValues/size.mjs';
7
+ import '../common/propsValues/typography.mjs';
8
+ import '../common/propsValues/width.mjs';
9
+ import '../common/propsValues/type.mjs';
10
+ import '../common/propsValues/dateMode.mjs';
11
+ import '../common/propsValues/monthFormat.mjs';
12
+ import '../common/propsValues/position.mjs';
13
+ import '../common/propsValues/layouts.mjs';
14
+ import '../common/propsValues/status.mjs';
15
+ import '../common/propsValues/sentiment.mjs';
16
+ import '../common/propsValues/profileType.mjs';
17
+ import '../common/propsValues/variant.mjs';
18
+ import '../common/propsValues/scroll.mjs';
19
+ import '../common/propsValues/markdownNodeType.mjs';
20
+ import '../common/fileType.mjs';
21
+ import { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common/locale/index.mjs';
22
+ import '@transferwise/icons';
23
+ import 'clsx';
24
+ import 'react';
25
+ import '../common/closeButton/CloseButton.messages.mjs';
26
+ import { jsx } from 'react/jsx-runtime';
2
27
  import en from '../i18n/en.json.mjs';
3
28
  import { DirectionProvider } from './direction/DirectionProvider.mjs';
4
29
  import { LanguageProvider } from './language/LanguageProvider.mjs';
5
- import { jsx } from 'react/jsx-runtime';
6
- import { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common/locale/index.mjs';
7
30
 
8
31
  function Provider({
9
32
  i18n,
package/build/provider/Provider.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Provider.mjs","sources":["../../src/provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './direction';\nimport { LanguageProvider } from './language';\n\nexport interface ProviderProps {\n i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n const { locale, messages, defaultRichTextElements } = i18n;\n const adjustedLocale = adjustLocale(locale);\n let intlConfig;\n\n if (adjustedLocale === null) {\n // eslint-disable-next-line no-console\n console.warn(\n `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n );\n\n intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n } else {\n intlConfig = { locale: adjustedLocale, messages };\n }\n\n return (\n <DirectionProvider direction={getDirectionFromLocale(locale)}>\n <LanguageProvider locale={locale}>\n <IntlProvider\n defaultLocale={DEFAULT_LOCALE}\n locale={intlConfig.locale}\n messages={intlConfig.messages}\n defaultRichTextElements={defaultRichTextElements}\n >\n {children}\n </IntlProvider>\n </LanguageProvider>\n </DirectionProvider>\n );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":";;;;;;;AAcwB,SAAAA,QAAQA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,EAAA;EAChE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,uBAAAA;AAAuB,GAAE,GAAGJ,IAAI,CAAA;AAC1D,EAAA,MAAMK,cAAc,GAAGC,YAAY,CAACJ,MAAM,CAAC,CAAA;AAC3C,EAAA,IAAIK,UAAU,CAAA;EAEd,IAAIF,cAAc,KAAK,IAAI,EAAE;AAC3B;IACAG,OAAO,CAACC,IAAI,CACV,CAAA,wCAAA,EAA2CP,MAAM,CAAqBQ,kBAAAA,EAAAA,cAAc,GAAG,CACxF,CAAA;AAEDH,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEQ,cAAc;AAAEP,MAAAA,QAAQ,EAAE;AAAE,QAAA,GAAGQ,EAAE;QAAE,GAAGR,QAAAA;AAAQ,OAAA;KAAI,CAAA;AAC3E,GAAC,MAAM;AACLI,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEG,cAAc;AAAEF,MAAAA,QAAAA;KAAU,CAAA;AACnD,GAAA;EAEA,oBACES,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEC,sBAAsB,CAACb,MAAM,CAAE;IAAAD,QAAA,eAC3DW,GAAA,CAACI,gBAAgB,EAAA;AAACd,MAAAA,MAAM,EAAEA,MAAO;MAAAD,QAAA,eAC/BW,GAAA,CAACK,YAAY,EAAA;AACXC,QAAAA,aAAa,EAAER,cAAe;QAC9BR,MAAM,EAAEK,UAAU,CAACL,MAAO;QAC1BC,QAAQ,EAAEI,UAAU,CAACJ,QAAS;AAC9BC,QAAAA,uBAAuB,EAAEA,uBAAwB;AAAAH,QAAAA,QAAA,EAEhDA,QAAAA;OACW,CAAA;KACE,CAAA;AACpB,GAAmB,CAAC,CAAA;AAExB;;;;"}
1
+ {"version":3,"file":"Provider.mjs","sources":["../../src/provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './direction';\nimport { LanguageProvider } from './language';\n\nexport interface ProviderProps {\n i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n const { locale, messages, defaultRichTextElements } = i18n;\n const adjustedLocale = adjustLocale(locale);\n let intlConfig;\n\n if (adjustedLocale === null) {\n // eslint-disable-next-line no-console\n console.warn(\n `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n );\n\n intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n } else {\n intlConfig = { locale: adjustedLocale, messages };\n }\n\n return (\n <DirectionProvider direction={getDirectionFromLocale(locale)}>\n <LanguageProvider locale={locale}>\n <IntlProvider\n defaultLocale={DEFAULT_LOCALE}\n locale={intlConfig.locale}\n messages={intlConfig.messages}\n defaultRichTextElements={defaultRichTextElements}\n >\n {children}\n </IntlProvider>\n </LanguageProvider>\n </DirectionProvider>\n );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcwB,SAAAA,QAAQA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,EAAA;EAChE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,uBAAAA;AAAuB,GAAE,GAAGJ,IAAI,CAAA;AAC1D,EAAA,MAAMK,cAAc,GAAGC,YAAY,CAACJ,MAAM,CAAC,CAAA;AAC3C,EAAA,IAAIK,UAAU,CAAA;EAEd,IAAIF,cAAc,KAAK,IAAI,EAAE;AAC3B;IACAG,OAAO,CAACC,IAAI,CACV,CAAA,wCAAA,EAA2CP,MAAM,CAAqBQ,kBAAAA,EAAAA,cAAc,GAAG,CACxF,CAAA;AAEDH,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEQ,cAAc;AAAEP,MAAAA,QAAQ,EAAE;AAAE,QAAA,GAAGQ,EAAE;QAAE,GAAGR,QAAAA;AAAQ,OAAA;KAAI,CAAA;AAC3E,GAAC,MAAM;AACLI,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEG,cAAc;AAAEF,MAAAA,QAAAA;KAAU,CAAA;AACnD,GAAA;EAEA,oBACES,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEC,sBAAsB,CAACb,MAAM,CAAE;IAAAD,QAAA,eAC3DW,GAAA,CAACI,gBAAgB,EAAA;AAACd,MAAAA,MAAM,EAAEA,MAAO;MAAAD,QAAA,eAC/BW,GAAA,CAACK,YAAY,EAAA;AACXC,QAAAA,aAAa,EAAER,cAAe;QAC9BR,MAAM,EAAEK,UAAU,CAACL,MAAO;QAC1BC,QAAQ,EAAEI,UAAU,CAACJ,QAAS;AAC9BC,QAAAA,uBAAuB,EAAEA,uBAAwB;AAAAH,QAAAA,QAAA,EAEhDA,QAAAA;OACW,CAAA;KACE,CAAA;AACpB,GAAmB,CAAC,CAAA;AAExB;;;;"}
package/build/radio/Radio.js CHANGED
@@ -2,9 +2,31 @@
2
2
 
3
3
  var clsx = require('clsx');
4
4
  var Body = require('../body/Body.js');
5
- var RadioButton = require('../common/RadioButton/RadioButton.js');
6
- var jsxRuntime = require('react/jsx-runtime');
5
+ require('../common/theme.js');
6
+ require('../common/direction.js');
7
+ require('../common/propsValues/control.js');
8
+ require('../common/propsValues/breakpoint.js');
9
+ require('../common/propsValues/size.js');
7
10
  var typography = require('../common/propsValues/typography.js');
11
+ require('../common/propsValues/width.js');
12
+ require('../common/propsValues/type.js');
13
+ require('../common/propsValues/dateMode.js');
14
+ require('../common/propsValues/monthFormat.js');
15
+ require('../common/propsValues/position.js');
16
+ require('../common/propsValues/layouts.js');
17
+ require('../common/propsValues/status.js');
18
+ require('../common/propsValues/sentiment.js');
19
+ require('../common/propsValues/profileType.js');
20
+ require('../common/propsValues/variant.js');
21
+ require('../common/propsValues/scroll.js');
22
+ require('../common/propsValues/markdownNodeType.js');
23
+ require('../common/fileType.js');
24
+ require('@transferwise/icons');
25
+ require('react');
26
+ require('react-intl');
27
+ require('../common/closeButton/CloseButton.messages.js');
28
+ var jsxRuntime = require('react/jsx-runtime');
29
+ var RadioButton = require('../common/RadioButton/RadioButton.js');
8
30
 
9
31
  function Radio({
10
32
  label,
package/build/radio/Radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,SAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,cAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,eAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,cAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,SAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,cAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,eAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,cAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
package/build/radio/Radio.mjs CHANGED
@@ -1,8 +1,30 @@
1
1
  import { clsx } from 'clsx';
2
2
  import Body from '../body/Body.mjs';
3
- import RadioButton from '../common/RadioButton/RadioButton.mjs';
4
- import { jsx, jsxs } from 'react/jsx-runtime';
3
+ import '../common/theme.mjs';
4
+ import '../common/direction.mjs';
5
+ import '../common/propsValues/control.mjs';
6
+ import '../common/propsValues/breakpoint.mjs';
7
+ import '../common/propsValues/size.mjs';
5
8
  import { Typography } from '../common/propsValues/typography.mjs';
9
+ import '../common/propsValues/width.mjs';
10
+ import '../common/propsValues/type.mjs';
11
+ import '../common/propsValues/dateMode.mjs';
12
+ import '../common/propsValues/monthFormat.mjs';
13
+ import '../common/propsValues/position.mjs';
14
+ import '../common/propsValues/layouts.mjs';
15
+ import '../common/propsValues/status.mjs';
16
+ import '../common/propsValues/sentiment.mjs';
17
+ import '../common/propsValues/profileType.mjs';
18
+ import '../common/propsValues/variant.mjs';
19
+ import '../common/propsValues/scroll.mjs';
20
+ import '../common/propsValues/markdownNodeType.mjs';
21
+ import '../common/fileType.mjs';
22
+ import '@transferwise/icons';
23
+ import 'react';
24
+ import 'react-intl';
25
+ import '../common/closeButton/CloseButton.messages.mjs';
26
+ import { jsx, jsxs } from 'react/jsx-runtime';
27
+ import RadioButton from '../common/RadioButton/RadioButton.mjs';
6
28
 
7
29
  function Radio({
8
30
  label,
package/build/radio/Radio.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.mjs","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,IAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,IAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,GAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,IAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,GAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"Radio.mjs","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,IAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,IAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,GAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,IAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,GAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
package/build/segmentedControl/SegmentedControl.js CHANGED
@@ -3,8 +3,29 @@
3
3
  var clsx = require('clsx');
4
4
  var React = require('react');
5
5
  var Body = require('../body/Body.js');
6
- var jsxRuntime = require('react/jsx-runtime');
6
+ require('../common/theme.js');
7
+ require('../common/direction.js');
8
+ require('../common/propsValues/control.js');
9
+ require('../common/propsValues/breakpoint.js');
10
+ require('../common/propsValues/size.js');
7
11
  var typography = require('../common/propsValues/typography.js');
12
+ require('../common/propsValues/width.js');
13
+ require('../common/propsValues/type.js');
14
+ require('../common/propsValues/dateMode.js');
15
+ require('../common/propsValues/monthFormat.js');
16
+ require('../common/propsValues/position.js');
17
+ require('../common/propsValues/layouts.js');
18
+ require('../common/propsValues/status.js');
19
+ require('../common/propsValues/sentiment.js');
20
+ require('../common/propsValues/profileType.js');
21
+ require('../common/propsValues/variant.js');
22
+ require('../common/propsValues/scroll.js');
23
+ require('../common/propsValues/markdownNodeType.js');
24
+ require('../common/fileType.js');
25
+ require('@transferwise/icons');
26
+ require('react-intl');
27
+ require('../common/closeButton/CloseButton.messages.js');
28
+ var jsxRuntime = require('react/jsx-runtime');
8
29
 
9
30
  const SegmentedControl = ({
10
31
  name,
package/build/segmentedControl/SegmentedControl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.js","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const [animate, setAnimate] = useState(false);\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n }\n };\n\n useEffect(() => {\n setAnimate(true);\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.js","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const [animate, setAnimate] = useState(false);\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n }\n };\n\n useEffect(() => {\n setAnimate(true);\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
package/build/segmentedControl/SegmentedControl.mjs CHANGED
@@ -1,8 +1,29 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { useState, useRef, createRef, useEffect } from 'react';
3
3
  import Body from '../body/Body.mjs';
4
- import { jsx, jsxs } from 'react/jsx-runtime';
4
+ import '../common/theme.mjs';
5
+ import '../common/direction.mjs';
6
+ import '../common/propsValues/control.mjs';
7
+ import '../common/propsValues/breakpoint.mjs';
8
+ import '../common/propsValues/size.mjs';
5
9
  import { Typography } from '../common/propsValues/typography.mjs';
10
+ import '../common/propsValues/width.mjs';
11
+ import '../common/propsValues/type.mjs';
12
+ import '../common/propsValues/dateMode.mjs';
13
+ import '../common/propsValues/monthFormat.mjs';
14
+ import '../common/propsValues/position.mjs';
15
+ import '../common/propsValues/layouts.mjs';
16
+ import '../common/propsValues/status.mjs';
17
+ import '../common/propsValues/sentiment.mjs';
18
+ import '../common/propsValues/profileType.mjs';
19
+ import '../common/propsValues/variant.mjs';
20
+ import '../common/propsValues/scroll.mjs';
21
+ import '../common/propsValues/markdownNodeType.mjs';
22
+ import '../common/fileType.mjs';
23
+ import '@transferwise/icons';
24
+ import 'react-intl';
25
+ import '../common/closeButton/CloseButton.messages.mjs';
26
+ import { jsx, jsxs } from 'react/jsx-runtime';
6
27
 
7
28
  const SegmentedControl = ({
8
29
  name,
package/build/segmentedControl/SegmentedControl.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.mjs","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const [animate, setAnimate] = useState(false);\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n }\n };\n\n useEffect(() => {\n setAnimate(true);\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.mjs","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const [animate, setAnimate] = useState(false);\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n }\n };\n\n useEffect(() => {\n setAnimate(true);\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
package/build/select/Select.js CHANGED
@@ -6,17 +6,39 @@ var React = require('react');
6
6
  var reactIntl = require('react-intl');
7
7
  var Button = require('../button/Button.js');
8
8
  var Chevron = require('../chevron/Chevron.js');
9
- var BottomSheet = require('../common/bottomSheet/BottomSheet.js');
10
9
  var documentIosClick = require('../common/domHelpers/documentIosClick.js');
10
+ require('../common/theme.js');
11
+ require('../common/direction.js');
12
+ require('../common/propsValues/control.js');
13
+ require('../common/propsValues/breakpoint.js');
14
+ require('../common/propsValues/size.js');
15
+ require('../common/propsValues/typography.js');
16
+ require('../common/propsValues/width.js');
17
+ require('../common/propsValues/type.js');
18
+ require('../common/propsValues/dateMode.js');
19
+ require('../common/propsValues/monthFormat.js');
20
+ var position = require('../common/propsValues/position.js');
21
+ require('../common/propsValues/layouts.js');
22
+ require('../common/propsValues/status.js');
23
+ require('../common/propsValues/sentiment.js');
24
+ require('../common/propsValues/profileType.js');
25
+ require('../common/propsValues/variant.js');
26
+ require('../common/propsValues/scroll.js');
27
+ require('../common/propsValues/markdownNodeType.js');
28
+ require('../common/fileType.js');
29
+ require('@transferwise/icons');
30
+ require('../common/closeButton/CloseButton.messages.js');
31
+ var jsxRuntime = require('react/jsx-runtime');
32
+ var BottomSheet = require('../common/bottomSheet/BottomSheet.js');
33
+ require('@transferwise/neptune-validation');
34
+ require('../provider/direction/DirectionProvider.js');
35
+ var useLayout = require('../common/hooks/useLayout/useLayout.js');
11
36
  var Panel = require('../common/panel/Panel.js');
12
37
  var Drawer = require('../drawer/Drawer.js');
13
38
  var contexts = require('../inputs/contexts.js');
14
39
  var Select_messages = require('./Select.messages.js');
15
40
  var Option = require('./option/Option.js');
16
41
  var SearchBox = require('./searchBox/SearchBox.js');
17
- var jsxRuntime = require('react/jsx-runtime');
18
- var useLayout = require('../common/hooks/useLayout/useLayout.js');
19
- var position = require('../common/propsValues/position.js');
20
42
 
21
43
  const DEFAULT_SEARCH_VALUE = '';
22
44
  const DEFAULT_OPTIONS_PAGE_SIZE = 1000;