@transferwise/components 0.0.0-experimental-d07c802 → 0.0.0-experimental-efa0479

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 (148) hide show
  1. package/build/index.esm.js +1 -1
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +1 -1
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -5510
  6. package/build/styles/accordion/Accordion.css +1 -60
  7. package/build/styles/actionButton/ActionButton.css +1 -53
  8. package/build/styles/avatar/Avatar.css +1 -205
  9. package/build/styles/badge/Badge.css +1 -68
  10. package/build/styles/button/Button.css +1 -20
  11. package/build/styles/card/Card.css +1 -100
  12. package/build/styles/checkboxButton/CheckboxButton.css +1 -24
  13. package/build/styles/chips/Chip.css +1 -190
  14. package/build/styles/circularButton/CircularButton.css +1 -211
  15. package/build/styles/common/Option/Option.css +1 -100
  16. package/build/styles/common/RadioButton/RadioButton.css +1 -4
  17. package/build/styles/common/bottomSheet/BottomSheet.css +1 -53
  18. package/build/styles/common/card/Card.css +1 -53
  19. package/build/styles/common/closeButton/CloseButton.css +1 -79
  20. package/build/styles/common/panel/Panel.css +1 -73
  21. package/build/styles/criticalBanner/CriticalCommsBanner.css +1 -77
  22. package/build/styles/dateInput/DateInput.css +1 -3
  23. package/build/styles/dateLookup/DateLookup.css +1 -98
  24. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -68
  25. package/build/styles/decision/Decision.css +1 -93
  26. package/build/styles/definitionList/DefinitionList.css +1 -53
  27. package/build/styles/dimmer/Dimmer.css +1 -70
  28. package/build/styles/drawer/Drawer.css +1 -100
  29. package/build/styles/dropFade/DropFade.css +1 -19
  30. package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +1 -5
  31. package/build/styles/emphasis/Emphasis.css +1 -31
  32. package/build/styles/flowNavigation/FlowNavigation.css +1 -72
  33. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -21
  34. package/build/styles/flowNavigation/backButton/BackButton.css +1 -32
  35. package/build/styles/header/Header.css +1 -28
  36. package/build/styles/image/Image.css +1 -13
  37. package/build/styles/info/Info.css +1 -32
  38. package/build/styles/inputs/Input.css +1 -106
  39. package/build/styles/inputs/InputGroup.css +1 -62
  40. package/build/styles/inputs/SelectInput.css +1 -374
  41. package/build/styles/inputs/TextArea.css +1 -110
  42. package/build/styles/instructionsList/InstructionsList.css +1 -22
  43. package/build/styles/link/Link.css +1 -15
  44. package/build/styles/listItem/ListItem.css +1 -6
  45. package/build/styles/loader/Loader.css +1 -313
  46. package/build/styles/logo/Logo.css +1 -26
  47. package/build/styles/main.css +1 -5510
  48. package/build/styles/modal/Modal.css +1 -155
  49. package/build/styles/moneyInput/MoneyInput.css +1 -66
  50. package/build/styles/navigationOption/NavigationOption.css +1 -69
  51. package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -13
  52. package/build/styles/nudge/Nudge.css +1 -182
  53. package/build/styles/overlayHeader/OverlayHeader.css +1 -15
  54. package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -23
  55. package/build/styles/popover/Popover.css +1 -43
  56. package/build/styles/progress/Progress.css +1 -43
  57. package/build/styles/progressBar/ProgressBar.css +1 -14
  58. package/build/styles/promoCard/PromoCard.css +1 -186
  59. package/build/styles/section/Section.css +1 -10
  60. package/build/styles/select/Select.css +1 -314
  61. package/build/styles/slidingPanel/SlidingPanel.css +1 -105
  62. package/build/styles/snackbar/Snackbar.css +1 -93
  63. package/build/styles/statusIcon/StatusIcon.css +1 -78
  64. package/build/styles/stepper/Stepper.css +1 -108
  65. package/build/styles/summary/Summary.css +1 -81
  66. package/build/styles/switch/Switch.css +1 -68
  67. package/build/styles/tabs/Tabs.css +1 -121
  68. package/build/styles/tile/Tile.css +1 -55
  69. package/build/styles/tooltip/Tooltip.css +1 -50
  70. package/build/styles/typeahead/Typeahead.css +1 -183
  71. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -9
  72. package/build/styles/upload/Upload.css +1 -15
  73. package/build/styles/uploadInput/UploadInput.css +1 -71
  74. package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -49
  75. package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -74
  76. package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts.map +1 -1
  77. package/package.json +4 -4
  78. package/src/accordion/Accordion.css +1 -60
  79. package/src/actionButton/ActionButton.css +1 -53
  80. package/src/avatar/Avatar.css +1 -205
  81. package/src/badge/Badge.css +1 -68
  82. package/src/button/Button.css +1 -20
  83. package/src/card/Card.css +1 -100
  84. package/src/checkboxButton/CheckboxButton.css +1 -24
  85. package/src/chips/Chip.css +1 -190
  86. package/src/circularButton/CircularButton.css +1 -211
  87. package/src/common/Option/Option.css +1 -100
  88. package/src/common/RadioButton/RadioButton.css +1 -4
  89. package/src/common/bottomSheet/BottomSheet.css +1 -53
  90. package/src/common/card/Card.css +1 -53
  91. package/src/common/closeButton/CloseButton.css +1 -79
  92. package/src/common/panel/Panel.css +1 -73
  93. package/src/criticalBanner/CriticalCommsBanner.css +1 -77
  94. package/src/dateInput/DateInput.css +1 -3
  95. package/src/dateLookup/DateLookup.css +1 -98
  96. package/src/dateLookup/dateTrigger/DateTrigger.css +1 -68
  97. package/src/decision/Decision.css +1 -93
  98. package/src/definitionList/DefinitionList.css +1 -53
  99. package/src/dimmer/Dimmer.css +1 -70
  100. package/src/drawer/Drawer.css +1 -100
  101. package/src/dropFade/DropFade.css +1 -19
  102. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +1 -5
  103. package/src/emphasis/Emphasis.css +1 -31
  104. package/src/flowNavigation/FlowNavigation.css +1 -72
  105. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +1 -21
  106. package/src/flowNavigation/backButton/BackButton.css +1 -32
  107. package/src/header/Header.css +1 -28
  108. package/src/image/Image.css +1 -13
  109. package/src/info/Info.css +1 -32
  110. package/src/inputs/Input.css +1 -106
  111. package/src/inputs/InputGroup.css +1 -62
  112. package/src/inputs/SelectInput.css +1 -374
  113. package/src/inputs/TextArea.css +1 -110
  114. package/src/instructionsList/InstructionsList.css +1 -22
  115. package/src/link/Link.css +1 -15
  116. package/src/listItem/ListItem.css +1 -6
  117. package/src/loader/Loader.css +1 -313
  118. package/src/logo/Logo.css +1 -26
  119. package/src/main.css +1 -5510
  120. package/src/modal/Modal.css +1 -155
  121. package/src/moneyInput/MoneyInput.css +1 -66
  122. package/src/navigationOption/NavigationOption.css +1 -69
  123. package/src/navigationOptionsList/NavigationOptionsList.css +1 -13
  124. package/src/nudge/Nudge.css +1 -182
  125. package/src/overlayHeader/OverlayHeader.css +1 -15
  126. package/src/phoneNumberInput/PhoneNumberInput.css +1 -23
  127. package/src/popover/Popover.css +1 -43
  128. package/src/progress/Progress.css +1 -43
  129. package/src/progressBar/ProgressBar.css +1 -14
  130. package/src/promoCard/PromoCard.css +1 -186
  131. package/src/section/Section.css +1 -10
  132. package/src/select/Select.css +1 -314
  133. package/src/slidingPanel/SlidingPanel.css +1 -105
  134. package/src/snackbar/Snackbar.css +1 -93
  135. package/src/statusIcon/StatusIcon.css +1 -78
  136. package/src/stepper/Stepper.css +1 -108
  137. package/src/summary/Summary.css +1 -81
  138. package/src/switch/Switch.css +1 -68
  139. package/src/tabs/Tabs.css +1 -121
  140. package/src/tile/Tile.css +1 -55
  141. package/src/tooltip/Tooltip.css +1 -50
  142. package/src/typeahead/Typeahead.css +1 -183
  143. package/src/typeahead/typeaheadOption/TypeaheadOption.css +1 -9
  144. package/src/typeahead/typeaheadOption/TypeaheadOption.js +3 -1
  145. package/src/upload/Upload.css +1 -15
  146. package/src/uploadInput/UploadInput.css +1 -71
  147. package/src/uploadInput/uploadButton/UploadButton.css +1 -49
  148. package/src/uploadInput/uploadItem/UploadItem.css +1 -74
