@transferwise/components 0.0.0-experimental-cb7b730 → 0.0.0-experimental-9463364

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 (168) hide show
  1. package/build/dateLookup/DateLookup.js +3 -2
  2. package/build/dateLookup/DateLookup.js.map +1 -1
  3. package/build/dateLookup/DateLookup.mjs +3 -2
  4. package/build/dateLookup/DateLookup.mjs.map +1 -1
  5. package/build/i18n/en.json +1 -0
  6. package/build/i18n/en.json.js +1 -0
  7. package/build/i18n/en.json.js.map +1 -1
  8. package/build/i18n/en.json.mjs +1 -0
  9. package/build/i18n/en.json.mjs.map +1 -1
  10. package/build/main.css +4 -95
  11. package/build/styles/accordion/Accordion.css +27 -16
  12. package/build/styles/avatar/Avatar.css +95 -50
  13. package/build/styles/dimmer/Dimmer.css +0 -1
  14. package/build/styles/inputs/Input.css +37 -21
  15. package/build/styles/inputs/TextArea.css +35 -20
  16. package/build/styles/loader/Loader.css +4 -90
  17. package/build/styles/main.css +4 -95
  18. package/build/styles/popover/Popover.css +19 -12
  19. package/build/styles/select/Select.css +131 -68
  20. package/build/styles/switch/Switch.css +27 -16
  21. package/build/styles/tile/Tile.css +31 -18
  22. package/build/types/dateLookup/DateLookup.d.ts +2 -2
  23. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  24. package/build/types/test-utils/index.d.ts +2 -0
  25. package/build/types/test-utils/index.d.ts.map +1 -1
  26. package/build/types/test-utils/story-config.d.ts +2 -3
  27. package/build/types/test-utils/story-config.d.ts.map +1 -1
  28. package/build/types/upload/Upload.d.ts.map +1 -1
  29. package/build/types/upload/Upload.messages.d.ts +4 -0
  30. package/build/types/upload/Upload.messages.d.ts.map +1 -1
  31. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  32. package/build/upload/Upload.js +13 -3
  33. package/build/upload/Upload.js.map +1 -1
  34. package/build/upload/Upload.messages.js +3 -0
  35. package/build/upload/Upload.messages.js.map +1 -1
  36. package/build/upload/Upload.messages.mjs +3 -0
  37. package/build/upload/Upload.messages.mjs.map +1 -1
  38. package/build/upload/Upload.mjs +13 -3
  39. package/build/upload/Upload.mjs.map +1 -1
  40. package/build/uploadInput/uploadButton/UploadButton.js +3 -0
  41. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  42. package/build/uploadInput/uploadButton/UploadButton.mjs +3 -0
  43. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  44. package/package.json +8 -16
  45. package/src/accordion/Accordion.css +27 -16
  46. package/src/accordion/Accordion.story.tsx +1 -1
  47. package/src/actionButton/ActionButton.story.tsx +3 -2
  48. package/src/actionOption/ActionOption.story.tsx +2 -2
  49. package/src/alert/Alert.story.tsx +2 -2
  50. package/src/alert/Alert.tests.story.tsx +2 -2
  51. package/src/avatar/Avatar.css +95 -50
  52. package/src/avatar/Avatar.story.tsx +3 -2
  53. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  54. package/src/avatarView/AvatarView.story.tsx +1 -1
  55. package/src/avatarWrapper/AvatarWrapper.story.tsx +3 -2
  56. package/src/badge/Badge.story.tsx +49 -28
  57. package/src/button/Button.accessibility.docs.mdx +1 -1
  58. package/src/button/Button.story.tsx +2 -2
  59. package/src/button/Button.tests.story.tsx +2 -2
  60. package/src/button/LegacyButton.story.tsx +3 -2
  61. package/src/card/Card.story.tsx +2 -2
  62. package/src/carousel/Carousel.story.tsx +1 -1
  63. package/src/checkbox/Checkbox.story.tsx +2 -2
  64. package/src/checkboxButton/CheckboxButton.story.tsx +2 -2
  65. package/src/checkboxOption/CheckboxOption.story.tsx +35 -29
  66. package/src/chevron/Chevron.story.tsx +1 -1
  67. package/src/chips/Chips.story.tsx +1 -1
  68. package/src/circularButton/CircularButton.story.tsx +1 -1
  69. package/src/circularButton/CircularButton.tests.story.tsx +1 -1
  70. package/src/common/bottomSheet/BottomSheet.story.tsx +2 -2
  71. package/src/common/card/Card.story.tsx +1 -1
  72. package/src/common/circle/Circle.story.tsx +2 -2
  73. package/src/common/responsivePanel/ResponsivePanel.spec.js +8 -29
  74. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  75. package/src/dateInput/DateInput.story.tsx +2 -2
  76. package/src/dateInput/DateInput.tests.story.tsx +2 -2
  77. package/src/dateLookup/DateLookup.story.tsx +43 -71
  78. package/src/dateLookup/DateLookup.tests.story.tsx +3 -3
  79. package/src/dateLookup/DateLookup.tsx +4 -1
  80. package/src/decision/Decision.story.tsx +24 -49
  81. package/src/definitionList/DefinitionList.story.tsx +1 -1
  82. package/src/dimmer/Dimmer.css +0 -1
  83. package/src/dimmer/Dimmer.less +0 -1
  84. package/src/dimmer/Dimmer.story.tsx +2 -2
  85. package/src/divider/Divider.accessibility.docs.mdx +1 -1
  86. package/src/divider/Divider.story.tsx +1 -1
  87. package/src/drawer/Drawer.story.tsx +13 -7
  88. package/src/dropFade/DropFade.story.tsx +1 -1
  89. package/src/emphasis/Emphasis.story.tsx +1 -1
  90. package/src/field/Field.story.tsx +3 -3
  91. package/src/flowNavigation/FlowNavigation.story.tsx +305 -260
  92. package/src/i18n/en.json +1 -0
  93. package/src/iconButton/IconButton.story.tsx +2 -2
  94. package/src/image/Image.story.tsx +27 -54
  95. package/src/info/Info.story.tsx +2 -2
  96. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  97. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +2 -2
  98. package/src/inputs/Input.css +37 -21
  99. package/src/inputs/InputGroup.story.tsx +1 -1
  100. package/src/inputs/SearchInput.story.tsx +1 -1
  101. package/src/inputs/SelectInput.docs.mdx +1 -1
  102. package/src/inputs/SelectInput.story.tsx +2 -2
  103. package/src/inputs/TextArea.css +35 -20
  104. package/src/instructionsList/InstructionsList.story.tsx +2 -2
  105. package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
  106. package/src/loader/Loader.css +4 -90
  107. package/src/loader/Loader.story.tsx +1 -1
  108. package/src/logo/Logo.story.tsx +1 -1
  109. package/src/main.css +4 -95
  110. package/src/markdown/Markdown.story.tsx +1 -1
  111. package/src/modal/Modal.story.tsx +2 -2
  112. package/src/money/Money.story.tsx +1 -1
  113. package/src/moneyInput/MoneyInput.docs.mdx +1 -1
  114. package/src/moneyInput/MoneyInput.story.tsx +2 -2
  115. package/src/navigationOption/NavigationOption.story.tsx +265 -226
  116. package/src/nudge/Nudge.story.tsx +1 -1
  117. package/src/overlayHeader/OverlayHeader.story.tsx +32 -24
  118. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -1
  119. package/src/popover/Popover.css +19 -12
  120. package/src/popover/Popover.story.tsx +2 -2
  121. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +2 -2
  122. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +2 -2
  123. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +2 -2
  124. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +2 -2
  125. package/src/processIndicator/ProcessIndicator.story.tsx +1 -1
  126. package/src/progress/Progress.story.tsx +1 -1
  127. package/src/progressBar/ProgressBar.story.tsx +1 -1
  128. package/src/promoCard/PromoCard.story.tsx +1 -1
  129. package/src/promoCard/PromoCardGroup.story.tsx +1 -1
  130. package/src/provider/Provider.story.tsx +1 -1
  131. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  132. package/src/radio/Radio.story.tsx +59 -42
  133. package/src/radioGroup/RadioGroup.story.tsx +2 -2
  134. package/src/radioOption/RadioOption.story.tsx +73 -38
  135. package/src/segmentedControl/SegmentedControl.story.tsx +1 -1
  136. package/src/select/Select.css +131 -68
  137. package/src/select/Select.story.tsx +385 -397
  138. package/src/slidingPanel/SlidingPanel.story.tsx +30 -13
  139. package/src/snackbar/Snackbar.story.tsx +50 -36
  140. package/src/snackbar/Snackbar.tests.story.tsx +3 -2
  141. package/src/statusIcon/StatusIcon.docs.mdx +1 -1
  142. package/src/statusIcon/StatusIcon.story.tsx +1 -1
  143. package/src/stepper/Stepper.story.tsx +2 -2
  144. package/src/stepper/Stepper.tests.story.tsx +2 -2
  145. package/src/sticky/Sticky.story.tsx +1 -1
  146. package/src/summary/Summary.story.tsx +18 -17
  147. package/src/switch/Switch.css +27 -16
  148. package/src/switch/Switch.story.tsx +2 -2
  149. package/src/switchOption/SwitchOption.story.tsx +1 -1
  150. package/src/table/Table.story.tsx +1 -1
  151. package/src/test-utils/story-config.ts +9 -6
  152. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +2 -2
  153. package/src/tile/Tile.css +31 -18
  154. package/src/tile/Tile.story.tsx +43 -43
  155. package/src/tooltip/Tooltip.story.tsx +2 -2
  156. package/src/typeahead/Typeahead.story.tsx +2 -2
  157. package/src/upload/Upload.messages.ts +4 -0
  158. package/src/upload/Upload.spec.tsx +6 -0
  159. package/src/upload/Upload.story.tsx +2 -2
  160. package/src/upload/Upload.tests.story.tsx +2 -2
  161. package/src/upload/Upload.tsx +17 -5
  162. package/src/uploadInput/UploadInput.story.tsx +1 -1
  163. package/src/uploadInput/UploadInput.tests.story.tsx +3 -3
  164. package/src/uploadInput/uploadButton/UploadButton.spec.tsx +6 -0
  165. package/src/uploadInput/uploadButton/UploadButton.tsx +4 -0
  166. package/src/withId/withId.docs.mdx +1 -1
  167. package/src/withId/withId.story.tsx +1 -1
  168. 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%;
