@transferwise/components 46.140.0 → 46.140.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.
package/src/main.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Wed, 13 May 2026 12:45:11 GMT
3
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,7 +144,7 @@
144
144
 
145
145
  /**
146
146
  * Do not edit directly, this file was auto-generated.
147
- * Generated on Wed, 13 May 2026 12:45:12 GMT
147
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
148
148
  */
149
149
 
150
150
  .np-theme-personal {
@@ -328,7 +328,7 @@
328
328
 
329
329
  /**
330
330
  * Do not edit directly, this file was auto-generated.
331
- * Generated on Wed, 13 May 2026 12:45:12 GMT
331
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
332
332
  */
333
333
 
334
334
  .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
512
512
 
513
513
  /**
514
514
  * Do not edit directly, this file was auto-generated.
515
- * Generated on Wed, 13 May 2026 12:45:12 GMT
515
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
516
516
  */
517
517
 
518
518
  .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
696
696
 
697
697
  /**
698
698
  * Do not edit directly, this file was auto-generated.
699
- * Generated on Wed, 13 May 2026 12:45:12 GMT
699
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
700
700
  */
701
701
 
702
702
  .np-theme-personal--dark {
@@ -880,7 +880,7 @@
880
880
 
881
881
  /**
882
882
  * Do not edit directly, this file was auto-generated.
883
- * Generated on Wed, 13 May 2026 12:45:12 GMT
883
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
884
884
  */
885
885
 
886
886
  .np-theme-platform {
@@ -1064,7 +1064,7 @@
1064
1064
 
1065
1065
  /**
1066
1066
  * Do not edit directly, this file was auto-generated.
1067
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1067
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1068
1068
  */
1069
1069
 
1070
1070
  .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
1248
1248
 
1249
1249
  /**
1250
1250
  * Do not edit directly, this file was auto-generated.
1251
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1251
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1252
1252
  */
1253
1253
 
1254
1254
  .np-theme-business {
@@ -1433,7 +1433,7 @@
1433
1433
 
1434
1434
  /**
1435
1435
  * Do not edit directly, this file was auto-generated.
1436
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1436
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1437
1437
  */
1438
1438
 
1439
1439
  .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
1618
1618
 
1619
1619
  /**
1620
1620
  * Do not edit directly, this file was auto-generated.
1621
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1621
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1622
1622
  */
1623
1623
 
1624
1624
  .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
1803
1803
 
1804
1804
  /**
1805
1805
  * Do not edit directly, this file was auto-generated.
1806
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1806
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1807
1807
  */
1808
1808
 
1809
1809
  .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
4351
4351
 
4352
4352
  @media (max-width: 320px) {
4353
4353
  .np-theme-personal {
4354
- --delta: 2;
4355
- --size-4: calc(4px / var(--delta));
4356
- --size-5: calc(5px / var(--delta));
4357
- --size-8: calc(8px / var(--delta));
4358
- --size-10: calc(10px / var(--delta));
4359
- --size-12: calc(12px / var(--delta));
4360
- --size-14: calc(14px / var(--delta));
4361
- --size-16: calc(16px / var(--delta));
4362
- --size-24: calc(24px / var(--delta));
4363
- --size-32: calc(32px / var(--delta));
4364
- --size-40: calc(40px / var(--delta));
4365
- --size-48: calc(48px / var(--delta));
4366
- --size-52: calc(52px / var(--delta));
4367
- --size-56: calc(56px / var(--delta));
4368
- --size-60: calc(60px / var(--delta));
4369
- --size-64: calc(64px / var(--delta));
4370
- --size-72: calc(72px / var(--delta));
4371
- --size-80: calc(80px / var(--delta));
4372
- --size-88: calc(88px / var(--delta));
4373
- --size-96: calc(96px / var(--delta));
4374
- --size-104: calc(104px / var(--delta));
4375
- --size-112: calc(112px / var(--delta));
4376
- --size-120: calc(120px / var(--delta));
4377
- --size-126: calc(126px / var(--delta));
4378
- --size-128: calc(128px / var(--delta));
4379
- --size-146: calc(146px / var(--delta));
4380
- --size-154: calc(154px / var(--delta));
4381
- --size-x-small: calc(24px / var(--delta));
4382
- --size-small: calc(32px / var(--delta));
4383
- --size-medium: calc(40px / var(--delta));
4384
- --size-large: calc(48px / var(--delta));
4385
- --size-x-large: calc(56px / var(--delta));
4386
- --size-2x-large: calc(72px / var(--delta));
4387
- --space-content-horizontal: calc(16px / var(--delta));
4388
- --space-small: calc(16px / var(--delta));
4389
- --space-medium: calc(32px / var(--delta));
4390
- --space-large: calc(40px / var(--delta));
4391
- --space-x-large: calc(56px / var(--delta));
4392
- --padding-x-small: var(--size-8);
4393
- --padding-small: var(--size-16);
4394
- --padding-medium: var(--size-24);
4395
- --padding-large: var(--size-32);
4354
+ --padding-x-small: 4px;
4355
+ --padding-small: 8px;
4356
+ --padding-medium: 12px;
4357
+ --padding-large: 16px;
4358
+ --size-4: 2px;
4359
+ --size-5: 2.5px;
4360
+ --size-8: 4px;
4361
+ --size-10: 5px;
4362
+ --size-12: 6px;
4363
+ --size-14: 7px;
4364
+ --size-16: 8px;
4365
+ --size-24: 12px;
4366
+ --size-32: 16px;
4367
+ --size-40: 20px;
4368
+ --size-48: 24px;
4369
+ --size-52: 26px;
4370
+ --size-56: 28px;
4371
+ --size-60: 30px;
4372
+ --size-64: 32px;
4373
+ --size-72: 36px;
4374
+ --size-80: 40px;
4375
+ --size-88: 44px;
4376
+ --size-96: 48px;
4377
+ --size-104: 52px;
4378
+ --size-112: 56px;
4379
+ --size-120: 60px;
4380
+ --size-126: 63px;
4381
+ --size-128: 64px;
4382
+ --size-146: 73px;
4383
+ --size-154: 77px;
4384
+ --size-160: 80px;
4385
+ --size-x-small: 12px;
4386
+ --size-small: 16px;
4387
+ --size-medium: 20px;
4388
+ --size-large: 24px;
4389
+ --size-x-large: 28px;
4390
+ --size-2x-large: 36px;
4391
+ --space-content-horizontal: 8px;
4392
+ --space-small: 8px;
4393
+ --space-medium: 16px;
4394
+ --space-large: 20px;
4395
+ --space-x-large: 28px;
4396
+ }
4397
+ }
4398
+
4399
+ @media (max-width: 320px) {
4400
+ .np-theme-personal {
4396
4401
  --input-height-base: var(--size-32);
4397
4402
  --input-height-large: var(--input-height-small);
4398
4403
  --input-padding: var(--input-padding-small);
@@ -1,47 +1,51 @@
1
1
  @media (max-width: 320px) {
2
2
  .np-theme-personal {
3
- --delta: 2;
4
- --size-4: calc(4px / var(--delta));
5
- --size-5: calc(5px / var(--delta));
6
- --size-8: calc(8px / var(--delta));
7
- --size-10: calc(10px / var(--delta));
8
- --size-12: calc(12px / var(--delta));
9
- --size-14: calc(14px / var(--delta));
10
- --size-16: calc(16px / var(--delta));
11
- --size-24: calc(24px / var(--delta));
12
- --size-32: calc(32px / var(--delta));
13
- --size-40: calc(40px / var(--delta));
14
- --size-48: calc(48px / var(--delta));
15
- --size-52: calc(52px / var(--delta));
16
- --size-56: calc(56px / var(--delta));
17
- --size-60: calc(60px / var(--delta));
18
- --size-64: calc(64px / var(--delta));
19
- --size-72: calc(72px / var(--delta));
20
- --size-80: calc(80px / var(--delta));
21
- --size-88: calc(88px / var(--delta));
22
- --size-96: calc(96px / var(--delta));
23
- --size-104: calc(104px / var(--delta));
24
- --size-112: calc(112px / var(--delta));
25
- --size-120: calc(120px / var(--delta));
26
- --size-126: calc(126px / var(--delta));
27
- --size-128: calc(128px / var(--delta));
28
- --size-146: calc(146px / var(--delta));
29
- --size-154: calc(154px / var(--delta));
30
- --size-x-small: calc(24px / var(--delta));
31
- --size-small: calc(32px / var(--delta));
32
- --size-medium: calc(40px / var(--delta));
33
- --size-large: calc(48px / var(--delta));
34
- --size-x-large: calc(56px / var(--delta));
35
- --size-2x-large: calc(72px / var(--delta));
36
- --space-content-horizontal: calc(16px / var(--delta));
37
- --space-small: calc(16px / var(--delta));
38
- --space-medium: calc(32px / var(--delta));
39
- --space-large: calc(40px / var(--delta));
40
- --space-x-large: calc(56px / var(--delta));
41
- --padding-x-small: var(--size-8);
42
- --padding-small: var(--size-16);
43
- --padding-medium: var(--size-24);
44
- --padding-large: var(--size-32);
3
+ --padding-x-small: 4px;
4
+ --padding-small: 8px;
5
+ --padding-medium: 12px;
6
+ --padding-large: 16px;
7
+ --size-4: 2px;
8
+ --size-5: 2.5px;
9
+ --size-8: 4px;
10
+ --size-10: 5px;
11
+ --size-12: 6px;
12
+ --size-14: 7px;
13
+ --size-16: 8px;
14
+ --size-24: 12px;
15
+ --size-32: 16px;
16
+ --size-40: 20px;
17
+ --size-48: 24px;
18
+ --size-52: 26px;
19
+ --size-56: 28px;
20
+ --size-60: 30px;
21
+ --size-64: 32px;
22
+ --size-72: 36px;
23
+ --size-80: 40px;
24
+ --size-88: 44px;
25
+ --size-96: 48px;
26
+ --size-104: 52px;
27
+ --size-112: 56px;
28
+ --size-120: 60px;
29
+ --size-126: 63px;
30
+ --size-128: 64px;
31
+ --size-146: 73px;
32
+ --size-154: 77px;
33
+ --size-160: 80px;
34
+ --size-x-small: 12px;
35
+ --size-small: 16px;
36
+ --size-medium: 20px;
37
+ --size-large: 24px;
38
+ --size-x-large: 28px;
39
+ --size-2x-large: 36px;
40
+ --space-content-horizontal: 8px;
41
+ --space-small: 8px;
42
+ --space-medium: 16px;
43
+ --space-large: 20px;
44
+ --space-x-large: 28px;
45
+ }
46
+ }
47
+ @media (max-width: 320px) {
48
+ .np-theme-personal {
45
49
  --input-height-base: var(--size-32);
46
50
  --input-height-large: var(--input-height-small);
47
51
  --input-padding: var(--input-padding-small);
@@ -1,51 +1,8 @@
1
- @import '@transferwise/neptune-tokens/themes/personal/tokens.less';
1
+ @import "@transferwise/neptune-tokens/themes/personal/tokens.less";
2
+ @import "@transferwise/neptune-tokens/tiny-viewport.less";
2
3
 
3
4
  @media (--screen-400-zoom) {
4
5
  .np-theme-personal {
5
- --delta: 2;
6
-
7
- --size-4: calc(@size-4 / var(--delta));
8
- --size-5: calc(@size-5 / var(--delta));
9
- --size-8: calc(@size-8 / var(--delta));
10
- --size-10: calc(@size-10 / var(--delta));
11
- --size-12: calc(@size-12 / var(--delta));
12
- --size-14: calc(@size-14 / var(--delta));
13
- --size-16: calc(@size-16 / var(--delta));
14
- --size-24: calc(@size-24 / var(--delta));
15
- --size-32: calc(@size-32 / var(--delta));
16
- --size-40: calc(@size-40 / var(--delta));
17
- --size-48: calc(@size-48 / var(--delta));
18
- --size-52: calc(@size-52 / var(--delta));
19
- --size-56: calc(@size-56 / var(--delta));
20
- --size-60: calc(@size-60 / var(--delta));
21
- --size-64: calc(@size-64 / var(--delta));
22
- --size-72: calc(@size-72 / var(--delta));
23
- --size-80: calc(@size-80 / var(--delta));
24
- --size-88: calc(@size-88 / var(--delta));
25
- --size-96: calc(@size-96 / var(--delta));
26
- --size-104: calc(@size-104 / var(--delta));
27
- --size-112: calc(@size-112 / var(--delta));
28
- --size-120: calc(@size-120 / var(--delta));
29
- --size-126: calc(@size-126 / var(--delta));
30
- --size-128: calc(@size-128 / var(--delta));
31
- --size-146: calc(@size-146 / var(--delta));
32
- --size-154: calc(@size-154 / var(--delta));
33
- --size-x-small: calc(@size-x-small / var(--delta));
34
- --size-small: calc(@size-small / var(--delta));
35
- --size-medium: calc(@size-medium / var(--delta));
36
- --size-large: calc(@size-large / var(--delta));
37
- --size-x-large: calc(@size-x-large / var(--delta));
38
- --size-2x-large: calc(@size-2x-large / var(--delta));
39
- --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
40
- --space-small: calc(@space-small / var(--delta));
41
- --space-medium: calc(@space-medium / var(--delta));
42
- --space-large: calc(@space-large / var(--delta));
43
- --space-x-large: calc(@space-x-large / var(--delta));
44
- --padding-x-small: var(--size-8);
45
- --padding-small: var(--size-16);
46
- --padding-medium: var(--size-24);
47
- --padding-large: var(--size-32);
48
-
49
6
  --input-height-base: var(--size-32);
50
7
  --input-height-large: var(--input-height-small);
51
8
  --input-padding: var(--input-padding-small);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Wed, 13 May 2026 12:45:11 GMT
3
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,7 +144,7 @@
144
144
 
145
145
  /**
146
146
  * Do not edit directly, this file was auto-generated.
147
- * Generated on Wed, 13 May 2026 12:45:12 GMT
147
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
148
148
  */
149
149
 
150
150
  .np-theme-personal {
@@ -328,7 +328,7 @@
328
328
 
329
329
  /**
330
330
  * Do not edit directly, this file was auto-generated.
331
- * Generated on Wed, 13 May 2026 12:45:12 GMT
331
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
332
332
  */
333
333
 
334
334
  .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
512
512
 
513
513
  /**
514
514
  * Do not edit directly, this file was auto-generated.
515
- * Generated on Wed, 13 May 2026 12:45:12 GMT
515
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
516
516
  */
517
517
 
518
518
  .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
696
696
 
697
697
  /**
698
698
  * Do not edit directly, this file was auto-generated.
699
- * Generated on Wed, 13 May 2026 12:45:12 GMT
699
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
700
700
  */
701
701
 
702
702
  .np-theme-personal--dark {
@@ -880,7 +880,7 @@
880
880
 
881
881
  /**
882
882
  * Do not edit directly, this file was auto-generated.
883
- * Generated on Wed, 13 May 2026 12:45:12 GMT
883
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
884
884
  */
885
885
 
886
886
  .np-theme-platform {
@@ -1064,7 +1064,7 @@
1064
1064
 
1065
1065
  /**
1066
1066
  * Do not edit directly, this file was auto-generated.
1067
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1067
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1068
1068
  */
1069
1069
 
1070
1070
  .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
1248
1248
 
1249
1249
  /**
1250
1250
  * Do not edit directly, this file was auto-generated.
1251
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1251
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1252
1252
  */
1253
1253
 
1254
1254
  .np-theme-business {
@@ -1433,7 +1433,7 @@
1433
1433
 
1434
1434
  /**
1435
1435
  * Do not edit directly, this file was auto-generated.
1436
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1436
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1437
1437
  */
1438
1438
 
1439
1439
  .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
1618
1618
 
1619
1619
  /**
1620
1620
  * Do not edit directly, this file was auto-generated.
1621
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1621
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1622
1622
  */
1623
1623
 
1624
1624
  .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
1803
1803
 
1804
1804
  /**
1805
1805
  * Do not edit directly, this file was auto-generated.
1806
- * Generated on Wed, 13 May 2026 12:45:12 GMT
1806
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1807
1807
  */
1808
1808
 
1809
1809
  .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
4351
4351
 
4352
4352
  @media (max-width: 320px) {
4353
4353
  .np-theme-personal {
4354
- --delta: 2;
4355
- --size-4: calc(4px / var(--delta));
4356
- --size-5: calc(5px / var(--delta));
4357
- --size-8: calc(8px / var(--delta));
4358
- --size-10: calc(10px / var(--delta));
4359
- --size-12: calc(12px / var(--delta));
4360
- --size-14: calc(14px / var(--delta));
4361
- --size-16: calc(16px / var(--delta));
4362
- --size-24: calc(24px / var(--delta));
4363
- --size-32: calc(32px / var(--delta));
4364
- --size-40: calc(40px / var(--delta));
4365
- --size-48: calc(48px / var(--delta));
4366
- --size-52: calc(52px / var(--delta));
4367
- --size-56: calc(56px / var(--delta));
4368
- --size-60: calc(60px / var(--delta));
4369
- --size-64: calc(64px / var(--delta));
4370
- --size-72: calc(72px / var(--delta));
4371
- --size-80: calc(80px / var(--delta));
4372
- --size-88: calc(88px / var(--delta));
4373
- --size-96: calc(96px / var(--delta));
4374
- --size-104: calc(104px / var(--delta));
4375
- --size-112: calc(112px / var(--delta));
4376
- --size-120: calc(120px / var(--delta));
4377
- --size-126: calc(126px / var(--delta));
4378
- --size-128: calc(128px / var(--delta));
4379
- --size-146: calc(146px / var(--delta));
4380
- --size-154: calc(154px / var(--delta));
4381
- --size-x-small: calc(24px / var(--delta));
4382
- --size-small: calc(32px / var(--delta));
4383
- --size-medium: calc(40px / var(--delta));
4384
- --size-large: calc(48px / var(--delta));
4385
- --size-x-large: calc(56px / var(--delta));
4386
- --size-2x-large: calc(72px / var(--delta));
4387
- --space-content-horizontal: calc(16px / var(--delta));
4388
- --space-small: calc(16px / var(--delta));
4389
- --space-medium: calc(32px / var(--delta));
4390
- --space-large: calc(40px / var(--delta));
4391
- --space-x-large: calc(56px / var(--delta));
4392
- --padding-x-small: var(--size-8);
4393
- --padding-small: var(--size-16);
4394
- --padding-medium: var(--size-24);
4395
- --padding-large: var(--size-32);
4354
+ --padding-x-small: 4px;
4355
+ --padding-small: 8px;
4356
+ --padding-medium: 12px;
4357
+ --padding-large: 16px;
4358
+ --size-4: 2px;
4359
+ --size-5: 2.5px;
4360
+ --size-8: 4px;
4361
+ --size-10: 5px;
4362
+ --size-12: 6px;
4363
+ --size-14: 7px;
4364
+ --size-16: 8px;
4365
+ --size-24: 12px;
4366
+ --size-32: 16px;
4367
+ --size-40: 20px;
4368
+ --size-48: 24px;
4369
+ --size-52: 26px;
4370
+ --size-56: 28px;
4371
+ --size-60: 30px;
4372
+ --size-64: 32px;
4373
+ --size-72: 36px;
4374
+ --size-80: 40px;
4375
+ --size-88: 44px;
4376
+ --size-96: 48px;
4377
+ --size-104: 52px;
4378
+ --size-112: 56px;
4379
+ --size-120: 60px;
4380
+ --size-126: 63px;
4381
+ --size-128: 64px;
4382
+ --size-146: 73px;
4383
+ --size-154: 77px;
4384
+ --size-160: 80px;
4385
+ --size-x-small: 12px;
4386
+ --size-small: 16px;
4387
+ --size-medium: 20px;
4388
+ --size-large: 24px;
4389
+ --size-x-large: 28px;
4390
+ --size-2x-large: 36px;
4391
+ --space-content-horizontal: 8px;
4392
+ --space-small: 8px;
4393
+ --space-medium: 16px;
4394
+ --space-large: 20px;
4395
+ --space-x-large: 28px;
4396
+ }
4397
+ }
4398
+
4399
+ @media (max-width: 320px) {
4400
+ .np-theme-personal {
4396
4401
  --input-height-base: var(--size-32);
4397
4402
  --input-height-large: var(--input-height-small);
4398
4403
  --input-padding: var(--input-padding-small);