@transferwise/components 0.0.0-experimental-8078c24 → 0.0.0-experimental-7d89ae8

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 (159) hide show
  1. package/package.json +3 -3
  2. package/src/accordion/Accordion.css +0 -74
  3. package/src/actionButton/ActionButton.css +0 -64
  4. package/src/actionOption/ActionOption.css +0 -4
  5. package/src/alert/Alert.css +0 -7
  6. package/src/avatar/Avatar.css +0 -250
  7. package/src/avatarLayout/AvatarLayout.css +0 -42
  8. package/src/avatarView/AvatarView.css +0 -44
  9. package/src/avatarView/Dot.css +0 -26
  10. package/src/badge/Badge.css +0 -65
  11. package/src/body/Body.css +0 -3
  12. package/src/button/Button.css +0 -246
  13. package/src/button/Button.vars.css +0 -46
  14. package/src/button/LegacyButton.css +0 -23
  15. package/src/card/Card.css +0 -100
  16. package/src/carousel/Carousel.css +0 -134
  17. package/src/checkboxButton/CheckboxButton.css +0 -43
  18. package/src/chips/Chip.css +0 -190
  19. package/src/circularButton/CircularButton.css +0 -34
  20. package/src/common/Option/Option.css +0 -120
  21. package/src/common/RadioButton/RadioButton.css +0 -4
  22. package/src/common/baseCard/BaseCard.css +0 -49
  23. package/src/common/bottomSheet/BottomSheet.css +0 -53
  24. package/src/common/circle/Circle.css +0 -43
  25. package/src/common/closeButton/CloseButton.css +0 -94
  26. package/src/common/liveRegion/LiveRegion.css +0 -3
  27. package/src/common/panel/Panel.css +0 -73
  28. package/src/container/Container.css +0 -38
  29. package/src/criticalBanner/CriticalCommsBanner.css +0 -63
  30. package/src/dateInput/DateInput.css +0 -16
  31. package/src/dateLookup/DateLookup.css +0 -93
  32. package/src/dateLookup/dateTrigger/DateTrigger.css +0 -29
  33. package/src/decision/Decision.css +0 -17
  34. package/src/definitionList/DefinitionList.css +0 -53
  35. package/src/dimmer/Dimmer.css +0 -70
  36. package/src/divider/Divider.css +0 -24
  37. package/src/drawer/Drawer.css +0 -56
  38. package/src/dropFade/DropFade.css +0 -19
  39. package/src/emphasis/Emphasis.css +0 -31
  40. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -60
  41. package/src/expressiveMoneyInput/amountInput/AmountInput.css +0 -34
  42. package/src/expressiveMoneyInput/chevron/Chevron.css +0 -12
  43. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css +0 -6
  44. package/src/field/Field.css +0 -29
  45. package/src/flowNavigation/FlowNavigation.css +0 -76
  46. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +0 -30
  47. package/src/header/Header.css +0 -33
  48. package/src/iconButton/IconButton.css +0 -82
  49. package/src/image/Image.css +0 -13
  50. package/src/info/Info.css +0 -9
  51. package/src/inputs/Input.css +0 -158
  52. package/src/inputs/InputGroup.css +0 -71
  53. package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +0 -96
  54. package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +0 -20
  55. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +0 -46
  56. package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +0 -16
  57. package/src/inputs/SelectInput/Option/SelectInputOption.css +0 -33
  58. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +0 -37
  59. package/src/inputs/SelectInput/Options/SelectInputOptions.css +0 -81
  60. package/src/inputs/SelectInput/Popover/SelectInputPopover.css +0 -46
  61. package/src/inputs/SelectInput/SelectInput.css +0 -384
  62. package/src/inputs/TextArea.css +0 -161
  63. package/src/instructionsList/InstructionsList.css +0 -26
  64. package/src/legacylistItem/LegacyListItem.css +0 -6
  65. package/src/link/Link.css +0 -24
  66. package/src/listItem/ListItem.css +0 -660
  67. package/src/listItem/ListItem.grid.css +0 -384
  68. package/src/listItem/ListItem.vars.css +0 -0
  69. package/src/listItem/Prompt/ListItemPrompt.css +0 -4
  70. package/src/loader/Loader.css +0 -237
  71. package/src/logo/Logo.css +0 -6
  72. package/src/main.css +0 -34572
  73. package/src/modal/Modal.css +0 -82
  74. package/src/moneyInput/MoneyInput.css +0 -78
  75. package/src/navigationOption/NavigationOption.css +0 -69
  76. package/src/navigationOptionsList/NavigationOptionsList.css +0 -13
  77. package/src/nudge/Nudge.css +0 -206
  78. package/src/overlayHeader/OverlayHeader.css +0 -15
  79. package/src/phoneNumberInput/PhoneNumberInput.css +0 -28
  80. package/src/popover/Popover.css +0 -76
  81. package/src/progress/Progress.css +0 -43
  82. package/src/progressBar/ProgressBar.css +0 -14
  83. package/src/promoCard/PromoCard.css +0 -186
  84. package/src/prompt/ActionPrompt/ActionPrompt.css +0 -30
  85. package/src/prompt/CriticalBanner/CriticalBanner.css +0 -134
  86. package/src/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
  87. package/src/prompt/InfoPrompt/InfoPrompt.css +0 -57
  88. package/src/prompt/InlinePrompt/InlinePrompt.css +0 -57
  89. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +0 -51
  90. package/src/prompt/common/Expander/Expander.css +0 -8
  91. package/src/radioGroup/RadioGroup.css +0 -3
  92. package/src/section/Section.css +0 -10
  93. package/src/segmentedControl/SegmentedControl.css +0 -101
  94. package/src/select/Select.css +0 -369
  95. package/src/sentimentSurface/SentimentSurface.css +0 -487
  96. package/src/slidingPanel/SlidingPanel.css +0 -105
  97. package/src/snackbar/Snackbar.css +0 -93
  98. package/src/statusIcon/StatusIcon.css +0 -37
  99. package/src/stepper/Stepper.css +0 -77
  100. package/src/styles/less/accordion.css +0 -255
  101. package/src/styles/less/alerts.css +0 -751
  102. package/src/styles/less/background.css +0 -20
  103. package/src/styles/less/badge.css +0 -90
  104. package/src/styles/less/border-radius.css +0 -3
  105. package/src/styles/less/breadcrumbs.css +0 -20
  106. package/src/styles/less/button-groups.css +0 -495
  107. package/src/styles/less/buttons.css +0 -1390
  108. package/src/styles/less/chevron.css +0 -35
  109. package/src/styles/less/circles.css +0 -248
  110. package/src/styles/less/close.css +0 -47
  111. package/src/styles/less/column-layout.css +0 -164
  112. package/src/styles/less/core/viewport-themes.css +0 -63
  113. package/src/styles/less/currency-flags.css +0 -46
  114. package/src/styles/less/decision.css +0 -136
  115. package/src/styles/less/dropdowns.css +0 -472
  116. package/src/styles/less/droppable.css +0 -221
  117. package/src/styles/less/flex.css +0 -596
  118. package/src/styles/less/footer.css +0 -129
  119. package/src/styles/less/forms/bootstrap-forms.css +0 -2277
  120. package/src/styles/less/forms/checkbox-radio.css +0 -367
  121. package/src/styles/less/grid.css +0 -2369
  122. package/src/styles/less/input-groups.css +0 -2740
  123. package/src/styles/less/link-callout.css +0 -20
  124. package/src/styles/less/list-group.css +0 -350
  125. package/src/styles/less/loaders.css +0 -76
  126. package/src/styles/less/media.css +0 -74
  127. package/src/styles/less/modals.css +0 -185
  128. package/src/styles/less/navbar.css +0 -2406
  129. package/src/styles/less/navs.css +0 -296
  130. package/src/styles/less/neptune-social-media.css +0 -144
  131. package/src/styles/less/neptune.css +0 -25468
  132. package/src/styles/less/panels.css +0 -528
  133. package/src/styles/less/popovers.css +0 -661
  134. package/src/styles/less/process.css +0 -483
  135. package/src/styles/less/progress-bars.css +0 -64
  136. package/src/styles/less/ring.css +0 -55
  137. package/src/styles/less/select.css +0 -99
  138. package/src/styles/less/sequences.css +0 -855
  139. package/src/styles/less/table.css +0 -446
  140. package/src/styles/less/tick.css +0 -32
  141. package/src/styles/less/tooltip.css +0 -160
  142. package/src/styles/less/utilities.css +0 -133
  143. package/src/styles/less/wells.css +0 -60
  144. package/src/styles/variables/legacy-variables.css +0 -0
  145. package/src/styles/variables/neptune-tokens.css +0 -0
  146. package/src/styles/variables/zindex.css +0 -0
  147. package/src/summary/Summary.css +0 -81
  148. package/src/switch/Switch.css +0 -63
  149. package/src/switchOption/SwitchOption.css +0 -4
  150. package/src/table/Table.css +0 -274
  151. package/src/tabs/Tabs.css +0 -121
  152. package/src/tile/Tile.css +0 -68
  153. package/src/tooltip/Tooltip.css +0 -50
  154. package/src/typeahead/Typeahead.css +0 -187
  155. package/src/typeahead/typeaheadOption/TypeaheadOption.css +0 -9
  156. package/src/upload/Upload.css +0 -34
  157. package/src/uploadInput/UploadInput.css +0 -18
  158. package/src/uploadInput/uploadButton/UploadButton.css +0 -90
  159. package/src/uploadInput/uploadItem/UploadItem.css +0 -166
