@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

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 (163) hide show
  1. package/build/common/closeButton/CloseButton.messages.js +2 -2
  2. package/build/common/closeButton/CloseButton.messages.js.map +1 -1
  3. package/build/common/closeButton/CloseButton.messages.mjs +2 -2
  4. package/build/common/closeButton/CloseButton.messages.mjs.map +1 -1
  5. package/build/common/closeButton/CloseButton.mjs +2 -2
  6. package/build/common/closeButton/CloseButton.mjs.map +1 -1
  7. package/build/drawer/Drawer.js +9 -18
  8. package/build/drawer/Drawer.js.map +1 -1
  9. package/build/drawer/Drawer.mjs +9 -18
  10. package/build/drawer/Drawer.mjs.map +1 -1
  11. package/build/main.css +476 -223
  12. package/build/modal/Modal.js +21 -20
  13. package/build/modal/Modal.js.map +1 -1
  14. package/build/modal/Modal.mjs +21 -20
  15. package/build/modal/Modal.mjs.map +1 -1
  16. package/build/select/Select.js +1 -2
  17. package/build/select/Select.js.map +1 -1
  18. package/build/select/Select.mjs +1 -2
  19. package/build/select/Select.mjs.map +1 -1
  20. package/build/styles/accordion/Accordion.css +2 -6
  21. package/build/styles/actionButton/ActionButton.css +12 -4
  22. package/build/styles/avatar/Avatar.css +13 -10
  23. package/build/styles/avatarView/AvatarView.css +5 -3
  24. package/build/styles/avatarView/Dot.css +2 -1
  25. package/build/styles/button/Button.css +1 -0
  26. package/build/styles/card/Card.css +2 -2
  27. package/build/styles/carousel/Carousel.css +5 -2
  28. package/build/styles/checkboxButton/CheckboxButton.css +0 -1
  29. package/build/styles/chips/Chip.css +31 -12
  30. package/build/styles/circularButton/CircularButton.css +6 -0
  31. package/build/styles/common/Option/Option.css +2 -2
  32. package/build/styles/common/RadioButton/RadioButton.css +1 -1
  33. package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
  34. package/build/styles/common/card/Card.css +1 -1
  35. package/build/styles/common/closeButton/CloseButton.css +7 -2
  36. package/build/styles/criticalBanner/CriticalCommsBanner.css +4 -0
  37. package/build/styles/dateLookup/DateLookup.css +5 -3
  38. package/build/styles/definitionList/DefinitionList.css +1 -1
  39. package/build/styles/divider/Divider.css +1 -1
  40. package/build/styles/drawer/Drawer.css +58 -11
  41. package/build/styles/emphasis/Emphasis.css +4 -5
  42. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  43. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +1 -0
  44. package/build/styles/expressiveMoneyInput/chevron/Chevron.css +1 -0
  45. package/build/styles/flowNavigation/FlowNavigation.css +2 -1
  46. package/build/styles/header/Header.css +2 -2
  47. package/build/styles/iconButton/IconButton.css +27 -4
  48. package/build/styles/inputs/Input.css +5 -5
  49. package/build/styles/inputs/InputGroup.css +3 -2
  50. package/build/styles/inputs/SelectInput.css +14 -13
  51. package/build/styles/inputs/TextArea.css +5 -5
  52. package/build/styles/instructionsList/InstructionsList.css +2 -0
  53. package/build/styles/listItem/ListItem.css +22 -8
  54. package/build/styles/logo/Logo.css +2 -0
  55. package/build/styles/main.css +476 -223
  56. package/build/styles/modal/Modal.css +68 -6
  57. package/build/styles/moneyInput/MoneyInput.css +2 -2
  58. package/build/styles/navigationOption/NavigationOption.css +1 -3
  59. package/build/styles/nudge/Nudge.css +1 -1
  60. package/build/styles/overlayHeader/OverlayHeader.css +2 -1
  61. package/build/styles/popover/Popover.css +2 -2
  62. package/build/styles/progress/Progress.css +3 -3
  63. package/build/styles/progressBar/ProgressBar.css +2 -2
  64. package/build/styles/promoCard/PromoCard.css +3 -3
  65. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +39 -3
  66. package/build/styles/segmentedControl/SegmentedControl.css +6 -2
  67. package/build/styles/select/Select.css +25 -41
  68. package/build/styles/slidingPanel/SlidingPanel.css +4 -4
  69. package/build/styles/snackbar/Snackbar.css +4 -4
  70. package/build/styles/statusIcon/StatusIcon.css +10 -2
  71. package/build/styles/stepper/Stepper.css +4 -4
  72. package/build/styles/summary/Summary.css +5 -2
  73. package/build/styles/switch/Switch.css +3 -2
  74. package/build/styles/table/Table.css +13 -5
  75. package/build/styles/tabs/Tabs.css +10 -9
  76. package/build/styles/tile/Tile.css +8 -5
  77. package/build/styles/typeahead/Typeahead.css +2 -1
  78. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -4
  79. package/build/styles/upload/Upload.css +1 -1
  80. package/build/styles/uploadInput/uploadButton/UploadButton.css +4 -2
  81. package/build/styles/uploadInput/uploadItem/UploadItem.css +8 -4
  82. package/build/types/drawer/Drawer.d.ts.map +1 -1
  83. package/build/types/modal/Modal.d.ts.map +1 -1
  84. package/build/types/select/Select.d.ts +1 -1
  85. package/build/types/select/Select.d.ts.map +1 -1
  86. package/package.json +12 -7
  87. package/src/accordion/Accordion.css +2 -6
  88. package/src/accordion/Accordion.less +0 -7
  89. package/src/accordion/Accordion.story.tsx +1 -1
  90. package/src/actionButton/ActionButton.css +12 -4
  91. package/src/avatar/Avatar.css +13 -10
  92. package/src/avatarLayout/AvatarLayout.story.tsx +0 -1
  93. package/src/avatarView/AvatarView.css +5 -3
  94. package/src/avatarView/AvatarView.story.tsx +0 -1
  95. package/src/avatarView/Dot.css +2 -1
  96. package/src/button/Button.css +1 -0
  97. package/src/card/Card.css +2 -2
  98. package/src/carousel/Carousel.css +5 -2
  99. package/src/checkboxButton/CheckboxButton.css +0 -1
  100. package/src/chips/Chip.css +31 -12
  101. package/src/circularButton/CircularButton.css +6 -0
  102. package/src/common/Option/Option.css +2 -2
  103. package/src/common/RadioButton/RadioButton.css +1 -1
  104. package/src/common/bottomSheet/BottomSheet.css +1 -1
  105. package/src/common/card/Card.css +1 -1
  106. package/src/common/closeButton/CloseButton.css +7 -2
  107. package/src/criticalBanner/CriticalCommsBanner.css +4 -0
  108. package/src/dateLookup/DateLookup.css +5 -3
  109. package/src/definitionList/DefinitionList.css +1 -1
  110. package/src/display/Display.story.tsx +0 -1
  111. package/src/divider/Divider.css +1 -1
  112. package/src/drawer/Drawer.css +58 -11
  113. package/src/drawer/Drawer.less +70 -14
  114. package/src/drawer/Drawer.story.tsx +100 -158
  115. package/src/drawer/Drawer.tsx +7 -26
  116. package/src/emphasis/Emphasis.css +4 -5
  117. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
  118. package/src/expressiveMoneyInput/amountInput/AmountInput.css +1 -0
  119. package/src/expressiveMoneyInput/chevron/Chevron.css +1 -0
  120. package/src/flowNavigation/FlowNavigation.css +2 -1
  121. package/src/header/Header.css +2 -2
  122. package/src/iconButton/IconButton.css +27 -4
  123. package/src/iconButton/IconButton.story.tsx +0 -1
  124. package/src/inputs/Input.css +5 -5
  125. package/src/inputs/InputGroup.css +3 -2
  126. package/src/inputs/SelectInput.css +14 -13
  127. package/src/inputs/TextArea.css +5 -5
  128. package/src/instructionsList/InstructionsList.css +2 -0
  129. package/src/listItem/ListItem.css +22 -8
  130. package/src/logo/Logo.css +2 -0
  131. package/src/main.css +476 -223
  132. package/src/modal/Modal.css +68 -6
  133. package/src/modal/Modal.less +76 -6
  134. package/src/modal/Modal.tsx +23 -23
  135. package/src/moneyInput/MoneyInput.css +2 -2
  136. package/src/navigationOption/NavigationOption.css +1 -3
  137. package/src/nudge/Nudge.css +1 -1
  138. package/src/overlayHeader/OverlayHeader.css +2 -1
  139. package/src/popover/Popover.css +2 -2
  140. package/src/progress/Progress.css +3 -3
  141. package/src/progressBar/ProgressBar.css +2 -2
  142. package/src/promoCard/PromoCard.css +3 -3
  143. package/src/prompt/InlinePrompt/InlinePrompt.css +39 -3
  144. package/src/segmentedControl/SegmentedControl.css +6 -2
  145. package/src/select/Select.css +25 -41
  146. package/src/select/Select.less +0 -25
  147. package/src/select/Select.tsx +1 -6
  148. package/src/slidingPanel/SlidingPanel.css +4 -4
  149. package/src/snackbar/Snackbar.css +4 -4
  150. package/src/snackbar/Snackbar.less +2 -4
  151. package/src/statusIcon/StatusIcon.css +10 -2
  152. package/src/stepper/Stepper.css +4 -4
  153. package/src/summary/Summary.css +5 -2
  154. package/src/switch/Switch.css +3 -2
  155. package/src/table/Table.css +13 -5
  156. package/src/tabs/Tabs.css +10 -9
  157. package/src/tile/Tile.css +8 -5
  158. package/src/typeahead/Typeahead.css +2 -1
  159. package/src/typeahead/typeaheadOption/TypeaheadOption.css +1 -4
  160. package/src/typeahead/typeaheadOption/TypeaheadOption.less +0 -6
  161. package/src/upload/Upload.css +1 -1
  162. package/src/uploadInput/uploadButton/UploadButton.css +4 -2
  163. package/src/uploadInput/uploadItem/UploadItem.css +8 -4
