@transferwise/components 46.40.0 → 46.41.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 (37) hide show
  1. package/build/index.js +68 -74
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +69 -75
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +69 -14
  6. package/build/styles/main.css +69 -14
  7. package/build/styles/statusIcon/StatusIcon.css +4 -2
  8. package/build/styles/uploadInput/UploadInput.css +18 -1
  9. package/build/styles/uploadInput/uploadButton/UploadButton.css +4 -0
  10. package/build/styles/uploadInput/uploadItem/UploadItem.css +43 -11
  11. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  12. package/build/types/field/Field.d.ts +6 -1
  13. package/build/types/field/Field.d.ts.map +1 -1
  14. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  15. package/package.json +4 -4
  16. package/src/dateInput/DateInput.spec.tsx +220 -0
  17. package/src/dateInput/DateInput.story.tsx +3 -76
  18. package/src/dateInput/DateInput.tests.story.tsx +238 -0
  19. package/src/dateInput/DateInput.tsx +50 -53
  20. package/src/field/Field.story.tsx +17 -36
  21. package/src/field/Field.tests.story.tsx +33 -0
  22. package/src/field/Field.tsx +23 -13
  23. package/src/inlineAlert/InlineAlert.story.tsx +13 -5
  24. package/src/inlineAlert/InlineAlert.tsx +13 -6
  25. package/src/main.css +69 -14
  26. package/src/statusIcon/StatusIcon.css +4 -2
  27. package/src/statusIcon/StatusIcon.less +4 -2
  28. package/src/statusIcon/StatusIcon.tsx +1 -1
  29. package/src/uploadInput/UploadInput.css +18 -1
  30. package/src/uploadInput/UploadInput.less +17 -1
  31. package/src/uploadInput/UploadInput.tests.story.tsx +13 -2
  32. package/src/uploadInput/uploadButton/UploadButton.css +4 -0
  33. package/src/uploadInput/uploadButton/UploadButton.less +5 -0
  34. package/src/uploadInput/uploadItem/UploadItem.css +43 -11
  35. package/src/uploadInput/uploadItem/UploadItem.less +61 -17
  36. package/src/dateInput/DateInput.rtl.spec.tsx +0 -17
  37. package/src/dateInput/DateInput.spec.js +0 -477
package/build/main.css CHANGED
@@ -4208,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
4208
4208
  height: var(--size-32);
4209
4209
  }
4210
4210
  }
