@transferwise/components 0.0.0-experimental-8cc553f → 0.0.0-experimental-769973c

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 (353) hide show
  1. package/build/checkbox/Checkbox.js +1 -1
  2. package/build/checkbox/Checkbox.js.map +1 -1
  3. package/build/checkbox/Checkbox.mjs +1 -1
  4. package/build/checkbox/Checkbox.mjs.map +1 -1
  5. package/build/common/Option/Option.js +2 -2
  6. package/build/common/Option/Option.js.map +1 -1
  7. package/build/common/Option/Option.mjs +2 -2
  8. package/build/common/Option/Option.mjs.map +1 -1
  9. package/build/main.css +5397 -5944
  10. package/build/moneyInput/MoneyInput.js +28 -12
  11. package/build/moneyInput/MoneyInput.js.map +1 -1
  12. package/build/moneyInput/MoneyInput.mjs +30 -14
  13. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  14. package/build/moneyInput/currencyFormatting.js +8 -2
  15. package/build/moneyInput/currencyFormatting.js.map +1 -1
  16. package/build/moneyInput/currencyFormatting.mjs +5 -4
  17. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  18. package/build/styles/accordion/Accordion.css +23 -21
  19. package/build/styles/actionButton/ActionButton.css +8 -6
  20. package/build/styles/alert/Alert.css +2 -2
  21. package/build/styles/avatar/Avatar.css +65 -65
  22. package/build/styles/avatarLayout/AvatarLayout.css +11 -11
  23. package/build/styles/avatarView/AvatarView.css +3 -3
  24. package/build/styles/avatarView/Dot.css +3 -3
  25. package/build/styles/badge/Badge.css +8 -12
  26. package/build/styles/button/Button.css +6 -6
  27. package/build/styles/button/LegacyButton.css +3 -9
  28. package/build/styles/card/Card.css +27 -18
  29. package/build/styles/carousel/Carousel.css +28 -27
  30. package/build/styles/checkboxButton/CheckboxButton.css +10 -15
  31. package/build/styles/chips/Chip.css +26 -29
  32. package/build/styles/common/Option/Option.css +42 -44
  33. package/build/styles/common/baseCard/BaseCard.css +3 -7
  34. package/build/styles/common/bottomSheet/BottomSheet.css +30 -18
  35. package/build/styles/common/circle/Circle.css +10 -10
  36. package/build/styles/common/closeButton/CloseButton.css +36 -36
  37. package/build/styles/common/liveRegion/LiveRegion.css +1 -1
  38. package/build/styles/common/panel/Panel.css +7 -7
  39. package/build/styles/criticalBanner/CriticalCommsBanner.css +7 -7
  40. package/build/styles/css/accordion.css +35 -37
  41. package/build/styles/css/alerts.css +84 -96
  42. package/build/styles/css/badge.css +25 -23
  43. package/build/styles/css/breadcrumbs.css +6 -4
  44. package/build/styles/css/button-groups.css +157 -168
  45. package/build/styles/css/buttons.css +69 -74
  46. package/build/styles/css/circles.css +54 -60
  47. package/build/styles/css/close.css +2 -2
  48. package/build/styles/css/column-layout.css +45 -48
  49. package/build/styles/css/currency-flags.css +10 -12
  50. package/build/styles/css/decision.css +14 -12
  51. package/build/styles/css/dropdowns.css +116 -142
  52. package/build/styles/css/droppable.css +45 -36
  53. package/build/styles/css/flex.css +88 -104
  54. package/build/styles/css/footer.css +15 -14
  55. package/build/styles/css/grid.css +780 -975
  56. package/build/styles/css/input-groups.css +333 -361
  57. package/build/styles/css/link-callout.css +5 -6
  58. package/build/styles/css/list-group.css +72 -66
  59. package/build/styles/css/loaders.css +11 -11
  60. package/build/styles/css/media.css +21 -25
  61. package/build/styles/css/modals.css +57 -51
  62. package/build/styles/css/navbar.css +537 -581
  63. package/build/styles/css/navs.css +84 -88
  64. package/build/styles/css/neptune-social-media.css +17 -21
  65. package/build/styles/css/neptune.css +4217 -4545
  66. package/build/styles/css/panels.css +100 -102
  67. package/build/styles/css/popovers.css +189 -217
  68. package/build/styles/css/process.css +69 -71
  69. package/build/styles/css/progress-bars.css +13 -17
  70. package/build/styles/css/select.css +35 -39
  71. package/build/styles/css/sequences.css +147 -169
  72. package/build/styles/css/table.css +50 -39
  73. package/build/styles/css/tick.css +15 -10
  74. package/build/styles/css/tooltip.css +66 -64
  75. package/build/styles/css/utilities.css +24 -24
  76. package/build/styles/css/wells.css +20 -20
  77. package/build/styles/dateInput/DateInput.css +4 -4
  78. package/build/styles/dateLookup/DateLookup.css +10 -9
  79. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +9 -15
  80. package/build/styles/definitionList/DefinitionList.css +8 -14
  81. package/build/styles/dimmer/Dimmer.css +9 -19
  82. package/build/styles/divider/Divider.css +8 -7
  83. package/build/styles/drawer/Drawer.css +16 -15
  84. package/build/styles/dropFade/DropFade.css +2 -2
  85. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +11 -11
  86. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +4 -4
  87. package/build/styles/expressiveMoneyInput/chevron/Chevron.css +5 -5
  88. package/build/styles/field/Field.css +5 -5
  89. package/build/styles/flowNavigation/FlowNavigation.css +29 -28
  90. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +5 -5
  91. package/build/styles/header/Header.css +11 -9
  92. package/build/styles/image/Image.css +7 -7
  93. package/build/styles/info/Info.css +1 -1
  94. package/build/styles/inputs/Input.css +24 -25
  95. package/build/styles/inputs/InputGroup.css +13 -13
  96. package/build/styles/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +10 -10
  97. package/build/styles/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +5 -5
  98. package/build/styles/inputs/SelectInput/ClearButton/SelectInputClearButton.css +6 -6
  99. package/build/styles/inputs/SelectInput/ItemView/SelectInputItemView.css +4 -4
  100. package/build/styles/inputs/SelectInput/Option/SelectInputOption.css +4 -2
  101. package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +4 -4
  102. package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +17 -12
  103. package/build/styles/inputs/SelectInput/Popover/SelectInputPopover.css +4 -4
  104. package/build/styles/inputs/SelectInput/SelectInput.css +54 -47
  105. package/build/styles/inputs/TextArea.css +26 -27
  106. package/build/styles/instructionsList/InstructionsList.css +5 -5
  107. package/build/styles/legacylistItem/LegacyListItem.css +1 -1
  108. package/build/styles/link/Link.css +2 -8
  109. package/build/styles/listItem/ListItem.css +38 -35
  110. package/build/styles/listItem/ListItem.grid.css +7 -7
  111. package/build/styles/loader/Loader.css +30 -30
  112. package/build/styles/main.css +5397 -5944
  113. package/build/styles/modal/Modal.css +17 -16
  114. package/build/styles/moneyInput/MoneyInput.css +10 -20
  115. package/build/styles/navigationOption/NavigationOption.css +6 -19
  116. package/build/styles/navigationOptionsList/NavigationOptionsList.css +3 -8
  117. package/build/styles/nudge/Nudge.css +46 -72
  118. package/build/styles/overlayHeader/OverlayHeader.css +7 -6
  119. package/build/styles/phoneNumberInput/PhoneNumberInput.css +3 -9
  120. package/build/styles/popover/Popover.css +13 -10
  121. package/build/styles/progress/Progress.css +3 -3
  122. package/build/styles/progressBar/ProgressBar.css +4 -4
  123. package/build/styles/promoCard/PromoCard.css +27 -41
  124. package/build/styles/prompt/ActionPrompt/ActionPrompt.css +8 -8
  125. package/build/styles/prompt/InfoPrompt/InfoPrompt.css +7 -7
  126. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +5 -6
  127. package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +6 -6
  128. package/build/styles/radioGroup/RadioGroup.css +1 -1
  129. package/build/styles/section/Section.css +6 -6
  130. package/build/styles/segmentedControl/SegmentedControl.css +18 -15
  131. package/build/styles/select/Select.css +55 -99
  132. package/build/styles/slidingPanel/SlidingPanel.css +9 -31
  133. package/build/styles/snackbar/Snackbar.css +21 -35
  134. package/build/styles/stepper/Stepper.css +9 -12
  135. package/build/styles/styles/less/accordion.css +35 -37
  136. package/build/styles/styles/less/alerts.css +84 -96
  137. package/build/styles/styles/less/badge.css +25 -23
  138. package/build/styles/styles/less/breadcrumbs.css +6 -4
  139. package/build/styles/styles/less/button-groups.css +157 -168
  140. package/build/styles/styles/less/buttons.css +69 -74
  141. package/build/styles/styles/less/circles.css +54 -60
  142. package/build/styles/styles/less/close.css +2 -2
  143. package/build/styles/styles/less/column-layout.css +45 -48
  144. package/build/styles/styles/less/currency-flags.css +10 -12
  145. package/build/styles/styles/less/decision.css +14 -12
  146. package/build/styles/styles/less/dropdowns.css +116 -142
  147. package/build/styles/styles/less/droppable.css +45 -36
  148. package/build/styles/styles/less/flex.css +88 -104
  149. package/build/styles/styles/less/footer.css +15 -14
  150. package/build/styles/styles/less/forms/bootstrap-forms.css +244 -264
  151. package/build/styles/styles/less/forms/checkbox-radio.css +41 -41
  152. package/build/styles/styles/less/grid.css +780 -975
  153. package/build/styles/styles/less/input-groups.css +333 -361
  154. package/build/styles/styles/less/link-callout.css +5 -6
  155. package/build/styles/styles/less/list-group.css +72 -66
  156. package/build/styles/styles/less/loaders.css +11 -11
  157. package/build/styles/styles/less/media.css +21 -25
  158. package/build/styles/styles/less/modals.css +57 -51
  159. package/build/styles/styles/less/navbar.css +537 -581
  160. package/build/styles/styles/less/navs.css +84 -88
  161. package/build/styles/styles/less/neptune-social-media.css +17 -21
  162. package/build/styles/styles/less/neptune.css +4217 -4545
  163. package/build/styles/styles/less/panels.css +100 -102
  164. package/build/styles/styles/less/popovers.css +189 -217
  165. package/build/styles/styles/less/process.css +69 -71
  166. package/build/styles/styles/less/progress-bars.css +13 -17
  167. package/build/styles/styles/less/select.css +35 -39
  168. package/build/styles/styles/less/sequences.css +147 -169
  169. package/build/styles/styles/less/table.css +50 -39
  170. package/build/styles/styles/less/tick.css +15 -10
  171. package/build/styles/styles/less/tooltip.css +66 -64
  172. package/build/styles/styles/less/utilities.css +24 -24
  173. package/build/styles/styles/less/wells.css +20 -20
  174. package/build/styles/summary/Summary.css +19 -30
  175. package/build/styles/switch/Switch.css +5 -4
  176. package/build/styles/table/Table.css +60 -57
  177. package/build/styles/tabs/Tabs.css +18 -14
  178. package/build/styles/tile/Tile.css +12 -12
  179. package/build/styles/tooltip/Tooltip.css +2 -2
  180. package/build/styles/typeahead/Typeahead.css +40 -52
  181. package/build/styles/upload/Upload.css +11 -10
  182. package/build/styles/uploadInput/UploadInput.css +4 -4
  183. package/build/styles/uploadInput/uploadButton/UploadButton.css +20 -19
  184. package/build/styles/uploadInput/uploadItem/UploadItem.css +45 -44
  185. package/build/types/moneyInput/MoneyInput.d.ts +6 -0
  186. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  187. package/build/types/moneyInput/currencyFormatting.d.ts +4 -3
  188. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  189. package/package.json +1 -1
  190. package/src/accordion/Accordion.css +23 -21
  191. package/src/accordion/Accordion.less +3 -3
  192. package/src/actionButton/ActionButton.css +8 -6
  193. package/src/alert/Alert.css +2 -2
  194. package/src/avatar/Avatar.css +65 -65
  195. package/src/avatarLayout/AvatarLayout.css +11 -11
  196. package/src/avatarView/AvatarView.css +3 -3
  197. package/src/avatarView/Dot.css +3 -3
  198. package/src/badge/Badge.css +8 -12
  199. package/src/badge/Badge.less +1 -1
  200. package/src/button/Button.css +6 -6
  201. package/src/button/LegacyButton.css +3 -9
  202. package/src/button/LegacyButton.less +1 -1
  203. package/src/card/Card.css +27 -18
  204. package/src/card/Card.less +1 -1
  205. package/src/carousel/Carousel.css +28 -27
  206. package/src/checkbox/Checkbox.tsx +1 -1
  207. package/src/checkboxButton/CheckboxButton.css +10 -15
  208. package/src/checkboxButton/CheckboxButton.less +2 -2
  209. package/src/chips/Chip.css +26 -29
  210. package/src/chips/Chip.less +1 -1
  211. package/src/common/Option/Option.css +42 -44
  212. package/src/common/Option/Option.less +2 -2
  213. package/src/common/Option/Option.tsx +2 -2
  214. package/src/common/baseCard/BaseCard.css +3 -7
  215. package/src/common/baseCard/BaseCard.less +0 -5
  216. package/src/common/bottomSheet/BottomSheet.css +30 -18
  217. package/src/common/circle/Circle.css +10 -10
  218. package/src/common/closeButton/CloseButton.css +36 -36
  219. package/src/common/liveRegion/LiveRegion.css +1 -1
  220. package/src/common/panel/Panel.css +7 -7
  221. package/src/criticalBanner/CriticalCommsBanner.css +7 -7
  222. package/src/dateInput/DateInput.css +4 -4
  223. package/src/dateLookup/DateLookup.css +10 -9
  224. package/src/dateLookup/dateTrigger/DateTrigger.css +9 -15
  225. package/src/dateLookup/dateTrigger/DateTrigger.less +1 -1
  226. package/src/definitionList/DefinitionList.css +8 -14
  227. package/src/definitionList/DefinitionList.less +1 -1
  228. package/src/dimmer/Dimmer.css +9 -19
  229. package/src/dimmer/Dimmer.less +2 -3
  230. package/src/divider/Divider.css +8 -7
  231. package/src/drawer/Drawer.css +16 -15
  232. package/src/dropFade/DropFade.css +2 -2
  233. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +11 -11
  234. package/src/expressiveMoneyInput/amountInput/AmountInput.css +4 -4
  235. package/src/expressiveMoneyInput/chevron/Chevron.css +5 -5
  236. package/src/field/Field.css +5 -5
  237. package/src/flowNavigation/FlowNavigation.css +29 -28
  238. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +5 -5
  239. package/src/header/Header.css +11 -9
  240. package/src/image/Image.css +7 -7
  241. package/src/info/Info.css +1 -1
  242. package/src/inputs/Input.css +24 -25
  243. package/src/inputs/InputGroup.css +13 -13
  244. package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +10 -10
  245. package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +5 -5
  246. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +6 -6
  247. package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +4 -4
  248. package/src/inputs/SelectInput/Option/SelectInputOption.css +4 -2
  249. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +4 -4
  250. package/src/inputs/SelectInput/Options/SelectInputOptions.css +17 -12
  251. package/src/inputs/SelectInput/Popover/SelectInputPopover.css +4 -4
  252. package/src/inputs/SelectInput/SelectInput.css +54 -47
  253. package/src/inputs/TextArea.css +26 -27
  254. package/src/instructionsList/InstructionsList.css +5 -5
  255. package/src/legacylistItem/LegacyListItem.css +1 -1
  256. package/src/link/Link.css +2 -8
  257. package/src/link/Link.less +1 -1
  258. package/src/listItem/ListItem.css +38 -35
  259. package/src/listItem/ListItem.grid.css +7 -7
  260. package/src/loader/Loader.css +30 -30
  261. package/src/main.css +5397 -5944
  262. package/src/modal/Modal.css +17 -16
  263. package/src/moneyInput/MoneyInput.css +10 -20
  264. package/src/moneyInput/MoneyInput.less +4 -4
  265. package/src/moneyInput/MoneyInput.story.tsx +10 -1
  266. package/src/moneyInput/MoneyInput.test.story.tsx +141 -1
  267. package/src/moneyInput/MoneyInput.test.tsx +45 -0
  268. package/src/moneyInput/MoneyInput.tsx +27 -3
  269. package/src/moneyInput/currencyFormatting.ts +11 -5
  270. package/src/navigationOption/NavigationOption.css +6 -19
  271. package/src/navigationOption/NavigationOption.less +3 -4
  272. package/src/navigationOptionsList/NavigationOptionsList.css +3 -8
  273. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  274. package/src/nudge/Nudge.css +46 -72
  275. package/src/nudge/Nudge.less +0 -8
  276. package/src/overlayHeader/OverlayHeader.css +7 -6
  277. package/src/phoneNumberInput/PhoneNumberInput.css +3 -9
  278. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  279. package/src/popover/Popover.css +13 -10
  280. package/src/progress/Progress.css +3 -3
  281. package/src/progressBar/ProgressBar.css +4 -4
  282. package/src/promoCard/PromoCard.css +27 -41
  283. package/src/promoCard/PromoCard.less +12 -27
  284. package/src/prompt/ActionPrompt/ActionPrompt.css +8 -8
  285. package/src/prompt/InfoPrompt/InfoPrompt.css +7 -7
  286. package/src/prompt/InlinePrompt/InlinePrompt.css +5 -6
  287. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +6 -6
  288. package/src/radioGroup/RadioGroup.css +1 -1
  289. package/src/section/Section.css +6 -6
  290. package/src/section/Section.story.tsx +2 -8
  291. package/src/segmentedControl/SegmentedControl.css +18 -15
  292. package/src/select/Select.css +55 -99
  293. package/src/select/Select.less +9 -10
  294. package/src/slidingPanel/SlidingPanel.css +9 -31
  295. package/src/slidingPanel/SlidingPanel.less +4 -4
  296. package/src/snackbar/Snackbar.css +21 -35
  297. package/src/snackbar/Snackbar.less +3 -9
  298. package/src/stepper/Stepper.css +9 -12
  299. package/src/stepper/Stepper.less +1 -1
  300. package/src/styles/less/accordion.css +35 -37
  301. package/src/styles/less/alerts.css +84 -96
  302. package/src/styles/less/badge.css +25 -23
  303. package/src/styles/less/breadcrumbs.css +6 -4
  304. package/src/styles/less/button-groups.css +157 -168
  305. package/src/styles/less/buttons.css +69 -74
  306. package/src/styles/less/circles.css +54 -60
  307. package/src/styles/less/close.css +2 -2
  308. package/src/styles/less/column-layout.css +45 -48
  309. package/src/styles/less/currency-flags.css +10 -12
  310. package/src/styles/less/decision.css +14 -12
  311. package/src/styles/less/dropdowns.css +116 -142
  312. package/src/styles/less/droppable.css +45 -36
  313. package/src/styles/less/flex.css +88 -104
  314. package/src/styles/less/footer.css +15 -14
  315. package/src/styles/less/forms/bootstrap-forms.css +244 -264
  316. package/src/styles/less/forms/checkbox-radio.css +41 -41
  317. package/src/styles/less/grid.css +780 -975
  318. package/src/styles/less/input-groups.css +333 -361
  319. package/src/styles/less/link-callout.css +5 -6
  320. package/src/styles/less/list-group.css +72 -66
  321. package/src/styles/less/loaders.css +11 -11
  322. package/src/styles/less/media.css +21 -25
  323. package/src/styles/less/modals.css +57 -51
  324. package/src/styles/less/navbar.css +537 -581
  325. package/src/styles/less/navs.css +84 -88
  326. package/src/styles/less/neptune-social-media.css +17 -21
  327. package/src/styles/less/neptune.css +4217 -4545
  328. package/src/styles/less/panels.css +100 -102
  329. package/src/styles/less/popovers.css +189 -217
  330. package/src/styles/less/process.css +69 -71
  331. package/src/styles/less/progress-bars.css +13 -17
  332. package/src/styles/less/progress-bars.less +0 -5
  333. package/src/styles/less/select.css +35 -39
  334. package/src/styles/less/sequences.css +147 -169
  335. package/src/styles/less/table.css +50 -39
  336. package/src/styles/less/tick.css +15 -10
  337. package/src/styles/less/tick.less +6 -1
  338. package/src/styles/less/tooltip.css +66 -64
  339. package/src/styles/less/utilities.css +24 -24
  340. package/src/styles/less/wells.css +20 -20
  341. package/src/summary/Summary.css +19 -30
  342. package/src/summary/Summary.less +1 -6
  343. package/src/switch/Switch.css +5 -4
  344. package/src/table/Table.css +60 -57
  345. package/src/tabs/Tabs.css +18 -14
  346. package/src/tile/Tile.css +12 -12
  347. package/src/tooltip/Tooltip.css +2 -2
  348. package/src/typeahead/Typeahead.css +40 -52
  349. package/src/typeahead/Typeahead.less +2 -2
  350. package/src/upload/Upload.css +11 -10
  351. package/src/uploadInput/UploadInput.css +4 -4
  352. package/src/uploadInput/uploadButton/UploadButton.css +20 -19
  353. package/src/uploadInput/uploadItem/UploadItem.css +45 -44