@@ -9,9 +9,9 @@
9
9
  padding-left: var(--size-16);
10
10
  padding-right: 16px;
11
11
  padding-right: var(--size-16);
12
- color: #37517e;
12
+ color: #0e0f0c;
13
13
  color: var(--color-content-primary);
14
- box-shadow: inset 0 0 0 1px #c9cbce;
14
+ box-shadow: inset 0 0 0 1px #868685;
15
15
  box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
16
16
  transition-property: color, opacity, box-shadow;
17
17
  transition-timing-function: ease-in-out;
@@ -90,7 +90,7 @@
90
90
  }
91
91
  .np-form-control--size-lg {
92
92
  margin: 0;
93
- color: #37517e;
93
+ color: #0e0f0c;
94
94
  color: var(--color-content-primary);
95
95
  line-height: 1.2;
96
96
  line-height: var(--line-height-title);
@@ -154,10 +154,10 @@
154
154
  border-radius: var(--radius-small) !important;
155
155
  }
156
156
  .np-text-area::-moz-placeholder {
157
- color: #768e9c;
157
+ color: #6a6c6a;
158
158
  color: var(--color-content-tertiary);
159
159
  }
160
160
  .np-text-area::placeholder {
161
- color: #768e9c;
161
+ color: #6a6c6a;
162
162
  color: var(--color-content-tertiary);
163
163
  }
