@transferwise/components 46.160.0 → 46.160.2

package/src/main.css

@@ -5942,6 +5942,9 @@ tbody.collapse.in {
 .tw-chevron.top {
   transform: rotate(0deg);
 }
+[dir="rtl"] .tw-chevron.top {
+  transform: rotate(360deg);
+}
 .tw-chevron.right {
   transform: rotate(90deg);
 }
@@ -8085,17 +8088,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;
@@ -17552,6 +17549,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;
@@ -17631,37 +17631,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 {
@@ -17763,6 +17763,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;
 }
@@ -19403,10 +19406,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 {
@@ -20305,10 +20311,18 @@ a[data-toggle="tooltip"] {
   display: inline-block;
 }
 .np-dot-mask {
+  --np-dot-h-side: left;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+}
+[dir="rtl"] .np-dot-mask {
+  --np-dot-h-side: right;
 }
 .np-dot-badge {
   position: absolute;
@@ -20354,36 +20368,53 @@ a[data-toggle="tooltip"] {
   block-size: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-diagonal-mask {
+  --np-avatar-layout-mask-direction: right;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
 [dir="rtl"] .np-avatar-layout-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  --np-avatar-layout-mask-direction: left;
+  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  margin-inline-end: unset;
 }
 .np-avatar-layout-diagonal-child {
   margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 [dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-inline-start: 0;
-  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  -webkit-mask-image: initial;
+          mask-image: initial;
 }
 .np-avatar-layout-horizontal {
+  --np-avatar-layout-mask-direction: left;
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   block-size: var(--np-avatar-layout-size);
 }
-.np-avatar-layout-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+[dir="rtl"] .np-avatar-layout-horizontal {
+  --np-avatar-layout-mask-direction: right;
+}
+.np-avatar-layout-horizontal-mask,
+[dir="rtl"] .np-avatar-layout-horizontal-child {
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
+[dir="rtl"] .np-avatar-layout-horizontal-mask {
+  margin-inline-end: calc(var(--np-avatar-offset) * -1);
+}
+[dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
+  -webkit-mask-image: initial;
+          mask-image: initial;
 }
 .np-avatar-layout-horizontal-child {
   margin-inline-start: calc(var(--np-avatar-offset) * -1);
 }
 [dir="rtl"] .np-avatar-layout-horizontal-child {
+  margin-inline-start: unset;
   margin-inline-end: calc(var(--np-avatar-offset) * -1);
 }
 .np-icon-button {
@@ -20485,12 +20516,14 @@ a[data-toggle="tooltip"] {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
+  --badge-h-side: left;
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
           mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  --badge-h-side: right;
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
@@ -21238,6 +21271,9 @@ a[data-toggle="tooltip"] {
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: translate(50%, -50%);
+}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
@@ -21875,26 +21911,34 @@ button.np-option {
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
-  inset-block-end: -6px;
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
+  inset-block-end: -7px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
-  inset-inline-start: -6px;
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: -7px;
+}
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -7px;
 }
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
-  inset-block-start: -6px;
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
+  inset-block-start: -7px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
-  inset-inline-end: -6px;
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: -7px;
+}
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -7px;
 }
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
@@ -24361,7 +24405,10 @@ button.np-link {
   inline-size: 161px;
 }
 [dir="rtl"] .wds-nudge-media-globe {
-  transform: scaleX(-1);
+  margin-inline-start: -63px;
+  margin-block-start: -15px;
+  position: absolute;
+  inline-size: 161px;
 }
 .wds-nudge-media-lock {
   margin-inline-start: -11px;
@@ -24370,36 +24417,24 @@ button.np-link {
   inline-size: 104px;
   transform: rotate(-14.86deg);
 }
-[dir="rtl"] .wds-nudge-media-lock {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-wallet {
   margin-inline-start: -15px;
   margin-block-start: 18px;
   position: absolute;
   inline-size: 107px;
 }
-[dir="rtl"] .wds-nudge-media-wallet {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-gear {
   margin-inline-start: -18px;
   margin-block-start: 19px;
   position: absolute;
   inline-size: 111px;
 }
-[dir="rtl"] .wds-nudge-media-gear {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-invite-letter {
   margin-inline-start: -17px;
   margin-block-start: -2px;
   position: absolute;
   inline-size: 105px;
 }
-[dir="rtl"] .wds-nudge-media-invite-letter {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-personal-card,
 .wds-nudge-media-business-card {
   margin-inline-start: -15px;
@@ -24407,73 +24442,48 @@ button.np-link {
   position: absolute;
   inline-size: 104px;
 }
-[dir="rtl"] .wds-nudge-media-personal-card,
-[dir="rtl"] .wds-nudge-media-business-card {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-heart {
   margin-inline-start: -7px;
   margin-block-start: 11px;
   position: absolute;
   inline-size: 95px;
 }
-[dir="rtl"] .wds-nudge-media-heart {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-multi-currency {
   margin-inline-start: -30px;
   margin-block-start: 1px;
   position: absolute;
   inline-size: 131px;
 }
-[dir="rtl"] .wds-nudge-media-multi-currency {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-shopping-bag {
   margin-inline-start: -9px;
   margin-block-start: 14px;
   position: absolute;
   inline-size: 116px;
 }
-[dir="rtl"] .wds-nudge-media-shopping-bag {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-flower {
   margin-inline-start: -24px;
   margin-block-start: 11px;
   position: absolute;
   inline-size: 156px;
 }
-[dir="rtl"] .wds-nudge-media-flower {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-backpack {
   margin-inline-start: -16px;
   margin-block-start: 6px;
   position: absolute;
   inline-size: 123px;
 }
-[dir="rtl"] .wds-nudge-media-backpack {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-gift-box {
   margin-inline-start: -22px;
   margin-block-start: 6px;
   position: absolute;
   inline-size: 129px;
 }
-[dir="rtl"] .wds-nudge-media-gift-box {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-documents {
   margin-inline-start: -8px;
   margin-block-start: 8px;
   position: absolute;
   inline-size: 120px;
 }
-[dir="rtl"] .wds-nudge-media-documents {
-  transform: scaleX(-1);
-}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;
@@ -25136,6 +25146,35 @@ button.np-link {
     mask: var(--critical-banner-overhang-mask);
   }
 }
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: visible;
+}
+.wds-critical-banner__entry-mask--animated {
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both, wds-critical-banner-release-overflow 1ms linear 899ms both;
+}
+.wds-critical-banner__entry-track {
+  min-block-size: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+  }
+  to {
+    grid-template-rows: 1fr;
+  }
+}
+@keyframes wds-critical-banner-release-overflow {
+  from {
+    overflow: hidden;
+  }
+  to {
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -25143,6 +25182,11 @@ button.np-link {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask--animated {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }
 .wds-expander-toggle {
   align-self: flex-start;
@@ -25240,6 +25284,10 @@ button.np-link {
   box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
+[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
+  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+}
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
   box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
@@ -25248,6 +25296,10 @@ button.np-link {
   box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
+[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
+  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+}
 .snackbar {
   text-align: center;
   position: fixed;
@@ -25801,7 +25853,8 @@ button.np-link {
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition: left 300ms,
+    right 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;
@@ -26528,12 +26581,6 @@ button.np-link {
   visibility: visible;
   visibility: initial;
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-start: -7px;
-}
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-end: -7px;
-}
 .typeahead.open .input-group {
   z-index: 1060;
 }
@@ -26929,8 +26976,7 @@ button.np-link {
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -26986,7 +27032,7 @@ button.np-link {
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -27041,8 +27087,8 @@ button.np-link {
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/src/styles/less/accordion.css

@@ -5,6 +5,9 @@
 .tw-chevron.top {
   transform: rotate(0deg);
 }
+[dir="rtl"] .tw-chevron.top {
+  transform: rotate(360deg);
+}
 .tw-chevron.right {
   transform: rotate(90deg);
 }

package/src/styles/less/buttons.css

@@ -1277,17 +1277,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;

package/src/styles/less/buttons.less

@@ -647,18 +647,10 @@ input[type="button"] {
     display: inline-flex;
     align-items: center;
 
-    .btn-loader {
+    .btn-loader[class] {
       margin-bottom: 0;
-
-      :not([dir="rtl"]) & {
-        margin-left: 16px;
-        margin-right: 0;
-      }
-
-      [dir="rtl"] & {
-        margin-left: 0 !important;
-        margin-right: 16px !important;
-      }
+      margin-left: 16px;
+      margin-right: 0;
     }
   }
 

package/src/styles/less/chevron.css

@@ -5,6 +5,9 @@
 .tw-chevron.top {
   transform: rotate(0deg);
 }
+[dir="rtl"] .tw-chevron.top {
+  transform: rotate(360deg);
+}
 .tw-chevron.right {
   transform: rotate(90deg);
 }

package/src/styles/less/chevron.less

@@ -7,6 +7,10 @@
 
   &.top {
     transform: rotate(0deg);
+
+    [dir="rtl"] & {
+      transform: rotate(360deg);
+    }
   }
 
   &.right {