package/src/inputs/TextArea.css CHANGED
@@ -1,110 +1 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.np-form-control {
4
- --ring-width: 1px;
5
- --ring-color: var(--color-interactive-secondary);
6
- border: none;
7
- background-color: transparent;
8
- min-height: 0;
9
- /* TODO: Remove this override once `.form-control` isn’t used anymore */
10
- padding-left: 16px;
11
- padding-left: var(--size-16);
12
- padding-right: 16px;
13
- padding-right: var(--size-16);
14
- color: #37517e;
15
- color: var(--color-content-primary);
16
- box-shadow: inset 0 0 0 1px #c9cbce;
17
- box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
18
- box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
19
- transition-property: color, opacity, box-shadow;
20
- transition-timing-function: ease-in-out;
21
- transition-duration: 300ms;
22
- /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
23
- }.np-form-control:focus-visible {
24
- outline: none;
25
- }.np-form-control[aria-invalid="true"] {
26
- --ring-width: 2px;
27
- --ring-color: var(--color-sentiment-negative) !important;
28
- }.np-form-control:hover:enabled {
29
- --ring-width: 2px;
30
- --ring-color: var(--color-interactive-secondary-hover);
31
- }.np-form-control:focus:enabled {
32
- --ring-width: 3px;
33
- --ring-color: var(--color-interactive-primary);
34
- }.np-form-control--size-auto {
35
- font-weight: 400;
36
- font-weight: var(--font-weight-regular);
37
- font-size: 1rem;
38
- font-size: var(--font-size-16);
39
- line-height: 150%;
40
- letter-spacing: -0.011em;
41
- padding-top: 12px;
42
- padding-top: var(--size-12);
43
- padding-bottom: 12px;
44
- padding-bottom: var(--size-12);
45
- }.np-form-control--size-sm,
46
- .np-form-control--size-md,
47
- .np-form-control--size-lg {
48
- padding-top: 0 !important;
49
- padding-bottom: 0 !important;
50
- }.np-form-control--size-sm {
51
- line-height: 1.5;
52
- line-height: var(--line-height-body);
53
- font-size: 1rem;
54
- font-size: var(--font-size-16);
55
- font-size: 0.875rem;
56
- font-size: var(--font-size-14);
57
- line-height: 155%;
58
- letter-spacing: -0.006em;
59
- font-weight: 400;
60
- font-weight: var(--font-weight-regular);
61
- height: 32px !important;
62
- height: var(--size-32) !important;
63
- }.np-form-control--size-md {
64
- font-weight: 400;
65
- font-weight: var(--font-weight-regular);
66
- font-size: 1rem;
67
- font-size: var(--font-size-16);
68
- line-height: 150%;
69
- letter-spacing: -0.011em;
70
- height: 48px !important;
71
- height: var(--size-48) !important;
72
- }.np-form-control--size-lg {
73
- margin: 0;
74
- color: #37517e;
75
- color: var(--color-content-primary);
76
- line-height: 1.2;
77
- line-height: var(--line-height-title);
78
- letter-spacing: 0;
79
- margin-bottom: 0;
80
- margin-bottom: initial;
81
- font-size: 1.375rem;
82
- font-size: var(--font-size-22);
83
- font-weight: 600;
84
- font-weight: var(--font-weight-semi-bold);
85
- letter-spacing: -0.018em;
86
- line-height: 125%;
87
- height: 72px !important;
88
- height: var(--size-72) !important;
89
- }.np-form-control--size-lg + p,
90
- .np-form-control--size-lg + ul:not(.list-unstyled),
91
- .np-form-control--size-lg + ol:not(.list-unstyled) {
92
- margin-top: 8px;
93
- margin-top: var(--size-8);
94
- }.np-text-area {
95
- min-height: 72px;
96
- min-height: var(--size-72);
97
- scroll-padding-top: 8px;
98
- scroll-padding-top: var(--size-8);
99
- scroll-padding-bottom: 8px;
100
- scroll-padding-bottom: var(--size-8);
101
- overscroll-behavior: none;
102
- border-radius: 10px !important;
103
- border-radius: var(--radius-small) !important;
104
- }.np-text-area::-moz-placeholder {
105
- color: #768e9c;
106
- color: var(--color-content-tertiary);
107
- }.np-text-area::placeholder {
108
- color: #768e9c;
109
- color: var(--color-content-tertiary);
110
- }
1
+ .np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{font-size:1rem;font-size:var(--font-size-16);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:-.011em;line-height:150%;padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{font-size:1rem;font-size:var(--font-size-16);font-size:.875rem;font-size:var(--font-size-14);height:32px!important;height:var(--size-32)!important;letter-spacing:-.006em;line-height:1.5;line-height:var(--line-height-body);line-height:155%}.np-form-control--size-md,.np-form-control--size-sm{font-weight:400;font-weight:var(--font-weight-regular)}.np-form-control--size-md{font-size:1rem;font-size:var(--font-size-16);height:48px!important;height:var(--size-48)!important;letter-spacing:-.011em;line-height:150%}.np-form-control--size-lg{color:#37517e;color:var(--color-content-primary);font-size:1.375rem;font-size:var(--font-size-22);font-weight:600;font-weight:var(--font-weight-semi-bold);height:72px!important;height:var(--size-72)!important;letter-spacing:0;letter-spacing:-.018em;line-height:1.2;line-height:var(--line-height-title);line-height:125%;margin:0}.np-form-control--size-lg+ol:not(.list-unstyled),.np-form-control--size-lg+p,.np-form-control--size-lg+ul:not(.list-unstyled){margin-top:8px;margin-top:var(--size-8)}.np-text-area{border-radius:10px!important;border-radius:var(--radius-small)!important;min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}.np-text-area::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-text-area::placeholder{color:#768e9c;color:var(--color-content-tertiary)}
package/src/instructionsList/InstructionsList.css CHANGED
@@ -1,22 +1 @@
1
- .tw-instructions {
2
- display: flex;
3
- flex-direction: column;
4
- }
5
- .tw-instructions .instruction {
6
- display: flex;
7
- margin-top: 8px;
8
- margin-top: var(--padding-x-small);
9
- }
10
- .tw-instructions .instruction .do,
11
- .tw-instructions .instruction .dont {
12
- flex-shrink: 0;
13
- margin-right: 8px;
14
- margin-right: var(--padding-x-small);
15
- margin-bottom: 0;
16
- }
17
- .tw-instructions .instruction .do {
18
- color: var(--color-sentiment-positive);
19
- }
20
- .tw-instructions .instruction .dont {
21
- color: var(--color-sentiment-negative);
22
- }
1
+ .tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}
package/src/link/Link.css CHANGED
@@ -1,15 +1 @@
1
- a {
2
- border-radius: 2px;
3
- }
4
- .np-link .tw-icon {
5
- display: flex;
6
- align-items: center;
7
- margin-left: 4px;
8
- margin-left: var(--size-4);
9
- }
10
- [dir="rtl"] .np-link .tw-icon {
11
- margin-right: 4px;
12
- margin-right: var(--size-4);
13
- margin-left: 0;
14
- margin-left: initial;
15
- }
1
+ a{border-radius:2px}.np-link .tw-icon{align-items:center;display:flex;margin-left:4px;margin-left:var(--size-4)}[dir=rtl] .np-link .tw-icon{margin-left:0;margin-right:4px;margin-right:var(--size-4)}
package/src/listItem/ListItem.css CHANGED
@@ -1,6 +1 @@
1
- .np-list-item {
2
- width: 100%;
3
- }
4
- .np-list-item__action {
5
- flex-shrink: 0;
6
- }
1
+ .np-list-item{width:100%}.np-list-item__action{flex-shrink:0}