@@ -19,8 +19,10 @@
19
19
  margin-bottom: 0;
20
20
  }
21
21
  .tw-instructions .instruction .do {
22
+ color: #054d28;
22
23
  color: var(--color-sentiment-positive);
23
24
  }
24
25
  .tw-instructions .instruction .dont {
26
+ color: #cb272f;
25
27
  color: var(--color-sentiment-negative);
26
28
  }
@@ -425,7 +425,7 @@
425
425
  }
426
426
  .wds-list-item a .wds-list-item-subtitle,
427
427
  .wds-list-item a .wds-list-item-subtitle-value {
428
- color: #5d7079;
428
+ color: #454745;
429
429
  color: var(--color-content-secondary);
430
430
  }
431
431
  .wds-list-item-interactive .wds-list-item-control:focus-visible,
@@ -480,9 +480,11 @@
480
480
  border-radius: var(--radius-medium);
481
481
  }
482
482
  .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
483
+ background-color: rgba(22,51,0,0.07843);
483
484
  background-color: var(--color-background-screen-hover);
484
485
  }
485
486
  .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
487
+ background-color: rgba(22,51,0,0.12941);
486
488
  background-color: var(--color-background-screen-active);
487
489
  }
488
490
  .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
@@ -543,7 +545,7 @@
543
545
  }
