@transferwise/components 0.0.0-experimental-5783280 → 0.0.0-experimental-1887cd9

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 (369) hide show
  1. package/build/Body/Body.js +2 -2
  2. package/build/Body/Body.js.map +1 -1
  3. package/build/Body/Body.mjs +2 -2
  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/common/PropsValues/typography.js +0 -6
  82. package/build/common/PropsValues/typography.js.map +1 -1
  83. package/build/common/PropsValues/typography.mjs +0 -6
  84. package/build/common/PropsValues/typography.mjs.map +1 -1
  85. package/build/main.css +2097 -9250
  86. package/build/styles/Accordion/Accordion.css +6 -7
  87. package/build/styles/Body/Body.css +1 -2
  88. package/build/styles/Calendar/Calendar.css +4 -5
  89. package/build/styles/Calendar/TableLink/TableLink.css +4 -5
  90. package/build/styles/Chips/Chip/Chip.css +3 -5
  91. package/build/styles/Decision/Decision.css +3 -4
  92. package/build/styles/Emphasis/Emphasis.css +1 -1
  93. package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css +1 -2
  94. package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css +1 -2
  95. package/build/styles/Inputs/Input/Input.css +24 -98
  96. package/build/styles/Inputs/TextArea/TextArea.css +24 -98
  97. package/build/styles/Markup/Markup.css +2 -2
  98. package/build/styles/MoneyInput/MoneyInput.css +6 -9
  99. package/build/styles/Nudge/Nudge.css +3 -3
  100. package/build/styles/Popover/Popover.css +7 -30
  101. package/build/styles/ProgressBar/ProgressBar.css +2 -3
  102. package/build/styles/Prompt/PrimitivePrompt/PrimitivePrompt.css +1 -2
  103. package/build/styles/Snackbar/Snackbar.css +1 -1
  104. package/build/styles/Table/Table.css +8 -18
  105. package/build/styles/Tabs/Tabs.css +3 -3
  106. package/build/styles/Tag/Tag.css +1 -1
  107. package/build/styles/Tile/Tile.css +3 -4
  108. package/build/styles/Typeahead/Typeahead.css +2 -4
  109. package/build/styles/UploadInput/UploadInput.css +1 -1
  110. package/build/styles/_deprecated/ActionButton/ActionButton.css +4 -3
  111. package/build/styles/_deprecated/Avatar/Avatar.css +2 -2
  112. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
  113. package/build/styles/_deprecated/Select/Select.css +14 -49
  114. package/build/styles/_deprecated/Summary/Summary.css +2 -2
  115. package/build/styles/common/Circle/Circle.css +1 -1
  116. package/build/styles/common/Option/Option.css +4 -4
  117. package/build/styles/css/accordion.css +11 -53
  118. package/build/styles/css/badge.css +2 -2
  119. package/build/styles/css/button-groups.css +6 -29
  120. package/build/styles/css/buttons.css +11 -35
  121. package/build/styles/css/decision.css +11 -53
  122. package/build/styles/css/dropdowns.css +18 -65
  123. package/build/styles/css/droppable.css +6 -28
  124. package/build/styles/css/footer.css +10 -41
  125. package/build/styles/css/input-groups.css +117 -249
  126. package/build/styles/css/list-group.css +8 -28
  127. package/build/styles/css/modals.css +1 -1
  128. package/build/styles/css/navbar.css +45 -92
  129. package/build/styles/css/navs.css +8 -8
  130. package/build/styles/css/neptune-addons.css +0 -15
  131. package/build/styles/css/neptune-core.css +538 -6244
  132. package/build/styles/css/neptune.css +1961 -8984
  133. package/build/styles/css/panels.css +2 -2
  134. package/build/styles/css/popovers.css +20 -64
  135. package/build/styles/css/progress-bars.css +2 -2
  136. package/build/styles/css/sequences.css +9 -14
  137. package/build/styles/css/table.css +7 -7
  138. package/build/styles/css/tooltip.css +6 -28
  139. package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  140. package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  141. package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  142. package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  143. package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  144. package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  145. package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  146. package/build/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
  147. package/build/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
  148. package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
  149. package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
  150. package/build/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
  151. package/build/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
  152. package/build/styles/less/legacy-variables.less +3 -3
  153. package/build/styles/less/neptune-tokens.less +48 -0
  154. package/build/styles/main.css +2097 -9250
  155. package/build/styles/props/neptune-tokens.css +3 -805
  156. package/build/styles/styles/less/accordion.css +11 -53
  157. package/build/styles/styles/less/badge.css +2 -2
  158. package/build/styles/styles/less/button-groups.css +6 -29
  159. package/build/styles/styles/less/buttons.css +11 -35
  160. package/build/styles/styles/less/decision.css +11 -53
  161. package/build/styles/styles/less/dropdowns.css +18 -65
  162. package/build/styles/styles/less/droppable.css +6 -28
  163. package/build/styles/styles/less/footer.css +10 -41
  164. package/build/styles/styles/less/forms/bootstrap-forms.css +100 -153
  165. package/build/styles/styles/less/forms/checkbox-radio.css +3 -3
  166. package/build/styles/styles/less/input-groups.css +117 -249
  167. package/build/styles/styles/less/list-group.css +8 -28
  168. package/build/styles/styles/less/modals.css +1 -1
  169. package/build/styles/styles/less/navbar.css +45 -92
  170. package/build/styles/styles/less/navs.css +8 -8
  171. package/build/styles/styles/less/neptune-addons.css +0 -15
  172. package/build/styles/styles/less/neptune-core.css +538 -6244
  173. package/build/styles/styles/less/neptune.css +1961 -8984
  174. package/build/styles/styles/less/panels.css +2 -2
  175. package/build/styles/styles/less/popovers.css +20 -64
  176. package/build/styles/styles/less/progress-bars.css +2 -2
  177. package/build/styles/styles/less/sequences.css +9 -14
  178. package/build/styles/styles/less/table.css +7 -7
  179. package/build/styles/styles/less/tooltip.css +6 -28
  180. package/build/types/Body/Body.d.ts +2 -2
  181. package/build/types/Body/Body.d.ts.map +1 -1
  182. package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
  183. package/build/types/IconButton/IconButton.d.ts +1 -1
  184. package/build/types/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -1
  185. package/build/types/Inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -1
  186. package/build/types/MoneyInput/MoneyInput.d.ts +1 -1
  187. package/build/types/MoneyInput/MoneyInput.d.ts.map +1 -1
  188. package/build/types/Stepper/Stepper.d.ts.map +1 -1
  189. package/build/types/Tabs/Tab/Tab.d.ts.map +1 -1
  190. package/build/types/Title/Title.d.ts +2 -2
  191. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
  192. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts.map +1 -1
  193. package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
  194. package/build/types/_deprecated/Select/Select.d.ts.map +1 -1
  195. package/build/types/common/PropsValues/typography.d.ts +1 -13
  196. package/build/types/common/PropsValues/typography.d.ts.map +1 -1
  197. package/package.json +2 -2
  198. package/src/Accordion/Accordion.css +6 -7
  199. package/src/Accordion/Accordion.less +6 -7
  200. package/src/Body/Body.css +1 -2
  201. package/src/Body/Body.less +1 -2
  202. package/src/Body/Body.test.tsx +4 -13
  203. package/src/Body/Body.tsx +3 -4
  204. package/src/Body/_stories/Body.test.story.tsx +0 -42
  205. package/src/Calendar/Calendar.css +4 -5
  206. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  207. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  208. package/src/Calendar/TableLink/TableLink.css +4 -5
  209. package/src/Calendar/TableLink/TableLink.less +4 -5
  210. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  211. package/src/Calendar/_stories/Calendar.test.story.tsx +0 -33
  212. package/src/Chips/Chip/Chip.css +3 -5
  213. package/src/Chips/Chip/Chip.less +2 -3
  214. package/src/CircularButton/_stories/CircularButton.story.tsx +16 -6
  215. package/src/DateInput/_stories/DateInput.rtl.test.story.tsx +0 -46
  216. package/src/Decision/Decision.css +3 -4
  217. package/src/Decision/Decision.less +3 -4
  218. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  219. package/src/Display/_stories/Display.story.tsx +6 -20
  220. package/src/Emphasis/Emphasis.css +1 -1
  221. package/src/Emphasis/Emphasis.less +1 -1
  222. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css +1 -2
  223. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less +1 -2
  224. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +4 -1
  225. package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css +1 -2
  226. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  227. package/src/Inputs/Input/Input.css +24 -98
  228. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -4
  229. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  230. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  231. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +2 -6
  232. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  233. package/src/Inputs/TextArea/TextArea.css +24 -98
  234. package/src/Inputs/_common.less +10 -16
  235. package/src/Label/Label.tsx +1 -1
  236. package/src/Markup/Markup.css +2 -2
  237. package/src/Markup/Markup.less +2 -2
  238. package/src/MoneyInput/MoneyInput.css +6 -9
  239. package/src/MoneyInput/MoneyInput.less +7 -10
  240. package/src/Nudge/Nudge.css +3 -3
  241. package/src/Nudge/Nudge.less +3 -3
  242. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  243. package/src/Popover/Popover.css +7 -30
  244. package/src/Popover/Popover.less +2 -2
  245. package/src/ProgressBar/ProgressBar.css +2 -3
  246. package/src/ProgressBar/ProgressBar.less +11 -12
  247. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css +1 -2
  248. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less +1 -2
  249. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  250. package/src/Snackbar/Snackbar.css +1 -1
  251. package/src/Snackbar/Snackbar.less +1 -1
  252. package/src/Stepper/Stepper.tsx +1 -3
  253. package/src/Table/Header/TableHeader.tsx +1 -1
  254. package/src/Table/StatusText/TableStatusText.test.tsx +5 -20
  255. package/src/Table/Table.css +8 -18
  256. package/src/Table/Table.less +9 -20
  257. package/src/Tabs/Tab/Tab.tsx +5 -11
  258. package/src/Tabs/Tabs.css +3 -3
  259. package/src/Tabs/Tabs.less +3 -3
  260. package/src/Tag/Tag.css +1 -1
  261. package/src/Tag/Tag.less +1 -1
  262. package/src/Tag/Tag.tsx +1 -1
  263. package/src/Tag/_stories/Tag.story.tsx +1 -1
  264. package/src/Tile/Tile.css +3 -4
  265. package/src/Tile/Tile.less +3 -4
  266. package/src/Typeahead/Typeahead.css +2 -4
  267. package/src/Typeahead/Typeahead.less +1 -2
  268. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  269. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -4
  270. package/src/UploadInput/UploadInput.css +1 -1
  271. package/src/UploadInput/UploadInput.less +4 -7
  272. package/src/_deprecated/ActionButton/ActionButton.css +4 -3
  273. package/src/_deprecated/ActionButton/ActionButton.less +5 -4
  274. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  275. package/src/_deprecated/Avatar/Avatar.css +2 -2
  276. package/src/_deprecated/Avatar/Avatar.less +2 -2
  277. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  278. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
  279. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +1 -2
  280. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  281. package/src/_deprecated/Select/Select.css +14 -49
  282. package/src/_deprecated/Select/Select.less +10 -14
  283. package/src/_deprecated/Select/Select.test.tsx +0 -16
  284. package/src/_deprecated/Select/Select.tsx +1 -6
  285. package/src/_deprecated/Summary/Summary.css +2 -2
  286. package/src/_deprecated/Summary/Summary.less +2 -2
  287. package/src/common/Circle/Circle.css +1 -1
  288. package/src/common/Circle/Circle.less +1 -1
  289. package/src/common/Option/Option.css +4 -4
  290. package/src/common/Option/Option.less +4 -4
  291. package/src/common/PropsValues/typography.ts +1 -20
  292. package/src/main.css +2097 -9250
  293. package/src/main.less +2 -3
  294. package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  295. package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  296. package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  297. package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  298. package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  299. package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  300. package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  301. package/src/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
  302. package/src/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
  303. package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
  304. package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
  305. package/src/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
  306. package/src/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
  307. package/src/styles/less/accordion.css +11 -53
  308. package/src/styles/less/addons/_background-utilities.less +0 -5
  309. package/src/styles/less/badge.css +2 -2
  310. package/src/styles/less/badge.less +2 -2
  311. package/src/styles/less/button-groups.css +6 -29
  312. package/src/styles/less/button-groups.less +2 -3
  313. package/src/styles/less/buttons.css +11 -35
  314. package/src/styles/less/buttons.less +7 -7
  315. package/src/styles/less/core/_fonts.less +75 -7
  316. package/src/styles/less/core/_scaffolding.less +4 -4
  317. package/src/styles/less/core/_typography-utilities.less +3 -3
  318. package/src/styles/less/core/_typography.less +238 -93
  319. package/src/styles/less/decision.css +11 -53
  320. package/src/styles/less/decision.less +2 -2
  321. package/src/styles/less/dropdowns.css +18 -65
  322. package/src/styles/less/dropdowns.less +7 -8
  323. package/src/styles/less/droppable.css +6 -28
  324. package/src/styles/less/droppable.less +4 -4
  325. package/src/styles/less/footer.css +10 -41
  326. package/src/styles/less/footer.less +3 -4
  327. package/src/styles/less/forms/bootstrap-forms.css +100 -153
  328. package/src/styles/less/forms/bootstrap-forms.less +72 -85
  329. package/src/styles/less/forms/checkbox-radio.css +3 -3
  330. package/src/styles/less/forms/checkbox-radio.less +3 -3
  331. package/src/styles/less/input-groups.css +117 -249
  332. package/src/styles/less/input-groups.less +9 -23
  333. package/src/styles/less/list-group.css +8 -28
  334. package/src/styles/less/list-group.less +5 -8
  335. package/src/styles/less/mixins/_reset-text.less +1 -1
  336. package/src/styles/less/mixins/_text-emphasis.less +1 -7
  337. package/src/styles/less/modals.css +1 -1
  338. package/src/styles/less/modals.less +1 -1
  339. package/src/styles/less/navbar.css +45 -92
  340. package/src/styles/less/navbar.less +19 -19
  341. package/src/styles/less/navs.css +8 -8
  342. package/src/styles/less/navs.less +8 -8
  343. package/src/styles/less/neptune-addons.css +0 -15
  344. package/src/styles/less/neptune-core.css +538 -6244
  345. package/src/styles/less/neptune.bundle.less +0 -4
  346. package/src/styles/less/neptune.css +1961 -8984
  347. package/src/styles/less/panels.css +2 -2
  348. package/src/styles/less/panels.less +2 -2
  349. package/src/styles/less/popovers.css +20 -64
  350. package/src/styles/less/popovers.less +7 -7
  351. package/src/styles/less/progress-bars.css +2 -2
  352. package/src/styles/less/progress-bars.less +2 -2
  353. package/src/styles/less/sequences.css +9 -14
  354. package/src/styles/less/sequences.less +10 -15
  355. package/src/styles/less/table.css +7 -7
  356. package/src/styles/less/table.less +7 -7
  357. package/src/styles/less/tooltip.css +6 -28
  358. package/src/styles/less/tooltip.less +1 -1
  359. package/src/styles/variables/legacy-variables.less +3 -3
  360. package/build/styles/Label/Label.css +0 -3
  361. package/src/Label/Label.css +0 -3
  362. package/src/Label/Label.less +0 -8
  363. package/src/styles/less/core/fonts/_fonts-ar.less +0 -86
  364. package/src/styles/less/core/fonts/_fonts-base.less +0 -99
  365. package/src/styles/less/core/fonts/_fonts-he.less +0 -8
  366. package/src/styles/less/core/fonts/_fonts-ja.less +0 -4247
  367. package/src/styles/less/core/fonts/_fonts-ko.less +0 -1079
  368. package/src/styles/less/core/fonts/_fonts-th.less +0 -8
  369. package/src/styles/less/core/fonts/_fonts-zh.less +0 -872
