@transferwise/components 0.0.0-experimental-9b6c3f8 → 0.0.0-experimental-0c7c46a

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 (224) 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/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -1
  18. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
  19. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -1
  20. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
  21. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js +2 -2
  22. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
  23. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs +2 -2
  24. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
  25. package/build/Inputs/SelectInput/Option/SelectInputOption.js +1 -1
  26. package/build/Inputs/SelectInput/Option/SelectInputOption.js.map +1 -1
  27. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs +1 -1
  28. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -1
  29. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js +3 -3
  30. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -1
  31. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +3 -3
  32. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -1
  33. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js +2 -2
  34. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
  35. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs +2 -2
  36. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
  37. package/build/Label/Label.js +1 -1
  38. package/build/Label/Label.js.map +1 -1
  39. package/build/Label/Label.mjs +1 -1
  40. package/build/Label/Label.mjs.map +1 -1
  41. package/build/Stepper/Stepper.js +1 -1
  42. package/build/Stepper/Stepper.js.map +1 -1
  43. package/build/Stepper/Stepper.mjs +1 -1
  44. package/build/Stepper/Stepper.mjs.map +1 -1
  45. package/build/Table/Header/TableHeader.js +1 -1
  46. package/build/Table/Header/TableHeader.js.map +1 -1
  47. package/build/Table/Header/TableHeader.mjs +1 -1
  48. package/build/Table/Header/TableHeader.mjs.map +1 -1
  49. package/build/Tabs/Tab/Tab.js +1 -1
  50. package/build/Tabs/Tab/Tab.js.map +1 -1
  51. package/build/Tabs/Tab/Tab.mjs +1 -1
  52. package/build/Tabs/Tab/Tab.mjs.map +1 -1
  53. package/build/Tag/Tag.js +1 -1
  54. package/build/Tag/Tag.js.map +1 -1
  55. package/build/Tag/Tag.mjs +1 -1
  56. package/build/Tag/Tag.mjs.map +1 -1
  57. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js +2 -2
  58. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map +1 -1
  59. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs +2 -2
  60. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map +1 -1
  61. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js +2 -2
  62. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map +1 -1
  63. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs +2 -2
  64. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map +1 -1
  65. package/build/_deprecated/ActionButton/ActionButton.js +1 -1
  66. package/build/_deprecated/ActionButton/ActionButton.js.map +1 -1
  67. package/build/_deprecated/ActionButton/ActionButton.mjs +1 -1
  68. package/build/_deprecated/ActionButton/ActionButton.mjs.map +1 -1
  69. package/build/_deprecated/Avatar/Avatar.js +1 -1
  70. package/build/_deprecated/Avatar/Avatar.js.map +1 -1
  71. package/build/_deprecated/Avatar/Avatar.mjs +1 -1
  72. package/build/_deprecated/Avatar/Avatar.mjs.map +1 -1
  73. package/build/_deprecated/Select/Select.js +2 -2
  74. package/build/_deprecated/Select/Select.js.map +1 -1
  75. package/build/_deprecated/Select/Select.mjs +2 -2
  76. package/build/_deprecated/Select/Select.mjs.map +1 -1
  77. package/build/common/PropsValues/typography.js +0 -6
  78. package/build/common/PropsValues/typography.js.map +1 -1
  79. package/build/common/PropsValues/typography.mjs +0 -6
  80. package/build/common/PropsValues/typography.mjs.map +1 -1
  81. package/build/main.css +1533 -2923
  82. package/build/styles/Accordion/Accordion.css +1 -2
  83. package/build/styles/Body/Body.css +1 -1
  84. package/build/styles/Chips/Chip/Chip.css +2 -4
  85. package/build/styles/Decision/Decision.css +1 -2
  86. package/build/styles/Inputs/Input/Input.css +66 -62
  87. package/build/styles/Inputs/TextArea/TextArea.css +66 -62
  88. package/build/styles/MoneyInput/MoneyInput.css +3 -6
  89. package/build/styles/Popover/Popover.css +47 -3
  90. package/build/styles/ProgressBar/ProgressBar.css +1 -2
  91. package/build/styles/Table/Table.css +5 -15
  92. package/build/styles/Tile/Tile.css +1 -2
  93. package/build/styles/Typeahead/Typeahead.css +2 -4
  94. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
  95. package/build/styles/_deprecated/Select/Select.css +11 -44
  96. package/build/styles/css/accordion.css +52 -23
  97. package/build/styles/css/button-groups.css +8 -29
  98. package/build/styles/css/buttons.css +2 -26
  99. package/build/styles/css/decision.css +52 -23
  100. package/build/styles/css/dropdowns.css +62 -39
  101. package/build/styles/css/droppable.css +8 -28
  102. package/build/styles/css/footer.css +14 -41
  103. package/build/styles/css/input-groups.css +165 -172
  104. package/build/styles/css/list-group.css +45 -0
  105. package/build/styles/css/navbar.css +62 -39
  106. package/build/styles/css/neptune-addons.css +0 -15
  107. package/build/styles/css/neptune-core.css +526 -250
  108. package/build/styles/css/neptune.css +1486 -2841
  109. package/build/styles/css/popovers.css +60 -35
  110. package/build/styles/css/sequences.css +1 -6
  111. package/build/styles/css/tooltip.css +7 -27
  112. package/build/styles/less/neptune-tokens.less +48 -0
  113. package/build/styles/main.css +1533 -2923
  114. package/build/styles/props/neptune-tokens.css +1 -802
  115. package/build/styles/styles/less/accordion.css +52 -23
  116. package/build/styles/styles/less/button-groups.css +8 -29
  117. package/build/styles/styles/less/buttons.css +2 -26
  118. package/build/styles/styles/less/decision.css +52 -23
  119. package/build/styles/styles/less/dropdowns.css +62 -39
  120. package/build/styles/styles/less/droppable.css +8 -28
  121. package/build/styles/styles/less/footer.css +14 -41
  122. package/build/styles/styles/less/forms/bootstrap-forms.css +91 -137
  123. package/build/styles/styles/less/input-groups.css +165 -172
  124. package/build/styles/styles/less/list-group.css +45 -0
  125. package/build/styles/styles/less/navbar.css +62 -39
  126. package/build/styles/styles/less/neptune-addons.css +0 -15
  127. package/build/styles/styles/less/neptune-core.css +526 -250
  128. package/build/styles/styles/less/neptune.css +1486 -2841
  129. package/build/styles/styles/less/popovers.css +60 -35
  130. package/build/styles/styles/less/sequences.css +1 -6
  131. package/build/styles/styles/less/tooltip.css +7 -27
  132. package/build/types/common/PropsValues/typography.d.ts +1 -13
  133. package/build/types/common/PropsValues/typography.d.ts.map +1 -1
  134. package/package.json +1 -1
  135. package/src/Accordion/Accordion.css +1 -2
  136. package/src/Accordion/Accordion.less +1 -2
  137. package/src/Body/Body.css +1 -1
  138. package/src/Body/Body.less +1 -1
  139. package/src/Body/Body.test.tsx +4 -4
  140. package/src/Body/Body.tsx +2 -2
  141. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  142. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  143. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  144. package/src/Chips/Chip/Chip.css +2 -4
  145. package/src/Chips/Chip/Chip.less +1 -2
  146. package/src/Decision/Decision.css +1 -2
  147. package/src/Decision/Decision.less +1 -2
  148. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  149. package/src/Display/_stories/Display.story.tsx +6 -20
  150. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  151. package/src/Inputs/Input/Input.css +66 -62
  152. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -2
  153. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  154. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  155. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +2 -2
  156. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  157. package/src/Inputs/TextArea/TextArea.css +66 -62
  158. package/src/Inputs/_common.less +5 -5
  159. package/src/Label/Label.tsx +1 -1
  160. package/src/MoneyInput/MoneyInput.css +3 -6
  161. package/src/MoneyInput/MoneyInput.less +4 -7
  162. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  163. package/src/Popover/Popover.css +47 -3
  164. package/src/Popover/Popover.less +1 -1
  165. package/src/ProgressBar/ProgressBar.css +1 -2
  166. package/src/ProgressBar/ProgressBar.less +11 -12
  167. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  168. package/src/Stepper/Stepper.tsx +1 -1
  169. package/src/Table/Header/TableHeader.tsx +1 -1
  170. package/src/Table/StatusText/TableStatusText.test.tsx +5 -5
  171. package/src/Table/Table.css +5 -15
  172. package/src/Table/Table.less +6 -17
  173. package/src/Tabs/Tab/Tab.tsx +1 -1
  174. package/src/Tag/Tag.tsx +1 -1
  175. package/src/Tag/_stories/Tag.story.tsx +1 -1
  176. package/src/Tile/Tile.css +1 -2
  177. package/src/Tile/Tile.less +1 -2
  178. package/src/Typeahead/Typeahead.css +2 -4
  179. package/src/Typeahead/Typeahead.less +1 -2
  180. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  181. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -2
  182. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  183. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  184. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
  185. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +1 -2
  186. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  187. package/src/_deprecated/Select/Select.css +11 -44
  188. package/src/_deprecated/Select/Select.less +5 -10
  189. package/src/_deprecated/Select/Select.tsx +2 -2
  190. package/src/common/PropsValues/typography.ts +1 -20
  191. package/src/main.css +1533 -2923
  192. package/src/styles/less/accordion.css +52 -23
  193. package/src/styles/less/addons/_background-utilities.less +0 -5
  194. package/src/styles/less/button-groups.css +8 -29
  195. package/src/styles/less/button-groups.less +2 -3
  196. package/src/styles/less/buttons.css +2 -26
  197. package/src/styles/less/buttons.less +1 -1
  198. package/src/styles/less/core/_typography.less +221 -67
  199. package/src/styles/less/decision.css +52 -23
  200. package/src/styles/less/decision.less +2 -2
  201. package/src/styles/less/dropdowns.css +62 -39
  202. package/src/styles/less/dropdowns.less +5 -6
  203. package/src/styles/less/droppable.css +8 -28
  204. package/src/styles/less/droppable.less +4 -4
  205. package/src/styles/less/footer.css +14 -41
  206. package/src/styles/less/footer.less +3 -4
  207. package/src/styles/less/forms/bootstrap-forms.css +91 -137
  208. package/src/styles/less/forms/bootstrap-forms.less +57 -70
  209. package/src/styles/less/input-groups.css +165 -172
  210. package/src/styles/less/input-groups.less +5 -5
  211. package/src/styles/less/list-group.css +45 -0
  212. package/src/styles/less/list-group.less +4 -7
  213. package/src/styles/less/mixins/_text-emphasis.less +1 -7
  214. package/src/styles/less/navbar.css +62 -39
  215. package/src/styles/less/neptune-addons.css +0 -15
  216. package/src/styles/less/neptune-core.css +526 -250
  217. package/src/styles/less/neptune.bundle.less +0 -4
  218. package/src/styles/less/neptune.css +1486 -2841
  219. package/src/styles/less/popovers.css +60 -35
  220. package/src/styles/less/popovers.less +3 -3
  221. package/src/styles/less/sequences.css +1 -6
  222. package/src/styles/less/sequences.less +2 -7
  223. package/src/styles/less/tooltip.css +7 -27
  224. package/src/styles/less/tooltip.less +1 -1
