@transferwise/components 0.0.0-experimental-a18466a → 0.0.0-experimental-d6b038b

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 (496) hide show
  1. package/build/accordion/Accordion.js.map +1 -1
  2. package/build/accordion/Accordion.mjs.map +1 -1
  3. package/build/actionButton/ActionButton.js.map +1 -1
  4. package/build/actionButton/ActionButton.mjs.map +1 -1
  5. package/build/actionOption/ActionOption.js.map +1 -1
  6. package/build/actionOption/ActionOption.mjs.map +1 -1
  7. package/build/alert/Alert.js +1 -1
  8. package/build/alert/Alert.js.map +1 -1
  9. package/build/alert/Alert.mjs +1 -1
  10. package/build/alert/Alert.mjs.map +1 -1
  11. package/build/avatar/Avatar.js.map +1 -1
  12. package/build/avatar/Avatar.mjs.map +1 -1
  13. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  14. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  15. package/build/badge/Badge.js.map +1 -1
  16. package/build/badge/Badge.mjs.map +1 -1
  17. package/build/body/Body.js.map +1 -1
  18. package/build/body/Body.mjs.map +1 -1
  19. package/build/button/LegacyButton.js.map +1 -1
  20. package/build/button/LegacyButton.mjs.map +1 -1
  21. package/build/card/Card.js.map +1 -1
  22. package/build/card/Card.mjs.map +1 -1
  23. package/build/checkboxButton/CheckboxButton.js.map +1 -1
  24. package/build/checkboxButton/CheckboxButton.mjs.map +1 -1
  25. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  26. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  27. package/build/circularButton/CircularButton.js.map +1 -1
  28. package/build/circularButton/CircularButton.mjs.map +1 -1
  29. package/build/common/propsValues/type.js +1 -1
  30. package/build/common/propsValues/type.js.map +1 -1
  31. package/build/common/propsValues/type.mjs +1 -1
  32. package/build/common/propsValues/type.mjs.map +1 -1
  33. package/build/common/propsValues/typography.js +1 -1
  34. package/build/common/propsValues/typography.js.map +1 -1
  35. package/build/common/propsValues/typography.mjs +1 -1
  36. package/build/common/propsValues/typography.mjs.map +1 -1
  37. package/build/criticalBanner/CriticalCommsBanner.js +68 -3
  38. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  39. package/build/criticalBanner/CriticalCommsBanner.mjs +69 -4
  40. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  41. package/build/dateInput/DateInput.js +12 -5
  42. package/build/dateInput/DateInput.js.map +1 -1
  43. package/build/dateInput/DateInput.mjs +11 -4
  44. package/build/dateInput/DateInput.mjs.map +1 -1
  45. package/build/dimmer/Dimmer.js.map +1 -1
  46. package/build/dimmer/Dimmer.mjs.map +1 -1
  47. package/build/drawer/Drawer.js.map +1 -1
  48. package/build/drawer/Drawer.mjs.map +1 -1
  49. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +16 -8
  50. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
  51. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +14 -6
  52. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
  53. package/build/field/Field.js.map +1 -1
  54. package/build/field/Field.mjs.map +1 -1
  55. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  56. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  57. package/build/header/Header.js.map +1 -1
  58. package/build/header/Header.mjs.map +1 -1
  59. package/build/iconButton/IconButton.js.map +1 -1
  60. package/build/iconButton/IconButton.mjs.map +1 -1
  61. package/build/index.js +14 -7
  62. package/build/index.js.map +1 -1
  63. package/build/index.mjs +10 -3
  64. package/build/index.mjs.map +1 -1
  65. package/build/inputs/{_BottomSheet.js → SelectInput/BottomSheet/SelectInputBottomSheet.js} +7 -7
  66. package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -0
  67. package/build/inputs/{_BottomSheet.mjs → SelectInput/BottomSheet/SelectInputBottomSheet.mjs} +7 -7
  68. package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -0
  69. package/build/inputs/{_ButtonInput.js → SelectInput/ButtonInput/SelectInputButtonInput.js} +5 -5
  70. package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.js.map +1 -0
  71. package/build/inputs/{_ButtonInput.mjs → SelectInput/ButtonInput/SelectInputButtonInput.mjs} +5 -5
  72. package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.mjs.map +1 -0
  73. package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js +27 -0
  74. package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js.map +1 -0
  75. package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs +25 -0
  76. package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs.map +1 -0
  77. package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js +59 -0
  78. package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js.map +1 -0
  79. package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs +56 -0
  80. package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs.map +1 -0
  81. package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js +50 -0
  82. package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js.map +1 -0
  83. package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs +48 -0
  84. package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs.map +1 -0
  85. package/build/inputs/SelectInput/ItemView/SelectInputItemView.js +47 -0
  86. package/build/inputs/SelectInput/ItemView/SelectInputItemView.js.map +1 -0
  87. package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs +45 -0
  88. package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs.map +1 -0
  89. package/build/inputs/SelectInput/Option/SelectInputOption.js +42 -0
  90. package/build/inputs/SelectInput/Option/SelectInputOption.js.map +1 -0
  91. package/build/inputs/SelectInput/Option/SelectInputOption.mjs +40 -0
  92. package/build/inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -0
  93. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js +40 -0
  94. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -0
  95. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +38 -0
  96. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -0
  97. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js +48 -0
  98. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js.map +1 -0
  99. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs +46 -0
  100. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs.map +1 -0
  101. package/build/inputs/SelectInput/Options/SelectInputOptions.js +300 -0
  102. package/build/inputs/SelectInput/Options/SelectInputOptions.js.map +1 -0
  103. package/build/inputs/SelectInput/Options/SelectInputOptions.mjs +298 -0
  104. package/build/inputs/SelectInput/Options/SelectInputOptions.mjs.map +1 -0
  105. package/build/inputs/{_Popover.js → SelectInput/Popover/SelectInputPopover.js} +7 -7
  106. package/build/inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -0
  107. package/build/inputs/{_Popover.mjs → SelectInput/Popover/SelectInputPopover.mjs} +7 -7
  108. package/build/inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -0
  109. package/build/inputs/SelectInput/SelectInput.contexts.js +29 -0
  110. package/build/inputs/SelectInput/SelectInput.contexts.js.map +1 -0
  111. package/build/inputs/SelectInput/SelectInput.contexts.mjs +24 -0
  112. package/build/inputs/SelectInput/SelectInput.contexts.mjs.map +1 -0
  113. package/build/inputs/SelectInput/SelectInput.js +222 -0
  114. package/build/inputs/SelectInput/SelectInput.js.map +1 -0
  115. package/build/inputs/SelectInput/SelectInput.messages.js.map +1 -0
  116. package/build/inputs/SelectInput/SelectInput.messages.mjs.map +1 -0
  117. package/build/inputs/SelectInput/SelectInput.mjs +216 -0
  118. package/build/inputs/SelectInput/SelectInput.mjs.map +1 -0
  119. package/build/inputs/SelectInput/SelectInput.utils.js +164 -0
  120. package/build/inputs/SelectInput/SelectInput.utils.js.map +1 -0
  121. package/build/inputs/SelectInput/SelectInput.utils.mjs +154 -0
  122. package/build/inputs/SelectInput/SelectInput.utils.mjs.map +1 -0
  123. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js +42 -0
  124. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js.map +1 -0
  125. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs +36 -0
  126. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs.map +1 -0
  127. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  128. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  129. package/build/list/List.js.map +1 -1
  130. package/build/list/List.mjs.map +1 -1
  131. package/build/listItem/Button/ListItemButton.js.map +1 -1
  132. package/build/listItem/Button/ListItemButton.mjs.map +1 -1
  133. package/build/listItem/IconButton/ListItemIconButton.js.map +1 -1
  134. package/build/listItem/IconButton/ListItemIconButton.mjs.map +1 -1
  135. package/build/listItem/Image/ListItemImage.js.map +1 -1
  136. package/build/listItem/Image/ListItemImage.mjs.map +1 -1
  137. package/build/listItem/ListItem.js.map +1 -1
  138. package/build/listItem/ListItem.mjs.map +1 -1
  139. package/build/loader/Loader.js.map +1 -1
  140. package/build/loader/Loader.mjs.map +1 -1
  141. package/build/logo/Logo.js.map +1 -1
  142. package/build/logo/Logo.mjs.map +1 -1
  143. package/build/main.css +123 -105
  144. package/build/modal/Modal.js.map +1 -1
  145. package/build/modal/Modal.mjs.map +1 -1
  146. package/build/moneyInput/MoneyInput.js +9 -2
  147. package/build/moneyInput/MoneyInput.js.map +1 -1
  148. package/build/moneyInput/MoneyInput.mjs +8 -1
  149. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  150. package/build/navigationOption/NavigationOption.js.map +1 -1
  151. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  152. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  153. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  154. package/build/nudge/Nudge.js.map +1 -1
  155. package/build/nudge/Nudge.mjs.map +1 -1
  156. package/build/phoneNumberInput/PhoneNumberInput.js +10 -3
  157. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  158. package/build/phoneNumberInput/PhoneNumberInput.mjs +9 -2
  159. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  160. package/build/popover/Popover.js.map +1 -1
  161. package/build/popover/Popover.mjs.map +1 -1
  162. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  163. package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
  164. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  165. package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
  166. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  167. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  168. package/build/radioOption/RadioOption.js.map +1 -1
  169. package/build/radioOption/RadioOption.mjs.map +1 -1
  170. package/build/select/Select.js.map +1 -1
  171. package/build/select/Select.mjs.map +1 -1
  172. package/build/statusIcon/StatusIcon.js.map +1 -1
  173. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  174. package/build/styles/criticalBanner/CriticalCommsBanner.css +33 -15
  175. package/build/styles/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +96 -0
  176. package/build/styles/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +16 -0
  177. package/build/styles/inputs/SelectInput/ClearButton/SelectInputClearButton.css +46 -0
  178. package/build/styles/inputs/SelectInput/ItemView/SelectInputItemView.css +16 -0
  179. package/build/styles/inputs/SelectInput/Option/SelectInputOption.css +33 -0
  180. package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +37 -0
  181. package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +81 -0
  182. package/build/styles/inputs/SelectInput/Popover/SelectInputPopover.css +46 -0
  183. package/build/styles/main.css +123 -105
  184. package/build/summary/Summary.js +1 -1
  185. package/build/summary/Summary.js.map +1 -1
  186. package/build/summary/Summary.mjs +1 -1
  187. package/build/summary/Summary.mjs.map +1 -1
  188. package/build/switchOption/SwitchOption.js +1 -1
  189. package/build/switchOption/SwitchOption.js.map +1 -1
  190. package/build/switchOption/SwitchOption.mjs +1 -1
  191. package/build/switchOption/SwitchOption.mjs.map +1 -1
  192. package/build/tabs/Tabs.js.map +1 -1
  193. package/build/tabs/Tabs.mjs.map +1 -1
  194. package/build/typeahead/Typeahead.js.map +1 -1
  195. package/build/typeahead/Typeahead.mjs.map +1 -1
  196. package/build/types/accordion/Accordion.d.ts +2 -8
  197. package/build/types/accordion/Accordion.d.ts.map +1 -1
  198. package/build/types/actionButton/ActionButton.d.ts +4 -6
  199. package/build/types/actionButton/ActionButton.d.ts.map +1 -1
  200. package/build/types/actionOption/ActionOption.d.ts +1 -1
  201. package/build/types/alert/Alert.d.ts +2 -5
  202. package/build/types/alert/Alert.d.ts.map +1 -1
  203. package/build/types/avatar/Avatar.d.ts +0 -4
  204. package/build/types/avatar/Avatar.d.ts.map +1 -1
  205. package/build/types/avatarLayout/AvatarLayout.d.ts +1 -5
  206. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  207. package/build/types/badge/Badge.d.ts +0 -2
  208. package/build/types/badge/Badge.d.ts.map +1 -1
  209. package/build/types/body/Body.d.ts +6 -2
  210. package/build/types/body/Body.d.ts.map +1 -1
  211. package/build/types/button/Button.types.d.ts +1 -4
  212. package/build/types/button/Button.types.d.ts.map +1 -1
  213. package/build/types/button/LegacyButton.d.ts +4 -4
  214. package/build/types/card/Card.d.ts +0 -1
  215. package/build/types/card/Card.d.ts.map +1 -1
  216. package/build/types/checkboxButton/CheckboxButton.d.ts +0 -2
  217. package/build/types/checkboxButton/CheckboxButton.d.ts.map +1 -1
  218. package/build/types/checkboxOption/CheckboxOption.d.ts +1 -1
  219. package/build/types/circularButton/CircularButton.d.ts +1 -1
  220. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  221. package/build/types/common/propsValues/type.d.ts +1 -1
  222. package/build/types/common/propsValues/typography.d.ts +2 -2
  223. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +4 -1
  224. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  225. package/build/types/criticalBanner/index.d.ts +1 -0
  226. package/build/types/criticalBanner/index.d.ts.map +1 -1
  227. package/build/types/dateInput/DateInput.d.ts +0 -5
  228. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  229. package/build/types/dimmer/Dimmer.d.ts +0 -6
  230. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  231. package/build/types/drawer/Drawer.d.ts +2 -8
  232. package/build/types/drawer/Drawer.d.ts.map +1 -1
  233. package/build/types/field/Field.d.ts +2 -5
  234. package/build/types/field/Field.d.ts.map +1 -1
  235. package/build/types/flowNavigation/FlowNavigation.d.ts +0 -3
  236. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  237. package/build/types/header/Header.d.ts +1 -5
  238. package/build/types/header/Header.d.ts.map +1 -1
  239. package/build/types/iconButton/IconButton.d.ts +0 -6
  240. package/build/types/iconButton/IconButton.d.ts.map +1 -1
  241. package/build/types/index.d.ts +1 -0
  242. package/build/types/index.d.ts.map +1 -1
  243. package/build/types/inputs/{_BottomSheet.d.ts → SelectInput/BottomSheet/SelectInputBottomSheet.d.ts} +3 -3
  244. package/build/types/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -0
  245. package/build/types/inputs/SelectInput/BottomSheet/index.d.ts +3 -0
  246. package/build/types/inputs/SelectInput/BottomSheet/index.d.ts.map +1 -0
  247. package/build/types/inputs/SelectInput/ButtonInput/SelectInputButtonInput.d.ts +5 -0
  248. package/build/types/inputs/SelectInput/ButtonInput/SelectInputButtonInput.d.ts.map +1 -0
  249. package/build/types/inputs/SelectInput/ButtonInput/index.d.ts +3 -0
  250. package/build/types/inputs/SelectInput/ButtonInput/index.d.ts.map +1 -0
  251. package/build/types/inputs/SelectInput/ClearButton/SelectInputClearButton.d.ts +7 -0
  252. package/build/types/inputs/SelectInput/ClearButton/SelectInputClearButton.d.ts.map +1 -0
  253. package/build/types/inputs/SelectInput/ClearButton/index.d.ts +3 -0
  254. package/build/types/inputs/SelectInput/ClearButton/index.d.ts.map +1 -0
  255. package/build/types/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.d.ts +16 -0
  256. package/build/types/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.d.ts.map +1 -0
  257. package/build/types/inputs/SelectInput/DefaultRenderTrigger/index.d.ts +2 -0
  258. package/build/types/inputs/SelectInput/DefaultRenderTrigger/index.d.ts.map +1 -0
  259. package/build/types/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.d.ts +9 -0
  260. package/build/types/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.d.ts.map +1 -0
  261. package/build/types/inputs/SelectInput/ItemView/GroupItemView/index.d.ts +3 -0
  262. package/build/types/inputs/SelectInput/ItemView/GroupItemView/index.d.ts.map +1 -0
  263. package/build/types/inputs/SelectInput/ItemView/SelectInputItemView.d.ts +11 -0
  264. package/build/types/inputs/SelectInput/ItemView/SelectInputItemView.d.ts.map +1 -0
  265. package/build/types/inputs/SelectInput/ItemView/index.d.ts +4 -0
  266. package/build/types/inputs/SelectInput/ItemView/index.d.ts.map +1 -0
  267. package/build/types/inputs/SelectInput/Option/SelectInputOption.d.ts +11 -0
  268. package/build/types/inputs/SelectInput/Option/SelectInputOption.d.ts.map +1 -0
  269. package/build/types/inputs/SelectInput/Option/index.d.ts +3 -0
  270. package/build/types/inputs/SelectInput/Option/index.d.ts.map +1 -0
  271. package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts +13 -0
  272. package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts.map +1 -0
  273. package/build/types/inputs/SelectInput/OptionContent/index.d.ts +3 -0
  274. package/build/types/inputs/SelectInput/OptionContent/index.d.ts.map +1 -0
  275. package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts +9 -0
  276. package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts.map +1 -0
  277. package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts +3 -0
  278. package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts.map +1 -0
  279. package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts +21 -0
  280. package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts.map +1 -0
  281. package/build/types/inputs/SelectInput/Options/index.d.ts +4 -0
  282. package/build/types/inputs/SelectInput/Options/index.d.ts.map +1 -0
  283. package/build/types/inputs/{_Popover.d.ts → SelectInput/Popover/SelectInputPopover.d.ts} +3 -3
  284. package/build/types/inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -0
  285. package/build/types/inputs/SelectInput/Popover/index.d.ts +3 -0
  286. package/build/types/inputs/SelectInput/Popover/index.d.ts.map +1 -0
  287. package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts +33 -0
  288. package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts.map +1 -0
  289. package/build/types/inputs/SelectInput/SelectInput.d.ts +10 -0
  290. package/build/types/inputs/SelectInput/SelectInput.d.ts.map +1 -0
  291. package/build/types/inputs/SelectInput/SelectInput.messages.d.ts.map +1 -0
  292. package/build/types/inputs/{SelectInput.d.ts → SelectInput/SelectInput.types.d.ts} +12 -38
  293. package/build/types/inputs/SelectInput/SelectInput.types.d.ts.map +1 -0
  294. package/build/types/inputs/SelectInput/SelectInput.utils.d.ts +61 -0
  295. package/build/types/inputs/SelectInput/SelectInput.utils.d.ts.map +1 -0
  296. package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts +12 -0
  297. package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map +1 -0
  298. package/build/types/inputs/SelectInput/TriggerButton/index.d.ts +3 -0
  299. package/build/types/inputs/SelectInput/TriggerButton/index.d.ts.map +1 -0
  300. package/build/types/inputs/SelectInput/components.d.ts +10 -0
  301. package/build/types/inputs/SelectInput/components.d.ts.map +1 -0
  302. package/build/types/inputs/SelectInput/index.d.ts +12 -0
  303. package/build/types/inputs/SelectInput/index.d.ts.map +1 -0
  304. package/build/types/legacylistItem/LegacyListItem.d.ts +1 -1
  305. package/build/types/list/List.d.ts +0 -1
  306. package/build/types/list/List.d.ts.map +1 -1
  307. package/build/types/listItem/Button/ListItemButton.d.ts +0 -4
  308. package/build/types/listItem/Button/ListItemButton.d.ts.map +1 -1
  309. package/build/types/listItem/IconButton/ListItemIconButton.d.ts +1 -3
  310. package/build/types/listItem/IconButton/ListItemIconButton.d.ts.map +1 -1
  311. package/build/types/listItem/Image/ListItemImage.d.ts +0 -2
  312. package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -1
  313. package/build/types/listItem/ListItem.d.ts +0 -3
  314. package/build/types/listItem/ListItem.d.ts.map +1 -1
  315. package/build/types/loader/Loader.d.ts +1 -5
  316. package/build/types/loader/Loader.d.ts.map +1 -1
  317. package/build/types/logo/Logo.d.ts +1 -4
  318. package/build/types/logo/Logo.d.ts.map +1 -1
  319. package/build/types/modal/Modal.d.ts +0 -6
  320. package/build/types/modal/Modal.d.ts.map +1 -1
  321. package/build/types/navigationOption/NavigationOption.d.ts +1 -1
  322. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +1 -1
  323. package/build/types/nudge/Nudge.d.ts +1 -1
  324. package/build/types/nudge/Nudge.d.ts.map +1 -1
  325. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +1 -7
  326. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  327. package/build/types/popover/Popover.d.ts +0 -1
  328. package/build/types/popover/Popover.d.ts.map +1 -1
  329. package/build/types/processIndicator/ProcessIndicator.d.ts +0 -2
  330. package/build/types/processIndicator/ProcessIndicator.d.ts.map +1 -1
  331. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +1 -8
  332. package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
  333. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +0 -1
  334. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  335. package/build/types/radioOption/RadioOption.d.ts +1 -1
  336. package/build/types/select/Select.d.ts +0 -4
  337. package/build/types/select/Select.d.ts.map +1 -1
  338. package/build/types/statusIcon/StatusIcon.d.ts +1 -3
  339. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  340. package/build/types/summary/Summary.d.ts +4 -7
  341. package/build/types/summary/Summary.d.ts.map +1 -1
  342. package/build/types/switchOption/SwitchOption.d.ts +1 -1
  343. package/build/types/tabs/Tabs.d.ts +0 -2
  344. package/build/types/tabs/Tabs.d.ts.map +1 -1
  345. package/build/types/typeahead/Typeahead.d.ts +1 -14
  346. package/build/types/typeahead/Typeahead.d.ts.map +1 -1
  347. package/build/types/upload/Upload.d.ts +0 -6
  348. package/build/types/upload/Upload.d.ts.map +1 -1
  349. package/build/types/uploadInput/UploadInput.d.ts +1 -10
  350. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  351. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +0 -3
  352. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
  353. package/build/upload/Upload.js.map +1 -1
  354. package/build/upload/Upload.mjs.map +1 -1
  355. package/build/uploadInput/UploadInput.js.map +1 -1
  356. package/build/uploadInput/UploadInput.mjs.map +1 -1
  357. package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
  358. package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
  359. package/package.json +1 -1
  360. package/src/accordion/Accordion.tsx +2 -8
  361. package/src/actionButton/ActionButton.tsx +3 -4
  362. package/src/actionOption/ActionOption.tsx +1 -1
  363. package/src/alert/Alert.tsx +2 -5
  364. package/src/avatar/Avatar.tsx +0 -4
  365. package/src/avatarLayout/AvatarLayout.tsx +1 -5
  366. package/src/badge/Badge.tsx +0 -2
  367. package/src/body/Body.tsx +6 -2
  368. package/src/button/Button.types.ts +1 -4
  369. package/src/button/LegacyButton.tsx +4 -4
  370. package/src/card/Card.tsx +0 -1
  371. package/src/checkboxButton/CheckboxButton.tsx +0 -1
  372. package/src/checkboxOption/CheckboxOption.tsx +1 -1
  373. package/src/circularButton/CircularButton.tsx +2 -1
  374. package/src/common/propsValues/type.ts +1 -1
  375. package/src/common/propsValues/typography.ts +2 -2
  376. package/src/criticalBanner/CriticalCommsBanner.css +33 -15
  377. package/src/criticalBanner/CriticalCommsBanner.less +46 -36
  378. package/src/criticalBanner/CriticalCommsBanner.story.tsx +9 -15
  379. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +70 -0
  380. package/src/criticalBanner/CriticalCommsBanner.test.tsx +66 -0
  381. package/src/criticalBanner/CriticalCommsBanner.tsx +54 -5
  382. package/src/criticalBanner/index.ts +1 -0
  383. package/src/dateInput/DateInput.tsx +0 -5
  384. package/src/dimmer/Dimmer.tsx +0 -6
  385. package/src/drawer/Drawer.tsx +2 -8
  386. package/src/field/Field.tsx +2 -5
  387. package/src/flowNavigation/FlowNavigation.tsx +0 -3
  388. package/src/header/Header.tsx +1 -5
  389. package/src/iconButton/IconButton.tsx +0 -3
  390. package/src/index.ts +1 -0
  391. package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +96 -0
  392. package/src/inputs/{_BottomSheet.tsx → SelectInput/BottomSheet/SelectInputBottomSheet.tsx} +7 -7
  393. package/src/inputs/SelectInput/BottomSheet/index.ts +2 -0
  394. package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +16 -0
  395. package/src/inputs/{_ButtonInput.tsx → SelectInput/ButtonInput/SelectInputButtonInput.tsx} +5 -5
  396. package/src/inputs/SelectInput/ButtonInput/index.ts +2 -0
  397. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +46 -0
  398. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less +40 -0
  399. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx +29 -0
  400. package/src/inputs/SelectInput/ClearButton/index.ts +2 -0
  401. package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx +74 -0
  402. package/src/inputs/SelectInput/DefaultRenderTrigger/index.ts +5 -0
  403. package/src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx +61 -0
  404. package/src/inputs/SelectInput/ItemView/GroupItemView/index.ts +2 -0
  405. package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +16 -0
  406. package/src/inputs/SelectInput/ItemView/SelectInputItemView.less +17 -0
  407. package/src/inputs/SelectInput/ItemView/SelectInputItemView.tsx +48 -0
  408. package/src/inputs/SelectInput/ItemView/index.ts +3 -0
  409. package/src/inputs/SelectInput/Option/SelectInputOption.css +33 -0
  410. package/src/inputs/SelectInput/Option/SelectInputOption.less +32 -0
  411. package/src/inputs/SelectInput/Option/SelectInputOption.tsx +57 -0
  412. package/src/inputs/SelectInput/Option/index.ts +2 -0
  413. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +37 -0
  414. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.less +38 -0
  415. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +72 -0
  416. package/src/inputs/SelectInput/OptionContent/index.ts +2 -0
  417. package/src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx +59 -0
  418. package/src/inputs/SelectInput/Options/OptionsContainer/index.ts +2 -0
  419. package/src/inputs/SelectInput/Options/SelectInputOptions.css +81 -0
  420. package/src/inputs/SelectInput/Options/SelectInputOptions.less +77 -0
  421. package/src/inputs/SelectInput/Options/SelectInputOptions.tsx +411 -0
  422. package/src/inputs/SelectInput/Options/index.ts +3 -0
  423. package/src/inputs/SelectInput/Popover/SelectInputPopover.css +46 -0
  424. package/src/inputs/{_Popover.tsx → SelectInput/Popover/SelectInputPopover.tsx} +7 -7
  425. package/src/inputs/SelectInput/Popover/index.ts +2 -0
  426. package/src/inputs/SelectInput/SelectInput.contexts.tsx +40 -0
  427. package/src/inputs/SelectInput/SelectInput.less +22 -0
  428. package/src/inputs/{SelectInput.test.tsx → SelectInput/SelectInput.test.tsx} +9 -11
  429. package/src/inputs/SelectInput/SelectInput.tsx +257 -0
  430. package/src/inputs/SelectInput/SelectInput.types.ts +113 -0
  431. package/src/inputs/SelectInput/SelectInput.utils.ts +206 -0
  432. package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx +36 -0
  433. package/src/inputs/SelectInput/TriggerButton/index.ts +5 -0
  434. package/src/inputs/{SelectInput.docs.mdx → SelectInput/_stories/SelectInput.docs.mdx} +0 -1
  435. package/src/inputs/{SelectInput.story.tsx → SelectInput/_stories/SelectInput.story.tsx} +11 -8
  436. package/src/inputs/{SelectInput.test.story.tsx → SelectInput/_stories/SelectInput.test.story.tsx} +5 -10
  437. package/src/inputs/SelectInput/components.ts +10 -0
  438. package/src/inputs/SelectInput/index.ts +14 -0
  439. package/src/legacylistItem/LegacyListItem.tsx +1 -1
  440. package/src/list/List.tsx +0 -1
  441. package/src/listItem/Button/ListItemButton.tsx +0 -2
  442. package/src/listItem/IconButton/ListItemIconButton.tsx +1 -3
  443. package/src/listItem/Image/ListItemImage.tsx +0 -2
  444. package/src/listItem/ListItem.tsx +0 -2
  445. package/src/loader/Loader.tsx +2 -6
  446. package/src/logo/Logo.tsx +1 -4
  447. package/src/main.css +123 -105
  448. package/src/main.less +1 -1
  449. package/src/modal/Modal.tsx +0 -6
  450. package/src/navigationOption/NavigationOption.tsx +1 -1
  451. package/src/navigationOptionsList/NavigationOptionsList.tsx +1 -1
  452. package/src/nudge/Nudge.tsx +1 -1
  453. package/src/phoneNumberInput/PhoneNumberInput.tsx +1 -7
  454. package/src/popover/Popover.tsx +0 -1
  455. package/src/processIndicator/ProcessIndicator.tsx +0 -2
  456. package/src/prompt/ActionPrompt/ActionPrompt.tsx +1 -8
  457. package/src/prompt/InlinePrompt/InlinePrompt.tsx +0 -1
  458. package/src/radioOption/RadioOption.tsx +1 -1
  459. package/src/select/Select.tsx +0 -4
  460. package/src/statusIcon/StatusIcon.tsx +1 -3
  461. package/src/summary/Summary.tsx +4 -7
  462. package/src/switchOption/SwitchOption.tsx +1 -1
  463. package/src/tabs/Tabs.tsx +0 -2
  464. package/src/typeahead/Typeahead.tsx +2 -14
  465. package/src/upload/Upload.tsx +0 -6
  466. package/src/uploadInput/UploadInput.tsx +4 -12
  467. package/src/withDisplayFormat/WithDisplayFormat.tsx +0 -3
  468. package/build/inputs/SelectInput.js +0 -890
  469. package/build/inputs/SelectInput.js.map +0 -1
  470. package/build/inputs/SelectInput.messages.js.map +0 -1
  471. package/build/inputs/SelectInput.messages.mjs.map +0 -1
  472. package/build/inputs/SelectInput.mjs +0 -881
  473. package/build/inputs/SelectInput.mjs.map +0 -1
  474. package/build/inputs/_BottomSheet.js.map +0 -1
  475. package/build/inputs/_BottomSheet.mjs.map +0 -1
  476. package/build/inputs/_ButtonInput.js.map +0 -1
  477. package/build/inputs/_ButtonInput.mjs.map +0 -1
  478. package/build/inputs/_Popover.js.map +0 -1
  479. package/build/inputs/_Popover.mjs.map +0 -1
  480. package/build/types/inputs/SelectInput.d.ts.map +0 -1
  481. package/build/types/inputs/SelectInput.messages.d.ts.map +0 -1
  482. package/build/types/inputs/_BottomSheet.d.ts.map +0 -1
  483. package/build/types/inputs/_ButtonInput.d.ts +0 -5
  484. package/build/types/inputs/_ButtonInput.d.ts.map +0 -1
  485. package/build/types/inputs/_Popover.d.ts.map +0 -1
  486. package/src/inputs/SelectInput.less +0 -219
  487. package/src/inputs/SelectInput.tsx +0 -1269
  488. package/build/inputs/{SelectInput.messages.js → SelectInput/SelectInput.messages.js} +0 -0
  489. package/build/inputs/{SelectInput.messages.mjs → SelectInput/SelectInput.messages.mjs} +0 -0
  490. package/build/styles/inputs/{SelectInput.css → SelectInput/SelectInput.css} +90 -90
  491. package/build/types/inputs/{SelectInput.messages.d.ts → SelectInput/SelectInput.messages.d.ts} +0 -0
  492. package/src/inputs/{_BottomSheet.less → SelectInput/BottomSheet/SelectInputBottomSheet.less} +0 -0
  493. package/src/inputs/{_ButtonInput.less → SelectInput/ButtonInput/SelectInputButtonInput.less} +0 -0
  494. package/src/inputs/{_Popover.less → SelectInput/Popover/SelectInputPopover.less} +0 -0
  495. package/src/inputs/{SelectInput.css → SelectInput/SelectInput.css} +90 -90
  496. /package/src/inputs/{SelectInput.messages.ts → SelectInput/SelectInput.messages.ts} +0 -0
