@transferwise/components 0.0.0-experimental-c1f5b0b → 0.0.0-experimental-fe160ab

package/src/styles/less/droppable.css

@@ -43,40 +43,40 @@
   border-color: transparent !important;
 }
 .np-theme-personal .droppable-area.tw-droppable-md {
-  min-block-size: 242px;
+  min-height: 242px;
 }
 .np-theme-personal .droppable-area.droppable-dropping .droppable-default-card {
   opacity: 0;
 }
 .np-theme-personal .droppable-area.droppable-dropping .tw-icon-plus svg {
-  inline-size: 24px;
-  inline-size: var(--size-24);
-  block-size: 24px;
-  block-size: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
 }
 .np-theme-personal .droppable-area.droppable-dropping h4 {
-  margin-block-start: 16px !important;
-  margin-block-start: var(--padding-small) !important;
+  margin-top: 16px !important;
+  margin-top: var(--padding-small) !important;
 }
 .np-theme-personal .droppable-area.droppable-negative {
   border: 2px solid var(--color-sentiment-negative) !important;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  min-block-size: 315px;
+  min-height: 315px;
 }
 .np-theme-personal .droppable-area.droppable-complete .thumbnail {
-  margin-block-end: 8px !important;
-  margin-block-end: var(--padding-x-small) !important;
+  margin-bottom: 8px !important;
+  margin-bottom: var(--padding-x-small) !important;
 }
 .np-theme-personal .droppable-area .droppable-default-card .m-b-3 {
-  margin-block-end: 16px !important;
-  margin-block-end: var(--padding-small) !important;
+  margin-bottom: 16px !important;
+  margin-bottom: var(--padding-small) !important;
 }
 .np-theme-personal .droppable-area .droppable-dropping-card {
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .droppable-area .droppable-card-content .circle {
-  padding-block-start: 0 !important;
+  padding-top: 0 !important;
 }
 .np-theme-personal .droppable-area .circle {
   background-color: var(--color-contrast);
@@ -87,18 +87,23 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   display: none;
-  inline-size: 100%;
-  block-size: 100%;
+  width: 100%;
+  height: 100%;
   align-items: center;
   justify-content: center;
   padding: inherit;
   transition: transform 0.3s ease;
 }
+[dir="rtl"] .droppable-card {
+  right: 0;
+  left: auto;
+  left: initial;
+}
 .droppable-card-content {
-  max-inline-size: 100%;
+  max-width: 100%;
   opacity: 1;
 }
 .droppable-dropping {
@@ -114,16 +119,15 @@
   border-style: solid;
 }
 .droppable .thumbnail {
-  inline-size: auto;
-  max-block-size: 96px;
-  max-inline-size: 96px;
-  margin-block: 0;
-  margin-inline: auto;
+  width: auto;
+  max-height: 96px;
+  max-width: 96px;
+  margin: 0 auto;
 }
 @media (min-width: 840px) {
   .droppable .thumbnail {
-    max-block-size: 128px;
-    max-inline-size: 128px;
+    max-height: 128px;
+    max-width: 128px;
   }
 }
 /***** Card variants *****/
@@ -169,51 +173,42 @@
   border-style: dashed;
 }
 .droppable-sm {
-  padding-block: 16px;
-  padding-inline: 16px;
+  padding: 16px 16px;
 }
 @media (min-width: 600px) {
   .droppable-sm {
-    padding-block: 24px;
-    padding-inline: 16px;
+    padding: 24px 16px;
   }
 }
 @media (min-width: 1160px) {
   .droppable-sm {
-    padding-block: 32px;
-    padding-inline: 24px;
+    padding: 32px 24px;
   }
 }
 .droppable-md {
-  padding-block: 32px;
-  padding-inline: 32px;
+  padding: 32px 32px;
 }
 @media (min-width: 600px) {
   .droppable-md {
-    padding-block: 48px;
-    padding-inline: 32px;
+    padding: 48px 32px;
   }
 }
 @media (min-width: 1160px) {
   .droppable-md {
-    padding-block: 64px;
-    padding-inline: 48px;
+    padding: 64px 48px;
   }
 }
 .droppable-lg {
-  padding-block: 48px;
-  padding-inline: 48px;
+  padding: 48px 48px;
 }
 @media (min-width: 600px) {
   .droppable-lg {
-    padding-block: 72px;
-    padding-inline: 48px;
+    padding: 72px 48px;
   }
 }
 @media (min-width: 1160px) {
   .droppable-lg {
-    padding-block: 96px;
-    padding-inline: 72px;
+    padding: 96px 72px;
   }
 }
 @keyframes droppable-fade-in {

package/src/styles/less/flex.css

@@ -399,102 +399,198 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
-  margin-inline-end: calc(-1 * 16px);
-  margin-inline-end: calc(-1 * var(--size-16));
-  margin-inline-start: calc(-1 * 16px);
-  margin-inline-start: calc(-1 * var(--size-16));
+  margin-right: calc(-1 * 16px);
+  margin-right: calc(-1 * var(--size-16));
+  margin-left: calc(-1 * 16px);
+  margin-left: calc(-1 * var(--size-16));
+}
+[dir="rtl"] .flex__inner {
+  margin-left: calc(-1 * 16px);
+  margin-left: calc(-1 * var(--size-16));
+  margin-right: 0;
+  margin-right: initial;
+}
+[dir="rtl"] .flex__inner {
+  margin-right: calc(-1 * 16px);
+  margin-right: calc(-1 * var(--size-16));
+  margin-left: 0;
+  margin-left: initial;
 }
 @media (min-width: 600px) {
   .flex__inner {
-    margin-inline-end: calc(-1 * 24px);
-    margin-inline-end: calc(-1 * var(--size-24));
-    margin-inline-start: calc(-1 * 24px);
-    margin-inline-start: calc(-1 * var(--size-24));
+    margin-right: calc(-1 * 24px);
+    margin-right: calc(-1 * var(--size-24));
+    margin-left: calc(-1 * 24px);
+    margin-left: calc(-1 * var(--size-24));
+  }
+  [dir="rtl"] .flex__inner {
+    margin-left: calc(-1 * 24px);
+    margin-left: calc(-1 * var(--size-24));
+    margin-right: 0;
+    margin-right: initial;
+  }
+  [dir="rtl"] .flex__inner {
+    margin-right: calc(-1 * 24px);
+    margin-right: calc(-1 * var(--size-24));
+    margin-left: 0;
+    margin-left: initial;
   }
 }
 @media (min-width: 840px) {
   .flex__inner {
-    margin-inline-end: calc(-1 * 32px);
-    margin-inline-end: calc(-1 * var(--size-32));
-    margin-inline-start: calc(-1 * 32px);
-    margin-inline-start: calc(-1 * var(--size-32));
+    margin-right: calc(-1 * 32px);
+    margin-right: calc(-1 * var(--size-32));
+    margin-left: calc(-1 * 32px);
+    margin-left: calc(-1 * var(--size-32));
+  }
+  [dir="rtl"] .flex__inner {
+    margin-left: calc(-1 * 32px);
+    margin-left: calc(-1 * var(--size-32));
+    margin-right: 0;
+    margin-right: initial;
+  }
+  [dir="rtl"] .flex__inner {
+    margin-right: calc(-1 * 32px);
+    margin-right: calc(-1 * var(--size-32));
+    margin-left: 0;
+    margin-left: initial;
   }
 }
 @media (min-width: 1160px) {
   .flex__inner {
-    margin-inline-end: calc(-1 * 48px);
-    margin-inline-end: calc(-1 * var(--size-48));
-    margin-inline-start: calc(-1 * 48px);
-    margin-inline-start: calc(-1 * var(--size-48));
+    margin-right: calc(-1 * 48px);
+    margin-right: calc(-1 * var(--size-48));
+    margin-left: calc(-1 * 48px);
+    margin-left: calc(-1 * var(--size-48));
+  }
+  [dir="rtl"] .flex__inner {
+    margin-left: calc(-1 * 48px);
+    margin-left: calc(-1 * var(--size-48));
+    margin-right: 0;
+    margin-right: initial;
+  }
+  [dir="rtl"] .flex__inner {
+    margin-right: calc(-1 * 48px);
+    margin-right: calc(-1 * var(--size-48));
+    margin-left: 0;
+    margin-left: initial;
   }
 }
 .flex__item {
-  padding-inline-end: 16px;
-  padding-inline-end: var(--size-16);
-  padding-inline-start: 16px;
-  padding-inline-start: var(--size-16);
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+[dir="rtl"] .flex__item {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+  padding-right: 0;
+  padding-right: initial;
+}
+[dir="rtl"] .flex__item {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  padding-left: 0;
+  padding-left: initial;
 }
 @media (min-width: 600px) {
   .flex__item {
-    padding-inline-end: 24px;
-    padding-inline-end: var(--size-24);
-    padding-inline-start: 24px;
-    padding-inline-start: var(--size-24);
+    padding-right: 24px;
+    padding-right: var(--size-24);
+    padding-left: 24px;
+    padding-left: var(--size-24);
+  }
+  [dir="rtl"] .flex__item {
+    padding-left: 24px;
+    padding-left: var(--size-24);
+    padding-right: 0;
+    padding-right: initial;
+  }
+  [dir="rtl"] .flex__item {
+    padding-right: 24px;
+    padding-right: var(--size-24);
+    padding-left: 0;
+    padding-left: initial;
   }
 }
 @media (min-width: 840px) {
   .flex__item {
-    padding-inline-end: 32px;
-    padding-inline-end: var(--size-32);
-    padding-inline-start: 32px;
-    padding-inline-start: var(--size-32);
+    padding-right: 32px;
+    padding-right: var(--size-32);
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+  [dir="rtl"] .flex__item {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+    padding-right: 0;
+    padding-right: initial;
+  }
+  [dir="rtl"] .flex__item {
+    padding-right: 32px;
+    padding-right: var(--size-32);
+    padding-left: 0;
+    padding-left: initial;
   }
 }
 @media (min-width: 1160px) {
   .flex__item {
-    padding-inline-end: 48px;
-    padding-inline-end: var(--size-48);
-    padding-inline-start: 48px;
-    padding-inline-start: var(--size-48);
+    padding-right: 48px;
+    padding-right: var(--size-48);
+    padding-left: 48px;
+    padding-left: var(--size-48);
+  }
+  [dir="rtl"] .flex__item {
+    padding-left: 48px;
+    padding-left: var(--size-48);
+    padding-right: 0;
+    padding-right: initial;
+  }
+  [dir="rtl"] .flex__item {
+    padding-right: 48px;
+    padding-right: var(--size-48);
+    padding-left: 0;
+    padding-left: initial;
   }
 }
 .flex__item--4 {
   flex: 0 0 calc(100% / 3);
-  max-inline-size: calc(100% / 3);
+  max-width: calc(100% / 3);
 }
 @media (max-width: 839.98px) {
   .flex__item--4--md {
     flex: 0 0 calc(100% / 3);
-    max-inline-size: calc(100% / 3);
+    max-width: calc(100% / 3);
   }
 }
 .flex__item--8 {
   flex: 0 0 calc(100% / 1.5);
-  max-inline-size: calc(100% / 1.5);
+  max-width: calc(100% / 1.5);
 }
 @media (max-width: 839.98px) {
   .flex__item--8--md {
     flex: 0 0 calc(100% / 1.5);
-    max-inline-size: calc(100% / 1.5);
+    max-width: calc(100% / 1.5);
   }
 }
 .flex__item--6 {
   flex: 0 0 50%;
-  max-inline-size: 50%;
+  max-width: 50%;
 }
 @media (max-width: 839.98px) {
   .flex__item--6--md {
     flex: 0 0 50%;
-    max-inline-size: 50%;
+    max-width: 50%;
   }
 }
 .flex__item--12 {
   flex: 0 0 100%;
-  max-inline-size: 100%;
+  max-width: 100%;
 }
 @media (max-width: 839.98px) {
   .flex__item--12--md {
     flex: 0 0 100%;
-    max-inline-size: 100%;
+    max-width: 100%;
   }
 }

package/src/styles/less/footer.css

@@ -7,25 +7,25 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  padding-block-start: calc(8px * 10);
-  padding-block-start: calc(var(--size-8) * 10);
-  padding-block-end: calc(8px * 10);
-  padding-block-end: calc(var(--size-8) * 10);
+  padding-top: calc(8px * 10);
+  padding-top: calc(var(--size-8) * 10);
+  padding-bottom: calc(8px * 10);
+  padding-bottom: calc(var(--size-8) * 10);
 }
 @media (min-width: 600px) {
   .footer {
-    padding-block-start: calc(8px * 15);
-    padding-block-start: calc(var(--size-8) * 15);
-    padding-block-end: calc(8px * 15);
-    padding-block-end: calc(var(--size-8) * 15);
+    padding-top: calc(8px * 15);
+    padding-top: calc(var(--size-8) * 15);
+    padding-bottom: calc(8px * 15);
+    padding-bottom: calc(var(--size-8) * 15);
   }
 }
 @media (min-width: 1160px) {
   .footer {
-    padding-block-start: calc(8px * 20);
-    padding-block-start: calc(var(--size-8) * 20);
-    padding-block-end: calc(8px * 20);
-    padding-block-end: calc(var(--size-8) * 20);
+    padding-top: calc(8px * 20);
+    padding-top: calc(var(--size-8) * 20);
+    padding-bottom: calc(8px * 20);
+    padding-bottom: calc(var(--size-8) * 20);
   }
 }
 .footer .footer-link,
@@ -66,10 +66,9 @@
   color: transparent;
 }
 .footer .icon {
-  margin-block: 0;
-  margin-inline: 5px;
+  margin: 0 5px;
   font-size: 32px !important;
-  inline-size: 24px;
+  width: 24px;
 }
 .footer .link-icon {
   -webkit-text-decoration: none;