@transferwise/components 46.100.1 → 46.100.2

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 (153) 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/main.css +4 -94
  10. package/build/styles/accordion/Accordion.css +27 -16
  11. package/build/styles/avatar/Avatar.css +95 -50
  12. package/build/styles/inputs/Input.css +37 -21
  13. package/build/styles/inputs/TextArea.css +35 -20
  14. package/build/styles/loader/Loader.css +4 -90
  15. package/build/styles/main.css +4 -94
  16. package/build/styles/popover/Popover.css +19 -12
  17. package/build/styles/select/Select.css +131 -68
  18. package/build/styles/switch/Switch.css +27 -16
  19. package/build/styles/tile/Tile.css +31 -18
  20. package/build/types/dateLookup/DateLookup.d.ts +2 -2
  21. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  22. package/build/types/test-utils/story-config.d.ts +2 -3
  23. package/build/types/test-utils/story-config.d.ts.map +1 -1
  24. package/package.json +20 -28
  25. package/src/accordion/Accordion.css +27 -16
  26. package/src/accordion/Accordion.story.tsx +1 -1
  27. package/src/actionButton/ActionButton.story.tsx +3 -2
  28. package/src/actionOption/ActionOption.story.tsx +2 -2
  29. package/src/alert/Alert.story.tsx +2 -2
  30. package/src/alert/Alert.tests.story.tsx +2 -2
  31. package/src/avatar/Avatar.css +95 -50
  32. package/src/avatar/Avatar.spec.tsx +1 -1
  33. package/src/avatar/Avatar.story.tsx +3 -2
  34. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  35. package/src/avatarLayout/AvatarLayout.tsx +1 -1
  36. package/src/avatarView/AvatarView.story.tsx +1 -1
  37. package/src/avatarWrapper/AvatarWrapper.story.tsx +3 -2
  38. package/src/badge/Badge.story.tsx +49 -28
  39. package/src/button/Button.accessibility.docs.mdx +1 -1
  40. package/src/button/Button.story.tsx +2 -2
  41. package/src/button/Button.tests.story.tsx +2 -2
  42. package/src/button/LegacyButton.story.tsx +3 -2
  43. package/src/card/Card.story.tsx +2 -2
  44. package/src/carousel/Carousel.story.tsx +1 -1
  45. package/src/checkbox/Checkbox.story.tsx +2 -2
  46. package/src/checkboxButton/CheckboxButton.story.tsx +2 -2
  47. package/src/checkboxOption/CheckboxOption.story.tsx +35 -29
  48. package/src/chevron/Chevron.story.tsx +1 -1
  49. package/src/chips/Chips.story.tsx +1 -1
  50. package/src/circularButton/CircularButton.story.tsx +1 -1
  51. package/src/circularButton/CircularButton.tests.story.tsx +1 -1
  52. package/src/common/bottomSheet/BottomSheet.story.tsx +2 -2
  53. package/src/common/card/Card.story.tsx +1 -1
  54. package/src/common/circle/Circle.story.tsx +2 -2
  55. package/src/common/locale/index.spec.ts +28 -16
  56. package/src/common/responsivePanel/ResponsivePanel.spec.js +8 -29
  57. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  58. package/src/dateInput/DateInput.story.tsx +2 -2
  59. package/src/dateInput/DateInput.tests.story.tsx +2 -2
  60. package/src/dateLookup/DateLookup.spec.tsx +5 -5
  61. package/src/dateLookup/DateLookup.story.tsx +43 -71
  62. package/src/dateLookup/DateLookup.tests.story.tsx +3 -3
  63. package/src/dateLookup/DateLookup.tsx +4 -1
  64. package/src/decision/Decision.story.tsx +24 -49
  65. package/src/definitionList/DefinitionList.story.tsx +1 -1
  66. package/src/dimmer/Dimmer.story.tsx +2 -2
  67. package/src/divider/Divider.accessibility.docs.mdx +1 -1
  68. package/src/divider/Divider.story.tsx +1 -1
  69. package/src/drawer/Drawer.story.tsx +13 -7
  70. package/src/dropFade/DropFade.story.tsx +1 -1
  71. package/src/emphasis/Emphasis.spec.tsx +8 -8
  72. package/src/emphasis/Emphasis.story.tsx +1 -1
  73. package/src/field/Field.story.tsx +3 -3
  74. package/src/flowNavigation/FlowNavigation.story.tsx +305 -260
  75. package/src/iconButton/IconButton.story.tsx +2 -2
  76. package/src/image/Image.story.tsx +27 -54
  77. package/src/info/Info.story.tsx +2 -2
  78. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  79. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +2 -2
  80. package/src/inputs/Input.css +37 -21
  81. package/src/inputs/InputGroup.story.tsx +1 -1
  82. package/src/inputs/SearchInput.story.tsx +1 -1
  83. package/src/inputs/SelectInput.docs.mdx +1 -1
  84. package/src/inputs/SelectInput.story.tsx +2 -2
  85. package/src/inputs/TextArea.css +35 -20
  86. package/src/instructionsList/InstructionsList.story.tsx +2 -2
  87. package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
  88. package/src/loader/Loader.css +4 -90
  89. package/src/loader/Loader.story.tsx +1 -1
  90. package/src/logo/Logo.story.tsx +1 -1
  91. package/src/main.css +4 -94
  92. package/src/markdown/Markdown.story.tsx +1 -1
  93. package/src/modal/Modal.story.tsx +2 -2
  94. package/src/money/Money.story.tsx +1 -1
  95. package/src/moneyInput/MoneyInput.docs.mdx +1 -1
  96. package/src/moneyInput/MoneyInput.spec.tsx +8 -5
  97. package/src/moneyInput/MoneyInput.story.tsx +2 -2
  98. package/src/moneyInput/currencyFormatting.spec.ts +1 -1
  99. package/src/navigationOption/NavigationOption.story.tsx +265 -226
  100. package/src/nudge/Nudge.story.tsx +1 -1
  101. package/src/overlayHeader/OverlayHeader.story.tsx +32 -24
  102. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -1
  103. package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.ts +6 -3
  104. package/src/popover/Popover.css +19 -12
  105. package/src/popover/Popover.story.tsx +2 -2
  106. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +2 -2
  107. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +2 -2
  108. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +2 -2
  109. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +2 -2
  110. package/src/processIndicator/ProcessIndicator.story.tsx +1 -1
  111. package/src/progress/Progress.story.tsx +1 -1
  112. package/src/progressBar/ProgressBar.story.tsx +1 -1
  113. package/src/promoCard/PromoCard.story.tsx +1 -1
  114. package/src/promoCard/PromoCardGroup.story.tsx +1 -1
  115. package/src/provider/Provider.spec.tsx +2 -2
  116. package/src/provider/Provider.story.tsx +1 -1
  117. package/src/provider/direction/DirectionProvider.spec.tsx +1 -1
  118. package/src/provider/language/LanguageProvider.spec.tsx +1 -1
  119. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  120. package/src/radio/Radio.story.tsx +59 -42
  121. package/src/radioGroup/RadioGroup.story.tsx +2 -2
  122. package/src/radioOption/RadioOption.story.tsx +73 -38
  123. package/src/segmentedControl/SegmentedControl.story.tsx +1 -1
  124. package/src/select/Select.css +131 -68
  125. package/src/select/Select.story.tsx +385 -397
  126. package/src/slidingPanel/SlidingPanel.story.tsx +30 -13
  127. package/src/snackbar/Snackbar.story.tsx +50 -36
  128. package/src/snackbar/Snackbar.tests.story.tsx +3 -2
  129. package/src/statusIcon/StatusIcon.docs.mdx +1 -1
  130. package/src/statusIcon/StatusIcon.spec.tsx +8 -5
  131. package/src/statusIcon/StatusIcon.story.tsx +1 -1
  132. package/src/stepper/Stepper.story.tsx +2 -2
  133. package/src/stepper/Stepper.tests.story.tsx +2 -2
  134. package/src/sticky/Sticky.story.tsx +1 -1
  135. package/src/summary/Summary.story.tsx +18 -17
  136. package/src/switch/Switch.css +27 -16
  137. package/src/switch/Switch.story.tsx +2 -2
  138. package/src/switchOption/SwitchOption.story.tsx +1 -1
  139. package/src/table/Table.story.tsx +1 -1
  140. package/src/test-utils/story-config.ts +9 -6
  141. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +2 -2
  142. package/src/tile/Tile.css +31 -18
  143. package/src/tile/Tile.story.tsx +43 -43
  144. package/src/tooltip/Tooltip.story.tsx +2 -2
  145. package/src/typeahead/Typeahead.story.tsx +2 -2
  146. package/src/upload/Upload.story.tsx +2 -2
  147. package/src/upload/Upload.tests.story.tsx +2 -2
  148. package/src/upload/utils/isTypeValid/isTypeValid.spec.ts +3 -1
  149. package/src/uploadInput/UploadInput.story.tsx +1 -1
  150. package/src/uploadInput/UploadInput.tests.story.tsx +3 -3
  151. package/src/withId/withId.docs.mdx +1 -1
  152. package/src/withId/withId.story.tsx +1 -1
  153. package/src/common/responsivePanel/__snapshots__/ResponsivePanel.spec.js.snap +0 -21