@@ -1,4 +1,3 @@
1
- .np-text--pre-line,
2
- .wds-text--pre-line {
1
+ .np-text--pre-line {
3
2
  white-space: pre-line;
4
3
  }
@@ -9,10 +9,7 @@ describe('Body', () => {
9
9
  const copy = screen.getByText('Test');
10
10
  expect(copy).toBeInTheDocument();
11
11
  expect(copy.tagName).toBe('DIV');
12
- expect(copy).toHaveClass(
13
- `np-text-${Typography.BODY_DEFAULT}`,
14
- `wds-text-${Typography.BODY_DEFAULT}`,
15
- );
12
+ expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
16
13
  });
17
14
 
18
15
  it('enforces tag via `as` prop', () => {
@@ -20,10 +17,7 @@ describe('Body', () => {
20
17
  const copy = screen.getByText('Test');
21
18
  expect(copy).toBeInTheDocument();
22
19
  expect(copy.tagName).toBe('P');
23
- expect(copy).toHaveClass(
24
- `np-text-${Typography.BODY_DEFAULT}`,
25
- `wds-text-${Typography.BODY_DEFAULT}`,
26
- );
20
+ expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
27
21
  });
28
22
 
29
23
  it('supports native HTML attrs', () => {
@@ -41,7 +35,7 @@ describe('Body', () => {
41
35
  it('renders newlines as line breaks when preserveNewlines is true', () => {
42
36
  render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
43
37
  const copy = screen.getByText(/Line 1\.\s*Line 2/);
44
- expect(copy).toHaveClass('np-text--pre-line', 'wds-text--pre-line');
38
+ expect(copy).toHaveClass('np-text--pre-line');
45
39
  expect(copy).toHaveTextContent('Line 1.');
46
40
  expect(copy).toHaveTextContent('Line 2');
47
41
  });
@@ -53,9 +47,6 @@ describe('Body', () => {
53
47
  const copy = screen.getByText('Test');
54
48
  expect(copy).toBeInTheDocument();
55
49
  expect(copy.tagName).toBe('DIV');
56
- expect(copy).toHaveClass(
57
- `np-text-${Typography.BODY_DEFAULT}`,
58
- `wds-text-${Typography.BODY_DEFAULT}`,
59
- );
50
+ expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
60
51
  });
61
52
  });
package/src/Body/Body.tsx CHANGED
@@ -33,7 +33,7 @@ const Body = forwardRef(function Body(
33
33
  | null
34
34
  >,
35
35
  ) {
36
- const bodyType = bodyTypes.has(type) ? type : DEFAULT_TYPE;
36
+ const isTypeSupported = bodyTypes.has(type);
37
37
  return (
38
38
  <Element
39
39
  {...props}
@@ -41,9 +41,8 @@ const Body = forwardRef(function Body(
41
41
  // See: https://fettblog.eu/typescript-react-generic-forward-refs/
42
42
  ref={reference}
43
43
  className={clsx(
44
- `np-text-${bodyType}`,
45
- `wds-text-${bodyType}`,
46
- preserveNewlines && 'np-text--pre-line wds-text--pre-line',
44
+ `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
45
+ preserveNewlines && 'np-text--pre-line',
47
46
  className,
48
47
  )}
49
48
  />
@@ -5,7 +5,6 @@ import Container from '../../Container';
5
5
  import Title from '../../Title';
6
6
  import { Typography } from '../../common/PropsValues/typography';
7
7
  import { withVariantConfig } from '../../../.storybook/helpers';
8
- import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
9
8
 
10
9
  export default {
11
10
  title: 'Typography/Body/Tests',
@@ -89,44 +88,3 @@ export const HyphenationMobile: Story = {
89
88
  ...HyphenationTest,
90
89
  ...withVariantConfig(['mobile'], HyphenationTest),
91
90
  };
92
-
93
- const rtlDiffBodyLarge = withRTLDiff({
94
- i18n: {
95
- secondParagraph: {
96
- en: "Set up a transfer in a few minutes from your phone or computer. We'll keep you updated at every step, so you always know where your money is.",
97
- ar: 'أعدّ تحويلك في بضع دقائق من هاتفك أو حاسوبك. سنبقيك على اطلاع في كل خطوة، لتعرف دائمًا أين أموالك.',
98
- he: 'הגדירו העברה תוך כמה דקות מהטלפון או מהמחשב. נעדכן אתכם בכל שלב, כך שתמיד תדעו איפה הכסף שלכם.',
99
- },
100
- paragraph: {
101
- en: "Send money abroad at the real exchange rate, with low, transparent fees. You'll always see what you pay upfront, and your recipient gets the money quickly and securely.",
102
- ar: 'أرسل الأموال إلى الخارج بسعر الصرف الحقيقي ومع رسوم منخفضة وشفافة. سترى دائمًا ما تدفعه مقدمًا، ويحصل المستلم على أمواله بسرعة وأمان.',
103
- he: 'שלחו כסף לחו״ל בשער החליפין האמיתי, עם עמלות נמוכות ושקופות. תמיד תראו מראש כמה אתם משלמים, והנמען יקבל את הכסף במהירות ובבטחה.',
104
- },
105
- },
106
- });
107
-
108
- /**
109
- * Two body large paragraphs in RTL and LTR, for the RTL Typography docs page.
110
- * Hidden from the sidebar, tests and Chromatic.
111
- */
112
- export const RTLDiffBodyLarge: Story = {
113
- tags: ['!dev', '!test'],
114
- render: function Render() {
115
- const i18n = useRtlDiffI18n();
116
- return (
117
- <>
118
- <Body as="p" type={Typography.BODY_LARGE}>
119
- {i18n.paragraph}
120
- </Body>
121
- <Body as="p" type={Typography.BODY_LARGE}>
122
- {i18n.secondParagraph}
123
- </Body>
124
- </>
125
- );
126
- },
127
- ...rtlDiffBodyLarge,
128
- parameters: {
129
- ...rtlDiffBodyLarge.parameters,
130
- chromatic: { ...rtlDiffBodyLarge.parameters.chromatic, disableSnapshot: true },
131
- },
132
- };
@@ -7,7 +7,7 @@
7
7
  border: transparent;
8
8
  border-radius: var(--radius-small);
9
9
  background-color: transparent;
10
- font-weight: var(--wds-font-weight-title-screen);
10
+ font-weight: var(--font-weight-semi-bold);
11
11
  color: var(--color-content-primary);
12
12
  }
13
13
  @media (max-width: 320px) {
@@ -89,11 +89,10 @@
89
89
  text-decoration-color: var(--color-content-tertiary);
90
90
  }
91
91
  .wds-Calendar__option--day {
92
- --circleSize: var(--size-40);
93
- block-size: var(--circleSize);
94
- line-height: var(--circleSize);
95
- inline-size: var(--circleSize);
92
+ block-size: var(--size-40);
96
93
  border-radius: var(--radius-full);
94
+ line-height: var(--size-40);
95
+ inline-size: var(--size-40);
97
96
  padding: 0;
98
97
  display: inline-flex;
99
98
  align-items: center;
@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
134
134
  key={day}
135
135
  className={
136
136
  index > 4
137
- ? 'text-xs-center np-text-body-default wds-text-body-default'
138
- : 'text-xs-center np-text-body-default-bold wds-text-body-default-bold'
137
+ ? 'text-xs-center np-text-body-default'
138
+ : 'text-xs-center np-text-body-default-bold'
139
139
  }
140
140
  >
141
141
  <span className="hidden-xs">
@@ -76,7 +76,7 @@ const MonthCalendarTable = ({
76
76
  })();
77
77
 
78
78
  return (
79
- <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold wds-text-body-default-bold m-b-0">
79
+ <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
80
80
  <thead className="sr-only">
81
81
  <tr>
82
82
  <th colSpan={COLS}>{placeholder}</th>
@@ -7,7 +7,7 @@
7
7
  border: transparent;
8
8
  border-radius: var(--radius-small);
9
9
  background-color: transparent;
10
- font-weight: var(--wds-font-weight-title-screen);
10
+ font-weight: var(--font-weight-semi-bold);
11
11
  color: var(--color-content-primary);
12
12
  }
13
13
  @media (max-width: 320px) {
@@ -89,11 +89,10 @@
89
89
  text-decoration-color: var(--color-content-tertiary);
90
90
  }
91
91
  .wds-Calendar__option--day {
92
- --circleSize: var(--size-40);
93
- block-size: var(--circleSize);
94
- line-height: var(--circleSize);
95
- inline-size: var(--circleSize);
92
+ block-size: var(--size-40);
96
93
  border-radius: var(--radius-full);
94
+ line-height: var(--size-40);
95
+ inline-size: var(--size-40);
97
96
  padding: 0;
98
97
  display: inline-flex;
99
98
  align-items: center;
@@ -11,7 +11,7 @@
11
11
  border: transparent;
12
12
  border-radius: var(--radius-small);
13
13
  background-color: transparent;
14
- font-weight: var(--wds-font-weight-title-screen);
14
+ font-weight: var(--font-weight-semi-bold);
15
15
  color: var(--color-content-primary);
16
16
 
17
17
  &:focus {
@@ -51,11 +51,10 @@
51
51
  }
52
52
 
53
53
  .wds-Calendar__option--day {
54
- --circleSize: var(--size-40);
55
- height: var(--circleSize);
56
- line-height: var(--circleSize);
57
- width: var(--circleSize);
54
+ height: var(--size-40);
58
55
  border-radius: var(--radius-full);
56
+ line-height: var(--size-40);
57
+ width: var(--size-40);
59
58
  padding: 0;
60
59
  display: inline-flex;
61
60
  align-items: center;
@@ -96,7 +96,7 @@ const TableLink = ({
96
96
  aria-pressed={active}
97
97
  className={clsx(
98
98
  `wds-Calendar__option--${type}`,
99
- `tw-date-lookup-${type}-option np-text-body-default-bold wds-text-body-default-bold`,
99
+ `tw-date-lookup-${type}-option np-text-body-default-bold`,
100
100
  { active: !!active },
101
101
  { today: !!today },
102
102
  { disabled: !!isUnavailable },
@@ -175,36 +175,3 @@ export const RTLDiff: Story = {
175
175
  },
176
176
  }),
177
177
  };
178
-
179
- const rtlDiffDayView = withRTLDiff({
180
- i18n: {
181
- disabledReason: {
182
- en: 'Weekends and specific dates are unavailable.',
183
- ar: 'عطلات نهاية الأسبوع وتواريخ محددة غير متاحة.',
184
- },
185
- },
186
- });
187
-
188
- /**
189
- * Day view only, for the RTL Layout docs page. Hidden from the sidebar, tests and Chromatic,
190
- * as `RTLDiff` already covers it.
191
- */
192
- export const RTLDiffDayView: Story = {
193
- tags: ['!dev', '!test'],
194
- render: () => {
195
- const i18n = useRtlDiffI18n();
196
- return (
197
- <Calendar
198
- value={selectedDate}
199
- min={minDate}
200
- max={maxDate}
201
- disabledRules={{ ...disabledRulesRtl, reason: i18n.disabledReason }}
202
- />
203
- );
204
- },
205
- ...rtlDiffDayView,
206
- parameters: {
207
- ...rtlDiffDayView.parameters,
208
- chromatic: { ...rtlDiffDayView.parameters.chromatic, disableSnapshot: true },
209
- },
210
- };
@@ -70,7 +70,7 @@
70
70
  border-color: var(--color-sentiment-negative-active) !important;
71
71
  }
72
72
  .np-theme-personal .np-chip {
73
- font-weight: var(--wds-font-weight-body-bold);
73
+ font-weight: var(--font-weight-semi-bold);
74
74
  color: var(--color-interactive-primary);
75
75
  padding-block: 0;
76
76
  padding-inline: var(--size-16);
@@ -114,13 +114,11 @@
114
114
  .np-theme-personal .np-chip.np-chip--removable {
115
115
  position: relative;
116
116
  }
117
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
118
- .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
117
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
119
118
  padding-inline-end: var(--size-24);
120
119
  }
121
120
  @media (max-width: 320px) {
122
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
123
- .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
121
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
124
122
  padding-inline-end: var(--size-48);
125
123
  }
126
124
  }
@@ -90,7 +90,7 @@
90
90
  }
91
91
 
92
92
  .np-theme-personal & {
93
- font-weight: var(--wds-font-weight-body-bold);
93
+ font-weight: var(--font-weight-semi-bold);
94
94
  color: var(--color-interactive-primary);
95
95
  padding: 0 var(--size-16);
96
96
  border-color: var(--color-interactive-secondary);
@@ -137,8 +137,7 @@
137
137
  &.np-chip--removable {
138
138
  position: relative;
139
139
 
140
- .np-text-body-default-bold,
141
- .wds-text-body-default-bold {
140
+ .np-text-body-default-bold {
142
141
  padding-right: var(--size-24);
143
142
 
144
143
  @media (--screen-400-zoom) {
@@ -232,8 +232,13 @@ export const SentimentAwareness: Story = {
232
232
  style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
233
233
  >
234
234
  <div
235
- className="wds-text-body-default-bold p-l-1 text-align-left"
236
- style={{ width: '12ch' }}
235
+ style={{
236
+ width: '120px',
237
+ fontSize: '11px',
238
+ fontWeight: 'bold',
239
+ textAlign: 'left',
240
+ paddingLeft: '8px',
241
+ }}
237
242
  >
238
243
  {sentiment} (base)
239
244
  </div>
@@ -241,7 +246,7 @@ export const SentimentAwareness: Story = {
241
246
  <div
242
247
  key={button.label}
243
248
  style={{
244
- width: '13ch',
249
+ width: '100px',
245
250
  display: 'flex',
246
251
  justifyContent: 'center',
247
252
  }}
@@ -265,8 +270,13 @@ export const SentimentAwareness: Story = {
265
270
  style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
266
271
  >
267
272
  <div
268
- className="wds-text-body-default-bold p-l-1 text-align-left"
269
- style={{ width: '12ch' }}
273
+ style={{
274
+ width: '120px',
275
+ fontSize: '11px',
276
+ fontWeight: 'bold',
277
+ textAlign: 'left',
278
+ paddingLeft: '8px',
279
+ }}
270
280
  >
271
281
  {sentiment} (elevated)
272
282
  </div>
@@ -274,7 +284,7 @@ export const SentimentAwareness: Story = {
274
284
  <div
275
285
  key={button.label}
276
286
  style={{
277
- width: '13ch',
287
+ width: '100px',
278
288
  display: 'flex',
279
289
  justifyContent: 'center',
280
290
  }}
@@ -57,52 +57,6 @@ export const Sizes: Story = {
57
57
  },
58
58
  }),
59
59
  };
60
- export const MobileSizes: Story = {
61
- render: () => {
62
- const i18n = useRtlDiffI18n();
63
- return (
64
- <>
65
- <DateInput
66
- size="sm"
67
- dayLabel={i18n.dayLabel}
68
- monthLabel={i18n.monthLabel}
69
- yearLabel={i18n.yearLabel}
70
- onChange={fn()}
71
- />
72
- <DateInput
73
- size="md"
74
- dayLabel={i18n.dayLabel}
75
- monthLabel={i18n.monthLabel}
76
- yearLabel={i18n.yearLabel}
77
- onChange={fn()}
78
- />
79
- <DateInput
80
- size="lg"
81
- dayLabel={i18n.dayLabel}
82
- monthLabel={i18n.monthLabel}
83
- yearLabel={i18n.yearLabel}
84
- onChange={fn()}
85
- />
86
- <DateInput
87
- mode="month-year"
88
- monthLabel={i18n.monthLabel}
89
- yearLabel={i18n.yearLabel}
90
- onChange={fn()}
91
- />
92
- </>
93
- );
94
- },
95
- ...withRTLDiff({
96
- renderAs: 'iframe',
97
- width: '320px',
98
- fixedRows: { heights: [13, 16, 21] },
99
- i18n: {
100
- dayLabel: { en: 'Day', ar: 'اليوم' },
101
- monthLabel: { en: 'Month', ar: 'الشهر' },
102
- yearLabel: { en: 'Year', ar: 'السنة' },
103
- },
104
- }),
105
- };
106
60
 
107
61
  export const OpenDropdown: Story = {
108
62
  render: () => {
@@ -1,10 +1,9 @@
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 {
6
- font-size: var(--wds-font-size-body-large);
7
- line-height: var(--wds-line-height-body-large);
4
+ .np-decision__tile--small .np-text-title-subsection {
5
+ font-size: var(--font-size-16);
6
+ line-height: var(--line-height-title);
8
7
  }
9
8
  .np-decision:not(.flex-column) {
10
9
  gap: var(--size-24);
@@ -4,10 +4,9 @@
4
4
  }
5
5
 
6
6
  &__tile--small {
7
- .np-text-title-subsection,
8
- .wds-text-title-subsection {
9
- font-size: var(--wds-font-size-body-large);
10
- line-height: var(--wds-line-height-body-large);
7
+ .np-text-title-subsection {
8
+ font-size: var(--font-size-16);
9
+ line-height: var(--line-height-title);
11
10
  }
12
11
  }
13
12
 
@@ -32,7 +32,7 @@ const definitions = [
32
32
  },
33
33
  {
34
34
  title: 'Use wrapper elements to style',
35
- value: <span className="wds-text-title-subsection">89.45GBP</span>,
35
+ value: <span className="np-text-title-subsection">89.45GBP</span>,
36
36
  key: 'second',
37
37
  },
38
38
  {
@@ -118,40 +118,26 @@ export const Basic = () => {
118
118
  export const Numbers = () => {
119
119
  return (
120
120
  <>
121
- <Title type={Typography.TITLE_SCREEN}>Display Number Small</Title>
121
+ <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
122
122
  <hr />
123
- <Display type={Typography.DISPLAY_NUMBER_SMALL}>
123
+ <Display type={Typography.DISPLAY_NUMBER}>
124
124
  <Money amount={1050.6} currency="UAH" />
125
125
  </Display>
126
126
  <hr />
127
- <Display type={Typography.DISPLAY_NUMBER_SMALL}>
127
+ <Display type={Typography.DISPLAY_NUMBER}>
128
128
  <Money amount={10.17} currency="JPY" />
129
129
  </Display>
130
-
131
- <Title type={Typography.TITLE_SCREEN}>Display Number Medium</Title>
132
130
  <hr />
133
- <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
131
+ <Display type={Typography.DISPLAY_NUMBER}>
134
132
  <Money amount={0.01} currency="EUR" />
135
133
  </Display>
136
134
  <hr />
137
- <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
135
+ <Display type={Typography.DISPLAY_NUMBER}>
138
136
  <Money amount={1000000} currency="EUR" />
139
137
  </Display>
140
-
141
- <Title type={Typography.TITLE_SCREEN}>Display Number Large</Title>
142
- <hr />
143
- <Display type={Typography.DISPLAY_NUMBER_LARGE}>
144
- <Money amount={1000000} currency="GBP" />
145
- </Display>
146
- <hr />
147
- <Display type={Typography.DISPLAY_NUMBER_LARGE}>
148
- <Money amount={1050.6} currency="UAH" />
149
- </Display>
150
-
151
- <Title type={Typography.TITLE_SCREEN}>Display Number (Deprecated)</Title>
152
138
  <hr />
153
139
  <Display type={Typography.DISPLAY_NUMBER}>
154
- <Money amount={1050.6} currency="UAH" />
140
+ <Money amount={1000000} currency="GBP" />
155
141
  </Display>
156
142
  </>
157
143
  );
@@ -1,5 +1,5 @@
1
1
  .emphasis {
2
- font-weight: var(--wds-font-weight-body-bold);
2
+ font-weight: var(--font-weight-semi-bold);
3
3
  font-style: normal;
4
4
  }
5
5
  .emphasis--important {
@@ -1,5 +1,5 @@
1
1
  .emphasis {
2
- font-weight: var(--wds-font-weight-body-bold);
2
+ font-weight: var(--font-weight-semi-bold);
3
3
  font-style: normal;
4
4
  }
5
5
 
@@ -2,7 +2,6 @@
2
2
  inline-size: 100%;
3
3
  }
4
4
  .wds-amount-input-input-container {
5
- font-family: var(--wds-font-family-display-number);
6
5
  display: flex;
7
6
  justify-content: right;
8
7
  inline-size: 100%;
@@ -37,5 +36,5 @@
37
36
  flex-grow: 0;
38
37
  display: flex;
39
38
  align-items: center;
40
- line-height: 1em;
39
+ line-height: inherit;
41
40
  }
@@ -4,7 +4,6 @@
4
4
  }
5
5
 
6
6
  &-input-container {
7
- font-family: var(--wds-font-family-display-number);
8
7
  display: flex;
9
8
  justify-content: right;
10
9
  width: 100%;
@@ -48,6 +47,6 @@
48
47
  flex-grow: 0;
49
48
  display: flex;
50
49
  align-items: center;
51
- line-height: 1em;
50
+ line-height: inherit;
52
51
  }
53
52
  }
@@ -297,7 +297,10 @@ export const AmountInput = ({
297
297
 
298
298
  return (
299
299
  <div className="wds-amount-input-container" dir="ltr">
300
- <div className={clsx('wds-amount-input-input-container')} style={style}>
300
+ <div
301
+ className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
302
+ style={style}
303
+ >
301
304
  <input
302
305
  ref={ref}
303
306
  dir="auto"
@@ -2,7 +2,6 @@
2
2
  inline-size: 100%;
3
3
  }
4
4
  .wds-amount-input-input-container {
5
- font-family: var(--wds-font-family-display-number);
6
5
  display: flex;
7
6
  justify-content: right;
8
7
  inline-size: 100%;
@@ -37,7 +36,7 @@
37
36
  flex-grow: 0;
38
37
  display: flex;
39
38
  align-items: center;
40
- line-height: 1em;
39
+ line-height: inherit;
41
40
  }
42
41
  .wds-currency-selector:disabled {
43
42
  opacity: 1 !important;
@@ -40,7 +40,7 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
40
40
  className={clsx(
41
41
  'np-animated-label',
42
42
  'btn-unstyled',
43
- 'np-text-body-large-bold wds-text-body-large-bold',
43
+ 'np-text-body-large-bold',
44
44
  className,
45
45
  )}
46
46
  onClick={() => setShowSteps(true)}