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

package/src/styles/less/process.css

@@ -18,8 +18,8 @@
   display: block;
 }
 .process svg {
-  inline-size: 100%;
-  block-size: 100%;
+  width: 100%;
+  height: 100%;
 }
 .process-circle {
   transform-origin: center center;
@@ -50,23 +50,23 @@
   position: absolute;
   display: inline-block;
   transform: rotate(45deg);
-  block-size: 50%;
-  inline-size: 50%;
-  inset-inline-start: 25%;
-  inset-block-start: 25%;
+  height: 50%;
+  width: 50%;
+  left: 25%;
+  top: 25%;
 }
 .process-icon-horizontal,
 .process-icon-vertical {
   position: absolute;
   display: block;
-  inline-size: 0;
-  block-size: 0;
+  width: 0;
+  height: 0;
 }
 .process-success .process-icon-horizontal {
   background-color: #008026;
   background-color: var(--color-content-positive);
-  inset-block-end: 0;
-  inset-inline-start: 0;
+  bottom: 0;
+  left: 0;
 }
 .np-theme-personal .process-success .process-icon-horizontal {
   background-color: var(--color-sentiment-positive);
@@ -74,8 +74,8 @@
 .process-success .process-icon-vertical {
   background-color: #008026;
   background-color: var(--color-content-positive);
-  inset-block-start: 100%;
-  inset-inline-end: 0;
+  top: 100%;
+  right: 0;
 }
 .np-theme-personal .process-success .process-icon-vertical {
   background-color: var(--color-sentiment-positive);
@@ -90,7 +90,7 @@
 .process-danger .process-icon-horizontal {
   background-color: #cf2929;
   background-color: var(--color-content-negative);
-  inset-inline-start: 0;
+  left: 0;
 }
 .np-theme-personal .process-danger .process-icon-horizontal {
   background-color: var(--color-sentiment-negative);
@@ -98,7 +98,7 @@
 .process-danger .process-icon-vertical {
   background-color: #cf2929;
   background-color: var(--color-content-negative);
-  inset-block-start: 0;
+  top: 0;
 }
 .np-theme-personal .process-danger .process-icon-vertical {
   background-color: var(--color-sentiment-negative);
@@ -135,8 +135,8 @@
   display: none;
 }
 .process-xs {
-  inline-size: 12px;
-  block-size: 12px;
+  width: 12px;
+  height: 12px;
 }
 .process-xs .process-circle {
   /* Hide before animation to prevent glitching */
@@ -145,31 +145,31 @@
   stroke-width: 1.5px;
 }
 .process-xs.process-danger .process-icon-horizontal {
-  inset-block-start: 2.5px;
-  block-size: 1px;
+  top: 2.5px;
+  height: 1px;
 }
 .process-xs.process-danger .process-icon-vertical {
-  inset-inline-start: 2.5px;
-  inline-size: 1px;
+  left: 2.5px;
+  width: 1px;
 }
 .process-xs .process-icon-horizontal,
 .process-xs .process-icon-vertical {
   border-radius: 0.5px;
 }
 .process-xs.process-success .process-icon-container {
-  inline-size: 2.5px;
-  block-size: 5px;
-  inset-inline-start: 4.5px;
+  width: 2.5px;
+  height: 5px;
+  left: 4.5px;
 }
 .process-xs.process-success .process-icon-horizontal {
-  block-size: 1px;
+  height: 1px;
 }
 .process-xs.process-success .process-icon-vertical {
-  inline-size: 1px;
+  width: 1px;
 }
 .process-xs {
-  inline-size: 24px;
-  block-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 .process-xs .process-circle {
   /* Hide before animation to prevent glitching */
@@ -178,31 +178,31 @@
   stroke-width: 2px;
 }
 .process-xs.process-danger .process-icon-horizontal {
-  inset-block-start: 5px;
-  block-size: 2px;
+  top: 5px;
+  height: 2px;
 }
 .process-xs.process-danger .process-icon-vertical {
-  inset-inline-start: 5px;
-  inline-size: 2px;
+  left: 5px;
+  width: 2px;
 }
 .process-xs .process-icon-horizontal,
 .process-xs .process-icon-vertical {
   border-radius: 1px;
 }
 .process-xs.process-success .process-icon-container {
-  inline-size: 5px;
-  block-size: 10px;
-  inset-inline-start: 9px;
+  width: 5px;
+  height: 10px;
+  left: 9px;
 }
 .process-xs.process-success .process-icon-horizontal {
-  block-size: 2px;
+  height: 2px;
 }
 .process-xs.process-success .process-icon-vertical {
-  inline-size: 2px;
+  width: 2px;
 }
 .process-sm {
-  inline-size: 48px;
-  block-size: 48px;
+  width: 48px;
+  height: 48px;
 }
 .process-sm .process-circle {
   /* Hide before animation to prevent glitching */
@@ -211,31 +211,31 @@
   stroke-width: 2.4px;
 }
 .process-sm.process-danger .process-icon-horizontal {
-  inset-block-start: 10.5px;
-  block-size: 3px;
+  top: 10.5px;
+  height: 3px;
 }
 .process-sm.process-danger .process-icon-vertical {
-  inset-inline-start: 10.5px;
-  inline-size: 3px;
+  left: 10.5px;
+  width: 3px;
 }
 .process-sm .process-icon-horizontal,
 .process-sm .process-icon-vertical {
   border-radius: 1.5px;
 }
 .process-sm.process-success .process-icon-container {
-  inline-size: 10.5px;
-  block-size: 21px;
-  inset-inline-start: 18px;
+  width: 10.5px;
+  height: 21px;
+  left: 18px;
 }
 .process-sm.process-success .process-icon-horizontal {
-  block-size: 3px;
+  height: 3px;
 }
 .process-sm.process-success .process-icon-vertical {
-  inline-size: 3px;
+  width: 3px;
 }
 .process-xl {
-  inline-size: 128px;
-  block-size: 128px;
+  width: 128px;
+  height: 128px;
 }
 .process-xl .process-circle {
   /* Hide before animation to prevent glitching */
@@ -244,27 +244,27 @@
   stroke-width: 3px;
 }
 .process-xl.process-danger .process-icon-horizontal {
-  inset-block-start: 28px;
-  block-size: 8px;
+  top: 28px;
+  height: 8px;
 }
 .process-xl.process-danger .process-icon-vertical {
-  inset-inline-start: 28px;
-  inline-size: 8px;
+  left: 28px;
+  width: 8px;
 }
 .process-xl .process-icon-horizontal,
 .process-xl .process-icon-vertical {
   border-radius: 4px;
 }
 .process-xl.process-success .process-icon-container {
-  inline-size: 28px;
-  block-size: 56px;
-  inset-inline-start: 48px;
+  width: 28px;
+  height: 56px;
+  left: 48px;
 }
 .process-xl.process-success .process-icon-horizontal {
-  block-size: 8px;
+  height: 8px;
 }
 .process-xl.process-success .process-icon-vertical {
-  inline-size: 8px;
+  width: 8px;
 }
 .process-xxs .process-circle {
   animation-name: process-chase-circle-xxs;
@@ -424,19 +424,32 @@
 }
 @keyframes process-width {
   to {
-    inline-size: 100%;
+    width: 100%;
   }
 }
 @keyframes process-height {
   to {
-    inset-block-start: 0;
-    block-size: 100%;
+    top: 0;
+    height: 100%;
   }
 }
 .btn .process:first-child {
-  margin-inline-start: -12px;
-  margin-inline-end: 12px;
-  float: inline-start;
+  margin-left: -12px;
+  margin-right: 12px;
+  float: left;
+}
+[dir="rtl"] .btn .process:first-child {
+  margin-right: -12px;
+  margin-left: 0;
+  margin-left: initial;
+}
+[dir="rtl"] .btn .process:first-child {
+  margin-left: 12px;
+  margin-right: 0;
+  margin-right: initial;
+}
+[dir="rtl"] .btn .process:first-child {
+  float: right;
 }
 .btn-block .process:first-child {
   position: absolute;

package/src/styles/less/progress-bars.css

@@ -2,36 +2,46 @@
   --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
-  block-size: 4px;
-  block-size: var(--progress-bar-height);
+  height: 4px;
+  height: var(--progress-bar-height);
   overflow: hidden;
-  margin-block-start: calc((24px - 4px) / 2);
-  margin-block-start: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  margin-block-end: calc((24px - 4px) / 2);
-  margin-block-end: calc((var(--size-24) - var(--progress-bar-height)) / 2);
+  margin-top: calc((24px - 4px) / 2);
+  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
+  margin-bottom: calc((24px - 4px) / 2);
+  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
   background-color: #c9cbce;
   background-color: var(--color-interactive-secondary);
   border-radius: calc(4px + 4px);
   border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
 }
 .progress-bar {
-  float: inline-start;
+  float: left;
   position: relative;
-  inset-block-start: calc(-1 * var(--progress-bar-border-width));
-  inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
-  block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
+  top: calc(-1 * var(--progress-bar-border-width));
+  left: calc(-1 * var(--progress-bar-start-shift));
+  height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
   font-size: 1rem;
   font-size: var(--font-size-16);
   font-weight: 700;
   font-weight: var(--font-weight-bold);
   color: #fff;
-  text-align: end;
+  text-align: right;
   background-color: #0097c7;
   background-color: var(--color-content-accent);
   border: var(--progress-bar-border-width) solid #ffffff;
   border: var(--progress-bar-border-width) solid var(--color-background-screen);
   border-radius: inherit;
 }
+[dir="rtl"] .progress-bar {
+  float: right;
+}
+[dir="rtl"] .progress-bar {
+  text-align: left;
+}
+[dir="rtl"] .progress-bar {
+  right: calc(-1 * var(--progress-bar-start-shift));
+  left: 0;
+}
 .progress-bar-primary {
   background-color: #37517e;
   background-color: var(--color-content-primary);

package/src/styles/less/progress-bars.less

@@ -23,10 +23,15 @@
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-bold);
   color: #fff;
-  text-align: right;
+  .text-align(right);
   background-color: var(--color-content-accent);
   border: var(--progress-bar-border-width) solid var(--color-background-screen);
   border-radius: inherit;
+
+  [dir="rtl"] & {
+    right: calc(-1 * var(--progress-bar-start-shift));
+    left: 0;
+  }
 }
 
 .progress-bar-primary {

package/src/styles/less/select.css

@@ -1,47 +1,79 @@
 .tw-select .tw-icon {
   display: inline-block;
-  margin-inline-end: 8px;
-  margin-inline-end: var(--size-8);
-  margin-block-start: -2px;
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: -2px;
   vertical-align: middle;
 }
+[dir="rtl"] .tw-select .tw-icon {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}
 .tw-select .tw-dropdown-item--clickable {
   cursor: pointer;
 }
 .tw-select .tw-dropdown-item--divider {
-  border-block-end-style: solid;
-  border-block-end-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  border-block-end-color: rgba(0,0,0,0.10196);
-  border-block-end-color: #0000001a;
-  border-block-end-color: var(--color-border-neutral);
+  border-bottom-color: rgba(0,0,0,0.10196);
+  border-bottom-color: var(--color-border-neutral);
 }
 .tw-select .tw-dropdown-item--focused {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .tw-select .tw-dropdown-item .currency-flag {
-  margin-inline-end: 8px;
-  margin-inline-end: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .tw-select .tw-dropdown-item .currency-flag {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
 }
 .tw-select .tw-dropdown-item > a {
   white-space: normal;
 }
 .tw-select .dropdown-toggle.btn-input.btn-sm {
-  padding-inline-end: 32px;
-  padding-inline-end: var(--size-32);
+  padding-right: 32px;
+  padding-right: var(--size-32);
+}
+[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-sm {
+  padding-left: 32px;
+  padding-left: var(--size-32);
+  padding-right: 0;
+  padding-right: initial;
 }
 .tw-select .dropdown-toggle.btn-input.btn-md {
-  padding-inline-end: 40px;
-  padding-inline-end: var(--size-40);
+  padding-right: 40px;
+  padding-right: var(--size-40);
+}
+[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-md {
+  padding-left: 40px;
+  padding-left: var(--size-40);
+  padding-right: 0;
+  padding-right: initial;
 }
 .tw-select .dropdown-toggle.btn-input.btn-lg {
-  padding-inline-end: 48px;
-  padding-inline-end: var(--size-48);
+  padding-right: 48px;
+  padding-right: var(--size-48);
+}
+[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-lg {
+  padding-left: 48px;
+  padding-left: var(--size-48);
+  padding-right: 0;
+  padding-right: initial;
 }
 .tw-select .dropdown-toggle tw-chevron-down-icon > span {
   margin: 0   ;
 }
+[dir="rtl"] .tw-select .dropdown-toggle tw-chevron-down-icon > span {
+  margin: 0   ;
+}
 .tw-select .dropdown-toggle tw-icon span.tw-icon {
   position: static;
   display: inline-block;
@@ -51,15 +83,15 @@
 }
 @media (max-width: 599.98px) {
   .tw-select.dropdown-menu.dropdown-menu--open {
-    max-block-size: 50vh;
-    max-block-size: 50svh;
-    max-inline-size: 100%;
+    max-height: 50vh;
+    max-height: 50svh;
+    max-width: 100%;
     opacity: 1;
     overflow: auto;
     position: static;
     transform: none;
     visibility: visible;
-    inline-size: 100% !important;
+    width: 100% !important;
   }
 }
 .tw-select-filter {