@@ -2083,7 +2079,6 @@ button.np-option {
2083
2079
  }
2084
2080
  .no-scroll {
2085
2081
  overflow: hidden;
2086
- scrollbar-gutter: stable;
2087
2082
  }
2088
2083
  .dimmer {
2089
2084
  position: fixed;
@@ -3189,101 +3184,15 @@ button.np-link {
3189
3184
  --coin-size: 3rem;
3190
3185
  --coin-edge-width-offset: translateX(0.275rem);
3191
3186
  --coin-edge-width-negative-offset: translateX(-0.275rem);
3192
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
3193
- 0.05rem 0 0 var(--coin-colour),
3194
- 0.075rem 0 0 var(--coin-colour),
3195
- 0.1rem 0 0 var(--coin-colour),
3196
- 0.125rem 0 0 var(--coin-colour),
3197
- 0.15rem 0 0 var(--coin-colour),
3198
- 0.175rem 0 0 var(--coin-colour),
3199
- 0.2rem 0 0 var(--coin-colour),
3200
- 0.225rem 0 0 var(--coin-colour),
3201
- 0.25rem 0 0 var(--coin-colour),
3202
- 0.275rem 0 0 var(--coin-colour),
3203
- 0.3rem 0 0 var(--coin-colour),
3204
- 0.325rem 0 0 var(--coin-colour),
3205
- 0.35rem 0 0 var(--coin-colour),
3206
- 0.375rem 0 0 var(--coin-colour),
3207
- 0.4rem 0 0 var(--coin-colour),
3208
- 0.425rem 0 0 var(--coin-colour),
3209
- 0.45rem 0 0 var(--coin-colour),
3210
- 0.475rem 0 0 var(--coin-colour);
3211
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
3212
- -0.05rem 0 0 var(--coin-colour),
3213
- -0.075rem 0 0 var(--coin-colour),
3214
- -0.1rem 0 0 var(--coin-colour),
3215
- -0.125rem 0 0 var(--coin-colour),
3216
- -0.15rem 0 0 var(--coin-colour),
3217
- -0.175rem 0 0 var(--coin-colour),
3218
- -0.2rem 0 0 var(--coin-colour),
3219
- -0.225rem 0 0 var(--coin-colour),
3220
- -0.25rem 0 0 var(--coin-colour),
3221
- -0.275rem 0 0 var(--coin-colour),
3222
- -0.3rem 0 0 var(--coin-colour),
3223
- -0.325rem 0 0 var(--coin-colour),
3224
- -0.35rem 0 0 var(--coin-colour),
3225
- -0.375rem 0 0 var(--coin-colour),
3226
- -0.4rem 0 0 var(--coin-colour),
3227
- -0.425rem 0 0 var(--coin-colour),
3228
- -0.45rem 0 0 var(--coin-colour),
3229
- -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);
3230
3189
  }