package/src/info/Info.story.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { userEvent, within } from '@storybook/test';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { userEvent, within } from 'storybook/test';
3
3
 
4
4
  import { lorem10, storyConfig } from '../test-utils';
5
5
 
package/src/inlineAlert/InlineAlert.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/react';
1
+ import { Meta } from '@storybook/react-webpack5';
2
2
 
3
3
  import InlineAlert, { InlineAlertProps } from './InlineAlert';
4
4
  import { lorem10, lorem40 } from '../test-utils';
package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx CHANGED
@@ -1,8 +1,8 @@
1
- import { userEvent, within, fn } from '@storybook/test';
1
+ import { userEvent, within, fn } from 'storybook/test';
2
2
 
3
3
  import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
4
4
  import { Field, FieldProps } from '../field/Field';
5
- import { Meta, type StoryObj } from '@storybook/react';
5
+ import { Meta, type StoryObj } from '@storybook/react-webpack5';
6
6
 
7
7
  type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
8
8
 
package/src/inputs/Input.css CHANGED
@@ -1,6 +1,4 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.np-form-control {
1
+ .np-form-control {
4
2
  --ring-width: 1px;
5
3
  --ring-color: var(--color-interactive-secondary);
6
4
  border: none;
@@ -19,18 +17,23 @@
19
17
  transition-timing-function: ease-in-out;
20
18
  transition-duration: 300ms;
21
19
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
22
- }.np-form-control:focus-visible {
20
+ }
21
+ .np-form-control:focus-visible {
23
22
  outline: none;
24
- }.np-form-control[aria-invalid="true"] {
23
+ }
24
+ .np-form-control[aria-invalid="true"] {
25
25
  --ring-width: 2px;
26
26
  --ring-color: var(--color-sentiment-negative) !important;
27
- }.np-form-control:hover:enabled {
27
+ }
28
+ .np-form-control:hover:enabled {
28
29
  --ring-width: 2px;
29
30
  --ring-color: var(--color-interactive-secondary-hover);
30
- }.np-form-control:focus:enabled {
31
+ }
32
+ .np-form-control:focus:enabled {
31
33
  --ring-width: 3px;
32
34
  --ring-color: var(--color-interactive-primary);
33
- }.np-form-control--size-auto {
35
+ }
36
+ .np-form-control--size-auto {
34
37
  font-weight: 400;
35
38
  font-weight: var(--font-weight-regular);
36
39
  font-size: 1rem;
@@ -41,12 +44,14 @@
41
44
  padding-top: var(--size-12);
42
45
  padding-bottom: 12px;
43
46
  padding-bottom: var(--size-12);
44
- }.np-form-control--size-sm,
47
+ }
48
+ .np-form-control--size-sm,
45
49
  .np-form-control--size-md,