@@ -1,12 +1,19 @@
1
1
  'use strict';
2
2
 
3
3
  var Button_resolver = require('../../button/Button.resolver.js');
4
- var SelectInput = require('../../inputs/SelectInput.js');
5
- var icons = require('@transferwise/icons');
6
- var art = require('@wise/art');
4
+ var SelectInput = require('../../inputs/SelectInput/SelectInput.js');
7
5
  var React = require('react');
6
+ var icons = require('@transferwise/icons');
7
+ require('clsx');
8
8
  var reactIntl = require('react-intl');
9
- var ExpressiveMoneyInput_messages = require('../ExpressiveMoneyInput.messages.js');
9
+ require('../../dateLookup/dateTrigger/DateTrigger.messages.js');
10
+ var jsxRuntime = require('react/jsx-runtime');
11
+ require('@headlessui/react');
12
+ var SelectInputOptionContent = require('../../inputs/SelectInput/OptionContent/SelectInputOptionContent.js');
13
+ var SelectInputTriggerButton = require('../../inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js');
14
+ require('../../inputs/contexts.js');
15
+ require('../../header/Header.js');
16
+ require('virtua');
10
17
  require('../../common/theme.js');
11
18
  require('../../common/direction.js');
12
19
  require('../../common/propsValues/control.js');
