@transferwise/components 46.160.0 → 46.160.1

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 (121) hide show
  1. package/build/ExpressiveMoneyInput/Chevron/Chevron.js +10 -2
  2. package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map +1 -1
  3. package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs +11 -3
  4. package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map +1 -1
  5. package/build/ProcessIndicator/ProcessIndicator.js +1 -1
  6. package/build/ProcessIndicator/ProcessIndicator.js.map +1 -1
  7. package/build/ProcessIndicator/ProcessIndicator.mjs +1 -1
  8. package/build/ProcessIndicator/ProcessIndicator.mjs.map +1 -1
  9. package/build/Prompt/CriticalBanner/CriticalBanner.js +10 -1
  10. package/build/Prompt/CriticalBanner/CriticalBanner.js.map +1 -1
  11. package/build/Prompt/CriticalBanner/CriticalBanner.mjs +10 -1
  12. package/build/Prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
  13. package/build/common/Panel/Panel.js +13 -25
  14. package/build/common/Panel/Panel.js.map +1 -1
  15. package/build/common/Panel/Panel.mjs +10 -22
  16. package/build/common/Panel/Panel.mjs.map +1 -1
  17. package/build/common/Panel/Panel.positionUtils.js +68 -0
  18. package/build/common/Panel/Panel.positionUtils.js.map +1 -0
  19. package/build/common/Panel/Panel.positionUtils.mjs +63 -0
  20. package/build/common/Panel/Panel.positionUtils.mjs.map +1 -0
  21. package/build/common/PropsValues/position.js +0 -25
  22. package/build/common/PropsValues/position.js.map +1 -1
  23. package/build/common/PropsValues/position.mjs +1 -24
  24. package/build/common/PropsValues/position.mjs.map +1 -1
  25. package/build/main.css +102 -68
  26. package/build/styles/AvatarView/AvatarView.css +8 -0
  27. package/build/styles/AvatarView/Dot/Dot.css +8 -0
  28. package/build/styles/CheckboxButton/CheckboxButton.css +3 -0
  29. package/build/styles/Nudge/Nudge.css +4 -38
  30. package/build/styles/Prompt/CriticalBanner/CriticalBanner.css +34 -0
  31. package/build/styles/SlidingPanel/SlidingPanel.css +8 -0
  32. package/build/styles/UploadInput/UploadItem/UploadItem.css +4 -5
  33. package/build/styles/_deprecated/Badge/Badge.css +4 -2
  34. package/build/styles/common/Panel/Panel.css +12 -4
  35. package/build/styles/css/accordion.css +3 -0
  36. package/build/styles/css/buttons.css +1 -7
  37. package/build/styles/css/chevron.css +3 -0
  38. package/build/styles/css/neptune.css +25 -19
  39. package/build/styles/css/process.css +15 -9
  40. package/build/styles/css/tick.css +6 -3
  41. package/build/styles/main.css +102 -68
  42. package/build/styles/styles/less/accordion.css +3 -0
  43. package/build/styles/styles/less/buttons.css +1 -7
  44. package/build/styles/styles/less/chevron.css +3 -0
  45. package/build/styles/styles/less/neptune.css +25 -19
  46. package/build/styles/styles/less/process.css +15 -9
  47. package/build/styles/styles/less/tick.css +6 -3
  48. package/build/types/ExpressiveMoneyInput/Chevron/Chevron.d.ts.map +1 -1
  49. package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts +6 -1
  50. package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
  51. package/build/types/common/Panel/Panel.d.ts +1 -1
  52. package/build/types/common/Panel/Panel.d.ts.map +1 -1
  53. package/build/types/common/Panel/Panel.positionUtils.d.ts +7 -0
  54. package/build/types/common/Panel/Panel.positionUtils.d.ts.map +1 -0
  55. package/build/types/common/PropsValues/position.d.ts +0 -13
  56. package/build/types/common/PropsValues/position.d.ts.map +1 -1
  57. package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts +1 -1
  58. package/package.json +5 -5
  59. package/src/AvatarView/AvatarView.css +8 -0
  60. package/src/AvatarView/Dot/Dot.css +8 -0
  61. package/src/AvatarView/Dot/Dot.less +7 -1
  62. package/src/Button/_stories/Button.test.story.tsx +1 -1
  63. package/src/Checkbox/_stories/Checkbox.story.tsx +1 -1
  64. package/src/Checkbox/_stories/Checkbox.test.story.tsx +3 -2
  65. package/src/CheckboxButton/CheckboxButton.css +3 -0
  66. package/src/CheckboxButton/CheckboxButton.less +4 -0
  67. package/src/Chevron/_stories/Chevron.test.story.tsx +2 -2
  68. package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx +8 -3
  69. package/src/Header/_stories/Header.test.story.tsx +1 -1
  70. package/src/Info/_stories/Info.rtl.test.story.tsx +35 -10
  71. package/src/Info/_stories/Info.story.tsx +1 -1
  72. package/src/Inputs/SelectInput/_stories/SelectInput.test.story.tsx +1 -1
  73. package/src/ListItem/_stories/subcomponents.tsx +1 -1
  74. package/src/Loader/_stories/Loader.test.story.tsx +23 -0
  75. package/src/MoneyInput/_stories/MoneyInput.rtl.test.story.tsx +1 -1
  76. package/src/Nudge/Nudge.css +4 -38
  77. package/src/Nudge/Nudge.less +4 -4
  78. package/src/Nudge/_stories/Nudge.test.story.tsx +29 -12
  79. package/src/PhoneNumberInput/_stories/{PhoneNumberInput.test.story.tsx → PhoneNumberInput.rtl.test.story.tsx} +18 -10
  80. package/src/ProcessIndicator/ProcessIndicator.tsx +1 -1
  81. package/src/ProcessIndicator/_stories/ProcessIndicator.test.story.tsx +32 -0
  82. package/src/ProgressBar/_stories/ProgressBar.test.story.tsx +33 -19
  83. package/src/Prompt/CriticalBanner/CriticalBanner.css +34 -0
  84. package/src/Prompt/CriticalBanner/CriticalBanner.less +45 -0
  85. package/src/Prompt/CriticalBanner/CriticalBanner.test.tsx +26 -3
  86. package/src/Prompt/CriticalBanner/CriticalBanner.tsx +15 -1
  87. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.accessibility.docs.mdx +4 -1
  88. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +52 -0
  89. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx +22 -1
  90. package/src/SlidingPanel/SlidingPanel.css +8 -0
  91. package/src/SlidingPanel/SlidingPanel.less +8 -0
  92. package/src/SlidingPanel/_stories/SlidingPanel.rtl.test.story.tsx +4 -3
  93. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +14 -16
  94. package/src/Snackbar/_stories/Snackbar.story.tsx +1 -1
  95. package/src/Snackbar/_stories/Snackbar.test.story.tsx +1 -1
  96. package/src/StatusIcon/_stories/StatusIcon.test.story.tsx +12 -4
  97. package/src/UploadInput/UploadItem/UploadItem.css +4 -5
  98. package/src/UploadInput/UploadItem/UploadItem.less +7 -6
  99. package/src/UploadInput/_stories/UploadInput.test.story.tsx +1 -1
  100. package/src/_deprecated/Badge/Badge.css +4 -2
  101. package/src/_deprecated/Badge/Badge.less +7 -14
  102. package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx +0 -16
  103. package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx +15 -0
  104. package/src/common/Panel/Panel.css +12 -4
  105. package/src/common/Panel/Panel.less +27 -9
  106. package/src/common/Panel/Panel.positionUtils.ts +79 -0
  107. package/src/common/Panel/Panel.test.tsx +40 -0
  108. package/src/common/Panel/Panel.tsx +13 -24
  109. package/src/common/Panel/_stories/Panel.rtl.test.story.tsx +110 -0
  110. package/src/common/PropsValues/position.ts +0 -50
  111. package/src/main.css +102 -68
  112. package/src/styles/less/accordion.css +3 -0
  113. package/src/styles/less/buttons.css +1 -7
  114. package/src/styles/less/buttons.less +3 -11
  115. package/src/styles/less/chevron.css +3 -0
  116. package/src/styles/less/chevron.less +4 -0
  117. package/src/styles/less/neptune.css +25 -19
  118. package/src/styles/less/process.css +15 -9
  119. package/src/styles/less/process.less +13 -6
  120. package/src/styles/less/tick.css +6 -3
  121. package/src/styles/less/tick.less +7 -3
