@transferwise/components 46.100.1 → 46.101.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (190) hide show
  1. package/build/avatarLayout/AvatarLayout.js +1 -1
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +1 -1
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/dateLookup/DateLookup.js +3 -2
  6. package/build/dateLookup/DateLookup.js.map +1 -1
  7. package/build/dateLookup/DateLookup.mjs +3 -2
  8. package/build/dateLookup/DateLookup.mjs.map +1 -1
  9. package/build/i18n/en.json +2 -0
  10. package/build/i18n/en.json.js +2 -0
  11. package/build/i18n/en.json.js.map +1 -1
  12. package/build/i18n/en.json.mjs +2 -0
  13. package/build/i18n/en.json.mjs.map +1 -1
  14. package/build/main.css +4 -94
  15. package/build/styles/accordion/Accordion.css +27 -16
  16. package/build/styles/avatar/Avatar.css +95 -50
  17. package/build/styles/inputs/Input.css +37 -21
  18. package/build/styles/inputs/TextArea.css +35 -20
  19. package/build/styles/loader/Loader.css +4 -90
  20. package/build/styles/main.css +4 -94
  21. package/build/styles/popover/Popover.css +19 -12
  22. package/build/styles/select/Select.css +131 -68
  23. package/build/styles/switch/Switch.css +27 -16
  24. package/build/styles/tile/Tile.css +31 -18
  25. package/build/types/dateLookup/DateLookup.d.ts +2 -2
  26. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  27. package/build/types/test-utils/index.d.ts +4 -0
  28. package/build/types/test-utils/index.d.ts.map +1 -1
  29. package/build/types/test-utils/story-config.d.ts +2 -3
  30. package/build/types/test-utils/story-config.d.ts.map +1 -1
  31. package/build/types/upload/Upload.d.ts +6 -2
  32. package/build/types/upload/Upload.d.ts.map +1 -1
  33. package/build/types/upload/Upload.messages.d.ts +8 -0
  34. package/build/types/upload/Upload.messages.d.ts.map +1 -1
  35. package/build/types/uploadInput/UploadInput.d.ts +1 -1
  36. package/build/types/uploadInput/uploadButton/UploadButton.d.ts +4 -2
  37. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  38. package/build/upload/Upload.js +16 -9
  39. package/build/upload/Upload.js.map +1 -1
  40. package/build/upload/Upload.messages.js +6 -0
  41. package/build/upload/Upload.messages.js.map +1 -1
  42. package/build/upload/Upload.messages.mjs +6 -0
  43. package/build/upload/Upload.messages.mjs.map +1 -1
  44. package/build/upload/Upload.mjs +16 -9
  45. package/build/upload/Upload.mjs.map +1 -1
  46. package/build/uploadInput/UploadInput.js +1 -1
  47. package/build/uploadInput/UploadInput.js.map +1 -1
  48. package/build/uploadInput/UploadInput.mjs +1 -1
  49. package/build/uploadInput/UploadInput.mjs.map +1 -1
  50. package/build/uploadInput/uploadButton/UploadButton.js +7 -4
  51. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  52. package/build/uploadInput/uploadButton/UploadButton.mjs +7 -4
  53. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  54. package/package.json +19 -27
  55. package/src/accordion/Accordion.css +27 -16
  56. package/src/accordion/Accordion.story.tsx +1 -1
  57. package/src/actionButton/ActionButton.story.tsx +3 -2
  58. package/src/actionOption/ActionOption.story.tsx +2 -2
  59. package/src/alert/Alert.story.tsx +2 -2
  60. package/src/alert/Alert.tests.story.tsx +2 -2
  61. package/src/avatar/Avatar.css +95 -50
  62. package/src/avatar/Avatar.spec.tsx +1 -1
  63. package/src/avatar/Avatar.story.tsx +3 -2
  64. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  65. package/src/avatarLayout/AvatarLayout.tsx +1 -1
  66. package/src/avatarView/AvatarView.story.tsx +1 -1
  67. package/src/avatarWrapper/AvatarWrapper.story.tsx +3 -2
  68. package/src/badge/Badge.story.tsx +49 -28
  69. package/src/button/Button.accessibility.docs.mdx +1 -1
  70. package/src/button/Button.story.tsx +2 -2
  71. package/src/button/Button.tests.story.tsx +2 -2
  72. package/src/button/LegacyButton.story.tsx +3 -2
  73. package/src/card/Card.story.tsx +2 -2
  74. package/src/carousel/Carousel.story.tsx +1 -1
  75. package/src/checkbox/Checkbox.story.tsx +2 -2
  76. package/src/checkboxButton/CheckboxButton.story.tsx +2 -2
  77. package/src/checkboxOption/CheckboxOption.story.tsx +35 -29
  78. package/src/chevron/Chevron.story.tsx +1 -1
  79. package/src/chips/Chips.story.tsx +1 -1
  80. package/src/circularButton/CircularButton.story.tsx +1 -1
  81. package/src/circularButton/CircularButton.tests.story.tsx +1 -1
  82. package/src/common/bottomSheet/BottomSheet.story.tsx +2 -2
  83. package/src/common/card/Card.story.tsx +1 -1
  84. package/src/common/circle/Circle.story.tsx +2 -2
  85. package/src/common/locale/index.spec.ts +28 -16
  86. package/src/common/responsivePanel/ResponsivePanel.spec.js +8 -29
  87. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  88. package/src/dateInput/DateInput.story.tsx +2 -2
  89. package/src/dateInput/DateInput.tests.story.tsx +2 -2
  90. package/src/dateLookup/DateLookup.spec.tsx +5 -5
  91. package/src/dateLookup/DateLookup.story.tsx +43 -71
  92. package/src/dateLookup/DateLookup.tests.story.tsx +3 -3
  93. package/src/dateLookup/DateLookup.tsx +4 -1
  94. package/src/decision/Decision.story.tsx +24 -49
  95. package/src/definitionList/DefinitionList.story.tsx +1 -1
  96. package/src/dimmer/Dimmer.story.tsx +2 -2
  97. package/src/divider/Divider.accessibility.docs.mdx +1 -1
  98. package/src/divider/Divider.story.tsx +1 -1
  99. package/src/drawer/Drawer.story.tsx +13 -7
  100. package/src/dropFade/DropFade.story.tsx +1 -1
  101. package/src/emphasis/Emphasis.spec.tsx +8 -8
  102. package/src/emphasis/Emphasis.story.tsx +1 -1
  103. package/src/field/Field.story.tsx +3 -3
  104. package/src/flowNavigation/FlowNavigation.story.tsx +305 -260
  105. package/src/i18n/en.json +2 -0
  106. package/src/iconButton/IconButton.story.tsx +2 -2
  107. package/src/image/Image.story.tsx +27 -54
  108. package/src/info/Info.story.tsx +2 -2
  109. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  110. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +2 -2
  111. package/src/inputs/Input.css +37 -21
  112. package/src/inputs/InputGroup.story.tsx +1 -1
  113. package/src/inputs/SearchInput.story.tsx +1 -1
  114. package/src/inputs/SelectInput.docs.mdx +1 -1
  115. package/src/inputs/SelectInput.story.tsx +2 -2
  116. package/src/inputs/TextArea.css +35 -20
  117. package/src/instructionsList/InstructionsList.story.tsx +2 -2
  118. package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
  119. package/src/loader/Loader.css +4 -90
  120. package/src/loader/Loader.story.tsx +1 -1
  121. package/src/logo/Logo.story.tsx +1 -1
  122. package/src/main.css +4 -94
  123. package/src/markdown/Markdown.story.tsx +1 -1
  124. package/src/modal/Modal.story.tsx +2 -2
  125. package/src/money/Money.story.tsx +1 -1
  126. package/src/moneyInput/MoneyInput.docs.mdx +1 -1
  127. package/src/moneyInput/MoneyInput.spec.tsx +8 -5
  128. package/src/moneyInput/MoneyInput.story.tsx +2 -2
  129. package/src/moneyInput/currencyFormatting.spec.ts +1 -1
  130. package/src/navigationOption/NavigationOption.story.tsx +265 -226
  131. package/src/nudge/Nudge.story.tsx +1 -1
  132. package/src/overlayHeader/OverlayHeader.story.tsx +32 -24
  133. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -1
  134. package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.ts +6 -3
  135. package/src/popover/Popover.css +19 -12
  136. package/src/popover/Popover.story.tsx +2 -2
  137. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +2 -2
  138. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +2 -2
  139. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +2 -2
  140. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +2 -2
  141. package/src/processIndicator/ProcessIndicator.story.tsx +1 -1
  142. package/src/progress/Progress.story.tsx +1 -1
  143. package/src/progressBar/ProgressBar.story.tsx +1 -1
  144. package/src/promoCard/PromoCard.story.tsx +1 -1
  145. package/src/promoCard/PromoCardGroup.story.tsx +1 -1
  146. package/src/provider/Provider.spec.tsx +2 -2
  147. package/src/provider/Provider.story.tsx +1 -1
  148. package/src/provider/direction/DirectionProvider.spec.tsx +1 -1
  149. package/src/provider/language/LanguageProvider.spec.tsx +1 -1
  150. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  151. package/src/radio/Radio.story.tsx +59 -42
  152. package/src/radioGroup/RadioGroup.story.tsx +2 -2
  153. package/src/radioOption/RadioOption.story.tsx +73 -38
  154. package/src/segmentedControl/SegmentedControl.story.tsx +1 -1
  155. package/src/select/Select.css +131 -68
  156. package/src/select/Select.story.tsx +385 -397
  157. package/src/slidingPanel/SlidingPanel.story.tsx +30 -13
  158. package/src/snackbar/Snackbar.story.tsx +50 -36
  159. package/src/snackbar/Snackbar.tests.story.tsx +3 -2
  160. package/src/statusIcon/StatusIcon.docs.mdx +1 -1
  161. package/src/statusIcon/StatusIcon.spec.tsx +8 -5
  162. package/src/statusIcon/StatusIcon.story.tsx +1 -1
  163. package/src/stepper/Stepper.story.tsx +2 -2
  164. package/src/stepper/Stepper.tests.story.tsx +2 -2
  165. package/src/sticky/Sticky.story.tsx +1 -1
  166. package/src/summary/Summary.story.tsx +18 -17
  167. package/src/switch/Switch.css +27 -16
  168. package/src/switch/Switch.story.tsx +2 -2
  169. package/src/switchOption/SwitchOption.story.tsx +1 -1
  170. package/src/table/Table.story.tsx +1 -1
  171. package/src/test-utils/story-config.ts +9 -6
  172. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +2 -2
  173. package/src/tile/Tile.css +31 -18
  174. package/src/tile/Tile.story.tsx +43 -43
  175. package/src/tooltip/Tooltip.story.tsx +2 -2
  176. package/src/typeahead/Typeahead.story.tsx +2 -2
  177. package/src/upload/Upload.messages.ts +8 -0
  178. package/src/upload/Upload.spec.tsx +6 -0
  179. package/src/upload/Upload.story.tsx +120 -5
  180. package/src/upload/Upload.tests.story.tsx +5 -3
  181. package/src/upload/Upload.tsx +24 -15
  182. package/src/upload/utils/isTypeValid/isTypeValid.spec.ts +3 -1
  183. package/src/uploadInput/UploadInput.story.tsx +1 -1
  184. package/src/uploadInput/UploadInput.tests.story.tsx +10 -3
  185. package/src/uploadInput/UploadInput.tsx +2 -2
  186. package/src/uploadInput/uploadButton/UploadButton.spec.tsx +6 -0
  187. package/src/uploadInput/uploadButton/UploadButton.tsx +12 -6
  188. package/src/withId/withId.docs.mdx +1 -1
  189. package/src/withId/withId.story.tsx +1 -1
  190. package/src/common/responsivePanel/__snapshots__/ResponsivePanel.spec.js.snap +0 -21