46
50
  .np-form-control--size-lg {
47
51
  padding-top: 0 !important;
48
52
  padding-bottom: 0 !important;
49
- }.np-form-control--size-sm {
53
+ }
54
+ .np-form-control--size-sm {
50
55
  font-size: 0.875rem;
51
56
  font-size: var(--font-size-14);
52
57
  line-height: 155%;
@@ -55,12 +60,14 @@
55
60
  font-weight: var(--font-weight-regular);
56
61
  height: 32px !important;
57
62
  height: var(--size-32) !important;
58
- }@media (max-width: 320px) {
63
+ }
64
+ @media (max-width: 320px) {
59
65
  .np-form-control--size-sm {
60
66
  height: 64px !important;
61
67
  height: var(--size-64) !important;
62
68
  }
63
- }.np-form-control--size-md {
69
+ }
70
+ .np-form-control--size-md {
64
71
  font-weight: 400;
65
72
  font-weight: var(--font-weight-regular);
66
73
  font-size: 1rem;
@@ -69,12 +76,14 @@
69
76
  letter-spacing: -0.011em;
70
77
  height: 48px !important;
71
78
  height: var(--size-48) !important;
72
- }@media (max-width: 320px) {
79
+ }
80
+ @media (max-width: 320px) {
73
81
  .np-form-control--size-md {
74
82
  height: 72px !important;
75
83
  height: var(--size-72) !important;
76
84
  }
77
- }.np-form-control--size-lg {
85
+ }
86
+ .np-form-control--size-lg {
78
87
  margin: 0;
79
88
  color: #37517e;
80
89
  color: var(--color-content-primary);
@@ -91,7 +100,8 @@
91
100
  line-height: 125%;
92
101
  height: 72px !important;
93
102
  height: var(--size-72) !important;
94
- }@supports (hyphenate-limit-chars: 1) {
103
+ }
104
+ @supports (hyphenate-limit-chars: 1) {
95
105
  .np-form-control--size-lg {
96
106
  -webkit-hyphens: auto;
97
107
  hyphens: auto;
@@ -107,7 +117,8 @@
107
117
  hyphenate-limit-chars: 10 4 3;
108
118
  }
109
119
  }
