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

package/src/styles/less/table.css

@@ -10,26 +10,26 @@ table th[class*="col-"] {
   display: table-cell;
 }
 caption {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-block-start: 16px;
+  padding-block-end: 16px;
   color: #5d7079;
   color: var(--color-content-secondary);
-  text-align: left;
+  text-align: start;
 }
 [dir="rtl"] caption {
-  text-align: right;
+  text-align: end;
 }
 th {
-  text-align: left;
+  text-align: start;
 }
 [dir="rtl"] th {
-  text-align: right;
+  text-align: end;
 }
 .table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
 .table > tbody > tr > th,
@@ -37,27 +37,33 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding: 24px 16px;
-  padding: var(--size-24) var(--size-16);
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
   line-height: 1.5;
   line-height: var(--line-height-body);
   vertical-align: top;
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-  border-bottom: 0;
+  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);
+  border-block-end: 0;
   transition: border ease 0.15s;
 }
 .table > .thead > ol > li,
 .table > .tbody > dl > dd,
 .table > .tfoot > ol > li {
-  padding: 24px 16px;
-  padding: var(--size-24) var(--size-16);
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
   line-height: 1.5;
   line-height: var(--line-height-body);
   vertical-align: top;
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-  border-bottom: 0;
+  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);
+  border-block-end: 0;
   transition: border ease 0.15s;
 }
 .table > thead > tr > th,