package/src/main.css CHANGED
@@ -34,10 +34,6 @@
34
34
  margin-left: var(--padding-small);
35
35
  }
36
36
  }
37
- @media (min-width: 768px) {
38
- }
39
- @media (min-width: 768px) {
40
- }
41
37
  .np-accordion-item {
42
38
  display: block;
43
39
  width: 100%;
@@ -3188,101 +3184,15 @@ button.np-link {
3188
3184
  --coin-size: 3rem;
3189
3185
  --coin-edge-width-offset: translateX(0.275rem);
3190
3186
  --coin-edge-width-negative-offset: translateX(-0.275rem);
3191
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
3192
- 0.05rem 0 0 var(--coin-colour),
3193
- 0.075rem 0 0 var(--coin-colour),
3194
- 0.1rem 0 0 var(--coin-colour),
3195
- 0.125rem 0 0 var(--coin-colour),
3196
- 0.15rem 0 0 var(--coin-colour),
3197
- 0.175rem 0 0 var(--coin-colour),
3198
- 0.2rem 0 0 var(--coin-colour),
3199
- 0.225rem 0 0 var(--coin-colour),
3200
- 0.25rem 0 0 var(--coin-colour),
3201
- 0.275rem 0 0 var(--coin-colour),
3202
- 0.3rem 0 0 var(--coin-colour),
3203
- 0.325rem 0 0 var(--coin-colour),
3204
- 0.35rem 0 0 var(--coin-colour),
3205
- 0.375rem 0 0 var(--coin-colour),
3206
- 0.4rem 0 0 var(--coin-colour),
3207
- 0.425rem 0 0 var(--coin-colour),
3208
- 0.45rem 0 0 var(--coin-colour),
3209
- 0.475rem 0 0 var(--coin-colour);
3210
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
3211
- -0.05rem 0 0 var(--coin-colour),
3212
- -0.075rem 0 0 var(--coin-colour),
3213
- -0.1rem 0 0 var(--coin-colour),
3214
- -0.125rem 0 0 var(--coin-colour),
3215
- -0.15rem 0 0 var(--coin-colour),
3216
- -0.175rem 0 0 var(--coin-colour),
3217
- -0.2rem 0 0 var(--coin-colour),
3218
- -0.225rem 0 0 var(--coin-colour),
3219
- -0.25rem 0 0 var(--coin-colour),
3220
- -0.275rem 0 0 var(--coin-colour),
3221
- -0.3rem 0 0 var(--coin-colour),
3222
- -0.325rem 0 0 var(--coin-colour),
3223
- -0.35rem 0 0 var(--coin-colour),
3224
- -0.375rem 0 0 var(--coin-colour),
3225
- -0.4rem 0 0 var(--coin-colour),
3226
- -0.425rem 0 0 var(--coin-colour),
3227
- -0.45rem 0 0 var(--coin-colour),
3228
- -0.475rem 0 0 var(--coin-colour);
3187
+ --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
3188
+ --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
3229
3189
  }
3230
3190
  .tw-loader--md {
3231
3191
  --coin-size: 4.5rem;
3232
3192
  --coin-edge-width-offset: translateX(0.375rem);
3233
3193
  --coin-edge-width-negative-offset: translateX(-0.375rem);
3234
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
3235
- 0.05rem 0 0 var(--coin-colour),
3236
- 0.075rem 0 0 var(--coin-colour),
3237
- 0.1rem 0 0 var(--coin-colour),
3238
- 0.125rem 0 0 var(--coin-colour),
3239
- 0.15rem 0 0 var(--coin-colour),
3240
- 0.175rem 0 0 var(--coin-colour),
3241
- 0.2rem 0 0 var(--coin-colour),
3242
- 0.225rem 0 0 var(--coin-colour),
3243
- 0.25rem 0 0 var(--coin-colour),
3244
- 0.275rem 0 0 var(--coin-colour),
3245
- 0.3rem 0 0 var(--coin-colour),
3246
- 0.325rem 0 0 var(--coin-colour),
3247
- 0.35rem 0 0 var(--coin-colour),
3248
- 0.375rem 0 0 var(--coin-colour),
3249
- 0.4rem 0 0 var(--coin-colour),
3250
- 0.425rem 0 0 var(--coin-colour),
3251
- 0.45rem 0 0 var(--coin-colour),
3252
- 0.475rem 0 0 var(--coin-colour),
3253
- 0.5rem 0 0 var(--coin-colour),
3254
- 0.525rem 0 0 var(--coin-colour),
3255
- 0.55rem 0 0 var(--coin-colour),
3256
- 0.575rem 0 0 var(--coin-colour),
3257
- 0.6rem 0 0 var(--coin-colour),
3258
- 0.625rem 0 0 var(--coin-colour),
3259
- 0.65rem 0 0 var(--coin-colour);
3260
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
3261
- -0.05rem 0 0 var(--coin-colour),
3262
- -0.075rem 0 0 var(--coin-colour),
3263
- -0.1rem 0 0 var(--coin-colour),
3264
- -0.125rem 0 0 var(--coin-colour),
3265
- -0.15rem 0 0 var(--coin-colour),
3266
- -0.175rem 0 0 var(--coin-colour),
3267
- -0.2rem 0 0 var(--coin-colour),
3268
- -0.225rem 0 0 var(--coin-colour),
3269
- -0.25rem 0 0 var(--coin-colour),
3270
- -0.275rem 0 0 var(--coin-colour),
3271
- -0.3rem 0 0 var(--coin-colour),
3272
- -0.325rem 0 0 var(--coin-colour),
3273
- -0.35rem 0 0 var(--coin-colour),
3274
- -0.375rem 0 0 var(--coin-colour),
3275
- -0.4rem 0 0 var(--coin-colour),
3276
- -0.425rem 0 0 var(--coin-colour),
3277
- -0.45rem 0 0 var(--coin-colour),
3278
- -0.475rem 0 0 var(--coin-colour),
3279
- -0.5rem 0 0 var(--coin-colour),
3280
- -0.525rem 0 0 var(--coin-colour),
3281
- -0.55rem 0 0 var(--coin-colour),
3282
- -0.575rem 0 0 var(--coin-colour),
3283
- -0.6rem 0 0 var(--coin-colour),
3284
- -0.625rem 0 0 var(--coin-colour),
3285
- -0.65rem 0 0 var(--coin-colour);
3194
+ --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
3195
+ --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
3286
3196
  }
3287
3197
  @media (prefers-reduced-motion) {
3288
3198
  .tw-loader::before {
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from '@storybook/react';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  import Markdown from './Markdown';
4
4
 
@@ -1,5 +1,5 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { Meta, StoryObj } from '@storybook/react';
1
+ import { action } from 'storybook/actions';
2
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
3
3
  import { ScreenMode, ThemeProvider } from '@wise/components-theming';
4
4
  import { useState } from 'react';
5
5
 
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from '@storybook/react';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  import Money from './Money';
4
4
 
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/blocks';
1
+ import { Meta } from '@storybook/addon-docs/blocks';
2
2
 
3
3
  <Meta title="Forms/MoneyInput/Known issues" />
4
4
 
@@ -387,11 +387,14 @@ describe('Money Input', () => {
387
387
  ['1±!@#$^*,_+?><2', '1,2'],
388
388
  ['12,3', '12,3'],
389
389
  ['12.3', '12.3'],
390
- ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
391
- customRender({ amount: null });
392
- await userEvent.type(getInput(), testValue);
393
- expect(getInput()).toHaveValue(expectedValue);
394
- });
390
+ ] as const)(
391
+ "ignores the letters when typed '%s' and shows '%s'",
392
+ async (testValue: string, expectedValue: string) => {
393
+ customRender({ amount: null });
394
+ await userEvent.type(getInput(), testValue);
395
+ expect(getInput()).toHaveValue(expectedValue);
396
+ },
397
+ );
395
398
  });
396
399
 
397
400
  it('supports custom `aria-labelledby` attribute', () => {
@@ -1,5 +1,5 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { within, userEvent } from '@storybook/test';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { within, userEvent } from 'storybook/test';
3
3
  import { Lock } from '@transferwise/icons';
4
4
  import { useState } from 'react';
5
5
 
@@ -37,7 +37,7 @@ describe('Number formatting', () => {
37
37
  ['asda', NaN],
38
38
  ])(
39
39
  "parses strings by removing the non-numerical characters; case: '%s', expected: '%s'",
40
- (testValue, expectedValue) => {
40
+ (testValue: string, expectedValue: number) => {
41
41
  expect(parseAmount(testValue, 'gbp')).toBe(expectedValue);
42
42
  },
43
43
  );