110
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
120
+ }
121
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
111
122
  .np-form-control--size-lg {
112
123
  -webkit-hyphens: auto;
113
124
  hyphens: auto;
@@ -119,21 +130,26 @@
119
130
  -webkit-hyphenate-limit-before: 4;
120
131
  }
121
132
  }
122
- }.np-form-control--size-lg + p,
133
+ }
134
+ .np-form-control--size-lg + p,
123
135
  .np-form-control--size-lg + ul:not(.list-unstyled),
124
136
  .np-form-control--size-lg + ol:not(.list-unstyled) {
125
137
  margin-top: 8px;
126
138
  margin-top: var(--size-8);
127
- }.np-input::-moz-placeholder {
139
+ }
140
+ .np-input::-moz-placeholder {
128
141
  color: #768e9c;
129
142
  color: var(--color-content-tertiary);
130
- }.np-input::placeholder {
143
+ }
144
+ .np-input::placeholder {
131
145
  color: #768e9c;
132
146
  color: var(--color-content-tertiary);
133
- }.np-input--shape-rectangle {
147
+ }
148
+ .np-input--shape-rectangle {
134
149
  border-radius: 10px !important;
135
150
  border-radius: var(--radius-small) !important;
136
- }.np-input--shape-pill {
151
+ }
152
+ .np-input--shape-pill {
137
153
  border-radius: 9999px !important;
138
154
  border-radius: var(--radius-full) !important;
139
155
  }
package/src/inputs/InputGroup.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import { Search } from '@transferwise/icons';
3
3
  import { useRef, useState } from 'react';
4
4
 
package/src/inputs/SearchInput.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import { useState } from 'react';
3
3
 
4
4
  import { Size } from '../common';
package/src/inputs/SelectInput.docs.mdx CHANGED
@@ -1,4 +1,4 @@
1
- import { Meta } from '@storybook/blocks';
1
+ import { Meta } from '@storybook/addon-docs/blocks';
2
2
  import { MoneyInput } from '..';
3
3
 
4
4
  <Meta title="Forms/SelectInput/Accessibility" />
package/src/inputs/SelectInput.story.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { expect, fn, type Mock, screen, userEvent, within, waitFor } from '@storybook/test';
1
+ import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { expect, fn, type Mock, screen, userEvent, within, waitFor } from 'storybook/test';
3
3
  import { Calendar, ChevronDown } from '@transferwise/icons';
4
4
  import { Flag } from '@wise/art';
5
5
  import { clsx } from 'clsx';
