@transferwise/components 46.160.0 → 46.160.2

package/src/styles/less/neptune.css

@@ -5350,6 +5350,9 @@ tbody.collapse.in {
 .tw-chevron.top {
   transform: rotate(0deg);
 }
+[dir="rtl"] .tw-chevron.top {
+  transform: rotate(360deg);
+}
 .tw-chevron.right {
   transform: rotate(90deg);
 }
@@ -7493,17 +7496,11 @@ input[type="button"].btn-block {
   display: inline-flex;
   align-items: center;
 }
-.btn-loading:not(.btn-block) .btn-loader {
+.btn-loading:not(.btn-block) .btn-loader[class] {
   margin-block-end: 0;
-}
-:not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }
-[dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
-  margin-inline-start: 0 !important;
-  margin-inline-end: 16px !important;
-}
 .btn-loading.btn-block .btn-loader {
   inset-block-start: 0;
   inset-block-end: 0;
@@ -16960,6 +16957,9 @@ button.popover-close {
   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;
@@ -17039,37 +17039,37 @@ button.popover-close {
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xs {
+.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 {
+.process-xxs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xs.process-danger .process-icon-vertical {
+.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 {
+.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 {
+.process-xxs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xs.process-success .process-icon-vertical {
+.process-xxs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -17171,6 +17171,9 @@ button.popover-close {
 .process-xl.process-success .process-icon-vertical {
   inline-size: 8px;
 }
+.process-xxs .process-icon-container {
+  display: none;
+}
 .process-xxs .process-circle {
   animation-name: process-chase-circle-xxs;
 }
@@ -18811,10 +18814,13 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {

package/src/styles/less/process.css

@@ -55,6 +55,9 @@
   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;
@@ -134,37 +137,37 @@
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xs {
+.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 {
+.process-xxs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xs.process-danger .process-icon-vertical {
+.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 {
+.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 {
+.process-xxs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xs.process-success .process-icon-vertical {
+.process-xxs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -266,6 +269,9 @@
 .process-xl.process-success .process-icon-vertical {
   inline-size: 8px;
 }
+.process-xxs .process-icon-container {
+  display: none;
+}
 .process-xxs .process-circle {
   animation-name: process-chase-circle-xxs;
 }

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/tick.css

@@ -10,10 +10,13 @@
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {

package/src/styles/less/tick.less

@@ -11,9 +11,13 @@
     content: "";
     position: absolute;
     background: var(--color-background-screen);
-    transform: translateX(0.5px) rotate(-45deg);
+    transform: translateX(-1.5px) rotate(-45deg);
     transform-origin: left bottom;
-    left: var(--size-8);
+
+    [dir="rtl"] & {
+      transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+      transform-origin: right bottom;
+    }
   }
 
   .has-error {
@@ -34,4 +38,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}