4211
- .status-circle.negative {
4211
+ .status-circle.negative,
4212
+ .status-circle.error {
4212
4213
  background-color: var(--color-sentiment-negative);
4213
4214
  }
4214
4215
  .status-circle.neutral {
4215
4216
  background-color: #5d7079;
4216
4217
  background-color: var(--color-content-secondary);
4217
4218
  }
4218
- .status-circle.positive {
4219
+ .status-circle.positive,
4220
+ .status-circle.success {
4219
4221
  background-color: var(--color-sentiment-positive);
4220
4222
  }
4221
4223
  .tw-stepper {
@@ -5400,6 +5402,9 @@ html:not([dir="rtl"]) .np-navigation-option {
5400
5402
  border-color: #c9cbce !important;
5401
5403
  border-color: var(--color-interactive-secondary) !important;
5402
5404
  }
5405
+ .np-upload-button-container.droppable-dropping:before {
5406
+ z-index: 2;
5407
+ }
5403
5408
  .np-upload-button-container input[type="file"] {
5404
5409
  opacity: 0;
5405
5410
  z-index: -1;
@@ -5410,6 +5415,7 @@ html:not([dir="rtl"]) .np-navigation-option {
5410
5415
  }
5411
5416
  .np-upload-button {
5412
5417
  width: 100%;
5418
+ border-top: 1px solid transparent;
5413
5419
  padding: 16px;
5414
5420
  padding: var(--padding-small);
5415
5421
  border-radius: 0;
@@ -5477,8 +5483,25 @@ label.np-upload-button:not(.disabled):active {
5477
5483
  color: var(--color-sentiment-negative) !important;
5478
5484
  }
5479
5485
  .np-theme-personal .np-upload-input-errors {
5486
+ list-style: none;
5480
5487
  padding-left: 0;
5481
- list-style-position: inside;
5488
+ }
5489
+ .np-theme-personal .np-upload-input-errors li {
5490
+ position: relative;
5491
+ padding-left: 16px;
5492
+ padding-left: var(--size-16);
5493
+ }
5494
+ @media (max-width: 320px) {
5495
+ .np-theme-personal .np-upload-input-errors li {
5496
+ padding-left: 32px;
5497
+ padding-left: var(--size-32);
5498
+ }
5499
+ }
5500
+ .np-theme-personal .np-upload-input-errors li:before {
5501
+ content: '•';
5502
+ position: absolute;
5503
+ display: block;
5504
+ left: 0;
5482
5505
  }
5483
5506
  .np-theme-personal .np-upload-input .status-circle {
5484
5507
  width: 24px;
@@ -5497,30 +5520,49 @@ label.np-upload-button:not(.disabled):active {
5497
5520
  .np-upload-item {
5498
5521
  border: 1px solid #c9cbce;
5499
5522
  border: 1px solid var(--color-interactive-secondary);
5523
+ position: relative;
5500
5524
  }
5501
- .np-upload-item:first-child ~ div:before {
5525
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5526
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
5527
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5502
5528
  display: block;
5503
- position: relative;
5529
+ position: absolute;
5504
5530
  height: 1px;
5505
5531
  background-color: rgba(0,0,0,0.10196);
5506
5532
  background-color: var(--color-border-neutral);
5507
5533
  content: " ";
5508
- margin: 0 16px;
5509
- margin: 0 var(--size-16);
5534
+ left: 16px;
5535
+ left: var(--size-16);
5536
+ width: calc(100% - 2 * 16px);
5537
+ width: calc(100% - 2 * var(--size-16));
5538
+ }
5539
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5540
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
5541
+ top: 0;
5542
+ }
5543
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5544
+ bottom: -1px;
5510
5545
  }
5511
5546
  .np-upload-item:first-child ~ div {
5512
- border-top: 0;
5547
+ border-top: 1px;
5548
+ }
5549
+ .np-upload-item:not(:first-child) .np-upload-item--link:hover {
5550
+ border-top-color: rgba(0,0,0,0.10196);
5551
+ border-top-color: var(--color-border-neutral);
5513
5552
  }
5514
5553
  .np-upload-item:not(:last-child) {
5515
5554
  border-bottom: 0;
5516
5555
  }
5517
- .np-upload-item.np-upload-item__link:hover:before,
5518
- .np-upload-button-container:hover:before {
5519
- margin: 0 !important;
5556
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
5557
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
5558
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
5559
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
5560
+ display: none;
5520
5561
  }
5521
- .np-upload-item.np-upload-item__link:hover + div:before,
5522
- .np-upload-button-container:hover + div:before {
5523
- margin: 0 !important;
5562
+ .np-upload-button-container:hover:before,
5563
+ .np-upload-button-container.droppable-dropping:before {
5564
+ left: 0 !important;
5565
+ width: 100% !important;
5524
5566
  }
5525
5567
  .np-upload-button-container:has(:focus-visible) {
5526
5568
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5537,17 +5579,29 @@ label.np-upload-button:not(.disabled):active {
5537
5579
  flex: 1;
5538
5580
  -webkit-text-decoration: none;
5539
5581
  text-decoration: none;
5582
+ border-top: 1px solid transparent;
5540
5583
  border-radius: inherit;
5541
5584
  }
5542
5585
  .np-upload-item__link a:focus-visible {
5543
5586
  outline-offset: -2px;
5544
5587
  }
5588
+ .np-upload-item__link a:hover:before {
5589
+ display: none !important;
5590
+ }
5591
+ .np-upload-item__link a:hover:after {
5592
+ left: 0 !important;
5593
+ width: 100% !important;
5594
+ }
5545
5595
  .np-upload-item__link a:hover,
5546
5596
  .np-upload-item__link a:active {
5547
5597
  -webkit-text-decoration: none;
5548
5598
  text-decoration: none;
5599
+ }
5600
+ .np-upload-item__link a:hover .np-upload-button,
5601
+ .np-upload-item__link a:active .np-upload-button {
5549
5602
  background-color: rgba(134,167,189,0.10196);
5550
5603
  background-color: var(--color-background-neutral);
5604
+ border-radius: inherit;
5551
5605
  }
5552
5606
  .np-upload-item__body {
5553
5607
  display: flex;
@@ -5572,6 +5626,7 @@ label.np-upload-button:not(.disabled):active {
5572
5626
  outline-offset: 0 !important;
5573
5627
  background-color: rgba(134,167,189,0.10196);
5574
5628
  background-color: var(--color-background-neutral);
5629
+ border: none;
5575
5630
  color: var(--color-interactive-primary);
5576
5631
  right: 16px;
5577
5632
  right: var(--size-16);
@@ -4208,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
4208
4208
  height: var(--size-32);
4209
4209
  }
4210
4210
  }
4211
- .status-circle.negative {
4211
+ .status-circle.negative,
4212
+ .status-circle.error {
4212
4213
  background-color: var(--color-sentiment-negative);
4213
4214
  }
4214
4215
  .status-circle.neutral {
4215
4216
  background-color: #5d7079;
4216
4217
  background-color: var(--color-content-secondary);
4217
4218
  }
4218
- .status-circle.positive {
4219
+ .status-circle.positive,
4220
+ .status-circle.success {
4219
4221
  background-color: var(--color-sentiment-positive);
4220
4222
  }
4221
4223
  .tw-stepper {
@@ -5400,6 +5402,9 @@ html:not([dir="rtl"]) .np-navigation-option {
5400
5402
  border-color: #c9cbce !important;
5401
5403
  border-color: var(--color-interactive-secondary) !important;
5402
5404
  }
5405
+ .np-upload-button-container.droppable-dropping:before {
5406
+ z-index: 2;
5407
+ }
5403
5408
  .np-upload-button-container input[type="file"] {
5404
5409
  opacity: 0;
5405
5410
  z-index: -1;
@@ -5410,6 +5415,7 @@ html:not([dir="rtl"]) .np-navigation-option {
5410
5415
  }
5411
5416
  .np-upload-button {
5412
5417
  width: 100%;
5418
+ border-top: 1px solid transparent;
5413
5419
  padding: 16px;
5414
5420
  padding: var(--padding-small);
5415
5421
  border-radius: 0;
@@ -5477,8 +5483,25 @@ label.np-upload-button:not(.disabled):active {
5477
5483
  color: var(--color-sentiment-negative) !important;
5478
5484
  }
5479
5485
  .np-theme-personal .np-upload-input-errors {
5486
+ list-style: none;
5480
5487
  padding-left: 0;
5481
- list-style-position: inside;
5488
+ }
5489
+ .np-theme-personal .np-upload-input-errors li {
5490
+ position: relative;
5491
+ padding-left: 16px;
5492
+ padding-left: var(--size-16);
5493
+ }
5494
+ @media (max-width: 320px) {
5495
+ .np-theme-personal .np-upload-input-errors li {
5496
+ padding-left: 32px;
5497
+ padding-left: var(--size-32);
5498
+ }
5499
+ }
5500
+ .np-theme-personal .np-upload-input-errors li:before {
5501
+ content: '•';
5502
+ position: absolute;
5503
+ display: block;
5504
+ left: 0;
5482
5505
  }
5483
5506
  .np-theme-personal .np-upload-input .status-circle {
5484
5507
  width: 24px;
@@ -5497,30 +5520,49 @@ label.np-upload-button:not(.disabled):active {
5497
5520
  .np-upload-item {
5498
5521
  border: 1px solid #c9cbce;
5499
5522
  border: 1px solid var(--color-interactive-secondary);
5523
+ position: relative;
5500
5524
  }
5501
- .np-upload-item:first-child ~ div:before {
5525
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5526
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
5527
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5502
5528
  display: block;
5503
- position: relative;
5529
+ position: absolute;
5504
5530
  height: 1px;
5505
5531
  background-color: rgba(0,0,0,0.10196);
5506
5532
  background-color: var(--color-border-neutral);
5507
5533
  content: " ";
5508
- margin: 0 16px;
5509
- margin: 0 var(--size-16);
5534
+ left: 16px;
5535
+ left: var(--size-16);
5536
+ width: calc(100% - 2 * 16px);
5537
+ width: calc(100% - 2 * var(--size-16));
5538
+ }
5539
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5540
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
5541
+ top: 0;
5542
+ }
5543
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5544
+ bottom: -1px;
5510
5545
  }
5511
5546
  .np-upload-item:first-child ~ div {
5512
- border-top: 0;
5547
+ border-top: 1px;
5548
+ }
5549
+ .np-upload-item:not(:first-child) .np-upload-item--link:hover {
5550
+ border-top-color: rgba(0,0,0,0.10196);
5551
+ border-top-color: var(--color-border-neutral);
5513
5552
  }
5514
5553
  .np-upload-item:not(:last-child) {
5515
5554
  border-bottom: 0;
5516
5555
  }
5517
- .np-upload-item.np-upload-item__link:hover:before,
5518
- .np-upload-button-container:hover:before {
5519
- margin: 0 !important;
5556
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
5557
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
5558
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
5559
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
5560
+ display: none;
5520
5561
  }
5521
- .np-upload-item.np-upload-item__link:hover + div:before,
5522
- .np-upload-button-container:hover + div:before {
5523
- margin: 0 !important;
5562
+ .np-upload-button-container:hover:before,
5563
+ .np-upload-button-container.droppable-dropping:before {
5564
+ left: 0 !important;
5565
+ width: 100% !important;
5524
5566
  }
5525
5567
  .np-upload-button-container:has(:focus-visible) {
5526
5568
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5537,17 +5579,29 @@ label.np-upload-button:not(.disabled):active {
5537
5579
  flex: 1;
5538
5580
  -webkit-text-decoration: none;
5539
5581
  text-decoration: none;
5582
+ border-top: 1px solid transparent;
5540
5583
  border-radius: inherit;
5541
5584
  }
5542
5585
  .np-upload-item__link a:focus-visible {
5543
5586
  outline-offset: -2px;
5544
5587
  }
5588
+ .np-upload-item__link a:hover:before {
5589
+ display: none !important;
5590
+ }
5591
+ .np-upload-item__link a:hover:after {
5592
+ left: 0 !important;
5593
+ width: 100% !important;
5594
+ }
5545
5595
  .np-upload-item__link a:hover,
5546
5596
  .np-upload-item__link a:active {
5547
5597
  -webkit-text-decoration: none;
5548
5598
  text-decoration: none;
5599
+ }
5600
+ .np-upload-item__link a:hover .np-upload-button,
5601
+ .np-upload-item__link a:active .np-upload-button {
5549
5602
  background-color: rgba(134,167,189,0.10196);
5550
5603
  background-color: var(--color-background-neutral);
5604
+ border-radius: inherit;
5551
5605
  }
5552
5606
  .np-upload-item__body {
5553
5607
  display: flex;
@@ -5572,6 +5626,7 @@ label.np-upload-button:not(.disabled):active {
5572
5626
  outline-offset: 0 !important;
5573
5627
  background-color: rgba(134,167,189,0.10196);
5574
5628
  background-color: var(--color-background-neutral);
5629
+ border: none;
5575
5630
  color: var(--color-interactive-primary);
5576
5631
  right: 16px;
5577
5632
  right: var(--size-16);
@@ -66,13 +66,15 @@
66
66
  height: var(--size-32);
67
67
  }
68
68
  }
69
- .status-circle.negative {
69
+ .status-circle.negative,
70
+ .status-circle.error {
70
71
  background-color: var(--color-sentiment-negative);
71
72
  }
72
73
  .status-circle.neutral {
73
74
  background-color: #5d7079;
74
75
  background-color: var(--color-content-secondary);
75
76
  }
76
- .status-circle.positive {
77
+ .status-circle.positive,
78
+ .status-circle.success {
77
79
  background-color: var(--color-sentiment-positive);
78
80
  }
@@ -50,8 +50,25 @@
50
50
  color: var(--color-sentiment-negative) !important;
51
51
  }
52
52
  .np-theme-personal .np-upload-input-errors {
53
+ list-style: none;
53
54
  padding-left: 0;
54
- list-style-position: inside;
55
+ }
56
+ .np-theme-personal .np-upload-input-errors li {
57
+ position: relative;
58
+ padding-left: 16px;
59
+ padding-left: var(--size-16);
60
+ }
61
+ @media (max-width: 320px) {
62
+ .np-theme-personal .np-upload-input-errors li {
63
+ padding-left: 32px;
64
+ padding-left: var(--size-32);
65
+ }
66
+ }
67
+ .np-theme-personal .np-upload-input-errors li:before {
68
+ content: '•';
69
+ position: absolute;
70
+ display: block;
71
+ left: 0;
55
72
  }
56
73
  .np-theme-personal .np-upload-input .status-circle {
57
74
  width: 24px;
@@ -8,6 +8,9 @@
8
8
  border-color: #c9cbce !important;
9
9
  border-color: var(--color-interactive-secondary) !important;
10
10
  }
11
+ .np-upload-button-container.droppable-dropping:before {
12
+ z-index: 2;
13
+ }
11
14
  .np-upload-button-container input[type="file"] {
12
15
  opacity: 0;
13
16
  z-index: -1;
@@ -18,6 +21,7 @@
18
21
  }
19
22
  .np-upload-button {
20
23
  width: 100%;
24
+ border-top: 1px solid transparent;
21
25
  padding: 16px;
22
26
  padding: var(--padding-small);
23
27
  border-radius: 0;
@@ -1,30 +1,49 @@
1
1
  .np-upload-item {
2
2
  border: 1px solid #c9cbce;
3
3
  border: 1px solid var(--color-interactive-secondary);
4
+ position: relative;
4
5
  }
5
- .np-upload-item:first-child ~ div:before {
6
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
7
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
8
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
6
9
  display: block;
7
- position: relative;
10
+ position: absolute;
8
11
  height: 1px;
9
12
  background-color: rgba(0,0,0,0.10196);
10
13
  background-color: var(--color-border-neutral);
11
14
  content: " ";
12
- margin: 0 16px;
13
- margin: 0 var(--size-16);
15
+ left: 16px;
16
+ left: var(--size-16);
17
+ width: calc(100% - 2 * 16px);
18
+ width: calc(100% - 2 * var(--size-16));
19
+ }
20
+ .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
21
+ .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
22
+ top: 0;
23
+ }
24
+ .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
25
+ bottom: -1px;
14
26
  }
15
27
  .np-upload-item:first-child ~ div {
16
- border-top: 0;
28
+ border-top: 1px;
29
+ }
30
+ .np-upload-item:not(:first-child) .np-upload-item--link:hover {
31
+ border-top-color: rgba(0,0,0,0.10196);
32
+ border-top-color: var(--color-border-neutral);
17
33
  }
18
34
  .np-upload-item:not(:last-child) {
19
35
  border-bottom: 0;
20
36
  }
21
- .np-upload-item.np-upload-item__link:hover:before,
22
- .np-upload-button-container:hover:before {
23
- margin: 0 !important;
37
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
38
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
39
+ .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
40
+ .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
41
+ display: none;
24
42
  }
25
- .np-upload-item.np-upload-item__link:hover + div:before,
26
- .np-upload-button-container:hover + div:before {
27
- margin: 0 !important;
43
+ .np-upload-button-container:hover:before,
44
+ .np-upload-button-container.droppable-dropping:before {
45
+ left: 0 !important;
46
+ width: 100% !important;
28
47
  }
29
48
  .np-upload-button-container:has(:focus-visible) {
30
49
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -41,17 +60,29 @@
41
60
  flex: 1;
42
61
  -webkit-text-decoration: none;
43
62
  text-decoration: none;
63
+ border-top: 1px solid transparent;
44
64
  border-radius: inherit;
45
65
  }
46
66
  .np-upload-item__link a:focus-visible {
47
67
  outline-offset: -2px;
48
68
  }
69
+ .np-upload-item__link a:hover:before {
70
+ display: none !important;
71
+ }
72
+ .np-upload-item__link a:hover:after {
73
+ left: 0 !important;
74
+ width: 100% !important;
75
+ }
49
76
  .np-upload-item__link a:hover,
50
77
  .np-upload-item__link a:active {
51
78
  -webkit-text-decoration: none;
52
79
  text-decoration: none;
80
+ }
81
+ .np-upload-item__link a:hover .np-upload-button,
82
+ .np-upload-item__link a:active .np-upload-button {
53
83
  background-color: rgba(134,167,189,0.10196);
54
84
  background-color: var(--color-background-neutral);
85
+ border-radius: inherit;
55
86
  }
56
87
  .np-upload-item__body {
57
88
  display: flex;
@@ -76,6 +107,7 @@
76
107
  outline-offset: 0 !important;
77
108
  background-color: rgba(134,167,189,0.10196);
78
109
  background-color: var(--color-background-neutral);
110
+ border: none;
79
111
  color: var(--color-interactive-primary);
80
112
  right: 16px;
81
113
  right: var(--size-16);
@@ -1 +1 @@
1
- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAC1F,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCAkShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
@@ -1,11 +1,16 @@
1
+ import { Sentiment } from '../common';
1
2
  export type FieldProps = {
2
3
  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
3
4
  id?: string | null;
4
5
  label: React.ReactNode;
6
+ /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
5
7
  hint?: React.ReactNode;
8
+ message?: React.ReactNode;
9
+ /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
6
10
  error?: React.ReactNode;
11
+ sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
7
12
  className?: string;
8
13
  children?: React.ReactNode;
9
14
  };
10
- export declare const Field: ({ id, label, hint, error, className, children }: FieldProps) => import("react").JSX.Element;
15
+ export declare const Field: ({ id, label, message: propMessage, sentiment: propType, className, children, ...props }: FieldProps) => import("react").JSX.Element;
11
16
  //# sourceMappingURL=Field.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,oDAAqD,UAAU,gCA8ChF,CAAC"}
1
+ {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA4CZ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAYlB"}
1
+ {"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAmBlB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.40.0",
3
+ "version": "46.41.1",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,9 +92,9 @@
92
92
  "react-intl": "^6.6.6",
93
93
  "rollup": "^4.17.2",
94
94
  "storybook": "^8.1.10",
95
- "@transferwise/neptune-css": "14.10.0",
96
- "@wise/components-theming": "1.3.0",
97
- "@transferwise/less-config": "3.1.0"
95
+ "@transferwise/less-config": "3.1.0",
96
+ "@transferwise/neptune-css": "14.11.0",
97
+ "@wise/components-theming": "1.3.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",