package/src/inputs/TextArea.css CHANGED
@@ -1,6 +1,4 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.np-form-control {
1
+ .np-form-control {
4
2
  --ring-width: 1px;
5
3
  --ring-color: var(--color-interactive-secondary);
6
4
  border: none;
@@ -19,18 +17,23 @@
19
17
  transition-timing-function: ease-in-out;
20
18
  transition-duration: 300ms;
21
19
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
22
- }.np-form-control:focus-visible {
20
+ }
21
+ .np-form-control:focus-visible {
23
22
  outline: none;
24
- }.np-form-control[aria-invalid="true"] {
23
+ }
24
+ .np-form-control[aria-invalid="true"] {
25
25
  --ring-width: 2px;
26
26
  --ring-color: var(--color-sentiment-negative) !important;
27
- }.np-form-control:hover:enabled {
27
+ }
28
+ .np-form-control:hover:enabled {
28
29
  --ring-width: 2px;
29
30
  --ring-color: var(--color-interactive-secondary-hover);
30
- }.np-form-control:focus:enabled {
31
+ }
32
+ .np-form-control:focus:enabled {
31
33
  --ring-width: 3px;
32
34
  --ring-color: var(--color-interactive-primary);
33
- }.np-form-control--size-auto {
35
+ }
36
+ .np-form-control--size-auto {
34
37
  font-weight: 400;
35
38
  font-weight: var(--font-weight-regular);
36
39
  font-size: 1rem;
@@ -41,12 +44,14 @@
41
44
  padding-top: var(--size-12);
42
45
  padding-bottom: 12px;
43
46
  padding-bottom: var(--size-12);
44
- }.np-form-control--size-sm,
47
+ }
48
+ .np-form-control--size-sm,
45
49
  .np-form-control--size-md,
46
50
  .np-form-control--size-lg {
47
51
  padding-top: 0 !important;
48
52
  padding-bottom: 0 !important;
49
- }.np-form-control--size-sm {
53
+ }
54
+ .np-form-control--size-sm {
50
55
  font-size: 0.875rem;
51
56
  font-size: var(--font-size-14);
52
57
  line-height: 155%;
@@ -55,12 +60,14 @@
55
60
  font-weight: var(--font-weight-regular);
56
61
  height: 32px !important;
57
62
  height: var(--size-32) !important;
58
- }@media (max-width: 320px) {
63
+ }
64
+ @media (max-width: 320px) {
59
65
  .np-form-control--size-sm {
60
66
  height: 64px !important;
61
67
  height: var(--size-64) !important;
62
68
  }
63
- }.np-form-control--size-md {
69
+ }
70
+ .np-form-control--size-md {
64
71
  font-weight: 400;
65
72
  font-weight: var(--font-weight-regular);
66
73
  font-size: 1rem;
@@ -69,12 +76,14 @@
69
76
  letter-spacing: -0.011em;
70
77
  height: 48px !important;
71
78
  height: var(--size-48) !important;
72
- }@media (max-width: 320px) {
79
+ }
80
+ @media (max-width: 320px) {
73
81
  .np-form-control--size-md {
74
82
  height: 72px !important;
75
83
  height: var(--size-72) !important;
76
84
  }
77
- }.np-form-control--size-lg {
85
+ }
86
+ .np-form-control--size-lg {
78
87
  margin: 0;
79
88
  color: #37517e;
80
89
  color: var(--color-content-primary);
@@ -91,7 +100,8 @@
91
100
  line-height: 125%;
92
101
  height: 72px !important;
93
102
  height: var(--size-72) !important;
94
- }@supports (hyphenate-limit-chars: 1) {
103
+ }
104
+ @supports (hyphenate-limit-chars: 1) {
95
105
  .np-form-control--size-lg {
96
106
  -webkit-hyphens: auto;
97
107
  hyphens: auto;
@@ -107,7 +117,8 @@
107
117
  hyphenate-limit-chars: 10 4 3;
108
118
  }
109
119
  }
110
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
120
+ }
121
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
111
122
  .np-form-control--size-lg {
112
123
  -webkit-hyphens: auto;
113
124
  hyphens: auto;
@@ -119,12 +130,14 @@
119
130
  -webkit-hyphenate-limit-before: 4;
120
131
  }