@@ -1,37 +0,0 @@
1
- .status-circle.negative,
2
- .status-circle.error {
3
- background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
4
- }
5
- .status-circle.negative .status-icon,
6
- .status-circle.error .status-icon {
7
- color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
8
- }
9
- .status-circle.positive,
10
- .status-circle.success {
11
- background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
12
- }
13
- .status-circle.positive .status-icon,
14
- .status-circle.success .status-icon {
15
- color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
16
- }
17
- .status-circle.warning,
18
- .status-circle.pending {
19
- background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
20
- }
21
- .status-circle.warning .status-icon,
22
- .status-circle.pending .status-icon {
23
- color: var(--color-sentiment-interactive-control, var(--color-dark));
24
- }
25
- .status-circle.neutral,
26
- .status-circle.info {
27
- background-color: #5d7079;
28
- background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
29
- }
30
- .status-circle.neutral .status-icon,
31
- .status-circle.info .status-icon {
32
- color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
33
- }
34
- .np-theme-personal--bright-green .status-circle.neutral .status-icon,
35
- .np-theme-personal--bright-green .status-circle.info .status-icon {
36
- color: var(--color-sentiment-interactive-control, var(--color-white));
37
- }
@@ -1,77 +0,0 @@
1
- .tw-stepper {
2
- padding-bottom: 24px;
3
- width: 100%;
4
- }
5
- @media only screen and (max-width: 599.98px) {
6
- .tw-stepper {
7
- padding-bottom: 0;
8
- }
9
- }
10
- .tw-stepper__step {
11
- position: absolute;
12
- top: 0;
13
- list-style-type: none;
14
- }
15
- .tw-stepper__step--active .tw-stepper__step-label {
16
- cursor: default;
17
- color: #37517e;
18
- color: var(--color-content-primary);
19
- }
20
- .tw-stepper__step--clickable .tw-stepper__step-label {
21
- color: #0097c7;
22
- color: var(--color-content-accent);
23
- transition: color 0.15s ease-in-out;
24
- line-height: 0;
25
- border-radius: 2px;
26
- }
27
- .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
28
- color: #5d7079;
29
- color: var(--color-content-secondary);
30
- top: 0;
31
- }
32
- .tw-stepper__step--has-tooltip {
33
- cursor: pointer;
34
- }
35
- @media screen and (min-width: 600px) and (max-width: 1159.98px) {
36
- .tw-stepper__step:first-child .tooltip-inner {
37
- transform: translateX(calc(50% - 32px));
38
- }
39
- .tw-stepper__step:last-child .tooltip-inner {
40
- transform: translateX(calc(-50% + 32px));
41
- }
42
- }
43
- .tw-stepper__step-label {
44
- position: absolute;
45
- top: 0;
46
- color: #5d7079;
47
- color: var(--color-content-secondary);
48
- transition: color 0.6s ease-in-out;
49
- white-space: nowrap;
50
- transform: translateX(-50%) ;
51
- }
52
- [dir="rtl"] .tw-stepper__step-label {
53
- transform: translateX(50%) ;
54
- }
55
- .tw-stepper .tooltip {
56
- top: 24px !important;
57
- white-space: nowrap;
58
- }
59
- .tw-stepper .tooltip .tooltip-inner {
60
- max-width: 100%;
61
- }
62
- .tw-stepper .tw-tooltip-container {
63
- display: inline-block;
64
- }
65
- .tw-stepper-steps {
66
- position: relative;
67
- padding: 0 ;
68
- }
69
- [dir="rtl"] .tw-stepper-steps {
70
- padding: 0 ;
71
- }
72
- .progress-bar {
73
- -webkit-backface-visibility: hidden;
74
- background-color: var(--color-interactive-primary);
75
- transition: width 0.6s ease-in-out;
76
- will-change: width;
77
- }
@@ -1,255 +0,0 @@
1
- .tw-chevron {
2
- display: inline-block;
3
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
4
- }
5
- .tw-chevron.top {
6
- transform: rotate(0deg);
7
- }
8
- .tw-chevron.right {
9
- transform: rotate(90deg);
10
- }
11
- [dir="rtl"] .tw-chevron.right {
12
- transform: rotate(-90deg);
13
- }
14
- .tw-chevron.right-sigle-direction {
15
- transform: rotate(90deg) !important;
16
- }
17
- .tw-chevron.bottom {
18
- transform: rotate(180deg);
19
- }
20
- .tw-chevron.left {
21
- transform: rotate(270deg);
22
- }
23
- [dir="rtl"] .tw-chevron.left {
24
- transform: rotate(-270deg);
25
- }
26
- .tw-chevron.left-single-direction {
27
- transform: rotate(270deg) !important;
28
- }
29
- .chevron-color {
30
- color: #0097c7;
31
- color: var(--color-content-accent);
32
- }
33
- .np-theme-personal .chevron-color {
34
- color: var(--color-interactive-primary);
35
- }
36
- .decision {
37
- cursor: pointer;
38
- margin-bottom: 0 !important;
39
- border: 0;
40
- align-items: center;
41
- transition: background-color ease 350ms;
42
- background-color: transparent;
43
- display: block;
44
- }
45
- .decision:not(.np-option):focus-visible,
46
- .decision:not(.np-option):has(:focus-visible) {
47
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
48
- outline-offset: 0;
49
- outline-offset: var(--ring-outline-offset);
50
- --ring-outline-offset: 0;
51
- }
52
- .decision__title {
53
- margin: 0;
54
- color: #37517e;
55
- color: var(--color-content-primary);
56
- line-height: 1.2;
57
- line-height: var(--line-height-title);
58
- letter-spacing: 0;
59
- font-size: 1.125rem;
60
- font-size: var(--font-size-18);
61
- font-weight: 600;
62
- font-weight: var(--font-weight-semi-bold);
63
- letter-spacing: -0.014em;
64
- line-height: 135%;
65
- }
66
- @supports (hyphenate-limit-chars: 1) {
67
- .decision__title {
68
- hyphens: auto;
69
- hyphenate-limit-chars: 7 3;
70
- }
71
- @media (min-width: 840px) {
72
- .decision__title {
73
- hyphenate-limit-chars: 8 3;
74
- }
75
- }
76
- @media (min-width: 1160px) {
77
- .decision__title {
78
- hyphenate-limit-chars: 10 4 3;
79
- }
80
- }
81
- }
82
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
83
- .decision__title {
84
- hyphens: auto;
85
- -webkit-hyphenate-limit-before: 3;
86
- -webkit-hyphenate-limit-after: 3;
87
- }
88
- @media (min-width: 1160px) {
89
- .decision__title {
90
- -webkit-hyphenate-limit-before: 4;
91
- }
92
- }
93
- }
94
- .decision__title + p,
95
- .decision__title + ul:not(.list-unstyled),
96
- .decision__title + ol:not(.list-unstyled) {
97
- margin-top: 8px;
98
- margin-top: var(--size-8);
99
- }
100
- .decision__content {
101
- font-size: 0.875rem;
102
- font-size: var(--font-size-14);
103
- line-height: 155%;
104
- letter-spacing: -0.006em;
105
- font-weight: 400;
106
- font-weight: var(--font-weight-regular);
107
- margin-top: 4px;
108
- margin-top: var(--size-4);
109
- }
110
- .decision + .decision {
111
- margin-top: -1px;
112
- }
113
- .decision dd:last-child {
114
- margin-bottom: 0;
115
- }
116
- .decision dl {
117
- margin-top: 8px;
118
- margin-top: var(--size-8);
119
- }
120
- .decision .media,
121
- .decision.media {
122
- width: 100%;
123
- padding: 16px 12px;
124
- padding: var(--size-16) var(--size-12);
125
- }
126
- .np-theme-personal .decision .media,
127
- .np-theme-personal .decision.media {
128
- padding: 16px;
129
- padding: var(--size-16);
130
- }
131
- .decision .media .media-left,
132
- .decision.media .media-left {
133
- display: none;
134
- }
135
- .decision .media .media-body,
136
- .decision.media .media-body {
137
- color: #5d7079;
138
- color: var(--color-content-secondary);
139
- }
140
- @media (min-width: 320.02px) {
141
- .decision .media .media-left,
142
- .decision.media .media-left {
143
- display: block;
144
- }
145
- }
146
- .decision:not(.disabled):hover {
147
- background-color: rgba(134,167,189,0.07059);
148
- }
149
- .decision:not(.disabled):hover .circle-inverse {
150
- background-color: #ffffff;
151
- background-color: var(--color-background-screen);
152
- }
153
- .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
154
- background-color: rgba(134,167,189,0.10196);
155
- background-color: var(--color-background-neutral);
156
- }
157
- .decision:not(.disabled):hover .tw-checkbox-button,
158
- .decision:not(.disabled):hover .tw-radio-button {
159
- border-color: #00a2dd;
160
- border-color: var(--color-interactive-accent);
161
- }
162
- .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
163
- .np-theme-personal .decision:not(.disabled):hover .tw-radio-button {
164
- border-color: transparent;
165
- }
166
- .decision.decision-complex {
167
- align-items: initial;
168
- }
169
- .np-theme-personal .decision:not(.disabled):hover {
170
- background-color: var(--color-background-screen-hover);
171
- }
172
- .media {
173
- display: flex;
174
- align-items: center;
175
- }
176
- .media-body {
177
- flex: 1;
178
- }
179
- .media-body > *:last-child {
180
- margin-bottom: 0;
181
- }
182
- .media-middle {
183
- align-self: center;
184
- }
185
- .media-bottom {
186
- align-self: flex-end;
187
- }
188
- /* Images/elements as the media anchor */
189
- .media-object {
190
- display: block;
191
- }
192
- /* Alignment */
193
- .media-right {
194
- padding-left: 16px;
195
- padding-left: var(--size-16);
196
- }
197
- [dir="rtl"] .media-right {
198
- padding-right: 16px;
199
- padding-right: var(--size-16);
200
- padding-left: 0;
201
- padding-left: initial;
202
- }
203
- .media-left {
204
- padding-right: 16px;
205
- padding-right: var(--size-16);
206
- }
207
- [dir="rtl"] .media-left {
208
- padding-left: 16px;
209
- padding-left: var(--size-16);
210
- padding-right: 0;
211
- padding-right: initial;
212
- }
213
- @media (max-width: 320px) {
214
- .media-right,
215
- .media-left {
216
- padding-left: 32px;
217
- padding-left: var(--size-32);
218
- }
219
- [dir="rtl"] .media-right,
220
- [dir="rtl"] .media-left {
221
- padding-right: 32px;
222
- padding-right: var(--size-32);
223
- padding-left: 0;
224
- padding-left: initial;
225
- }
226
- }
227
- /* Headings */
228
- .media-heading {
229
- margin-top: 0;
230
- margin-bottom: 0;
231
- }
232
- /* Media list variation */
233
- .media-list {
234
- padding-left: 0;
235
- list-style: none;
236
- }
237
- [dir="rtl"] .media-list {
238
- padding-right: 0;
239
- padding-left: 0;
240
- padding-left: initial;
241
- }
242
- /* Fix text-ellipsis issue with text in dropdown */
243
- .dropdown-menu .media-body {
244
- overflow: hidden;
245
- }
246
- .accordion-item {
247
- display: block;
248
- }
249
- .accordion-item .chevron {
250
- vertical-align: middle;
251
- }
252
- .accordion-item.decision:not(.disabled):hover {
253
- background-color: #ffffff;
254
- background-color: var(--color-background-elevated);
255
- }