@@ -9,8 +9,7 @@
9
9
  background-color: transparent;
10
10
  }
11
11
  .np-accordion-item.np-accordion-item--dark .media-body,
12
- .np-accordion-item.np-accordion-item--dark .np-text-title-body,
13
- .np-accordion-item.np-accordion-item--dark .wds-text-title-body {
12
+ .np-accordion-item.np-accordion-item--dark .np-text-title-body {
14
13
  color: #ffffff;
15
14
  }
16
15
  .np-accordion-item__content {
@@ -1,3 +1,3 @@
1
- .wds-text--pre-line {
1
+ .np-text--pre-line {
2
2
  white-space: pre-line;
3
3
  }
@@ -134,14 +134,12 @@
134
134
  .np-theme-personal .np-chip.np-chip--removable {
135
135
  position: relative;
136
136
  }
137
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
138
- .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
137
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
139
138
  padding-inline-end: 24px;
140
139
  padding-inline-end: var(--size-24);
141
140
  }
142
141
  @media (max-width: 320px) {
143
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
144
- .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
142
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
145
143
  padding-inline-end: 48px;
146
144
  padding-inline-end: var(--size-48);
147
145
  }
@@ -1,8 +1,7 @@
1
1
  .np-decision .decision {
2
2
  display: flex;
3
3
  }
4
- .np-decision__tile--small .np-text-title-subsection,
5
- .np-decision__tile--small .wds-text-title-subsection {
4
+ .np-decision__tile--small .np-text-title-subsection {
6
5
  font-size: 1rem;
7
6
  font-size: var(--font-size-16);
8
7
  line-height: 1.2;
@@ -1,65 +1,4 @@
1
- .np-form-control--size-lg {
2
- margin-block-end: initial;
3
- }
4
- .np-form-control--size-sm {
5
- word-wrap: break-word;
6
- }
7
- @supports (hyphenate-limit-chars: 1) {
8
- .np-form-control--size-sm {
9
- hyphens: auto;hyphenate-limit-chars: 7 3;
10
- }
11
- @media (min-width: 840px) {
12
- .np-form-control--size-sm {
13
- hyphenate-limit-chars: 8 3;
14
- }
15
- }
16
- @media (min-width: 1160px) {
17
- .np-form-control--size-sm {
18
- hyphenate-limit-chars: 10 4 3;
19
- }
20
- }
21
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
22
- .np-form-control--size-sm {
23
- hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
24
- }
25
- @media (min-width: 1160px) {
26
- .np-form-control--size-sm {
27
- -webkit-hyphenate-limit-before: 4;
28
- }
29
- }
30
- }.np-form-control--size-auto,
31
- .np-form-control--size-md {
32
- word-wrap: break-word;
33
- }
34
- @supports (hyphenate-limit-chars: 1) {
35
- .np-form-control--size-auto,
36
- .np-form-control--size-md {
37
- hyphens: auto;hyphenate-limit-chars: 7 3;
38
- }
39
- @media (min-width: 840px) {
40
- .np-form-control--size-auto,
41
- .np-form-control--size-md {
42
- hyphenate-limit-chars: 8 3;
43
- }
44
- }
45
- @media (min-width: 1160px) {
46
- .np-form-control--size-auto,
47
- .np-form-control--size-md {
48
- hyphenate-limit-chars: 10 4 3;
49
- }
50
- }
51
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
52
- .np-form-control--size-auto,
53
- .np-form-control--size-md {
54
- hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
55
- }
56
- @media (min-width: 1160px) {
57
- .np-form-control--size-auto,
58
- .np-form-control--size-md {
59
- -webkit-hyphenate-limit-before: 4;
60
- }
61
- }
62
- }.np-form-control {
1
+ .np-form-control {
63
2
  --ring-width: 1px;
64
3
  --ring-color: var(--color-interactive-secondary);
65
4
  border: none;
@@ -100,6 +39,12 @@
100
39
  --ring-color: var(--color-interactive-primary);
101
40
  }
102
41
  .np-form-control--size-auto {
42
+ font-weight: 400;
43
+ font-weight: var(--font-weight-regular);
44
+ font-size: 1rem;
45
+ font-size: var(--font-size-16);
46
+ line-height: 150%;
47
+ letter-spacing: -0.011em;
103
48
  word-wrap: break-word;
104
49
  padding-block-start: 12px;
105
50
  padding-block-start: var(--size-12);
@@ -141,6 +86,12 @@
141
86
  padding-block-end: 0 !important;
142
87
  }
143
88
  .np-form-control--size-sm {
89
+ font-size: 0.875rem;
90
+ font-size: var(--font-size-14);
91
+ line-height: 155%;
92
+ letter-spacing: -0.006em;
93
+ font-weight: 400;
94
+ font-weight: var(--font-weight-regular);
144
95
  word-wrap: break-word;
145
96
  block-size: 32px !important;
146
97
  block-size: var(--size-32) !important;
@@ -180,6 +131,12 @@
180
131
  }
181
132
  }
182
133
  .np-form-control--size-md {
134
+ font-weight: 400;
135
+ font-weight: var(--font-weight-regular);
136
+ font-size: 1rem;
137
+ font-size: var(--font-size-16);
138
+ line-height: 150%;
139
+ letter-spacing: -0.011em;
183
140
  word-wrap: break-word;
184
141
  block-size: 48px !important;
185
142
  block-size: var(--size-48) !important;
@@ -219,10 +176,57 @@
219
176
  }
220
177
  }
221
178
  .np-form-control--size-lg {
179
+ margin: 0;
180
+ color: #37517e;
181
+ color: var(--color-content-primary);
182
+ line-height: 1.2;
183
+ line-height: var(--line-height-title);
184
+ letter-spacing: 0;
185
+ word-wrap: break-word;
222
186
  margin-block-end: initial;
187
+ font-size: 1.375rem;
188
+ font-size: var(--font-size-22);
189
+ font-weight: 600;
190
+ font-weight: var(--font-weight-semi-bold);
191
+ letter-spacing: -0.018em;
192
+ line-height: 125%;
223
193
  block-size: 72px !important;
224
194
  block-size: var(--size-72) !important;
225
195
  }
196
+ @supports (hyphenate-limit-chars: 1) {
197
+ .np-form-control--size-lg {
198
+ hyphens: auto;
199
+ hyphenate-limit-chars: 7 3;
200
+ }
201
+ @media (min-width: 840px) {
202
+ .np-form-control--size-lg {
203
+ hyphenate-limit-chars: 8 3;
204
+ }
205
+ }
206
+ @media (min-width: 1160px) {
207
+ .np-form-control--size-lg {
208
+ hyphenate-limit-chars: 10 4 3;
209
+ }
210
+ }
211
+ }
212
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
213
+ .np-form-control--size-lg {
214
+ hyphens: auto;
215
+ -webkit-hyphenate-limit-before: 3;
216
+ -webkit-hyphenate-limit-after: 3;
217
+ }
218
+ @media (min-width: 1160px) {
219
+ .np-form-control--size-lg {
220
+ -webkit-hyphenate-limit-before: 4;
221
+ }
222
+ }
223
+ }
224
+ .np-form-control--size-lg + p,
225
+ .np-form-control--size-lg + ul:not(.list-unstyled),
226
+ .np-form-control--size-lg + ol:not(.list-unstyled) {
227
+ margin-block-start: 8px;
228
+ margin-block-start: var(--size-8);
229
+ }
226
230
  .np-input::-moz-placeholder {
227
231
  color: #768e9c;
228
232
  color: var(--color-content-tertiary);
@@ -1,65 +1,4 @@
1
- .np-form-control--size-lg {
2
- margin-block-end: initial;
3
- }
4
- .np-form-control--size-sm {
5
- word-wrap: break-word;
6
- }
7
- @supports (hyphenate-limit-chars: 1) {
8
- .np-form-control--size-sm {
9
- hyphens: auto;hyphenate-limit-chars: 7 3;
10
- }
11
- @media (min-width: 840px) {
12
- .np-form-control--size-sm {
13
- hyphenate-limit-chars: 8 3;
14
- }
15
- }
16
- @media (min-width: 1160px) {
17
- .np-form-control--size-sm {
18
- hyphenate-limit-chars: 10 4 3;
19
- }
20
- }
21
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
22
- .np-form-control--size-sm {
23
- hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
24
- }
25
- @media (min-width: 1160px) {
26
- .np-form-control--size-sm {
27
- -webkit-hyphenate-limit-before: 4;
28
- }
29
- }
30
- }.np-form-control--size-auto,
31
- .np-form-control--size-md {
32
- word-wrap: break-word;
33
- }
34
- @supports (hyphenate-limit-chars: 1) {
35
- .np-form-control--size-auto,
36
- .np-form-control--size-md {
37
- hyphens: auto;hyphenate-limit-chars: 7 3;
38
- }
39
- @media (min-width: 840px) {
40
- .np-form-control--size-auto,
41
- .np-form-control--size-md {
42
- hyphenate-limit-chars: 8 3;
43
- }
44
- }
45
- @media (min-width: 1160px) {
46
- .np-form-control--size-auto,
47
- .np-form-control--size-md {
48
- hyphenate-limit-chars: 10 4 3;
49
- }
50
- }
51
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
52
- .np-form-control--size-auto,
53
- .np-form-control--size-md {
54
- hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
55
- }
56
- @media (min-width: 1160px) {
57
- .np-form-control--size-auto,
58
- .np-form-control--size-md {
59
- -webkit-hyphenate-limit-before: 4;
60
- }
61
- }
62
- }.np-form-control {
1
+ .np-form-control {
63
2
  --ring-width: 1px;
64
3
  --ring-color: var(--color-interactive-secondary);
65
4
  border: none;
@@ -100,6 +39,12 @@
100
39
  --ring-color: var(--color-interactive-primary);
101
40
  }
102
41
  .np-form-control--size-auto {
42
+ font-weight: 400;
43
+ font-weight: var(--font-weight-regular);
44
+ font-size: 1rem;
45
+ font-size: var(--font-size-16);
46
+ line-height: 150%;
47
+ letter-spacing: -0.011em;
103
48
  word-wrap: break-word;
104
49
  padding-block-start: 12px;
105
50
  padding-block-start: var(--size-12);
@@ -141,6 +86,12 @@
141
86
  padding-block-end: 0 !important;
142
87
  }
143
88
  .np-form-control--size-sm {
89
+ font-size: 0.875rem;
90
+ font-size: var(--font-size-14);
91
+ line-height: 155%;
92
+ letter-spacing: -0.006em;
93
+ font-weight: 400;
94
+ font-weight: var(--font-weight-regular);
144
95
  word-wrap: break-word;
145
96
  block-size: 32px !important;
146
97
  block-size: var(--size-32) !important;
@@ -180,6 +131,12 @@
180
131
  }
181
132
  }
182
133
  .np-form-control--size-md {
134
+ font-weight: 400;
135
+ font-weight: var(--font-weight-regular);
136
+ font-size: 1rem;
137
+ font-size: var(--font-size-16);
138
+ line-height: 150%;
139
+ letter-spacing: -0.011em;
183
140
  word-wrap: break-word;
184
141
  block-size: 48px !important;
185
142
  block-size: var(--size-48) !important;
@@ -219,10 +176,57 @@
219
176
  }
220
177
  }
221
178
  .np-form-control--size-lg {
179
+ margin: 0;
180
+ color: #37517e;
181
+ color: var(--color-content-primary);
182
+ line-height: 1.2;
183
+ line-height: var(--line-height-title);
184
+ letter-spacing: 0;
185
+ word-wrap: break-word;
222
186
  margin-block-end: initial;
187
+ font-size: 1.375rem;
188
+ font-size: var(--font-size-22);
189
+ font-weight: 600;
190
+ font-weight: var(--font-weight-semi-bold);
191
+ letter-spacing: -0.018em;
192
+ line-height: 125%;
223
193
  block-size: 72px !important;
224
194
  block-size: var(--size-72) !important;
225
195
  }
196
+ @supports (hyphenate-limit-chars: 1) {
197
+ .np-form-control--size-lg {
198
+ hyphens: auto;
199
+ hyphenate-limit-chars: 7 3;
200
+ }
201
+ @media (min-width: 840px) {
202
+ .np-form-control--size-lg {
203
+ hyphenate-limit-chars: 8 3;
204
+ }
205
+ }
206
+ @media (min-width: 1160px) {
207
+ .np-form-control--size-lg {
208
+ hyphenate-limit-chars: 10 4 3;
209
+ }
210
+ }
211
+ }
212
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
213
+ .np-form-control--size-lg {
214
+ hyphens: auto;
215
+ -webkit-hyphenate-limit-before: 3;
216
+ -webkit-hyphenate-limit-after: 3;
217
+ }
218
+ @media (min-width: 1160px) {
219
+ .np-form-control--size-lg {
220
+ -webkit-hyphenate-limit-before: 4;
221
+ }
222
+ }
223
+ }
224
+ .np-form-control--size-lg + p,
225
+ .np-form-control--size-lg + ul:not(.list-unstyled),
226
+ .np-form-control--size-lg + ol:not(.list-unstyled) {
227
+ margin-block-start: 8px;
228
+ margin-block-start: var(--size-8);
229
+ }
226
230
  .np-text-area {
227
231
  min-block-size: 72px;
228
232
  min-block-size: var(--size-72);
@@ -4,8 +4,7 @@
4
4
  .tw-money-input .tw-money-input__fixed-currency {
5
5
  padding-inline-start: 0 !important;
6
6
  }
7
- .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection,
8
- .tw-money-input .tw-money-input__fixed-currency .wds-text-title-subsection {
7
+ .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection {
9
8
  color: #768e9c;
10
9
  color: var(--color-content-tertiary);
11
10
  font-weight: 600;
@@ -21,16 +20,14 @@
21
20
  .tw-money-input.input-group-sm .form-control {
22
21
  min-block-size: 34px;
23
22
  }
24
- .tw-money-input.input-group-sm .np-text-title-subsection,
25
- .tw-money-input.input-group-sm .wds-text-title-subsection {
23
+ .tw-money-input.input-group-sm .np-text-title-subsection {
26
24
  font-size: 0.875rem;
27
25
  font-size: var(--font-size-14);
28
26
  }
29
27
  .tw-money-input.input-group-md .form-control {
30
28
  min-block-size: 53px;
31
29
  }
32
- .tw-money-input.input-group-md .np-text-title-subsection,
33
- .tw-money-input.input-group-md .wds-text-title-subsection {
30
+ .tw-money-input.input-group-md .np-text-title-subsection {
34
31
  font-size: 1rem;
35
32
  font-size: var(--font-size-16);
36
33
  }
@@ -1,6 +1,3 @@
1
- .np-popover__container.np-bottom-sheet .np-popover__title {
2
- margin-block-end: initial;
3
- }
4
1
  .np-theme-personal .np-popover__container {
5
2
  border-radius: 16px;
6
3
  border-radius: var(--radius-medium);
@@ -26,7 +23,54 @@
26
23
  padding: var(--size-24);
27
24
  }
28
25
  .np-popover__container.np-bottom-sheet .np-popover__title {
26
+ margin: 0;
27
+ color: #37517e;
28
+ color: var(--color-content-primary);
29
+ line-height: 1.2;
30
+ line-height: var(--line-height-title);
31
+ letter-spacing: 0;
32
+ word-wrap: break-word;
29
33
  margin-block-end: initial;
34
+ font-weight: 600;
35
+ font-weight: var(--font-weight-semi-bold);
36
+ font-size: 1.625rem;
37
+ font-size: var(--font-size-26);
38
+ letter-spacing: -0.02em;
39
+ line-height: 122%;
40
+ }
41
+ @supports (hyphenate-limit-chars: 1) {
42
+ .np-popover__container.np-bottom-sheet .np-popover__title {
43
+ hyphens: auto;
44
+ hyphenate-limit-chars: 7 3;
45
+ }
46
+ @media (min-width: 840px) {
47
+ .np-popover__container.np-bottom-sheet .np-popover__title {
48
+ hyphenate-limit-chars: 8 3;
49
+ }
50
+ }
51
+ @media (min-width: 1160px) {
52
+ .np-popover__container.np-bottom-sheet .np-popover__title {
53
+ hyphenate-limit-chars: 10 4 3;
54
+ }
55
+ }
56
+ }
57
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
58
+ .np-popover__container.np-bottom-sheet .np-popover__title {
59
+ hyphens: auto;
60
+ -webkit-hyphenate-limit-before: 3;
61
+ -webkit-hyphenate-limit-after: 3;
62
+ }
63
+ @media (min-width: 1160px) {
64
+ .np-popover__container.np-bottom-sheet .np-popover__title {
65
+ -webkit-hyphenate-limit-before: 4;
66
+ }
67
+ }
68
+ }
69
+ .np-popover__container.np-bottom-sheet .np-popover__title + p,
70
+ .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
71
+ .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
72
+ margin-block-start: 8px;
73
+ margin-block-start: var(--size-8);
30
74
  }
31
75
  .np-popover__container.np-bottom-sheet .np-popover__content {
32
76
  padding-block: 32px;
@@ -1,5 +1,4 @@
1
- .np-progress-bar__title .h4,
2
- .np-progress-bar__title .wds-text-title-body {
1
+ .np-progress-bar__title .h4 {
3
2
  color: #37517e;
4
3
  color: var(--color-content-primary);
5
4
  margin-block-end: 4px;
@@ -40,16 +40,10 @@
40
40
  }
41
41
  .np-table-inner-container {
42
42
  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
43
- background-position: left center,
44
- right center,
45
- left center,
46
- right center;
43
+ background-position: left center, right center, left center, right center;
47
44
  background-repeat: no-repeat;
48
45
  background-color: var(--color-contrast-overlay);
49
- background-size: 15px 100%,
50
- 15px 100%,
51
- 15px 100%,
52
- 15px 100%;
46
+ background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
53
47
  background-attachment: local, local, scroll, scroll;
54
48
  overflow-x: auto;
55
49
  border-radius: 10px;
@@ -144,9 +138,7 @@
144
138
  padding-inline-end: 0;
145
139
  }
146
140
  .np-table-header.np-table-header--right > .np-text-body-default,
147
- .np-table-cell.np-table-cell--right > .np-text-body-default,
148
- .np-table-header.np-table-header--right > .wds-text-body-default,
149
- .np-table-cell.np-table-cell--right > .wds-text-body-default {
141
+ .np-table-cell.np-table-cell--right > .np-text-body-default {
150
142
  text-align: end;
151
143
  }
152
144
  .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
@@ -205,8 +197,7 @@
205
197
  .np-table-cell--primary {
206
198
  min-inline-size: 200px;
207
199
  }
208
- .np-table-cell--currency .np-text-body-default,
209
- .np-table-cell--currency .wds-text-body-default {
200
+ .np-table-cell--currency .np-text-body-default {
210
201
  white-space: nowrap;
211
202
  }
212
203
  .np-table-cell .tw-chevron {
@@ -223,8 +214,7 @@
223
214
  background-color: var(--color-background-neutral);
224
215
  padding: 0;
225
216
  }
226
- .np-table-cell .np-text-body-default-bold,
227
- .np-table-cell .wds-text-body-default-bold {
217
+ .np-table-cell .np-text-body-default-bold {
228
218
  display: flex;
229
219
  align-items: center;
230
220
  color: #37517e;
@@ -25,8 +25,7 @@
25
25
  .np-theme-personal .np-tile.decision:active {
26
26
  background-color: var(--color-background-neutral-active);
27
27
  }
28
- .np-theme-personal .np-tile.decision .np-text-body-default,
29
- .np-theme-personal .np-tile.decision .wds-text-body-default {
28
+ .np-theme-personal .np-tile.decision .np-text-body-default {
30
29
  color: #5d7079;
31
30
  color: var(--color-content-secondary);
32
31
  }
@@ -180,14 +180,12 @@
180
180
  .np-theme-personal .typeahead .np-chip {
181
181
  margin-block-start: 9px !important;
182
182
  }
183
- .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
184
- .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
183
+ .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
185
184
  padding-inline-end: 16px;
186
185
  padding-inline-end: var(--size-16);
187
186
  }
188
187
  @media (max-width: 320px) {
189
- .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
190
- .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
188
+ .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
191
189
  padding-inline-end: 32px;
192
190
  padding-inline-end: var(--size-32);
193
191
  }
@@ -8,8 +8,7 @@
8
8
  color: var(--color-sentiment-content-primary);
9
9
  margin-block-end: 0;
10
10
  }
11
- .critical-comms .alert .np-text-title-body,
12
- .critical-comms .alert .wds-text-title-body {
11
+ .critical-comms .alert .np-text-title-body {
13
12
  color: var(--color-sentiment-content-primary);
14
13
  }
15
14
  .critical-comms .status-circle.negative {
@@ -1,30 +1,4 @@
1
- .np-dropdown-menu > li > a {
2
- word-wrap: break-word;
3
- }
4
- @supports (hyphenate-limit-chars: 1) {
5
- .np-dropdown-menu > li > a {
6
- hyphens: auto;hyphenate-limit-chars: 7 3;
7
- }
8
- @media (min-width: 840px) {
9
- .np-dropdown-menu > li > a {
10
- hyphenate-limit-chars: 8 3;
11
- }
12
- }
13
- @media (min-width: 1160px) {
14
- .np-dropdown-menu > li > a {
15
- hyphenate-limit-chars: 10 4 3;
16
- }
17
- }
18
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
- .np-dropdown-menu > li > a {
20
- hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
21
- }
22
- @media (min-width: 1160px) {
23
- .np-dropdown-menu > li > a {
24
- -webkit-hyphenate-limit-before: 4;
25
- }
26
- }
27
- }.np-select .np-dropdown-toggle {
1
+ .np-select .np-dropdown-toggle {
28
2
  background-color: #ffffff;
29
3
  background-color: var(--color-background-screen);
30
4
  border: 1px solid #c9cbce;
@@ -172,6 +146,12 @@
172
146
  border-radius: var(--radius-small);
173
147
  color: #37517e;
174
148
  color: var(--color-content-primary);
149
+ font-size: 0.875rem;
150
+ font-size: var(--font-size-14);
151
+ line-height: 155%;
152
+ letter-spacing: -0.006em;
153
+ font-weight: 400;
154
+ font-weight: var(--font-weight-regular);
175
155
  word-wrap: break-word;
176
156
  }
177
157
  .np-theme-personal .np-dropdown-menu > li > a {
@@ -250,12 +230,8 @@
250
230
  .np-dropdown-menu > .selected > a strong {
251
231
  color: inherit;
252
232
  }
253
- .np-dropdown-menu > .active > a .body-2,
254
- .np-dropdown-menu > .selected > a .body-2,
255
233
  .np-dropdown-menu > .active > a .np-text-body-default,
256
- .np-dropdown-menu > .selected > a .np-text-body-default,
257
- .np-dropdown-menu > .active > a .wds-text-body-default,
258
- .np-dropdown-menu > .selected > a .wds-text-body-default {
234
+ .np-dropdown-menu > .selected > a .np-text-body-default {
259
235
  color: #c9cbce;
260
236
  }
261
237
  .np-dropdown-menu .np-select-filter,
@@ -295,9 +271,7 @@
295
271
  vertical-align: middle;
296
272
  }
297
273
  .np-select .np-text-body-default,
298
- .np-dropdown-menu .np-text-body-default,
299
- .np-select .wds-text-body-default,
300
- .np-dropdown-menu .wds-text-body-default {
274
+ .np-dropdown-menu .np-text-body-default {
301
275
  color: #5d7079;
302
276
  color: var(--color-content-secondary);
303
277
  }
@@ -358,13 +332,7 @@
358
332
  .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
359
333
  .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
360
334
  .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
361
- .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
362
- .np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
363
- .np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
364
- .np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
365
- .np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
366
- .np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
367
- .np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
335
+ .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
368
336
  color: var(--color-interactive-primary);
369
337
  }
370
338
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -372,8 +340,7 @@
372
340
  background-color: var(--color-background-neutral-active) !important;
373
341
  }
374
342
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
375
- .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
376
- .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
343
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
377
344
  color: var(--color-interactive-primary);
378
345
  }
379
346
  .np-theme-personal .np-dropdown-menu .np-dropdown-item {