package/build/styles/css/flex.css CHANGED
@@ -401,198 +401,182 @@
401
401
  display: flex;
402
402
  flex: 1;
403
403
  flex-wrap: wrap;
404
- margin-right: calc(-1 * 16px);
405
- margin-right: calc(-1 * var(--size-16));
406
- margin-left: calc(-1 * 16px);
407
- margin-left: calc(-1 * var(--size-16));
404
+ margin-inline-end: calc(-1 * 16px);
405
+ margin-inline-end: calc(-1 * var(--size-16));
406
+ margin-inline-start: calc(-1 * 16px);
407
+ margin-inline-start: calc(-1 * var(--size-16));
408
408
  }
409
409
  [dir="rtl"] .flex__inner {
410
- margin-left: calc(-1 * 16px);
411
- margin-left: calc(-1 * var(--size-16));
412
- margin-right: 0;
413
- margin-right: initial;
410
+ margin-inline-start: calc(-1 * 16px);
411
+ margin-inline-start: calc(-1 * var(--size-16));
412
+ margin-inline-end: initial;
414
413
  }
415
414
  [dir="rtl"] .flex__inner {
416
- margin-right: calc(-1 * 16px);
417
- margin-right: calc(-1 * var(--size-16));
418
- margin-left: 0;
419
- margin-left: initial;
415
+ margin-inline-end: calc(-1 * 16px);
416
+ margin-inline-end: calc(-1 * var(--size-16));
417
+ margin-inline-start: initial;
420
418
  }