3231
3190
  .tw-loader--md {
3232
3191
  --coin-size: 4.5rem;
3233
3192
  --coin-edge-width-offset: translateX(0.375rem);
3234
3193
  --coin-edge-width-negative-offset: translateX(-0.375rem);
3235
- --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
3236
- 0.05rem 0 0 var(--coin-colour),
3237
- 0.075rem 0 0 var(--coin-colour),
3238
- 0.1rem 0 0 var(--coin-colour),
3239
- 0.125rem 0 0 var(--coin-colour),
3240
- 0.15rem 0 0 var(--coin-colour),
3241
- 0.175rem 0 0 var(--coin-colour),
3242
- 0.2rem 0 0 var(--coin-colour),
3243
- 0.225rem 0 0 var(--coin-colour),
3244
- 0.25rem 0 0 var(--coin-colour),
3245
- 0.275rem 0 0 var(--coin-colour),
3246
- 0.3rem 0 0 var(--coin-colour),
3247
- 0.325rem 0 0 var(--coin-colour),
3248
- 0.35rem 0 0 var(--coin-colour),
3249
- 0.375rem 0 0 var(--coin-colour),
3250
- 0.4rem 0 0 var(--coin-colour),
3251
- 0.425rem 0 0 var(--coin-colour),
3252
- 0.45rem 0 0 var(--coin-colour),
3253
- 0.475rem 0 0 var(--coin-colour),
3254
- 0.5rem 0 0 var(--coin-colour),
3255
- 0.525rem 0 0 var(--coin-colour),
3256
- 0.55rem 0 0 var(--coin-colour),
3257
- 0.575rem 0 0 var(--coin-colour),
3258
- 0.6rem 0 0 var(--coin-colour),
3259
- 0.625rem 0 0 var(--coin-colour),
3260
- 0.65rem 0 0 var(--coin-colour);
3261
- --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
3262
- -0.05rem 0 0 var(--coin-colour),
3263
- -0.075rem 0 0 var(--coin-colour),
3264
- -0.1rem 0 0 var(--coin-colour),
3265
- -0.125rem 0 0 var(--coin-colour),
3266
- -0.15rem 0 0 var(--coin-colour),
3267
- -0.175rem 0 0 var(--coin-colour),
3268
- -0.2rem 0 0 var(--coin-colour),
3269
- -0.225rem 0 0 var(--coin-colour),
3270
- -0.25rem 0 0 var(--coin-colour),
3271
- -0.275rem 0 0 var(--coin-colour),
3272
- -0.3rem 0 0 var(--coin-colour),
3273
- -0.325rem 0 0 var(--coin-colour),
3274
- -0.35rem 0 0 var(--coin-colour),
3275
- -0.375rem 0 0 var(--coin-colour),
3276
- -0.4rem 0 0 var(--coin-colour),
3277
- -0.425rem 0 0 var(--coin-colour),
3278
- -0.45rem 0 0 var(--coin-colour),
3279
- -0.475rem 0 0 var(--coin-colour),
3280
- -0.5rem 0 0 var(--coin-colour),
3281
- -0.525rem 0 0 var(--coin-colour),
3282
- -0.55rem 0 0 var(--coin-colour),
3283
- -0.575rem 0 0 var(--coin-colour),
3284
- -0.6rem 0 0 var(--coin-colour),
3285
- -0.625rem 0 0 var(--coin-colour),
3286
- -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);
3287
3196
  }
3288
3197
  @media (prefers-reduced-motion) {
3289
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
 
@@ -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