544
546
  .wds-list-item-title,
545
547
  .wds-list-item-title-value {
546
- color: #37517e;
548
+ color: #0e0f0c;
547
549
  color: var(--color-content-primary);
548
550
  }
549
551
  .wds-list-item-body-center {
@@ -553,7 +555,7 @@
553
555
  }
554
556
  .wds-list-item-additional-info {
555
557
  grid-area: info;
556
- color: #768e9c;
558
+ color: #6a6c6a;
557
559
  color: var(--color-content-tertiary);
558
560
  margin-top: calc(4px * -1);
559
561
  margin-top: calc(var(--size-4) * -1);
@@ -565,7 +567,7 @@
565
567
  grid-area: control;
566
568
  }
567
569
  .wds-list-item-navigation .tw-icon-chevron-right {
568
- color: #c9cbce;
570
+ color: #868685;
569
571
  color: var(--color-interactive-secondary);
570
572
  }
571
573
  .wds-list-item-control {
@@ -586,7 +588,7 @@
586
588
  .wds-list-item.disabled .wds-list-item-subtitle,
587
589
  .wds-list-item.disabled .wds-list-item-subtitle-value,
588
590
  .wds-list-item.disabled .wds-list-item-additional-info {
589
- color: #768e9c;
591
+ color: #6a6c6a;
590
592
  color: var(--color-content-tertiary);
591
593
  }
592
594
  .wds-list-item.disabled .wds-list-item-media,
@@ -604,29 +606,41 @@
604
606
  padding-right: var(--size-12);
605
607
  }
606
608
  .wds-list-item-spotlight-active {
607
- background-color: rgba(134,167,189,0.10196);
609
+ background-color: rgba(22,51,0,0.07843);
608
610
  background-color: var(--color-background-neutral);
609
611
  }
610
612
  .wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
613
+ background-color: rgba(22,51,0,0.12941);
611
614
  background-color: var(--color-background-neutral-hover);
612
615
  }
613
616
  .wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
617
+ background-color: rgba(22,51,0,0.18039);
614
618
  background-color: var(--color-background-neutral-active);
615
619
  }
616
620
  .wds-list-item-spotlight-inactive {
617
- background-color: rgba(134, 167, 189, 0.025);
621
+ background-color: rgba(22, 51, 0, 0.02);
618
622
  }
619
623
  @supports (color: color-mix(in lch, red, blue)) {
620
624
  .wds-list-item-spotlight-inactive {
621
625
  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
622
626
  }
623
627
  }
628
+ .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
629
+ background-color: rgba(22, 51, 0, 0.045);
630
+ }
631
+ @supports (color: color-mix(in lch, red, blue)) {
624
632
  .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
625
633
  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
626
634
  }
635
+ }
636
+ .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
637
+ background-color: rgba(22, 51, 0, 0.081);
638
+ }
639
+ @supports (color: color-mix(in lch, red, blue)) {
627
640
  .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
628
641
  background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
629
642
  }
643
+ }
630
644
  .wds-list-item .wds-list-item-spotlight__border {
631
645
  position: absolute;
632
646
  inset: 0;
@@ -638,7 +652,7 @@
638
652
  --wds-list-item-spotlight-borderWidthOffset: 0.5px;
639
653
  --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
640
654
  fill: none;
641
- stroke: rgba(0,0,0,0.10196);
655
+ stroke: rgba(14,15,12,0.12157);
642
656
  stroke: var(--color-border-neutral);
643
657
  width: calc(100% - 1px);
644
658
  width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
@@ -3,9 +3,11 @@
3
3
  }
4
4
  .np-theme-personal--forest-green .np-logo-svg path,
5
5
  .np-theme-personal--bright-green .np-logo-svg path {
6
+ fill: #163300;
6
7
  fill: var(--color-interactive-primary);
7
8
  }
8
9
  .np-theme-personal--dark .np-logo-svg path {
10
+ fill: #ffffff;
9
11
  fill: var(--color-white);
10
12
  }
11
13
  .np-logo-svg--size-sm {