421
419
  @media (min-width: 576px) {
422
420
  .flex__inner {
423
- margin-right: calc(-1 * 24px);
424
- margin-right: calc(-1 * var(--size-24));
425
- margin-left: calc(-1 * 24px);
426
- margin-left: calc(-1 * var(--size-24));
421
+ margin-inline-end: calc(-1 * 24px);
422
+ margin-inline-end: calc(-1 * var(--size-24));
423
+ margin-inline-start: calc(-1 * 24px);
424
+ margin-inline-start: calc(-1 * var(--size-24));
427
425
  }
428
426
  [dir="rtl"] .flex__inner {
429
- margin-left: calc(-1 * 24px);
430
- margin-left: calc(-1 * var(--size-24));
431
- margin-right: 0;
432
- margin-right: initial;
427
+ margin-inline-start: calc(-1 * 24px);
428
+ margin-inline-start: calc(-1 * var(--size-24));
429
+ margin-inline-end: initial;
433
430
  }
434
431
  [dir="rtl"] .flex__inner {
435
- margin-right: calc(-1 * 24px);
436
- margin-right: calc(-1 * var(--size-24));
437
- margin-left: 0;
438
- margin-left: initial;
432
+ margin-inline-end: calc(-1 * 24px);
433
+ margin-inline-end: calc(-1 * var(--size-24));
434
+ margin-inline-start: initial;
439
435
  }
440
436
  }
