@transferwise/components 0.0.0-experimental-7a793eb → 0.0.0-experimental-97fe512

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 (208) hide show
  1. package/build/Body/Body.js +1 -1
  2. package/build/Body/Body.js.map +1 -1
  3. package/build/Body/Body.mjs +1 -1
  4. package/build/Body/Body.mjs.map +1 -1
  5. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +1 -1
  6. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
  7. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +1 -1
  8. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
  9. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +1 -1
  10. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
  11. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +1 -1
  12. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
  13. package/build/Calendar/TableLink/TableLink.js +1 -1
  14. package/build/Calendar/TableLink/TableLink.js.map +1 -1
  15. package/build/Calendar/TableLink/TableLink.mjs +1 -1
  16. package/build/Calendar/TableLink/TableLink.mjs.map +1 -1
  17. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js +1 -1
  18. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map +1 -1
  19. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs +1 -1
  20. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map +1 -1
  21. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -1
  22. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
  23. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -1
  24. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
  25. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js +2 -2
  26. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
  27. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs +2 -2
  28. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
  29. package/build/Inputs/SelectInput/Option/SelectInputOption.js +1 -1
  30. package/build/Inputs/SelectInput/Option/SelectInputOption.js.map +1 -1
  31. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs +1 -1
  32. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -1
  33. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js +3 -3
  34. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -1
  35. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +3 -3
  36. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -1
  37. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js +2 -2
  38. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
  39. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs +2 -2
  40. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
  41. package/build/Label/Label.js +1 -1
  42. package/build/Label/Label.js.map +1 -1
  43. package/build/Label/Label.mjs +1 -1
  44. package/build/Label/Label.mjs.map +1 -1
  45. package/build/Stepper/Stepper.js +1 -1
  46. package/build/Stepper/Stepper.js.map +1 -1
  47. package/build/Stepper/Stepper.mjs +1 -1
  48. package/build/Stepper/Stepper.mjs.map +1 -1
  49. package/build/Table/Header/TableHeader.js +1 -1
  50. package/build/Table/Header/TableHeader.js.map +1 -1
  51. package/build/Table/Header/TableHeader.mjs +1 -1
  52. package/build/Table/Header/TableHeader.mjs.map +1 -1
  53. package/build/Tabs/Tab/Tab.js +1 -1
  54. package/build/Tabs/Tab/Tab.js.map +1 -1
  55. package/build/Tabs/Tab/Tab.mjs +1 -1
  56. package/build/Tabs/Tab/Tab.mjs.map +1 -1
  57. package/build/Tag/Tag.js +1 -1
  58. package/build/Tag/Tag.js.map +1 -1
  59. package/build/Tag/Tag.mjs +1 -1
  60. package/build/Tag/Tag.mjs.map +1 -1
  61. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js +2 -2
  62. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map +1 -1
  63. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs +2 -2
  64. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map +1 -1
  65. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js +2 -2
  66. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map +1 -1
  67. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs +2 -2
  68. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map +1 -1
  69. package/build/_deprecated/ActionButton/ActionButton.js +1 -1
  70. package/build/_deprecated/ActionButton/ActionButton.js.map +1 -1
  71. package/build/_deprecated/ActionButton/ActionButton.mjs +1 -1
  72. package/build/_deprecated/ActionButton/ActionButton.mjs.map +1 -1
  73. package/build/_deprecated/Avatar/Avatar.js +1 -1
  74. package/build/_deprecated/Avatar/Avatar.js.map +1 -1
  75. package/build/_deprecated/Avatar/Avatar.mjs +1 -1
  76. package/build/_deprecated/Avatar/Avatar.mjs.map +1 -1
  77. package/build/_deprecated/Select/Select.js +2 -2
  78. package/build/_deprecated/Select/Select.js.map +1 -1
  79. package/build/_deprecated/Select/Select.mjs +2 -2
  80. package/build/_deprecated/Select/Select.mjs.map +1 -1
  81. package/build/main.css +157 -153
  82. package/build/styles/Accordion/Accordion.css +7 -6
  83. package/build/styles/Body/Body.css +1 -1
  84. package/build/styles/Calendar/Calendar.css +11 -4
  85. package/build/styles/Calendar/TableLink/TableLink.css +11 -4
  86. package/build/styles/Chips/Chip/Chip.css +5 -3
  87. package/build/styles/Decision/Decision.css +4 -3
  88. package/build/styles/Emphasis/Emphasis.css +1 -1
  89. package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css +2 -1
  90. package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css +2 -1
  91. package/build/styles/Inputs/Input/Input.css +5 -41
  92. package/build/styles/Inputs/TextArea/TextArea.css +5 -41
  93. package/build/styles/Label/Label.css +3 -0
  94. package/build/styles/Markup/Markup.css +2 -2
  95. package/build/styles/MoneyInput/MoneyInput.css +9 -6
  96. package/build/styles/Nudge/Nudge.css +3 -3
  97. package/build/styles/Popover/Popover.css +1 -37
  98. package/build/styles/ProgressBar/ProgressBar.css +3 -2
  99. package/build/styles/Prompt/PrimitivePrompt/PrimitivePrompt.css +2 -1
  100. package/build/styles/Snackbar/Snackbar.css +1 -1
  101. package/build/styles/Table/Table.css +18 -8
  102. package/build/styles/Tabs/Tabs.css +3 -3
  103. package/build/styles/Tag/Tag.css +1 -1
  104. package/build/styles/Tile/Tile.css +4 -3
  105. package/build/styles/Typeahead/Typeahead.css +4 -2
  106. package/build/styles/UploadInput/UploadInput.css +1 -1
  107. package/build/styles/_deprecated/ActionButton/ActionButton.css +3 -4
  108. package/build/styles/_deprecated/Avatar/Avatar.css +2 -2
  109. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  110. package/build/styles/_deprecated/Select/Select.css +22 -9
  111. package/build/styles/_deprecated/Summary/Summary.css +2 -2
  112. package/build/styles/common/Circle/Circle.css +1 -1
  113. package/build/styles/common/Option/Option.css +4 -4
  114. package/build/styles/main.css +157 -153
  115. package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
  116. package/package.json +1 -1
  117. package/src/Accordion/Accordion.css +7 -6
  118. package/src/Accordion/Accordion.less +7 -6
  119. package/src/Body/Body.css +1 -1
  120. package/src/Body/Body.less +1 -1
  121. package/src/Body/Body.test.tsx +4 -4
  122. package/src/Body/Body.tsx +2 -2
  123. package/src/Calendar/Calendar.css +11 -4
  124. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  125. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  126. package/src/Calendar/TableLink/TableLink.css +11 -4
  127. package/src/Calendar/TableLink/TableLink.less +14 -4
  128. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  129. package/src/Chips/Chip/Chip.css +5 -3
  130. package/src/Chips/Chip/Chip.less +3 -2
  131. package/src/CircularButton/_stories/CircularButton.story.tsx +6 -16
  132. package/src/Decision/Decision.css +4 -3
  133. package/src/Decision/Decision.less +4 -3
  134. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  135. package/src/Emphasis/Emphasis.css +1 -1
  136. package/src/Emphasis/Emphasis.less +1 -1
  137. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css +2 -1
  138. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less +2 -1
  139. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +1 -4
  140. package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css +2 -1
  141. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  142. package/src/Inputs/Input/Input.css +5 -41
  143. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -2
  144. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  145. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  146. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +2 -2
  147. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  148. package/src/Inputs/TextArea/TextArea.css +5 -41
  149. package/src/Inputs/_common.less +12 -10
  150. package/src/Label/Label.css +3 -0
  151. package/src/Label/Label.less +8 -0
  152. package/src/Label/Label.tsx +1 -1
  153. package/src/Markup/Markup.css +2 -2
  154. package/src/Markup/Markup.less +2 -2
  155. package/src/MoneyInput/MoneyInput.css +9 -6
  156. package/src/MoneyInput/MoneyInput.less +10 -7
  157. package/src/Nudge/Nudge.css +3 -3
  158. package/src/Nudge/Nudge.less +3 -3
  159. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  160. package/src/Popover/Popover.css +1 -37
  161. package/src/Popover/Popover.less +2 -2
  162. package/src/ProgressBar/ProgressBar.css +3 -2
  163. package/src/ProgressBar/ProgressBar.less +12 -11
  164. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css +2 -1
  165. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less +2 -1
  166. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  167. package/src/Snackbar/Snackbar.css +1 -1
  168. package/src/Snackbar/Snackbar.less +1 -1
  169. package/src/Stepper/Stepper.tsx +1 -1
  170. package/src/Table/Header/TableHeader.tsx +1 -1
  171. package/src/Table/StatusText/TableStatusText.test.tsx +5 -5
  172. package/src/Table/Table.css +18 -8
  173. package/src/Table/Table.less +20 -9
  174. package/src/Tabs/Tab/Tab.tsx +1 -1
  175. package/src/Tabs/Tabs.css +3 -3
  176. package/src/Tabs/Tabs.less +3 -3
  177. package/src/Tag/Tag.css +1 -1
  178. package/src/Tag/Tag.less +1 -1
  179. package/src/Tag/Tag.tsx +1 -1
  180. package/src/Tag/_stories/Tag.story.tsx +1 -1
  181. package/src/Tile/Tile.css +4 -3
  182. package/src/Tile/Tile.less +4 -3
  183. package/src/Typeahead/Typeahead.css +4 -2
  184. package/src/Typeahead/Typeahead.less +2 -1
  185. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  186. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -2
  187. package/src/UploadInput/UploadInput.css +1 -1
  188. package/src/UploadInput/UploadInput.less +7 -4
  189. package/src/_deprecated/ActionButton/ActionButton.css +3 -4
  190. package/src/_deprecated/ActionButton/ActionButton.less +4 -5
  191. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  192. package/src/_deprecated/Avatar/Avatar.css +2 -2
  193. package/src/_deprecated/Avatar/Avatar.less +2 -2
  194. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  195. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  196. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +2 -1
  197. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  198. package/src/_deprecated/Select/Select.css +22 -9
  199. package/src/_deprecated/Select/Select.less +14 -10
  200. package/src/_deprecated/Select/Select.tsx +2 -2
  201. package/src/_deprecated/Summary/Summary.css +2 -2
  202. package/src/_deprecated/Summary/Summary.less +2 -2
  203. package/src/common/Circle/Circle.css +1 -1
  204. package/src/common/Circle/Circle.less +1 -1
  205. package/src/common/Option/Option.css +4 -4
  206. package/src/common/Option/Option.less +4 -4
  207. package/src/main.css +157 -153
  208. package/src/main.less +3 -2