121
132
  }
122
- }.np-form-control--size-lg + p,
133
+ }
134
+ .np-form-control--size-lg + p,
123
135
  .np-form-control--size-lg + ul:not(.list-unstyled),
124
136
  .np-form-control--size-lg + ol:not(.list-unstyled) {
125
137
  margin-top: 8px;
126
138
  margin-top: var(--size-8);
127
- }.np-text-area {
139
+ }
140
+ .np-text-area {
128
141
  min-height: 72px;
129
142
  min-height: var(--size-72);
130
143
  scroll-padding-top: 8px;
@@ -134,10 +147,12 @@
134
147
  overscroll-behavior: none;
135
148
  border-radius: 10px !important;
136
149
  border-radius: var(--radius-small) !important;
137
- }.np-text-area::-moz-placeholder {
150
+ }
151
+ .np-text-area::-moz-placeholder {
138
152
  color: #768e9c;
139
153
  color: var(--color-content-tertiary);
140
- }.np-text-area::placeholder {
154
+ }
155
+ .np-text-area::placeholder {
141
156
  color: #768e9c;
142
157
  color: var(--color-content-tertiary);
143
158
  }
package/src/instructionsList/InstructionsList.story.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { fn } from '@storybook/test';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { fn } from 'storybook/test';
3
3
  import { storyConfig } from '../test-utils';
4
4
 
5
5
  import Link from '../link';
package/src/legacylistItem/LegacyListItem.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { action } from '@storybook/addon-actions';
1
+ import { action } from 'storybook/actions';
2
2
  import { Documents, FastFlag } from '@transferwise/icons';
3
3
  import { ComponentProps } from 'react';
4
4
 
package/src/loader/Loader.css CHANGED
@@ -49,101 +49,15 @@
49
49
  --coin-size: 3rem;
50
50
  --coin-edge-width-offset: translateX(0.275rem);
51
51
  --coin-edge-width-negative-offset: translateX(-0.275rem);
52
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
53
- 0.05rem 0 0 var(--coin-colour),
54
- 0.075rem 0 0 var(--coin-colour),
55
- 0.1rem 0 0 var(--coin-colour),
56
- 0.125rem 0 0 var(--coin-colour),
57
- 0.15rem 0 0 var(--coin-colour),
58
- 0.175rem 0 0 var(--coin-colour),
59
- 0.2rem 0 0 var(--coin-colour),
60
- 0.225rem 0 0 var(--coin-colour),
61
- 0.25rem 0 0 var(--coin-colour),
62
- 0.275rem 0 0 var(--coin-colour),
63
- 0.3rem 0 0 var(--coin-colour),
64
- 0.325rem 0 0 var(--coin-colour),
65
- 0.35rem 0 0 var(--coin-colour),
66
- 0.375rem 0 0 var(--coin-colour),
67
- 0.4rem 0 0 var(--coin-colour),
68
- 0.425rem 0 0 var(--coin-colour),
69
- 0.45rem 0 0 var(--coin-colour),
70
- 0.475rem 0 0 var(--coin-colour);
71
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
72
- -0.05rem 0 0 var(--coin-colour),
73
- -0.075rem 0 0 var(--coin-colour),
74
- -0.1rem 0 0 var(--coin-colour),
75
- -0.125rem 0 0 var(--coin-colour),
76
- -0.15rem 0 0 var(--coin-colour),
77
- -0.175rem 0 0 var(--coin-colour),
78
- -0.2rem 0 0 var(--coin-colour),
79
- -0.225rem 0 0 var(--coin-colour),
80
- -0.25rem 0 0 var(--coin-colour),
81
- -0.275rem 0 0 var(--coin-colour),
82
- -0.3rem 0 0 var(--coin-colour),
83
- -0.325rem 0 0 var(--coin-colour),
84
- -0.35rem 0 0 var(--coin-colour),
85
- -0.375rem 0 0 var(--coin-colour),
86
- -0.4rem 0 0 var(--coin-colour),
87
- -0.425rem 0 0 var(--coin-colour),
88
- -0.45rem 0 0 var(--coin-colour),
89
- -0.475rem 0 0 var(--coin-colour);
52
+ --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);
53
+ --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);
90
54
  }