441
437
  @media (min-width: 768px) {
442
438
  .flex__inner {
443
- margin-right: calc(-1 * 32px);
444
- margin-right: calc(-1 * var(--size-32));
445
- margin-left: calc(-1 * 32px);
446
- margin-left: calc(-1 * var(--size-32));
439
+ margin-inline-end: calc(-1 * 32px);
440
+ margin-inline-end: calc(-1 * var(--size-32));
441
+ margin-inline-start: calc(-1 * 32px);
442
+ margin-inline-start: calc(-1 * var(--size-32));
447
443
  }
448
444
  [dir="rtl"] .flex__inner {
449
- margin-left: calc(-1 * 32px);
450
- margin-left: calc(-1 * var(--size-32));
451
- margin-right: 0;
452
- margin-right: initial;
445
+ margin-inline-start: calc(-1 * 32px);
446
+ margin-inline-start: calc(-1 * var(--size-32));
447
+ margin-inline-end: initial;
453
448
  }
454
449
  [dir="rtl"] .flex__inner {
455
- margin-right: calc(-1 * 32px);
456
- margin-right: calc(-1 * var(--size-32));
457
- margin-left: 0;
458
- margin-left: initial;
450
+ margin-inline-end: calc(-1 * 32px);
451
+ margin-inline-end: calc(-1 * var(--size-32));
452
+ margin-inline-start: initial;
459
453
  }
460
454
  }
