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

package/build/styles/styles/less/link-callout.css

@@ -1,16 +1,15 @@
 .link-callout > .tw-icon-chevron-up {
   display: inline-block;
-  margin-left: 8px;
-  margin-left: var(--size-8);
+  margin-inline-start: 8px;
+  margin-inline-start: var(--size-8);
   pointer-events: none;
   transition: transform 0.2s ease-in-out;
   transform: rotate(90deg);
 }
 [dir="rtl"] .link-callout > .tw-icon-chevron-up {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 8px;
+  margin-inline-end: var(--size-8);
+  margin-inline-start: initial;
 }
 .link-callout:hover > .tw-icon-chevron-up,
 .link-callout:focus > .tw-icon-chevron-up,

package/build/styles/styles/less/list-group.css

@@ -1,57 +1,64 @@
 .list-group {
   list-style-type: none;
-  margin-bottom: 20px;
-  padding-left: 0;
-  border-left: 1px solid rgba(0,0,0,0.10196);
-  border-left: 1px solid var(--color-border-neutral);
-  border-right: 1px solid rgba(0,0,0,0.10196);
-  border-right: 1px solid var(--color-border-neutral);
+  margin-block-end: 20px;
+  padding-inline-start: 0;
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid #0000001a;
+  border-inline-start: 1px solid var(--color-border-neutral);
+  border-inline-end: 1px solid rgba(0,0,0,0.10196);
+  border-inline-end: 1px solid #0000001a;
+  border-inline-end: 1px solid var(--color-border-neutral);
 }
 [dir="rtl"] .list-group {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: initial;
 }
 .list-group-item {
   display: block;
-  padding: 16px 16px 16px 14px;
+  padding-block: 16px 16px;
+  padding-inline: 14px 16px;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  margin-top: 1px;
+  margin-block-start: 1px;
   line-height: 1.5;
   line-height: var(--line-height-body);
   transition: all ease 0.15s;
 }
 [dir="rtl"] .list-group-item {
-  padding: 16px 14px 16px 16px;
+  padding-block: 16px 16px;
+  padding-inline: 16px 14px;
 }
 [dir="rtl"] .list-group-item {
-  border-right: 2px solid transparent;
+  border-inline-end: 2px solid transparent;
 }
 html:not([dir="rtl"]) .list-group-item {
-  border-left: 2px solid transparent;
+  border-inline-start: 2px solid transparent;
 }
 .panel-group .list-group-item {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 @media (min-width: 576px) {
   .list-group-item {
-    padding: 24px 24px 24px 22px;
+    padding-block: 24px 24px;
+    padding-inline: 22px 24px;
   }
   [dir="rtl"] .list-group-item {
-    padding: 24px 22px 24px 24px;
+    padding-block: 24px 24px;
+    padding-inline: 24px 22px;
   }
 }
 @media (min-width: 992px) {
   .list-group-item {
-    padding: 32px 32px 32px 30px;
+    padding-block: 32px 32px;
+    padding-inline: 30px 32px;
   }
   [dir="rtl"] .list-group-item {
-    padding: 32px 30px 32px 32px;
+    padding-block: 32px 32px;
+    padding-inline: 32px 30px;
   }
 }
 .list-group-item-heading {
-  margin-bottom: 0;
+  margin-block-end: 0;
   margin: 0;
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -96,11 +103,11 @@ html:not([dir="rtl"]) .list-group-item {
 .list-group-item-heading + p,
 .list-group-item-heading + ul:not(.list-unstyled),
 .list-group-item-heading + ol:not(.list-unstyled) {
-  margin-top: 8px;
-  margin-top: var(--size-8);
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
 }
 .list-group-item-text {
-  margin-bottom: 0;
+  margin-block-end: 0;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -135,16 +142,16 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
   background-color: var(--color-background-elevated);
   box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
-  margin-top: 24px;
-  margin-top: var(--size-24);
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-start: 24px;
+  margin-block-start: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
 }
 .list-group-item.active:first-child {
-  margin-top: 1px;
+  margin-block-start: 1px;
 }
 .list-group-item.active:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .np-theme-personal--forest-green .list-group-item.active,
 .np-theme-personal--bright-green .list-group-item.active,
@@ -153,8 +160,8 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 @media (min-width: 768px) {
   .list-group-item.active {
-    margin-left: -12px;
-    margin-right: -12px;
+    margin-inline-start: -12px;
+    margin-inline-end: -12px;
   }
   .list-group-item .media-body {
     transition: padding ease 0.15s;
@@ -162,7 +169,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 .list-group-inactive .list-group-item {
   background-color: transparent;
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .list-group-inactive .list-group-item:hover,
 .list-group-inactive .list-group-item.active {
@@ -177,16 +184,16 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
   }
 }
 .list-group-inactive .list-group-item.active {
-  margin-top: 24px;
-  margin-top: var(--size-24);
+  margin-block-start: 24px;
+  margin-block-start: var(--size-24);
 }
 [dir="rtl"] .list-group-item-success {
-  border-right: 3px solid #008026;
-  border-right: 3px solid var(--color-content-positive);
+  border-inline-end: 3px solid #008026;
+  border-inline-end: 3px solid var(--color-content-positive);
 }
 html:not([dir="rtl"]) .list-group-item-success {
-  border-left: 3px solid #008026;
-  border-left: 3px solid var(--color-content-positive);
+  border-inline-start: 3px solid #008026;
+  border-inline-start: 3px solid var(--color-content-positive);
 }
 .list-group-item.list-group-item-success {
   background-color: #ffffff;
@@ -205,12 +212,12 @@ a.list-group-item-success:hover {
   color: var(--color-content-positive);
 }
 [dir="rtl"] .list-group-item-info {
-  border-right: 3px solid #0097c7;
-  border-right: 3px solid var(--color-content-accent);
+  border-inline-end: 3px solid #0097c7;
+  border-inline-end: 3px solid var(--color-content-accent);
 }
 html:not([dir="rtl"]) .list-group-item-info {
-  border-left: 3px solid #0097c7;
-  border-left: 3px solid var(--color-content-accent);
+  border-inline-start: 3px solid #0097c7;
+  border-inline-start: 3px solid var(--color-content-accent);
 }
 .list-group-item.list-group-item-info {
   background-color: #ffffff;
@@ -229,12 +236,12 @@ a.list-group-item-info:hover {
   color: var(--color-content-accent);
 }
 [dir="rtl"] .list-group-item-warning {
-  border-right: 3px solid #9a6500;
-  border-right: 3px solid var(--color-content-warning);
+  border-inline-end: 3px solid #9a6500;
+  border-inline-end: 3px solid var(--color-content-warning);
 }
 html:not([dir="rtl"]) .list-group-item-warning {
-  border-left: 3px solid #9a6500;
-  border-left: 3px solid var(--color-content-warning);
+  border-inline-start: 3px solid #9a6500;
+  border-inline-start: 3px solid var(--color-content-warning);
 }
 .list-group-item.list-group-item-warning {
   background-color: #ffffff;
@@ -253,12 +260,12 @@ a.list-group-item-warning:hover {
   color: var(--color-content-warning);
 }
 [dir="rtl"] .list-group-item-danger {
-  border-right: 3px solid #cf2929;
-  border-right: 3px solid var(--color-content-negative);
+  border-inline-end: 3px solid #cf2929;
+  border-inline-end: 3px solid var(--color-content-negative);
 }
 html:not([dir="rtl"]) .list-group-item-danger {
-  border-left: 3px solid #cf2929;
-  border-left: 3px solid var(--color-content-negative);
+  border-inline-start: 3px solid #cf2929;
+  border-inline-start: 3px solid var(--color-content-negative);
 }
 .list-group-item.list-group-item-danger {
   background-color: #ffffff;
@@ -308,11 +315,11 @@ a.list-group-item-danger:hover {
 @media (max-width: 767px) {
   .list-group-slide-out .list-group-item .collapse {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    height: 100dvh;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    block-size: 100dvh;
     margin: 0;
     overflow-y: auto;
     background-color: #fff;
@@ -320,31 +327,30 @@ a.list-group-item-danger:hover {
     z-index: 3;
   }
   [dir="rtl"] .list-group-slide-out .list-group-item .collapse {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   .list-group-slide-out .list-group-item .collapse .media-left {
     display: none;
   }
   .list-group-slide-out .list-group-item .collapse .well {
     border-radius: 0;
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .list-group-slide-out .list-group-item.active,
   .list-group-slide-out .list-group-inactive .list-group-item.active {
-    margin-top: 1px;
-    margin-bottom: 0;
+    margin-block-start: 1px;
+    margin-block-end: 0;
     box-shadow: none !important;
   }
   .list-group-slide-out .list-group-item.active .collapse {
-    height: 100vh;
-    height: 100dvh;
+    block-size: 100vh;
+    block-size: 100dvh;
     overflow-y: auto;
-    padding-bottom: 72px;
+    padding-block-end: 72px;
   }
   .list-group-slide-out .list-group-item.active .collapse .well {
-    padding-bottom: 72px;
-    margin-bottom: -72px;
+    padding-block-end: 72px;
+    margin-block-end: -72px;
   }
 }

package/build/styles/styles/less/loaders.css

@@ -1,15 +1,15 @@
 .loader {
   position: relative;
   display: inline-block;
-  height: 160px;
-  width: 160px;
+  block-size: 160px;
+  inline-size: 160px;
 }
 .loader .loader-flag {
-  top: 58px;
-  left: 52px;
+  inset-block-start: 58px;
+  inset-inline-start: 52px;
   position: relative;
-  height: 52px;
-  width: 52px;
+  block-size: 52px;
+  inline-size: 52px;
 }
 .loader .loader-flag-stroke {
   animation: loaderStroke 3.5s infinite;
@@ -17,21 +17,21 @@
 .loader .loader-flag-fill {
   display: block;
   position: absolute;
-  top: 1px;
+  inset-block-start: 1px;
   opacity: 1;
   animation: loaderFill 3.5s infinite;
 }
 .loader .loader-spinner {
-  width: 160px;
-  height: 160px;
+  inline-size: 160px;
+  block-size: 160px;
   position: absolute;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjU0IC01NCAxNjAgMTYwIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTA4LjY2MiIgeTE9IjUyLjE3NSIgeDI9IjEwNy42NjIiIHkyPSI1Mi4xNzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTYwIDAgMCAtODAgLTE3MTcyIDQxNjApIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMDk3YzciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDk3YzciIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTIxNCAyNmMwLTQ0LjItMzUuOC04MC04MC04MFM1NC0xOC4yIDU0IDI2aDJjMC00My4xIDM0LjktNzggNzgtNzhzNzggMzQuOSA3OCA3OGgyeiIvPjwvc3ZnPg==");
   animation: rotating 1.4s linear infinite;
 }
 .loader .loader-flag-fill,
 .loader .loader-flag-outline {
-  width: 52px;
-  height: 52px;
+  inline-size: 52px;
+  block-size: 52px;
 }
 /* Animations */
 @keyframes loaderStroke {

package/build/styles/styles/less/media.css

@@ -6,7 +6,7 @@
   flex: 1;
 }
 .media-body > *:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .media-middle {
   align-self: center;
@@ -20,53 +20,49 @@
 }
 /* Alignment */
 .media-right {
-  padding-left: 16px;
-  padding-left: var(--size-16);
+  padding-inline-start: 16px;
+  padding-inline-start: var(--size-16);
 }
 [dir="rtl"] .media-right {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 16px;
+  padding-inline-end: var(--size-16);
+  padding-inline-start: initial;
 }
 .media-left {
-  padding-right: 16px;
-  padding-right: var(--size-16);
+  padding-inline-end: 16px;
+  padding-inline-end: var(--size-16);
 }
 [dir="rtl"] .media-left {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 16px;
+  padding-inline-start: var(--size-16);
+  padding-inline-end: initial;
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
-    padding-left: 32px;
-    padding-left: var(--size-32);
+    padding-inline-start: 32px;
+    padding-inline-start: var(--size-32);
   }
   [dir="rtl"] .media-right,
   [dir="rtl"] .media-left {
-    padding-right: 32px;
-    padding-right: var(--size-32);
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 32px;
+    padding-inline-end: var(--size-32);
+    padding-inline-start: initial;
   }
 }
 /* Headings */
 .media-heading {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 /* Media list variation */
 .media-list {
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style: none;
 }
 [dir="rtl"] .media-list {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: initial;
 }
 /* Fix text-ellipsis issue with text in dropdown */
 .dropdown-menu .media-body {

package/build/styles/styles/less/modals.css

@@ -5,10 +5,10 @@
   display: none;
   overflow: hidden;
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: 1050;
   -webkit-overflow-scrolling: touch;
   outline: 0;
@@ -26,7 +26,7 @@
 }
 .modal-dialog {
   position: relative;
-  width: auto;
+  inline-size: auto;
   margin: 16px;
   margin: var(--size-16);
 }
@@ -52,10 +52,10 @@
 }
 .modal-backdrop {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: 1040;
   background-color: #37517e;
 }
@@ -77,13 +77,14 @@
 }
 .modal-header {
   padding: 24px;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-  min-height: calc(24px + 24px);
-  min-height: calc(24px + var(--size-24));
+  border-block-end: 1px solid rgba(0,0,0,0.10196);
+  border-block-end: 1px solid #0000001a;
+  border-block-end: 1px solid var(--color-border-neutral);
+  min-block-size: calc(24px + 24px);
+  min-block-size: calc(24px + var(--size-24));
 }
 .modal-header .close {
-  margin-top: -2px;
+  margin-block-start: -2px;
 }
 .modal-title {
   margin: 0;
@@ -95,53 +96,53 @@
   padding: 24px;
 }
 .modal-footer {
-  padding: 16px 24px;
-  padding: var(--size-16) 24px;
-  text-align: right;
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
+  padding-block: 16px;
+  padding-block: var(--size-16);
+  padding-inline: 24px;
+  text-align: end;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
+  border-block-start: 1px solid var(--color-border-neutral);
 }
 [dir="rtl"] .modal-footer {
-  text-align: left;
+  text-align: start;
 }
 .modal-footer .btn + .btn {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-bottom: 0;
+  margin-inline-start: 8px;
+  margin-inline-start: var(--size-8);
+  margin-block-end: 0;
 }
 [dir="rtl"] .modal-footer .btn + .btn {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 8px;
+  margin-inline-end: var(--size-8);
+  margin-inline-start: initial;
 }
 .modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 [dir="rtl"] .modal-footer .btn-group .btn + .btn {
-  margin-right: -1px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -1px;
+  margin-inline-start: initial;
 }
 .modal-footer .btn-block + .btn-block {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 [dir="rtl"] .modal-footer .btn-block + .btn-block {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 0;
+  margin-inline-start: initial;
 }
 .modal-scrollbar-measure {
   position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
+  inset-block-start: -9999px;
+  inline-size: 50px;
+  block-size: 50px;
   overflow: scroll;
 }
 @media (min-width: 576px) {
   .modal-dialog {
-    width: 540px;
-    margin: 32px auto;
+    inline-size: 540px;
+    margin-block: 32px;
+    margin-inline: auto;
   }
   .modal-content {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
@@ -152,34 +153,39 @@
     box-shadow: none;
   }
   .modal-header {
-    padding: 28px 32px;
-    min-height: calc(28px + 24px);
-    min-height: calc(28px + var(--size-24));
+    padding-block: 28px;
+    padding-inline: 32px;
+    min-block-size: calc(28px + 24px);
+    min-block-size: calc(28px + var(--size-24));
   }
   .modal-body {
     padding: 32px;
   }
   .modal-footer {
-    padding: 16px 32px;
-    padding: var(--size-16) 32px;
+    padding-block: 16px;
+    padding-block: var(--size-16);
+    padding-inline: 32px;
   }
 }
 @media (min-width: 576px) {
   .modal-sm,
   .modal-lg {
-    width: auto;
-    margin: 32px 24px;
+    inline-size: auto;
+    margin-block: 32px;
+    margin-inline: 24px;
   }
 }
 @media (min-width: 332px) {
   .modal-sm {
-    width: 300px;
-    margin: 32px auto;
+    inline-size: 300px;
+    margin-block: 32px;
+    margin-inline: auto;
   }
 }
 @media (min-width: 768px) {
   .modal-lg {
-    width: 720px;
-    margin: 32px auto;
+    inline-size: 720px;
+    margin-block: 32px;
+    margin-inline: auto;
   }
 }