@@ -4,10 +4,9 @@
4
4
  padding-block: var(--size-8);
5
5
  padding-inline: var(--size-12);
6
6
  transition: color, background-color 0.15s ease-in-out;
7
- font-weight: var(--font-weight-semi-bold);
8
- font-size: var(--font-size-14);
9
- line-height: var(--line-height-control);
10
- border-radius: var(--radius-small);
7
+ font-weight: var(--wds-font-weight-body-bold);
8
+ font-size: var(--wds-font-size-body);
9
+ line-height: var(--wds-line-height-body);
11
10
  align-items: center;
12
11
  color: var(--color-interactive-control);
13
12
  background-color: var(--color-interactive-accent);
@@ -40,7 +40,7 @@
40
40
  .tw-avatar.tw-avatar--initials,
41
41
  .tw-avatar.tw-avatar--emoji {
42
42
  font-family: Arial, sans-serif;
43
- font-weight: var(--font-weight-semi-bold);
43
+ font-weight: var(--wds-font-weight-body-bold);
44
44
  }
45
45
  .tw-avatar.tw-avatar--initials,
46
46
  .tw-avatar.tw-avatar--icon {
@@ -51,7 +51,7 @@
51
51
  font-family: Arial, sans-serif;
52
52
  }
53
53
  .tw-avatar.tw-avatar--branded .tw-avatar__content {
54
- font-family: var(--font-family-display);
54
+ font-family: var(--wds-font-family-display);
55
55
  font-feature-settings: "ss01";
56
56
  color: var(--color-dark-charcoal);
57
57
  line-height: 1;
@@ -7,7 +7,8 @@
7
7
  color: var(--color-sentiment-content-primary);
8
8
  margin-block-end: 0;
9
9
  }
