@transferwise/components 0.0.0-experimental-86c6017 → 0.0.0-experimental-8b6a8e3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/build/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 +6 -0
  78. package/build/common/PropsValues/typography.js.map +1 -1
  79. package/build/common/PropsValues/typography.mjs +6 -0
  80. package/build/common/PropsValues/typography.mjs.map +1 -1
  81. package/build/main.css +117 -98
  82. package/build/styles/Accordion/Accordion.css +2 -1
  83. package/build/styles/Body/Body.css +1 -1
  84. package/build/styles/Chips/Chip/Chip.css +4 -2
  85. package/build/styles/Decision/Decision.css +2 -1
  86. package/build/styles/Inputs/Input/Input.css +0 -38
  87. package/build/styles/Inputs/TextArea/TextArea.css +0 -38
  88. package/build/styles/MoneyInput/MoneyInput.css +6 -3
  89. package/build/styles/Popover/Popover.css +0 -38
  90. package/build/styles/ProgressBar/ProgressBar.css +2 -1
  91. package/build/styles/Table/Table.css +15 -5
  92. package/build/styles/Tile/Tile.css +2 -1
  93. package/build/styles/Typeahead/Typeahead.css +4 -2
  94. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  95. package/build/styles/_deprecated/Select/Select.css +17 -4
  96. package/build/styles/main.css +117 -98
  97. package/build/types/Body/Body.d.ts +2 -2
  98. package/build/types/IconButton/IconButton.d.ts +1 -1
  99. package/build/types/MoneyInput/MoneyInput.d.ts +1 -1
  100. package/build/types/MoneyInput/MoneyInput.d.ts.map +1 -1
  101. package/build/types/Title/Title.d.ts +2 -2
  102. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
  103. package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
  104. package/build/types/common/PropsValues/typography.d.ts +13 -1
  105. package/build/types/common/PropsValues/typography.d.ts.map +1 -1
  106. package/package.json +1 -1
  107. package/src/Accordion/Accordion.css +2 -1
  108. package/src/Accordion/Accordion.less +2 -1
  109. package/src/Body/Body.css +1 -1
  110. package/src/Body/Body.less +1 -1
  111. package/src/Body/Body.test.tsx +4 -4
  112. package/src/Body/Body.tsx +2 -2
  113. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  114. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  115. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  116. package/src/Chips/Chip/Chip.css +4 -2
  117. package/src/Chips/Chip/Chip.less +2 -1
  118. package/src/Decision/Decision.css +2 -1
  119. package/src/Decision/Decision.less +2 -1
  120. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  121. package/src/Display/_stories/Display.story.tsx +20 -6
  122. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  123. package/src/Inputs/Input/Input.css +0 -38
  124. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -2
  125. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  126. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  127. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +2 -2
  128. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  129. package/src/Inputs/TextArea/TextArea.css +0 -38
  130. package/src/Inputs/_common.less +5 -5
  131. package/src/Label/Label.tsx +1 -1
  132. package/src/MoneyInput/MoneyInput.css +6 -3
  133. package/src/MoneyInput/MoneyInput.less +7 -4
  134. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  135. package/src/Popover/Popover.css +0 -38
  136. package/src/Popover/Popover.less +1 -1
  137. package/src/ProgressBar/ProgressBar.css +2 -1
  138. package/src/ProgressBar/ProgressBar.less +12 -11
  139. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  140. package/src/Stepper/Stepper.tsx +1 -1
  141. package/src/Table/Header/TableHeader.tsx +1 -1
  142. package/src/Table/StatusText/TableStatusText.test.tsx +5 -5
  143. package/src/Table/Table.css +15 -5
  144. package/src/Table/Table.less +17 -6
  145. package/src/Tabs/Tab/Tab.tsx +1 -1
  146. package/src/Tag/Tag.tsx +1 -1
  147. package/src/Tag/_stories/Tag.story.tsx +1 -1
  148. package/src/Tile/Tile.css +2 -1
  149. package/src/Tile/Tile.less +2 -1
  150. package/src/Typeahead/Typeahead.css +4 -2
  151. package/src/Typeahead/Typeahead.less +2 -1
  152. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  153. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -2
  154. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  155. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  156. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  157. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +2 -1
  158. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  159. package/src/_deprecated/Select/Select.css +17 -4
  160. package/src/_deprecated/Select/Select.less +10 -5
  161. package/src/_deprecated/Select/Select.tsx +2 -2
  162. package/src/common/PropsValues/typography.ts +20 -1
  163. package/src/main.css +117 -98