461
455
  @media (min-width: 992px) {
462
456
  .flex__inner {
463
- margin-right: calc(-1 * 48px);
464
- margin-right: calc(-1 * var(--size-48));
465
- margin-left: calc(-1 * 48px);
466
- margin-left: calc(-1 * var(--size-48));
457
+ margin-inline-end: calc(-1 * 48px);
458
+ margin-inline-end: calc(-1 * var(--size-48));
459
+ margin-inline-start: calc(-1 * 48px);
460
+ margin-inline-start: calc(-1 * var(--size-48));
467
461
  }
468
462
  [dir="rtl"] .flex__inner {
469
- margin-left: calc(-1 * 48px);
470
- margin-left: calc(-1 * var(--size-48));
471
- margin-right: 0;
472
- margin-right: initial;
463
+ margin-inline-start: calc(-1 * 48px);
464
+ margin-inline-start: calc(-1 * var(--size-48));
465
+ margin-inline-end: initial;
473
466
  }
474
467
  [dir="rtl"] .flex__inner {
475
- margin-right: calc(-1 * 48px);
476
- margin-right: calc(-1 * var(--size-48));
477
- margin-left: 0;
478
- margin-left: initial;
468
+ margin-inline-end: calc(-1 * 48px);
469
+ margin-inline-end: calc(-1 * var(--size-48));
470
+ margin-inline-start: initial;
479
471
  }
480
472
  }