package/build/styles/_deprecated/Badge/Badge.css CHANGED
@@ -15,12 +15,14 @@
15
15
  --badge-border-color: rgba(0, 0, 0, 0.08);
16
16
  }
17
17
  .tw-badge > .tw-badge__children {
18
+ --badge-h-side: left;
18
19
  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
19
20
  mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
21
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
22
+ mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20
23
  }
21
24
  [dir="rtl"] .tw-badge > .tw-badge__children {
22
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
23
- mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
25
+ --badge-h-side: right;
24
26
  }
25
27
  .tw-badge > .tw-badge__content {
26
28
  position: absolute;
package/build/styles/common/Panel/Panel.css CHANGED
@@ -39,27 +39,35 @@
39
39
  .np-panel[data-popper-placement^="top"] > .np-panel__content {
40
40
  transform: translateY(10px) scale(0.95);
41
41
  }
42
- .np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
42
+ .np-panel[data-popper-placement^="top"] .np-panel__arrow {
43
43
  inset-block-end: -6px;
44
44
  }
45
45
  .np-panel[data-popper-placement^="right"] > .np-panel__content {
46
46
  transform: translateX(-10px) scale(0.95);
47
47
  }
48
- .np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
48
+ .np-panel[data-popper-placement^="right"] .np-panel__arrow {
49
49
  inset-inline-start: -6px;
50
50
  }
51
+ [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
52
+ inset-inline-start: unset;
53
+ inset-inline-end: -6px;
54
+ }
51
55
  .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
52
56
  transform: translateY(-10px) scale(0.95);
53
57
  }