10
- .critical-comms .alert .np-text-title-body {
10
+ .critical-comms .alert .np-text-title-body,
11
+ .critical-comms .alert .wds-text-title-body {
11
12
  color: var(--color-sentiment-content-primary);
12
13
  }
13
14
  .critical-comms .status-circle.negative {
@@ -29,7 +29,7 @@
29
29
  border: 1px solid var(--color-interactive-secondary);
30
30
  border-radius: var(--radius-small);
31
31
  color: var(--color-content-primary);
32
- font-weight: var(--font-weight-regular);
32
+ font-weight: var(--wds-font-weight-body-regular);
33
33
  overflow: hidden;
34
34
  padding-inline-start: var(--size-16);
35
35
  text-align: start;
@@ -213,8 +213,12 @@
213
213
  .np-dropdown-menu > .selected > a strong {
214
214
  color: inherit;
215
215
  }
216
+ .np-dropdown-menu > .active > a .body-2,
217
+ .np-dropdown-menu > .selected > a .body-2,
216
218
  .np-dropdown-menu > .active > a .np-text-body-default,
217
- .np-dropdown-menu > .selected > a .np-text-body-default {
219
+ .np-dropdown-menu > .selected > a .np-text-body-default,
220
+ .np-dropdown-menu > .active > a .wds-text-body-default,
221
+ .np-dropdown-menu > .selected > a .wds-text-body-default {
218
222
  color: #c9cbce;
219
223
  }
220
224
  .np-dropdown-menu .np-select-filter,
@@ -230,12 +234,12 @@
230
234
  .np-dropdown-menu .np-dropdown-header {
231
235
  padding-block: var(--size-8);
232
236
  padding-inline: var(--size-16);
237
+ white-space: nowrap;
233
238
  color: var(--color-content-secondary);
234
239
  display: block;
235
- font-size: var(--font-size-14);
236
- font-weight: var(--font-weight-regular);
237
- line-height: var(--line-height-body);
238
- white-space: nowrap;
240
+ font-size: var(--wds-font-size-body);
241
+ font-weight: var(--wds-font-weight-body-regular);
242
+ line-height: var(--wds-line-height-body);
239
243
  }
240
244
  .np-select .tw-icon,
241
245
  .np-dropdown-menu .tw-icon,
@@ -246,7 +250,9 @@
246
250
  vertical-align: middle;
247
251
  }
248
252
  .np-select .np-text-body-default,
249
- .np-dropdown-menu .np-text-body-default {
253
+ .np-dropdown-menu .np-text-body-default,
254
+ .np-select .wds-text-body-default,
255
+ .np-dropdown-menu .wds-text-body-default {
250
256
  color: var(--color-content-secondary);
251
257
  }
252
258
  .np-select .tw-icon-search,
@@ -304,7 +310,13 @@
304
310
  .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
305
311
  .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
306
312
  .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
307
- .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
313
+ .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
314
+ .np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
315
+ .np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
316
+ .np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
317
+ .np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
318
+ .np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
319
+ .np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
308
320
  color: var(--color-interactive-primary);
309
321
  }
310
322
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -312,7 +324,8 @@
312
324
  background-color: var(--color-background-neutral-active) !important;
313
325
  }
314
326
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
315
- .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
327
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
328
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
316
329
  color: var(--color-interactive-primary);
317
330
  }