package/build/main.css CHANGED
@@ -22036,7 +22036,8 @@ a[data-toggle="tooltip"] {
22036
22036
  color: var(--color-sentiment-content-primary);
22037
22037
  margin-block-end: 0;
22038
22038
  }
22039
- .critical-comms .alert .np-text-title-body {
22039
+ .critical-comms .alert .np-text-title-body,
22040
+ .critical-comms .alert .wds-text-title-body {
22040
22041
  color: var(--color-sentiment-content-primary);
22041
22042
  }
22042
22043
  .critical-comms .status-circle.negative {
@@ -22100,7 +22101,8 @@ a[data-toggle="tooltip"] {
22100
22101
  background-color: transparent;
22101
22102
  }
22102
22103
  .np-accordion-item.np-accordion-item--dark .media-body,
22103
- .np-accordion-item.np-accordion-item--dark .np-text-title-body {
22104
+ .np-accordion-item.np-accordion-item--dark .np-text-title-body,
22105
+ .np-accordion-item.np-accordion-item--dark .wds-text-title-body {
22104
22106
  color: #ffffff;
22105
22107
  }
22106
22108
  .np-accordion-item__content {
@@ -22749,7 +22751,7 @@ a[data-toggle="tooltip"] {
22749
22751
  border-width: 1px;
22750
22752
  border-color: var(--badge-border-color);
22751
22753
  }
22752
- .np-text--pre-line {
22754
+ .wds-text--pre-line {
22753
22755
  white-space: pre-line;
22754
22756
  }
22755
22757
  .wds-Button {
@@ -23600,12 +23602,14 @@ a[data-toggle="tooltip"] {
23600
23602
  .np-theme-personal .np-chip.np-chip--removable {
23601
23603
  position: relative;
23602
23604
  }
23603
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
23605
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
23606
+ .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
23604
23607
  padding-inline-end: 24px;
23605
23608
  padding-inline-end: var(--size-24);
23606
23609
  }
23607
23610
  @media (max-width: 320px) {
23608
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
23611
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
23612
+ .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
23609
23613
  padding-inline-end: 48px;
23610
23614
  padding-inline-end: var(--size-48);
23611
23615
  }
@@ -24197,7 +24201,8 @@ button.np-option {
24197
24201
  .np-decision .decision {
24198
24202
  display: flex;
24199
24203
  }
24200
- .np-decision__tile--small .np-text-title-subsection {
24204
+ .np-decision__tile--small .np-text-title-subsection,
24205
+ .np-decision__tile--small .wds-text-title-subsection {
24201
24206
  font-size: 1rem;
24202
24207
  font-size: var(--font-size-16);
24203
24208
  line-height: 1.2;
@@ -24677,6 +24682,16 @@ button.np-option {
24677
24682
  --ring-color: var(--color-interactive-primary);
24678
24683
  }
24679
24684
  .np-form-control--size-auto {
24685
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
24686
+ font-family: var(--wds-font-family-regular);
24687
+ font-weight: 400;
24688
+ font-weight: var(--wds-font-weight-body-large-regular);
24689
+ font-size: 1rem;
24690
+ font-size: var(--wds-font-size-body-large);
24691
+ line-height: 1.5;
24692
+ line-height: var(--wds-line-height-body-large);
24693
+ letter-spacing: -0.011em;
24694
+ letter-spacing: var(--wds-letter-spacing-body-large);
24680
24695
  word-wrap: break-word;
24681
24696
  padding-block-start: 12px;
24682
24697
  padding-block-start: var(--size-12);
@@ -24718,6 +24733,16 @@ button.np-option {
24718
24733
  padding-block-end: 0 !important;
24719
24734
  }
24720
24735
  .np-form-control--size-sm {
24736
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
24737
+ font-family: var(--wds-font-family-regular);
24738
+ font-weight: 400;
24739
+ font-weight: var(--wds-font-weight-body-regular);
24740
+ font-size: 0.875rem;
24741
+ font-size: var(--wds-font-size-body);
24742
+ line-height: 1.55;
24743
+ line-height: var(--wds-line-height-body);
24744
+ letter-spacing: -0.006em;
24745
+ letter-spacing: var(--wds-letter-spacing-body);
24721
24746
  word-wrap: break-word;
24722
24747
  block-size: 32px !important;
24723
24748
  block-size: var(--size-32) !important;
@@ -24757,6 +24782,16 @@ button.np-option {
24757
24782
  }
24758
24783
  }
24759
24784
  .np-form-control--size-md {
24785
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
24786
+ font-family: var(--wds-font-family-regular);
24787
+ font-weight: 400;
24788
+ font-weight: var(--wds-font-weight-body-large-regular);
24789
+ font-size: 1rem;
24790
+ font-size: var(--wds-font-size-body-large);
24791
+ line-height: 1.5;
24792
+ line-height: var(--wds-line-height-body-large);
24793
+ letter-spacing: -0.011em;
24794
+ letter-spacing: var(--wds-letter-spacing-body-large);
24760
24795
  word-wrap: break-word;
24761
24796
  block-size: 48px !important;
24762
24797
  block-size: var(--size-48) !important;
@@ -24796,48 +24831,20 @@ button.np-option {
24796
24831
  }
24797
24832
  }
24798
24833
  .np-form-control--size-lg {
24799
- margin: 0;
24800
- color: #37517e;
24801
- color: var(--color-content-primary);
24802
- word-wrap: break-word;
24834
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
24835
+ font-family: var(--wds-font-family-regular);
24836
+ font-weight: 600;
24837
+ font-weight: var(--wds-font-weight-title-subsection);
24838
+ font-size: 1.375rem;
24839
+ font-size: var(--wds-font-size-title-subsection);
24840
+ line-height: 1.25;
24841
+ line-height: var(--wds-line-height-title-subsection);
24842
+ letter-spacing: -0.018em;
24843
+ letter-spacing: var(--wds-letter-spacing-title-subsection);
24803
24844
  margin-block-end: initial;
24804
24845
  block-size: 72px !important;
24805
24846
  block-size: var(--size-72) !important;
24806
24847
  }
24807
- @supports (hyphenate-limit-chars: 1) {
24808
- .np-form-control--size-lg {
24809
- hyphens: auto;
24810
- hyphenate-limit-chars: 7 3;
24811
- }
24812
- @media (min-width: 840px) {
24813
- .np-form-control--size-lg {
24814
- hyphenate-limit-chars: 8 3;
24815
- }
24816
- }
24817
- @media (min-width: 1160px) {
24818
- .np-form-control--size-lg {
24819
- hyphenate-limit-chars: 10 4 3;
24820
- }
24821
- }
24822
- }
24823
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
24824
- .np-form-control--size-lg {
24825
- hyphens: auto;
24826
- -webkit-hyphenate-limit-before: 3;
24827
- -webkit-hyphenate-limit-after: 3;
24828
- }
24829
- @media (min-width: 1160px) {
24830
- .np-form-control--size-lg {
24831
- -webkit-hyphenate-limit-before: 4;
24832
- }
24833
- }
24834
- }
24835
- .np-form-control--size-lg + p,
24836
- .np-form-control--size-lg + ul:not(.list-unstyled),
24837
- .np-form-control--size-lg + ol:not(.list-unstyled) {
24838
- margin-block-start: 8px;
24839
- margin-block-start: var(--size-8);
24840
- }
24841
24848
  .np-input::-moz-placeholder {
24842
24849
  color: #768e9c;
24843
24850
  color: var(--color-content-tertiary);
@@ -26480,7 +26487,8 @@ button.np-link {
26480
26487
  .tw-money-input .tw-money-input__fixed-currency {
26481
26488
  padding-inline-start: 0 !important;
26482
26489
  }
26483
- .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection {
26490
+ .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection,
26491
+ .tw-money-input .tw-money-input__fixed-currency .wds-text-title-subsection {
26484
26492
  color: #768e9c;
26485
26493
  color: var(--color-content-tertiary);
26486
26494
  font-weight: 600;
@@ -26496,14 +26504,16 @@ button.np-link {
26496
26504
  .tw-money-input.input-group-sm .form-control {
26497
26505
  min-block-size: 34px;
26498
26506
  }
26499
- .tw-money-input.input-group-sm .np-text-title-subsection {
26507
+ .tw-money-input.input-group-sm .np-text-title-subsection,
26508
+ .tw-money-input.input-group-sm .wds-text-title-subsection {
26500
26509
  font-size: 0.875rem;
26501
26510
  font-size: var(--font-size-14);
26502
26511
  }
26503
26512
  .tw-money-input.input-group-md .form-control {
26504
26513
  min-block-size: 53px;
26505
26514
  }
26506
- .tw-money-input.input-group-md .np-text-title-subsection {
26515
+ .tw-money-input.input-group-md .np-text-title-subsection,
26516
+ .tw-money-input.input-group-md .wds-text-title-subsection {
26507
26517
  font-size: 1rem;
26508
26518
  font-size: var(--font-size-16);
26509
26519
  }
@@ -26889,46 +26899,18 @@ button.np-link {
26889
26899
  padding: var(--size-24);
26890
26900
  }
26891
26901
  .np-popover__container.np-bottom-sheet .np-popover__title {
26892
- margin: 0;
26893
- color: #37517e;
26894
- color: var(--color-content-primary);
26895
- word-wrap: break-word;
26902
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
26903
+ font-family: var(--wds-font-family-regular);
26904
+ font-weight: 600;
26905
+ font-weight: var(--wds-font-weight-title-section);
26906
+ font-size: 1.625rem;
26907
+ font-size: var(--wds-font-size-title-section);
26908
+ line-height: 1.22;
26909
+ line-height: var(--wds-line-height-title-section);
26910
+ letter-spacing: -0.02em;
26911
+ letter-spacing: var(--wds-letter-spacing-title-section);
26896
26912
  margin-block-end: initial;
26897
26913
  }
26898
- @supports (hyphenate-limit-chars: 1) {
26899
- .np-popover__container.np-bottom-sheet .np-popover__title {
26900
- hyphens: auto;
26901
- hyphenate-limit-chars: 7 3;
26902
- }
26903
- @media (min-width: 840px) {
26904
- .np-popover__container.np-bottom-sheet .np-popover__title {
26905
- hyphenate-limit-chars: 8 3;
26906
- }
26907
- }
26908
- @media (min-width: 1160px) {
26909
- .np-popover__container.np-bottom-sheet .np-popover__title {
26910
- hyphenate-limit-chars: 10 4 3;
26911
- }
26912
- }
26913
- }
26914
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
26915
- .np-popover__container.np-bottom-sheet .np-popover__title {
26916
- hyphens: auto;
26917
- -webkit-hyphenate-limit-before: 3;
26918
- -webkit-hyphenate-limit-after: 3;
26919
- }
26920
- @media (min-width: 1160px) {
26921
- .np-popover__container.np-bottom-sheet .np-popover__title {
26922
- -webkit-hyphenate-limit-before: 4;
26923
- }
26924
- }
26925
- }
26926
- .np-popover__container.np-bottom-sheet .np-popover__title + p,
26927
- .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
26928
- .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
26929
- margin-block-start: 8px;
26930
- margin-block-start: var(--size-8);
26931
- }
26932
26914
  .np-popover__container.np-bottom-sheet .np-popover__content {
26933
26915
  padding-block: 32px;
26934
26916
  padding-block: var(--size-32);
@@ -27973,6 +27955,16 @@ button.np-link {
27973
27955
  border-radius: var(--radius-small);
27974
27956
  color: #37517e;
27975
27957
  color: var(--color-content-primary);
27958
+ font-family: 'Inter', Helvetica, Arial, sans-serif;
27959
+ font-family: var(--wds-font-family-regular);
27960
+ font-weight: 400;
27961
+ font-weight: var(--wds-font-weight-body-regular);
27962
+ font-size: 0.875rem;
27963
+ font-size: var(--wds-font-size-body);
27964
+ line-height: 1.55;
27965
+ line-height: var(--wds-line-height-body);
27966
+ letter-spacing: -0.006em;
27967
+ letter-spacing: var(--wds-letter-spacing-body);
27976
27968
  word-wrap: break-word;
27977
27969
  }
27978
27970
  .np-theme-personal .np-dropdown-menu > li > a {
@@ -28051,8 +28043,12 @@ button.np-link {
28051
28043
  .np-dropdown-menu > .selected > a strong {
28052
28044
  color: inherit;
28053
28045
  }
28046
+ .np-dropdown-menu > .active > a .body-2,
28047
+ .np-dropdown-menu > .selected > a .body-2,
28054
28048
  .np-dropdown-menu > .active > a .np-text-body-default,
28055
- .np-dropdown-menu > .selected > a .np-text-body-default {
28049
+ .np-dropdown-menu > .selected > a .np-text-body-default,
28050
+ .np-dropdown-menu > .active > a .wds-text-body-default,
28051
+ .np-dropdown-menu > .selected > a .wds-text-body-default {
28056
28052
  color: #c9cbce;
28057
28053
  }
28058
28054
  .np-dropdown-menu .np-select-filter,
@@ -28092,7 +28088,9 @@ button.np-link {
28092
28088
  vertical-align: middle;
28093
28089
  }
28094
28090
  .np-select .np-text-body-default,
28095
- .np-dropdown-menu .np-text-body-default {
28091
+ .np-dropdown-menu .np-text-body-default,
28092
+ .np-select .wds-text-body-default,
28093
+ .np-dropdown-menu .wds-text-body-default {
28096
28094
  color: #5d7079;
28097
28095
  color: var(--color-content-secondary);
28098
28096
  }
@@ -28153,7 +28151,13 @@ button.np-link {
28153
28151
  .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
28154
28152
  .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
28155
28153
  .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
28156
- .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
28154
+ .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
28155
+ .np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
28156
+ .np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
28157
+ .np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
28158
+ .np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
28159
+ .np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
28160
+ .np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
28157
28161
  color: var(--color-interactive-primary);
28158
28162
  }
28159
28163
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -28161,7 +28165,8 @@ button.np-link {
28161
28165
  background-color: var(--color-background-neutral-active) !important;
28162
28166
  }
28163
28167
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
28164
- .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
28168
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
28169
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
28165
28170
  color: var(--color-interactive-primary);
28166
28171
  }
28167
28172
  .np-theme-personal .np-dropdown-menu .np-dropdown-item {
@@ -28586,10 +28591,16 @@ button.np-link {
28586
28591
  }
28587
28592
  .np-table-inner-container {
28588
28593
  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));
28589
- background-position: left center, right center, left center, right center;
28594
+ background-position: left center,
28595
+ right center,
28596
+ left center,
28597
+ right center;
28590
28598
  background-repeat: no-repeat;
28591
28599
  background-color: var(--color-contrast-overlay);
28592
- background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
28600
+ background-size: 15px 100%,
28601
+ 15px 100%,
28602
+ 15px 100%,
28603
+ 15px 100%;
28593
28604
  background-attachment: local, local, scroll, scroll;
28594
28605
  overflow-x: auto;
28595
28606
  border-radius: 10px;
@@ -28686,7 +28697,9 @@ button.np-link {
28686
28697
  padding-inline-end: 0;
28687
28698
  }
28688
28699
  .np-table-header.np-table-header--right > .np-text-body-default,
28689
- .np-table-cell.np-table-cell--right > .np-text-body-default {
28700
+ .np-table-cell.np-table-cell--right > .np-text-body-default,
28701
+ .np-table-header.np-table-header--right > .wds-text-body-default,
28702
+ .np-table-cell.np-table-cell--right > .wds-text-body-default {
28690
28703
  text-align: end;
28691
28704
  }
28692
28705
  .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
@@ -28745,7 +28758,8 @@ button.np-link {
28745
28758
  .np-table-cell--primary {
28746
28759
  min-inline-size: 200px;
28747
28760
  }
28748
- .np-table-cell--currency .np-text-body-default {
28761
+ .np-table-cell--currency .np-text-body-default,
28762
+ .np-table-cell--currency .wds-text-body-default {
28749
28763
  white-space: nowrap;
28750
28764
  }
28751
28765
  .np-table-cell .tw-chevron {
@@ -28762,7 +28776,8 @@ button.np-link {
28762
28776
  background-color: var(--color-background-neutral);
28763
28777
  padding: 0;
28764
28778
  }
28765
- .np-table-cell .np-text-body-default-bold {
28779
+ .np-table-cell .np-text-body-default-bold,
28780
+ .np-table-cell .wds-text-body-default-bold {
28766
28781
  display: flex;
28767
28782
  align-items: center;
28768
28783
  color: #37517e;
@@ -28880,7 +28895,8 @@ button.np-link {
28880
28895
  .np-theme-personal .np-tile.decision:active {
28881
28896
  background-color: var(--color-background-neutral-active);
28882
28897
  }
28883
- .np-theme-personal .np-tile.decision .np-text-body-default {
28898
+ .np-theme-personal .np-tile.decision .np-text-body-default,
28899
+ .np-theme-personal .np-tile.decision .wds-text-body-default {
28884
28900
  color: #5d7079;
28885
28901
  color: var(--color-content-secondary);
28886
28902
  }
@@ -29149,12 +29165,14 @@ button.np-link {
29149
29165
  .np-theme-personal .typeahead .np-chip {
29150
29166
  margin-block-start: 9px !important;
29151
29167
  }
29152
- .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
29168
+ .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
29169
+ .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
29153
29170
  padding-inline-end: 16px;
29154
29171
  padding-inline-end: var(--size-16);
29155
29172
  }
29156
29173
  @media (max-width: 320px) {
29157
- .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
29174
+ .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
29175
+ .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
29158
29176
  padding-inline-end: 32px;
29159
29177
  padding-inline-end: var(--size-32);
29160
29178
  }
@@ -29529,7 +29547,8 @@ button.np-link {
29529
29547
  transition-delay: 0.2s;
29530
29548
  }
29531
29549
  }
29532
- .np-progress-bar__title .h4 {
29550
+ .np-progress-bar__title .h4,
29551
+ .np-progress-bar__title .wds-text-title-body {
29533
29552
  color: #37517e;
29534
29553
  color: var(--color-content-primary);
29535
29554
  margin-block-end: 4px;
@@ -9,7 +9,8 @@
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 {
12
+ .np-accordion-item.np-accordion-item--dark .np-text-title-body,
13
+ .np-accordion-item.np-accordion-item--dark .wds-text-title-body {
13
14
  color: #ffffff;
14
15
  }
15
16
  .np-accordion-item__content {
@@ -1,3 +1,3 @@
1
- .np-text--pre-line {
1
+ .wds-text--pre-line {
2
2
  white-space: pre-line;
3
3
  }
@@ -134,12 +134,14 @@
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 {
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 {
138
139
  padding-inline-end: 24px;
139
140
  padding-inline-end: var(--size-24);
140
141
  }
141
142
  @media (max-width: 320px) {
142
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
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 {
143
145
  padding-inline-end: 48px;
144
146
  padding-inline-end: var(--size-48);
145
147
  }
@@ -1,7 +1,8 @@
1
1
  .np-decision .decision {
2
2
  display: flex;
3
3
  }
4
- .np-decision__tile--small .np-text-title-subsection {
4
+ .np-decision__tile--small .np-text-title-subsection,
5
+ .np-decision__tile--small .wds-text-title-subsection {
5
6
  font-size: 1rem;
6
7
  font-size: var(--font-size-16);
7
8
  line-height: 1.2;
@@ -219,48 +219,10 @@
219
219
  }
220
220
  }
221
221
  .np-form-control--size-lg {
222
- margin: 0;
223
- color: #37517e;
224
- color: var(--color-content-primary);
225
- word-wrap: break-word;
226
222
  margin-block-end: initial;
227
223
  block-size: 72px !important;
228
224
  block-size: var(--size-72) !important;
229
225
  }
230
- @supports (hyphenate-limit-chars: 1) {
231
- .np-form-control--size-lg {
232
- hyphens: auto;
233
- hyphenate-limit-chars: 7 3;
234
- }
235
- @media (min-width: 840px) {
236
- .np-form-control--size-lg {
237
- hyphenate-limit-chars: 8 3;
238
- }
239
- }
240
- @media (min-width: 1160px) {
241
- .np-form-control--size-lg {
242
- hyphenate-limit-chars: 10 4 3;
243
- }
244
- }
245
- }
246
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
247
- .np-form-control--size-lg {
248
- hyphens: auto;
249
- -webkit-hyphenate-limit-before: 3;
250
- -webkit-hyphenate-limit-after: 3;
251
- }
252
- @media (min-width: 1160px) {
253
- .np-form-control--size-lg {
254
- -webkit-hyphenate-limit-before: 4;
255
- }
256
- }
257
- }
258
- .np-form-control--size-lg + p,
259
- .np-form-control--size-lg + ul:not(.list-unstyled),
260
- .np-form-control--size-lg + ol:not(.list-unstyled) {
261
- margin-block-start: 8px;
262
- margin-block-start: var(--size-8);
263
- }
264
226
  .np-input::-moz-placeholder {
265
227
  color: #768e9c;
266
228
  color: var(--color-content-tertiary);
@@ -219,48 +219,10 @@
219
219
  }
220
220
  }
221
221
  .np-form-control--size-lg {
222
- margin: 0;
223
- color: #37517e;
224
- color: var(--color-content-primary);
225
- word-wrap: break-word;
226
222
  margin-block-end: initial;
227
223
  block-size: 72px !important;
228
224
  block-size: var(--size-72) !important;
229
225
  }
230
- @supports (hyphenate-limit-chars: 1) {
231
- .np-form-control--size-lg {
232
- hyphens: auto;
233
- hyphenate-limit-chars: 7 3;
234
- }
235
- @media (min-width: 840px) {
236
- .np-form-control--size-lg {
237
- hyphenate-limit-chars: 8 3;
238
- }
239
- }
240
- @media (min-width: 1160px) {
241
- .np-form-control--size-lg {
242
- hyphenate-limit-chars: 10 4 3;
243
- }
244
- }
245
- }
246
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
247
- .np-form-control--size-lg {
248
- hyphens: auto;
249
- -webkit-hyphenate-limit-before: 3;
250
- -webkit-hyphenate-limit-after: 3;
251
- }
252
- @media (min-width: 1160px) {
253
- .np-form-control--size-lg {
254
- -webkit-hyphenate-limit-before: 4;
255
- }
256
- }
257
- }
258
- .np-form-control--size-lg + p,
259
- .np-form-control--size-lg + ul:not(.list-unstyled),
260
- .np-form-control--size-lg + ol:not(.list-unstyled) {
261
- margin-block-start: 8px;
262
- margin-block-start: var(--size-8);
263
- }
264
226
  .np-text-area {
265
227
  min-block-size: 72px;
266
228
  min-block-size: var(--size-72);
@@ -4,7 +4,8 @@
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 {
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 {
8
9
  color: #768e9c;
9
10
  color: var(--color-content-tertiary);
10
11
  font-weight: 600;
@@ -20,14 +21,16 @@
20
21
  .tw-money-input.input-group-sm .form-control {
21
22
  min-block-size: 34px;
22
23
  }
23
- .tw-money-input.input-group-sm .np-text-title-subsection {
24
+ .tw-money-input.input-group-sm .np-text-title-subsection,
25
+ .tw-money-input.input-group-sm .wds-text-title-subsection {
24
26
  font-size: 0.875rem;
25
27
  font-size: var(--font-size-14);
26
28
  }
27
29
  .tw-money-input.input-group-md .form-control {
28
30
  min-block-size: 53px;
29
31
  }
30
- .tw-money-input.input-group-md .np-text-title-subsection {
32
+ .tw-money-input.input-group-md .np-text-title-subsection,
33
+ .tw-money-input.input-group-md .wds-text-title-subsection {
31
34
  font-size: 1rem;
32
35
  font-size: var(--font-size-16);
33
36
  }
@@ -26,46 +26,8 @@
26
26
  padding: var(--size-24);
27
27
  }
28
28
  .np-popover__container.np-bottom-sheet .np-popover__title {
29
- margin: 0;
30
- color: #37517e;
31
- color: var(--color-content-primary);
32
- word-wrap: break-word;
33
29
  margin-block-end: initial;
34
30
  }
35
- @supports (hyphenate-limit-chars: 1) {
36
- .np-popover__container.np-bottom-sheet .np-popover__title {
37
- hyphens: auto;
38
- hyphenate-limit-chars: 7 3;
39
- }
40
- @media (min-width: 840px) {
41
- .np-popover__container.np-bottom-sheet .np-popover__title {
42
- hyphenate-limit-chars: 8 3;
43
- }
44
- }
45
- @media (min-width: 1160px) {
46
- .np-popover__container.np-bottom-sheet .np-popover__title {
47
- hyphenate-limit-chars: 10 4 3;
48
- }
49
- }
50
- }
51
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
52
- .np-popover__container.np-bottom-sheet .np-popover__title {
53
- hyphens: auto;
54
- -webkit-hyphenate-limit-before: 3;
55
- -webkit-hyphenate-limit-after: 3;
56
- }
57
- @media (min-width: 1160px) {
58
- .np-popover__container.np-bottom-sheet .np-popover__title {
59
- -webkit-hyphenate-limit-before: 4;
60
- }
61
- }
62
- }
63
- .np-popover__container.np-bottom-sheet .np-popover__title + p,
64
- .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
65
- .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
66
- margin-block-start: 8px;
67
- margin-block-start: var(--size-8);
68
- }
69
31
  .np-popover__container.np-bottom-sheet .np-popover__content {
70
32
  padding-block: 32px;
71
33
  padding-block: var(--size-32);
@@ -1,4 +1,5 @@
1
- .np-progress-bar__title .h4 {
1
+ .np-progress-bar__title .h4,
2
+ .np-progress-bar__title .wds-text-title-body {
2
3
  color: #37517e;
3
4
  color: var(--color-content-primary);
4
5
  margin-block-end: 4px;
@@ -40,10 +40,16 @@
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, right center, left center, right center;
43
+ background-position: left center,
44
+ right center,
45
+ left center,
46
+ right center;
44
47
  background-repeat: no-repeat;
45
48
  background-color: var(--color-contrast-overlay);
46
- background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
49
+ background-size: 15px 100%,
50
+ 15px 100%,
51
+ 15px 100%,
52
+ 15px 100%;
47
53
  background-attachment: local, local, scroll, scroll;
48
54
  overflow-x: auto;
49
55
  border-radius: 10px;
@@ -138,7 +144,9 @@
138
144
  padding-inline-end: 0;
139
145
  }
140
146
  .np-table-header.np-table-header--right > .np-text-body-default,
141
- .np-table-cell.np-table-cell--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 {
142
150
  text-align: end;
143
151
  }
144
152
  .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
@@ -197,7 +205,8 @@
197
205
  .np-table-cell--primary {
198
206
  min-inline-size: 200px;
199
207
  }
200
- .np-table-cell--currency .np-text-body-default {
208
+ .np-table-cell--currency .np-text-body-default,
209
+ .np-table-cell--currency .wds-text-body-default {
201
210
  white-space: nowrap;
202
211
  }
203
212
  .np-table-cell .tw-chevron {
@@ -214,7 +223,8 @@
214
223
  background-color: var(--color-background-neutral);
215
224
  padding: 0;
216
225
  }
217
- .np-table-cell .np-text-body-default-bold {
226
+ .np-table-cell .np-text-body-default-bold,
227
+ .np-table-cell .wds-text-body-default-bold {
218
228
  display: flex;
219
229
  align-items: center;
220
230
  color: #37517e;
@@ -25,7 +25,8 @@
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 {
28
+ .np-theme-personal .np-tile.decision .np-text-body-default,
29
+ .np-theme-personal .np-tile.decision .wds-text-body-default {
29
30
  color: #5d7079;
30
31
  color: var(--color-content-secondary);
31
32
  }