54
- .np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
58
+ .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
55
59
  inset-block-start: -6px;
56
60
  }
57
61
  .np-panel[data-popper-placement^="left"] > .np-panel__content {
58
62
  transform: translateX(10px) scale(0.95);
59
63
  }
60
- .np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
64
+ .np-panel[data-popper-placement^="left"] .np-panel__arrow {
61
65
  inset-inline-end: -6px;
62
66
  }
67
+ [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
68
+ inset-inline-end: unset;
69
+ inset-inline-start: -6px;
70
+ }
63
71
  .np-theme-personal .np-panel__content {
64
72
  border-radius: 16px;
65
73
  border-radius: var(--radius-medium);
package/build/styles/css/accordion.css CHANGED
@@ -5,6 +5,9 @@
5
5
  .tw-chevron.top {
6
6
  transform: rotate(0deg);
7
7
  }
8
+ [dir="rtl"] .tw-chevron.top {
9
+ transform: rotate(360deg);
10
+ }
8
11
  .tw-chevron.right {
9
12
  transform: rotate(90deg);
10
13
  }
package/build/styles/css/buttons.css CHANGED
@@ -1277,17 +1277,11 @@ input[type="button"].btn-block {
1277
1277
  display: inline-flex;
1278
1278
  align-items: center;
1279
1279
  }
1280
- .btn-loading:not(.btn-block) .btn-loader {
1280
+ .btn-loading:not(.btn-block) .btn-loader[class] {
1281
1281
  margin-block-end: 0;
1282
- }
1283
- :not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
1284
1282
  margin-inline-start: 16px;
1285
1283
  margin-inline-end: 0;
1286
1284
  }
1287
- [dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
1288
- margin-inline-start: 0 !important;
1289
- margin-inline-end: 16px !important;
1290
- }
1291
1285
  .btn-loading.btn-block .btn-loader {
1292
1286
  inset-block-start: 0;
1293
1287
  inset-block-end: 0;
package/build/styles/css/chevron.css CHANGED
@@ -5,6 +5,9 @@
5
5
  .tw-chevron.top {
6
6
  transform: rotate(0deg);
7
7
  }
8
+ [dir="rtl"] .tw-chevron.top {
9
+ transform: rotate(360deg);
10
+ }
8
11
  .tw-chevron.right {
9
12
  transform: rotate(90deg);
10
13
  }
package/build/styles/css/neptune.css CHANGED
@@ -5350,6 +5350,9 @@ tbody.collapse.in {
5350
5350
  .tw-chevron.top {
5351
5351
  transform: rotate(0deg);
5352
5352
  }
5353
+ [dir="rtl"] .tw-chevron.top {
5354
+ transform: rotate(360deg);
5355
+ }
5353
5356
  .tw-chevron.right {
5354
5357
  transform: rotate(90deg);
5355
5358
  }
@@ -7493,17 +7496,11 @@ input[type="button"].btn-block {
7493
7496
  display: inline-flex;
7494
7497
  align-items: center;
7495
7498
  }
7496
- .btn-loading:not(.btn-block) .btn-loader {
7499
+ .btn-loading:not(.btn-block) .btn-loader[class] {
7497
7500
  margin-block-end: 0;
7498
- }
7499
- :not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
7500
7501
  margin-inline-start: 16px;
7501
7502
  margin-inline-end: 0;
7502
7503
  }
7503
- [dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
7504
- margin-inline-start: 0 !important;
7505
- margin-inline-end: 16px !important;
7506
- }
7507
7504
  .btn-loading.btn-block .btn-loader {
7508
7505
  inset-block-start: 0;
7509
7506
  inset-block-end: 0;
@@ -16960,6 +16957,9 @@ button.popover-close {
16960
16957
  inset-inline-start: 25%;
16961
16958
  inset-block-start: 25%;
16962
16959
  }
16960
+ [dir="rtl"] .process-icon-container {
16961
+ transform: rotate(45deg) scaleX(-1);
16962
+ }
16963
16963
  .process-icon-horizontal,
16964
16964
  .process-icon-vertical {
16965
16965
  position: absolute;
@@ -17039,37 +17039,37 @@ button.popover-close {
17039
17039
  .process-stopped .process-icon-container {
17040
17040
  display: none;
17041
17041
  }
17042
- .process-xs {
17042
+ .process-xxs {
17043
17043
  inline-size: 12px;
17044
17044
  block-size: 12px;
17045
17045
  }
17046
- .process-xs .process-circle {
17046
+ .process-xxs .process-circle {
17047
17047
  /* Hide before animation to prevent glitching */
17048
17048
  stroke-dashoffset: 31.41592654px;
17049
17049
  stroke-dasharray: 31.41592654px;
17050
17050
  stroke-width: 1.5px;
17051
17051
  }
17052
- .process-xs.process-danger .process-icon-horizontal {
17052
+ .process-xxs.process-danger .process-icon-horizontal {
17053
17053
  inset-block-start: 2.5px;
17054
17054
  block-size: 1px;
17055
17055
  }
17056
- .process-xs.process-danger .process-icon-vertical {
17056
+ .process-xxs.process-danger .process-icon-vertical {
17057
17057
  inset-inline-start: 2.5px;
17058
17058
  inline-size: 1px;
17059
17059
  }
17060
- .process-xs .process-icon-horizontal,
17061
- .process-xs .process-icon-vertical {
17060
+ .process-xxs .process-icon-horizontal,
17061
+ .process-xxs .process-icon-vertical {
17062
17062
  border-radius: 0.5px;
17063
17063
  }
17064
- .process-xs.process-success .process-icon-container {
17064
+ .process-xxs.process-success .process-icon-container {
17065
17065
  inline-size: 2.5px;
17066
17066
  block-size: 5px;
17067
17067
  inset-inline-start: 4.5px;
17068
17068
  }
17069
- .process-xs.process-success .process-icon-horizontal {
17069
+ .process-xxs.process-success .process-icon-horizontal {
17070
17070
  block-size: 1px;
17071
17071
  }
17072
- .process-xs.process-success .process-icon-vertical {
17072
+ .process-xxs.process-success .process-icon-vertical {
17073
17073
  inline-size: 1px;
17074
17074
  }
17075
17075
  .process-xs {
@@ -17171,6 +17171,9 @@ button.popover-close {
17171
17171
  .process-xl.process-success .process-icon-vertical {
17172
17172
  inline-size: 8px;
17173
17173
  }
17174
+ .process-xxs .process-icon-container {
17175
+ display: none;
17176
+ }
17174
17177
  .process-xxs .process-circle {
17175
17178
  animation-name: process-chase-circle-xxs;
17176
17179
  }
@@ -18811,10 +18814,13 @@ a[data-toggle="tooltip"] {
18811
18814
  position: absolute;
18812
18815
  background: #ffffff;
18813
18816
  background: var(--color-background-screen);
18814
- transform: translateX(0.5px) rotate(-45deg);
18817
+ transform: translateX(-1.5px) rotate(-45deg);
18815
18818
  transform-origin: left bottom;
18816
- inset-inline-start: 8px;
18817
- inset-inline-start: var(--size-8);
18819
+ }
18820
+ [dir="rtl"] .tw-checkbox-check::before,
18821
+ [dir="rtl"] .tw-checkbox-check::after {
18822
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
18823
+ transform-origin: right bottom;
18818
18824
  }
18819
18825
  .tw-checkbox-check .has-error::before,
18820
18826
  .tw-checkbox-check .has-error::after {
package/build/styles/css/process.css CHANGED
@@ -55,6 +55,9 @@
55
55
  inset-inline-start: 25%;
56
56
  inset-block-start: 25%;
57
57
  }
58
+ [dir="rtl"] .process-icon-container {
59
+ transform: rotate(45deg) scaleX(-1);
60
+ }
58
61
  .process-icon-horizontal,
59
62
  .process-icon-vertical {
60
63
  position: absolute;
@@ -134,37 +137,37 @@
134
137
  .process-stopped .process-icon-container {
135
138
  display: none;
136
139
  }
137
- .process-xs {
140
+ .process-xxs {
138
141
  inline-size: 12px;
139
142
  block-size: 12px;
140
143
  }
141
- .process-xs .process-circle {
144
+ .process-xxs .process-circle {
142
145
  /* Hide before animation to prevent glitching */
143
146
  stroke-dashoffset: 31.41592654px;
144
147
  stroke-dasharray: 31.41592654px;
145
148
  stroke-width: 1.5px;
146
149
  }
147
- .process-xs.process-danger .process-icon-horizontal {
150
+ .process-xxs.process-danger .process-icon-horizontal {
148
151
  inset-block-start: 2.5px;
149
152
  block-size: 1px;
150
153
  }
151
- .process-xs.process-danger .process-icon-vertical {
154
+ .process-xxs.process-danger .process-icon-vertical {
152
155
  inset-inline-start: 2.5px;
153
156
  inline-size: 1px;
154
157
  }
155
- .process-xs .process-icon-horizontal,
156
- .process-xs .process-icon-vertical {
158
+ .process-xxs .process-icon-horizontal,
159
+ .process-xxs .process-icon-vertical {
157
160
  border-radius: 0.5px;
158
161
  }
159
- .process-xs.process-success .process-icon-container {
162
+ .process-xxs.process-success .process-icon-container {
160
163
  inline-size: 2.5px;
161
164
  block-size: 5px;
162
165
  inset-inline-start: 4.5px;
163
166
  }
164
- .process-xs.process-success .process-icon-horizontal {
167
+ .process-xxs.process-success .process-icon-horizontal {
165
168
  block-size: 1px;
166
169
  }
167
- .process-xs.process-success .process-icon-vertical {
170
+ .process-xxs.process-success .process-icon-vertical {
168
171
  inline-size: 1px;
169
172
  }
170
173
  .process-xs {
@@ -266,6 +269,9 @@
266
269
  .process-xl.process-success .process-icon-vertical {
267
270
  inline-size: 8px;
268
271
  }
272
+ .process-xxs .process-icon-container {
273
+ display: none;
274
+ }
269
275
  .process-xxs .process-circle {
270
276
  animation-name: process-chase-circle-xxs;
271
277
  }
package/build/styles/css/tick.css CHANGED
@@ -10,10 +10,13 @@
10
10
  position: absolute;
11
11
  background: #ffffff;
12
12
  background: var(--color-background-screen);
13
- transform: translateX(0.5px) rotate(-45deg);
13
+ transform: translateX(-1.5px) rotate(-45deg);
14
14
  transform-origin: left bottom;
15
- inset-inline-start: 8px;
16
- inset-inline-start: var(--size-8);
15
+ }
16
+ [dir="rtl"] .tw-checkbox-check::before,
17
+ [dir="rtl"] .tw-checkbox-check::after {
18
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
19
+ transform-origin: right bottom;
17
20
  }
18
21
  .tw-checkbox-check .has-error::before,
19
22
  .tw-checkbox-check .has-error::after {