481
473
  .flex__item {
482
- padding-right: 16px;
483
- padding-right: var(--size-16);
484
- padding-left: 16px;
485
- padding-left: var(--size-16);
474
+ padding-inline-end: 16px;
475
+ padding-inline-end: var(--size-16);
476
+ padding-inline-start: 16px;
477
+ padding-inline-start: var(--size-16);
486
478
  }
487
479
  [dir="rtl"] .flex__item {
488
- padding-left: 16px;
489
- padding-left: var(--size-16);
490
- padding-right: 0;
491
- padding-right: initial;
480
+ padding-inline-start: 16px;
481
+ padding-inline-start: var(--size-16);
482
+ padding-inline-end: initial;
492
483
  }
493
484
  [dir="rtl"] .flex__item {
494
- padding-right: 16px;
495
- padding-right: var(--size-16);
496
- padding-left: 0;
497
- padding-left: initial;
485
+ padding-inline-end: 16px;
486
+ padding-inline-end: var(--size-16);
487
+ padding-inline-start: initial;
498
488
  }
499
489
  @media (min-width: 576px) {
500
490
  .flex__item {
501
- padding-right: 24px;
502
- padding-right: var(--size-24);
503
- padding-left: 24px;
504
- padding-left: var(--size-24);
491
+ padding-inline-end: 24px;
492
+ padding-inline-end: var(--size-24);
493
+ padding-inline-start: 24px;
494
+ padding-inline-start: var(--size-24);
505
495
  }
506
496
  [dir="rtl"] .flex__item {
507
- padding-left: 24px;
508
- padding-left: var(--size-24);
509
- padding-right: 0;
510
- padding-right: initial;
497
+ padding-inline-start: 24px;
498
+ padding-inline-start: var(--size-24);
499
+ padding-inline-end: initial;
511
500
  }
512
501
  [dir="rtl"] .flex__item {
513
- padding-right: 24px;
514
- padding-right: var(--size-24);
515
- padding-left: 0;
516
- padding-left: initial;
502
+ padding-inline-end: 24px;
503
+ padding-inline-end: var(--size-24);
504
+ padding-inline-start: initial;
517
505
  }
518
506
  }