@@ -27,9 +34,10 @@ require('../../common/propsValues/scroll.js');
27
34
  require('../../common/propsValues/markdownNodeType.js');
28
35
  require('../../common/fileType.js');
29
36
  var index = require('../../common/locale/index.js');
30
- require('clsx');
31
37
  require('../../common/closeButton/CloseButton.messages.js');
32
- var jsxRuntime = require('react/jsx-runtime');
38
+ require('../../inputs/SelectInput/SelectInput.messages.js');
39
+ var art = require('@wise/art');
40
+ var ExpressiveMoneyInput_messages = require('../ExpressiveMoneyInput.messages.js');
33
41
 
34
42
  const CurrencySelector = ({
35
43
  id,
@@ -75,7 +83,7 @@ const CurrencySelector = ({
75
83
  code,
76
84
  label
77
85
  }) => {
78
- return /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInputOptionContent, {
86
+ return /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent.SelectInputOptionContent, {
79
87
  title: code,
80
88
  note: label,
81
89
  icon: /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
@@ -84,7 +92,7 @@ const CurrencySelector = ({
84
92
  })
85
93
  });
86
94
  },
87
- renderTrigger: () => /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInputTriggerButton, {
95
+ renderTrigger: () => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton.SelectInputTriggerButton, {
88
96
  as: ButtonInput
89
97
  // @ts-expect-error new (v2) ButtonProps
90
98
  ,
@@ -1 +1 @@
1
- {"version":3,"file":"CurrencySelector.js","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
1
+ {"version":3,"file":"CurrencySelector.js","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
@@ -1,10 +1,17 @@
1
1
  import Button from '../../button/Button.resolver.mjs';
2
- import { SelectInput, SelectInputTriggerButton, SelectInputOptionContent } from '../../inputs/SelectInput.mjs';
3
- import { ChevronDown } from '@transferwise/icons';
4
- import { Flag } from '@wise/art';
2
+ import { SelectInput } from '../../inputs/SelectInput/SelectInput.mjs';
5
3
  import { useMemo, useState, forwardRef } from 'react';
4
+ import { ChevronDown } from '@transferwise/icons';
5
+ import 'clsx';
6
6
  import { useIntl } from 'react-intl';
7
- import messages from '../ExpressiveMoneyInput.messages.mjs';
7
+ import '../../dateLookup/dateTrigger/DateTrigger.messages.mjs';
8
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
+ import '@headlessui/react';
10
+ import { SelectInputOptionContent } from '../../inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs';
11
+ import { SelectInputTriggerButton } from '../../inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs';
12
+ import '../../inputs/contexts.mjs';
13
+ import '../../header/Header.mjs';
14
+ import 'virtua';
8
15
  import '../../common/theme.mjs';
9
16
  import '../../common/direction.mjs';
10
17
  import '../../common/propsValues/control.mjs';
@@ -25,9 +32,10 @@ import '../../common/propsValues/scroll.mjs';
25
32
  import '../../common/propsValues/markdownNodeType.mjs';
26
33
  import '../../common/fileType.mjs';
27
34
  import { getLocaleCurrencyName } from '../../common/locale/index.mjs';
28
- import 'clsx';
29
35
  import '../../common/closeButton/CloseButton.messages.mjs';
30
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
36
+ import '../../inputs/SelectInput/SelectInput.messages.mjs';
37
+ import { Flag } from '@wise/art';
38
+ import messages from '../ExpressiveMoneyInput.messages.mjs';
31
39
 
32
40
  const CurrencySelector = ({
33
41
  id,
@@ -1 +1 @@
1
- {"version":3,"file":"CurrencySelector.mjs","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
1
+ {"version":3,"file":"CurrencySelector.mjs","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n /** @default true */\n required?: boolean;\n /** @deprecated Use `description` prop instead. */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n /**\n * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n * @default false\n */\n messageLoading?: boolean;\n description?: React.ReactNode;\n /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n error?: React.ReactNode;\n /** @default Sentiment.NEUTRAL */\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
1
+ {"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n required?: boolean;\n /** @deprecated use `description` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n /**\n * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n */\n messageLoading?: boolean;\n description?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n error?: React.ReactNode;\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n /** @default true */\n required?: boolean;\n /** @deprecated Use `description` prop instead. */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n /**\n * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n * @default false\n */\n messageLoading?: boolean;\n description?: React.ReactNode;\n /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n error?: React.ReactNode;\n /** @default Sentiment.NEUTRAL */\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
1
+ {"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n required?: boolean;\n /** @deprecated use `description` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n /**\n * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n */\n messageLoading?: boolean;\n description?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n error?: React.ReactNode;\n sentiment?: InlinePromptProps['sentiment'];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n messageLoading,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlinePrompt\n sentiment={sentiment}\n id={messageId}\n mediaLabel={messageIconLabel}\n className=\"np-field__prompt\"\n loading={messageLoading}\n width=\"full\"\n >\n {message}\n </InlinePrompt>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: () => void;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
1
+ {"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: () => void;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: () => void;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
1
+ {"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n activeStep?: number;\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: () => void;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = <Logo />,\n done = false,\n onClose,\n onGoBack,\n steps,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const newAvatar = done ? null : avatar;\n\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n return (\n <div\n className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content p-x-3',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n )\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n * @default 'h5'\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /**\n * Optional prop to specify the level of the Header\n * @default 'group'\n */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /** Optional prop to specify the level of the Header */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n * @default 'h5'\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /**\n * Optional prop to specify the level of the Header\n * @default 'group'\n */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /** Optional prop to specify the level of the Header */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n /** @default 48 */\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /** @default 'primary' */\n priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n /** @default 'default' */\n type?: 'default' | 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
1
+ {"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n type?: 'default' | 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n /** @default 48 */\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /** @default 'primary' */\n priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n /** @default 'default' */\n type?: 'default' | 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
1
+ {"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n type?: 'default' | 'negative';\n 'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n Pick<\n HTMLAttributes<HTMLDivElement>,\n 'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n >;\n\nconst IconButton = forwardRef(function IconButton(\n {\n size = 48,\n href = '#',\n children,\n className,\n priority = 'primary',\n type = 'default',\n ...props\n }: Props,\n ref,\n) {\n const isLink = href !== '#';\n return (\n // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n <Circle\n ref={ref}\n as={isLink ? PrimitiveAnchor : PrimitiveButton}\n size={size}\n fixedSize\n className={clsx(\n 'np-icon-button',\n `np-icon-button-${priority}-${type}`,\n {\n disabled: props.disabled,\n },\n className,\n )}\n {...(isLink ? { href } : {})}\n {...props}\n >\n {children}\n </Circle>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
package/build/index.js CHANGED
@@ -58,7 +58,16 @@ var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayF
58
58
  var Input = require('./inputs/Input.js');
59
59
  var InputGroup = require('./inputs/InputGroup.js');
60
60
  var SearchInput = require('./inputs/SearchInput.js');
61
- var SelectInput = require('./inputs/SelectInput.js');
61
+ var SelectInput = require('./inputs/SelectInput/SelectInput.js');
62
+ var SelectInput_utils = require('./inputs/SelectInput/SelectInput.utils.js');
63
+ require('react-intl');
64
+ require('./dateLookup/dateTrigger/DateTrigger.messages.js');
65
+ require('@headlessui/react');
66
+ var SelectInputOptionContent = require('./inputs/SelectInput/OptionContent/SelectInputOptionContent.js');
67
+ var SelectInputTriggerButton = require('./inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js');
68
+ var Section = require('./section/Section.js');
69
+ require('virtua');
70
+ require('./inputs/SelectInput/SelectInput.messages.js');
62
71
  var TextArea = require('./inputs/TextArea.js');
63
72
  var InstructionsList = require('./instructionsList/InstructionsList.js');
64
73
  var Label = require('./label/Label.js');
@@ -90,7 +99,6 @@ var Radio = require('./radio/Radio.js');
90
99
  var RadioGroup = require('./radioGroup/RadioGroup.js');
91
100
  var RadioOption = require('./radioOption/RadioOption.js');
92
101
  var ResponsivePanel = require('./common/responsivePanel/ResponsivePanel.js');
93
- var Section = require('./section/Section.js');
94
102
  var SegmentedControl = require('./segmentedControl/SegmentedControl.js');
95
103
  var Select = require('./select/Select.js');
96
104
  var SentimentSurface = require('./sentimentSurface/SentimentSurface.js');
@@ -139,7 +147,6 @@ var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
139
147
  var fileType = require('./common/fileType.js');
140
148
  var index = require('./common/locale/index.js');
141
149
  var colors = require('./common/colors.js');
142
- require('react-intl');
143
150
  require('./common/closeButton/CloseButton.messages.js');
144
151
  var index$1 = require('./i18n/index.js');
145
152
  var withId = require('./withId/withId.js');
@@ -220,9 +227,10 @@ exports.Input = Input.Input;
220
227
  exports.InputGroup = InputGroup.InputGroup;
221
228
  exports.SearchInput = SearchInput.SearchInput;
222
229
  exports.SelectInput = SelectInput.SelectInput;
223
- exports.SelectInputOptionContent = SelectInput.SelectInputOptionContent;
224
- exports.SelectInputTriggerButton = SelectInput.SelectInputTriggerButton;
225
- exports.sortByRelevance = SelectInput.sortByRelevance;
230
+ exports.sortByRelevance = SelectInput_utils.sortByRelevance;
231
+ exports.SelectInputOptionContent = SelectInputOptionContent.SelectInputOptionContent;
232
+ exports.SelectInputTriggerButton = SelectInputTriggerButton.SelectInputTriggerButton;
233
+ exports.Section = Section.default;
226
234
  exports.TextArea = TextArea.TextArea;
227
235
  exports.InstructionsList = InstructionsList.default;
228
236
  exports.Label = Label.Label;
@@ -258,7 +266,6 @@ exports.Radio = Radio.default;
258
266
  exports.RadioGroup = RadioGroup.default;
259
267
  exports.RadioOption = RadioOption.default;
260
268
  exports.ResponsivePanel = ResponsivePanel.default;
261
- exports.Section = Section.default;
262
269
  exports.SegmentedControl = SegmentedControl.default;
263
270
  exports.Select = Select.default;
264
271
  exports.SentimentSurface = SentimentSurface.default;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}