91
55
  .tw-loader--md {
92
56
  --coin-size: 4.5rem;
93
57
  --coin-edge-width-offset: translateX(0.375rem);
94
58
  --coin-edge-width-negative-offset: translateX(-0.375rem);
95
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
96
- 0.05rem 0 0 var(--coin-colour),
97
- 0.075rem 0 0 var(--coin-colour),
98
- 0.1rem 0 0 var(--coin-colour),
99
- 0.125rem 0 0 var(--coin-colour),
100
- 0.15rem 0 0 var(--coin-colour),
101
- 0.175rem 0 0 var(--coin-colour),
102
- 0.2rem 0 0 var(--coin-colour),
103
- 0.225rem 0 0 var(--coin-colour),
104
- 0.25rem 0 0 var(--coin-colour),
105
- 0.275rem 0 0 var(--coin-colour),
106
- 0.3rem 0 0 var(--coin-colour),
107
- 0.325rem 0 0 var(--coin-colour),
108
- 0.35rem 0 0 var(--coin-colour),
109
- 0.375rem 0 0 var(--coin-colour),
110
- 0.4rem 0 0 var(--coin-colour),
111
- 0.425rem 0 0 var(--coin-colour),
112
- 0.45rem 0 0 var(--coin-colour),
113
- 0.475rem 0 0 var(--coin-colour),
114
- 0.5rem 0 0 var(--coin-colour),
115
- 0.525rem 0 0 var(--coin-colour),
116
- 0.55rem 0 0 var(--coin-colour),
117
- 0.575rem 0 0 var(--coin-colour),
118
- 0.6rem 0 0 var(--coin-colour),
119
- 0.625rem 0 0 var(--coin-colour),
120
- 0.65rem 0 0 var(--coin-colour);
121
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
122
- -0.05rem 0 0 var(--coin-colour),
123
- -0.075rem 0 0 var(--coin-colour),
124
- -0.1rem 0 0 var(--coin-colour),
125
- -0.125rem 0 0 var(--coin-colour),
126
- -0.15rem 0 0 var(--coin-colour),
127
- -0.175rem 0 0 var(--coin-colour),
128
- -0.2rem 0 0 var(--coin-colour),
129
- -0.225rem 0 0 var(--coin-colour),
130
- -0.25rem 0 0 var(--coin-colour),
131
- -0.275rem 0 0 var(--coin-colour),
132
- -0.3rem 0 0 var(--coin-colour),
133
- -0.325rem 0 0 var(--coin-colour),
134
- -0.35rem 0 0 var(--coin-colour),
135
- -0.375rem 0 0 var(--coin-colour),
136
- -0.4rem 0 0 var(--coin-colour),
137
- -0.425rem 0 0 var(--coin-colour),
138
- -0.45rem 0 0 var(--coin-colour),
139
- -0.475rem 0 0 var(--coin-colour),
140
- -0.5rem 0 0 var(--coin-colour),
141
- -0.525rem 0 0 var(--coin-colour),
142
- -0.55rem 0 0 var(--coin-colour),
143
- -0.575rem 0 0 var(--coin-colour),
144
- -0.6rem 0 0 var(--coin-colour),
145
- -0.625rem 0 0 var(--coin-colour),
146
- -0.65rem 0 0 var(--coin-colour);
59
+ --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);
60
+ --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);
147
61
  }
148
62
  @media (prefers-reduced-motion) {
149
63
  .tw-loader::before {
package/src/loader/Loader.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from '@storybook/react';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  import Loader from './Loader';
4
4
 
package/src/logo/Logo.story.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from '@storybook/react';
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  import Logo from '.';
4
4
 
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 {
package/src/markdown/Markdown.story.tsx CHANGED
@@ -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
 
package/src/modal/Modal.story.tsx CHANGED
@@ -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
 
package/src/money/Money.story.tsx CHANGED
@@ -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
 
package/src/moneyInput/MoneyInput.docs.mdx CHANGED
@@ -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
 
package/src/moneyInput/MoneyInput.spec.tsx CHANGED
@@ -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', () => {
package/src/moneyInput/MoneyInput.story.tsx CHANGED
@@ -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
 
package/src/moneyInput/currencyFormatting.spec.ts CHANGED
@@ -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
  );