519
507
  @media (min-width: 768px) {
520
508
  .flex__item {
521
- padding-right: 32px;
522
- padding-right: var(--size-32);
523
- padding-left: 32px;
524
- padding-left: var(--size-32);
509
+ padding-inline-end: 32px;
510
+ padding-inline-end: var(--size-32);
511
+ padding-inline-start: 32px;
512
+ padding-inline-start: var(--size-32);
525
513
  }
526
514
  [dir="rtl"] .flex__item {
527
- padding-left: 32px;
528
- padding-left: var(--size-32);
529
- padding-right: 0;
530
- padding-right: initial;
515
+ padding-inline-start: 32px;
516
+ padding-inline-start: var(--size-32);
517
+ padding-inline-end: initial;
531
518
  }
532
519
  [dir="rtl"] .flex__item {
533
- padding-right: 32px;
534
- padding-right: var(--size-32);
535
- padding-left: 0;
536
- padding-left: initial;
520
+ padding-inline-end: 32px;
521
+ padding-inline-end: var(--size-32);
522
+ padding-inline-start: initial;
537
523
  }
538
524
  }
539
525
  @media (min-width: 992px) {
540
526
  .flex__item {
541
- padding-right: 48px;
542
- padding-right: var(--size-48);
543
- padding-left: 48px;
544
- padding-left: var(--size-48);
527
+ padding-inline-end: 48px;
528
+ padding-inline-end: var(--size-48);
529
+ padding-inline-start: 48px;
530
+ padding-inline-start: var(--size-48);
545
531
  }
546
532
  [dir="rtl"] .flex__item {
547
- padding-left: 48px;
548
- padding-left: var(--size-48);
549
- padding-right: 0;
550
- padding-right: initial;
533
+ padding-inline-start: 48px;
534
+ padding-inline-start: var(--size-48);
535
+ padding-inline-end: initial;
551
536
  }
552
537
  [dir="rtl"] .flex__item {
553
- padding-right: 48px;
554
- padding-right: var(--size-48);
555
- padding-left: 0;
556
- padding-left: initial;
538
+ padding-inline-end: 48px;
539
+ padding-inline-end: var(--size-48);
540
+ padding-inline-start: initial;
557
541
  }
558
542
  }