318
331
  .np-theme-personal .np-dropdown-menu .np-dropdown-item {
@@ -7,7 +7,7 @@
7
7
  .np-summary__title {
8
8
  margin-block-start: 2px;
9
9
  line-height: calc(22 / 16);
10
- font-weight: var(--font-weight-semi-bold);
10
+ font-weight: var(--wds-font-weight-body-bold);
11
11
  justify-content: space-between;
12
12
  margin-block-start: 0;
13
13
  }
@@ -44,7 +44,7 @@
44
44
  }
45
45
  .np-summary__description {
46
46
  margin-block-start: var(--size-4);
47
- font-size: var(--font-size-14);
47
+ font-size: var(--wds-font-size-body);
48
48
  line-height: calc(20 / 14);
49
49
  color: var(--color-content-secondary);
50
50
  padding-inline-end: calc(var(--size-24) + var(--size-8));
@@ -6,7 +6,7 @@
6
6
  --circle-border-color: var(--color-border-neutral);
7
7
  --circle-border-width: 1px;
8
8
  font-size: var(--circle-font-size);
9
- font-weight: var(--font-weight-semi-bold);
9
+ font-weight: var(--wds-font-weight-body-bold);
10
10
  line-height: 1;
11
11
  }
12
12
  .np-circle .np-display {
@@ -13,16 +13,16 @@
13
13
  .np-option__title {
14
14
  color: var(--color-content-primary);
15
15
  font-size: 1rem;
16
- font-weight: var(--font-weight-semi-bold);
16
+ font-weight: var(--wds-font-weight-body-bold);
17
17
  letter-spacing: 0;
18
- line-height: var(--line-height-body);
18
+ line-height: var(--wds-line-height-body);
19
19
  margin: 0;
20
20
  }
21
21
  .np-option__body {
22
22
  margin-block-start: var(--size-4);
23
23
  color: var(--color-content-secondary);
24
- font-size: var(--font-size-14);
25
- font-weight: var(--font-weight-regular);
24
+ font-size: var(--wds-font-size-body);
25
+ font-weight: var(--wds-font-weight-body-regular);
26
26
  line-height: 1.42857;
27
27
  }
28
28
  .np-option__sm-media.decision .media-left {