@transferwise/components 46.159.2 → 46.160.1

package/src/styles/less/process.css

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

package/src/styles/less/process.less

@@ -84,6 +84,11 @@
   width: 50%;
   left: 25%;
   top: 25%;
+
+  // Icon is purely decorative — keep physical positioning in RTL
+  [dir="rtl"] & {
+    transform: rotate(45deg) scaleX(-1);
+  }
 }
 
 .process-icon-horizontal,
@@ -231,7 +236,7 @@
   }
 }
 .process-size(
-  xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+  xxs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
 );
 .process-size(
   xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
@@ -244,6 +249,10 @@
 );
 
 .process-xxs {
+  .process-icon-container {
+    display: none;
+  }
+
   .process-circle {
     animation-name: process-chase-circle-xxs;
   }
@@ -379,11 +388,9 @@
 }
 
 .btn .process:first-child {
-  .margin(left, -12px);
-
-  .margin(right, 12px);
-
-  .float(left);
+  margin-left: -12px;
+  margin-right: 12px;
+  float: left;
 }
 
 .btn-block .process:first-child {

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

@@ -2,30 +2,30 @@
   --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
-  height: 4px;
-  height: var(--progress-bar-height);
+  block-size: 4px;
+  block-size: var(--progress-bar-height);
   overflow: hidden;
-  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);
+  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);
   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: left;
+  float: inline-start;
   position: relative;
-  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);
+  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);
   font-size: 1rem;
   font-size: var(--font-size-16);
   font-weight: 700;
   font-weight: var(--font-weight-bold);
   color: #fff;
-  text-align: right;
+  text-align: end;
   background-color: #0097c7;
   background-color: var(--color-content-accent);
   border: var(--progress-bar-border-width) solid #ffffff;
@@ -33,14 +33,8 @@
   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;
+  inset-inline-end: calc(-1 * var(--progress-bar-start-shift));
+  inset-inline-start: 0;
 }
 .progress-bar-primary {
   background-color: #37517e;

package/src/styles/less/select.css

@@ -1,78 +1,46 @@
 .tw-select .tw-icon {
   display: inline-block;
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: -2px;
+  margin-inline-end: 8px;
+  margin-inline-end: var(--size-8);
+  margin-block-start: -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-bottom-style: solid;
-  border-bottom-width: 1px;
+  border-block-end-style: solid;
+  border-block-end-width: 1px;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  border-bottom-color: rgba(0,0,0,0.10196);
-  border-bottom-color: var(--color-border-neutral);
+  border-block-end-color: rgba(0,0,0,0.10196);
+  border-block-end-color: #0000001a;
+  border-block-end-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-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;
+  margin-inline-end: 8px;
+  margin-inline-end: var(--size-8);
 }
 .tw-select .tw-dropdown-item > a {
   white-space: normal;
 }
 .tw-select .dropdown-toggle.btn-input.btn-sm {
-  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;
+  padding-inline-end: 32px;
+  padding-inline-end: var(--size-32);
 }
 .tw-select .dropdown-toggle.btn-input.btn-md {
-  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;
+  padding-inline-end: 40px;
+  padding-inline-end: var(--size-40);
 }
 .tw-select .dropdown-toggle.btn-input.btn-lg {
-  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;
+  padding-inline-end: 48px;
+  padding-inline-end: var(--size-48);
 }
 .tw-select .dropdown-toggle tw-chevron-down-icon > span {
-  margin: 0   ;
-}
-[dir="rtl"] .tw-select .dropdown-toggle tw-chevron-down-icon > span {
-  margin: 0   ;
+  margin: 0;
 }
 .tw-select .dropdown-toggle tw-icon span.tw-icon {
   position: static;
@@ -83,15 +51,15 @@
 }
 @media (max-width: 599.98px) {
   .tw-select.dropdown-menu.dropdown-menu--open {
-    max-height: 50vh;
-    max-height: 50svh;
-    max-width: 100%;
+    max-block-size: 50vh;
+    max-block-size: 50svh;
+    max-inline-size: 100%;
     opacity: 1;
     overflow: auto;
     position: static;
     transform: none;
     visibility: visible;
-    width: 100% !important;
+    inline-size: 100% !important;
   }
 }
 .tw-select-filter {