559
543
  .flex__item--4 {
560
544
  flex: 0 0 calc(100% / 3);
561
- max-width: calc(100% / 3);
545
+ max-inline-size: calc(100% / 3);
562
546
  }
563
547
  @media (max-width: 767px) {
564
548
  .flex__item--4--md {
565
549
  flex: 0 0 calc(100% / 3);
566
- max-width: calc(100% / 3);
550
+ max-inline-size: calc(100% / 3);
567
551
  }
568
552
  }
569
553
  .flex__item--8 {
570
554
  flex: 0 0 calc(100% / 1.5);
571
- max-width: calc(100% / 1.5);
555
+ max-inline-size: calc(100% / 1.5);
572
556
  }
573
557
  @media (max-width: 767px) {
574
558
  .flex__item--8--md {
575
559
  flex: 0 0 calc(100% / 1.5);
576
- max-width: calc(100% / 1.5);
560
+ max-inline-size: calc(100% / 1.5);
577
561
  }
578
562
  }
579
563
  .flex__item--6 {
580
564
  flex: 0 0 50%;
581
- max-width: 50%;
565
+ max-inline-size: 50%;
582
566
  }
583
567
  @media (max-width: 767px) {
584
568
  .flex__item--6--md {
585
569
  flex: 0 0 50%;
586
- max-width: 50%;
570
+ max-inline-size: 50%;
587
571
  }
588
572
  }
589
573
  .flex__item--12 {
590
574
  flex: 0 0 100%;
591
- max-width: 100%;
575
+ max-inline-size: 100%;
592
576
  }
593
577
  @media (max-width: 767px) {
594
578
  .flex__item--12--md {
595
579
  flex: 0 0 100%;
596
- max-width: 100%;
580
+ max-inline-size: 100%;
597
581
  }
598
582
  }
package/build/styles/css/footer.css CHANGED
@@ -7,25 +7,25 @@
7
7
  letter-spacing: -0.006em;
8
8
  font-weight: 400;
9
9
  font-weight: var(--font-weight-regular);
10
- padding-top: calc(8px * 10);
11
- padding-top: calc(var(--size-8) * 10);
12
- padding-bottom: calc(8px * 10);
13
- padding-bottom: calc(var(--size-8) * 10);
10
+ padding-block-start: calc(8px * 10);
11
+ padding-block-start: calc(var(--size-8) * 10);
12
+ padding-block-end: calc(8px * 10);
13
+ padding-block-end: calc(var(--size-8) * 10);
14
14
  }
15
15
  @media (min-width: 576px) {
16
16
  .footer {
17
- padding-top: calc(8px * 15);
18
- padding-top: calc(var(--size-8) * 15);
19
- padding-bottom: calc(8px * 15);
20
- padding-bottom: calc(var(--size-8) * 15);
17
+ padding-block-start: calc(8px * 15);
18
+ padding-block-start: calc(var(--size-8) * 15);
19
+ padding-block-end: calc(8px * 15);
20
+ padding-block-end: calc(var(--size-8) * 15);
21
21
  }
22
22
  }
23
23
  @media (min-width: 992px) {
24
24
  .footer {
25
- padding-top: calc(8px * 20);
26
- padding-top: calc(var(--size-8) * 20);
27
- padding-bottom: calc(8px * 20);
28
- padding-bottom: calc(var(--size-8) * 20);
25
+ padding-block-start: calc(8px * 20);
26
+ padding-block-start: calc(var(--size-8) * 20);
27
+ padding-block-end: calc(8px * 20);
28
+ padding-block-end: calc(var(--size-8) * 20);
29
29
  }
30
30
  }
31
31
  .footer .footer-link,
@@ -66,9 +66,10 @@
66
66
  color: transparent;
67
67
  }
68
68
  .footer .icon {
69
- margin: 0 5px;
69
+ margin-block: 0;
70
+ margin-inline: 5px;
70
71
  font-size: 32px !important;
71
- width: 24px;
72
+ inline-size: 24px;
72
73
  }
73
74
  .footer .link-icon {
74
75
  -webkit-text-decoration: none;