@@ -71,7 +77,7 @@ th {
 }
 .table > thead > tr > th .tw-icon,
 .table > .thead > ol > li .tw-icon {
-  margin-top: -3px;
+  margin-block-start: -3px;
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
@@ -79,14 +85,15 @@ th {
 .table > caption + thead > tr:first-child > td,
 .table > colgroup + thead > tr:first-child > td,
 .table > thead:first-child > tr:first-child > td {
-  border-top: 0;
+  border-block-start: 0;
 }
 .table > .thead:first-child > ol:first-child > li {
-  border-top: 0;
+  border-block-start: 0;
 }
 .table > tbody + tbody {
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
+  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);
 }
 .table .table {
   background-color: #ffffff;
@@ -314,21 +321,21 @@ table col[class*="col-"] {
 }
 .table-responsive {
   overflow-x: auto;
-  min-height: 0.01%;
+  min-block-size: 0.01%;
 }
 .table-responsive.table-bordered {
   border: 0;
 }
 @media screen and (max-width: 767px) {
   .table-responsive {
-    width: 100%;
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    inline-size: 100%;
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
   }
   .table-responsive > .table {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .table-responsive > .table > thead > tr > th,
   .table-responsive > .table > tbody > tr > th,
@@ -345,7 +352,7 @@ table col[class*="col-"] {
   .table-responsive > .table-bordered > tfoot > tr:last-child > th,
   .table-responsive > .table-bordered > tbody > tr:last-child > td,
   .table-responsive > .table-bordered > tfoot > tr:last-child > td {
-    border-bottom: 0;
+    border-block-end: 0;
   }
   .table-responsive.table-bordered {
     border: 1px solid rgba(134,167,189,0.10196);
@@ -398,10 +405,12 @@ table col[class*="col-"] {
     border: 1px #c9cbce solid;
     border: 1px var(--color-interactive-secondary) solid;
     border-radius: 3px;
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
-    padding: 24px 1.5 0;
-    padding: var(--size-24) var(--line-height-body) 0;
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
+    padding-block: 24px 0;
+    padding-block: var(--size-24) 0;
+    padding-inline: 1.5;
+    padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
     padding: 0;
@@ -413,20 +422,22 @@ table col[class*="col-"] {
 }
 @media (max-width: 575px) {
   .table > .tbody > dl {
-    padding-bottom: 8px;
+    padding-block-end: 8px;
   }
 }
 /* Deprecated - Table CSS for components moved inside @transferwise/components */
 .table-calendar {
-  min-width: 300px;
+  min-inline-size: 300px;
 }
 .table-calendar > tbody > tr > td {
   padding: 0;
 }
 .table-calendar > tbody > tr > td > a {
   display: block;
-  padding: 4px 0;
-  margin: 4px 2px;
+  padding-block: 4px;
+  padding-inline: 0;
+  margin-block: 4px;
+  margin-inline: 2px;
   border-radius: 3px;
   text-align: center;
   -webkit-text-decoration: none;

package/src/styles/less/tick.css

@@ -1,8 +1,8 @@
 .tw-checkbox-check {
   position: relative;
   display: inline-block;
-  width: 10px;
-  height: 8px;
+  inline-size: 10px;
+  block-size: 8px;
 }
 .tw-checkbox-check::before,
 .tw-checkbox-check::after {
@@ -12,8 +12,13 @@
   background: var(--color-background-screen);
   transform: translateX(0.5px) rotate(-45deg);
   transform-origin: left bottom;
-  left: 8px;
-  left: var(--size-8);
+  inset-inline-start: 8px;
+  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-3.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
@@ -21,12 +26,12 @@
   background-color: var(--color-interactive-negative);
 }
 .tw-checkbox-check::before {
-  top: 9px;
-  height: 6px;
-  width: 2px;
+  inset-block-start: 9px;
+  block-size: 6px;
+  inline-size: 2px;
 }
 .tw-checkbox-check::after {
-  bottom: 5px;
-  height: 2px;
-  width: 11px;
+  inset-block-end: 5px;
+  block-size: 2px;
+  inline-size: 11px;
 }

package/src/styles/less/tick.less

@@ -14,6 +14,11 @@
     transform: translateX(0.5px) rotate(-45deg);
     transform-origin: left bottom;
     left: var(--size-8);
+
+    [dir="rtl"] & {
+      transform: translateX(-3.5px) rotate(-45deg) scaleX(-1);
+      transform-origin: right bottom;
+    }
   }
 
   .has-error {
@@ -34,4 +39,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}

package/src/styles/less/tooltip.css

@@ -10,7 +10,7 @@
   line-break: auto;
   line-height: 24px;
   line-height: var(--size-24);
-  text-align: left;
+  text-align: start;
   -webkit-text-decoration: none;
   text-decoration: none;
   text-shadow: none;
@@ -22,36 +22,38 @@
   opacity: 0;
 }
 [dir="rtl"] .tooltip {
-  text-align: right;
+  text-align: end;
 }
 .tooltip.in {
   opacity: 1;
 }
 .tooltip.top {
-  margin-top: -3px;
-  padding: 5px 0;
+  margin-block-start: -3px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 .tooltip.right {
-  margin-left: 3px;
-  padding: 0 5px;
+  margin-inline-start: 3px;
+  padding-block: 0;
+  padding-inline: 5px;
 }
 [dir="rtl"] .tooltip.right {
-  margin-right: 3px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 3px;
+  margin-inline-start: initial;
 }
 .tooltip.bottom {
-  margin-top: 3px;
-  padding: 5px 0;
+  margin-block-start: 3px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 .tooltip.left {
-  margin-left: -3px;
-  padding: 0 5px;
+  margin-inline-start: -3px;
+  padding-block: 0;
+  padding-inline: 5px;
 }
 [dir="rtl"] .tooltip.left {
-  margin-right: -3px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -3px;
+  margin-inline-start: initial;
 }
 .tooltip-inner {
   font-size: 0.875rem;
@@ -60,10 +62,12 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  max-width: 200px;
-  min-width: 120px;
-  padding: 16px 16px;
-  padding: var(--size-16) var(--size-16);
+  max-inline-size: 200px;
+  min-inline-size: 120px;
+  padding-block: 16px;
+  padding-block: var(--size-16);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
   color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
@@ -79,72 +83,70 @@
 }
 .tooltip-arrow {
   position: absolute;
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   border-color: transparent;
   border-style: solid;
 }
 .tooltip.top .tooltip-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #ffffff;
-  border-top-color: var(--color-background-screen);
+  inset-block-end: 0;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
+  border-width-block: 5px 0;
+  border-width-inline: 5px;
+  border-block-start-color: #ffffff;
+  border-block-start-color: var(--color-background-screen);
 }
 [dir="rtl"] .tooltip.top .tooltip-arrow {
-  right: 50%;
-  left: auto;
-  left: initial;
+  inset-inline-end: 50%;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .tooltip.top .tooltip-arrow {
-  margin-right: -5px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -5px;
+  margin-inline-start: initial;
 }
 .tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-width: 5px 5px 5px 0;
-  border-right-color: #ffffff;
-  border-right-color: var(--color-background-screen);
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  margin-block-start: -5px;
+  border-width-block: 5px 5px;
+  border-width-inline: 0 5px;
+  border-inline-end-color: #ffffff;
+  border-inline-end-color: var(--color-background-screen);
 }
 [dir="rtl"] .tooltip.right .tooltip-arrow {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 .tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #ffffff;
-  border-left-color: var(--color-background-screen);
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  margin-block-start: -5px;
+  border-width-block: 5px 5px;
+  border-width-inline: 5px 0;
+  border-inline-start-color: #ffffff;
+  border-inline-start-color: var(--color-background-screen);
 }
 [dir="rtl"] .tooltip.left .tooltip-arrow {
-  left: 0;
-  right: auto;
-  right: initial;
+  inset-inline-start: 0;
+  inset-inline-end: initial;
 }
 .tooltip.bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #ffffff;
-  border-bottom-color: var(--color-background-screen);
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
+  border-width-block: 0 5px;
+  border-width-inline: 5px;
+  border-block-end-color: #ffffff;
+  border-block-end-color: var(--color-background-screen);
 }
 [dir="rtl"] .tooltip.bottom .tooltip-arrow {
-  right: 50%;
-  left: auto;
-  left: initial;
+  inset-inline-end: 50%;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .tooltip.bottom .tooltip-arrow {
-  margin-right: -5px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -5px;
+  margin-inline-start: initial;
 }
 [data-toggle="tooltip"]:not(.btn) {
   cursor: pointer;

package/src/styles/less/utilities.css

@@ -14,40 +14,40 @@
 }
 .center-block {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 .pull-right,
 .pull-xs-right {
-  float: right !important;
+  float: inline-end !important;
 }
 [dir="rtl"] .pull-right,
 [dir="rtl"] .pull-xs-right {
-  float: left !important;
+  float: inline-start !important;
 }
 .pull-left,
 .pull-xs-left {
-  float: left !important;
+  float: inline-start !important;
 }
 [dir="rtl"] .pull-left,
 [dir="rtl"] .pull-xs-left {
-  float: right !important;
+  float: inline-end !important;
 }
 .pull-xs-none {
   float: none !important;
 }
 @media (min-width: 576px) {
   .pull-sm-left {
-    float: left !important;
+    float: inline-start !important;
   }
   [dir="rtl"] .pull-sm-left {
-    float: right !important;
+    float: inline-end !important;
   }
   .pull-sm-right {
-    float: right !important;
+    float: inline-end !important;
   }
   [dir="rtl"] .pull-sm-right {
-    float: left !important;
+    float: inline-start !important;
   }
   .pull-sm-none {
     float: none !important;
@@ -55,16 +55,16 @@
 }
 @media (min-width: 768px) {
   .pull-md-left {
-    float: left !important;
+    float: inline-start !important;
   }
   [dir="rtl"] .pull-md-left {
-    float: right !important;
+    float: inline-end !important;
   }
   .pull-md-right {
-    float: right !important;
+    float: inline-end !important;
   }
   [dir="rtl"] .pull-md-right {
-    float: left !important;
+    float: inline-start !important;
   }
   .pull-md-none {
     float: none !important;
@@ -72,16 +72,16 @@
 }
 @media (min-width: 992px) {
   .pull-lg-left {
-    float: left !important;
+    float: inline-start !important;
   }
   [dir="rtl"] .pull-lg-left {
-    float: right !important;
+    float: inline-end !important;
   }
   .pull-lg-right {
-    float: right !important;
+    float: inline-end !important;
   }
   [dir="rtl"] .pull-lg-right {
-    float: left !important;
+    float: inline-start !important;
   }
   .pull-lg-none {
     float: none !important;
@@ -89,26 +89,26 @@
 }
 @media (min-width: 1200px) {
   .pull-xl-left {
-    float: left !important;
+    float: inline-start !important;
   }
   [dir="rtl"] .pull-xl-left {
-    float: right !important;
+    float: inline-end !important;
   }
   .pull-xl-right {
-    float: right !important;
+    float: inline-end !important;
   }
   [dir="rtl"] .pull-xl-right {
-    float: left !important;
+    float: inline-start !important;
   }
   .pull-xl-none {
     float: none !important;
   }
 }
 .pull-left-single-direction {
-  float: left !important;
+  float: inline-start !important;
 }
 .pull-right-single-direction {
-  float: right !important;
+  float: inline-end !important;
 }
 .hide {
   display: none !important;

package/src/styles/less/wells.css

@@ -1,9 +1,9 @@
 .well,
 .well-xs {
-  min-height: 24px;
-  min-height: var(--size-24);
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  min-block-size: 24px;
+  min-block-size: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
   border-radius: 10px;
   border-radius: var(--radius-small);
   border: solid 1px rgba(0,0,0,0.10196);
@@ -14,10 +14,10 @@
 }
 @media only screen and (min-width: 576px) {
   .well-sm {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);
@@ -29,10 +29,10 @@
 }
 @media only screen and (min-width: 768px) {
   .well-md {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);
@@ -44,10 +44,10 @@
 }
 @media only screen and (min-width: 992px) {
   .well-lg {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);
@@ -59,10 +59,10 @@
 }
 @media only screen and (min-width: 1200px) {
   .well-xl {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);