@transferwise/components 0.0.0-experimental-a1b5585 → 0.0.0-experimental-999c033

package/build/styles/_deprecated/Badge/Badge.css

@@ -15,14 +15,12 @@
   --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 {
-  --badge-h-side: right;
+  -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));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;

package/build/styles/css/accordion.css

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

package/build/styles/css/buttons.css

@@ -1277,11 +1277,17 @@ input[type="button"].btn-block {
   display: inline-flex;
   align-items: center;
 }
-.btn-loading:not(.btn-block) .btn-loader[class] {
+.btn-loading:not(.btn-block) .btn-loader {
   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/build/styles/css/chevron.css

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

package/build/styles/css/neptune.css

@@ -5350,9 +5350,6 @@ tbody.collapse.in {
 .tw-chevron.top {
   transform: rotate(0deg);
 }
-[dir="rtl"] .tw-chevron.top {
-  transform: rotate(360deg);
-}
 .tw-chevron.right {
   transform: rotate(90deg);
 }
@@ -7496,11 +7493,17 @@ input[type="button"].btn-block {
   display: inline-flex;
   align-items: center;
 }
-.btn-loading:not(.btn-block) .btn-loader[class] {
+.btn-loading:not(.btn-block) .btn-loader {
   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;
@@ -16957,9 +16960,6 @@ 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-xxs {
+.process-xs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xxs .process-circle {
+.process-xs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xxs.process-danger .process-icon-horizontal {
+.process-xs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xxs.process-danger .process-icon-vertical {
+.process-xs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xxs .process-icon-horizontal,
-.process-xxs .process-icon-vertical {
+.process-xs .process-icon-horizontal,
+.process-xs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xxs.process-success .process-icon-container {
+.process-xs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xxs.process-success .process-icon-horizontal {
+.process-xs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xxs.process-success .process-icon-vertical {
+.process-xs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -17171,9 +17171,6 @@ 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;
 }
@@ -18814,13 +18811,10 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(-1.5px) rotate(-45deg);
+  transform: translateX(0.5px) rotate(-45deg);
   transform-origin: left bottom;
-}
-[dir="rtl"] .tw-checkbox-check::before,
-[dir="rtl"] .tw-checkbox-check::after {
-  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
-  transform-origin: right bottom;
+  inset-inline-start: 8px;
+  inset-inline-start: var(--size-8);
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {

package/build/styles/css/process.css

@@ -55,9 +55,6 @@
   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;
@@ -137,37 +134,37 @@
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xxs {
+.process-xs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xxs .process-circle {
+.process-xs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xxs.process-danger .process-icon-horizontal {
+.process-xs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xxs.process-danger .process-icon-vertical {
+.process-xs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xxs .process-icon-horizontal,
-.process-xxs .process-icon-vertical {
+.process-xs .process-icon-horizontal,
+.process-xs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xxs.process-success .process-icon-container {
+.process-xs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xxs.process-success .process-icon-horizontal {
+.process-xs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xxs.process-success .process-icon-vertical {
+.process-xs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -269,9 +266,6 @@
 .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/build/styles/css/tick.css

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

package/build/styles/main.css

@@ -5942,9 +5942,6 @@ tbody.collapse.in {
 .tw-chevron.top {
   transform: rotate(0deg);
 }
-[dir="rtl"] .tw-chevron.top {
-  transform: rotate(360deg);
-}
 .tw-chevron.right {
   transform: rotate(90deg);
 }
@@ -8088,11 +8085,17 @@ input[type="button"].btn-block {
   display: inline-flex;
   align-items: center;
 }
-.btn-loading:not(.btn-block) .btn-loader[class] {
+.btn-loading:not(.btn-block) .btn-loader {
   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;
@@ -17549,9 +17552,6 @@ 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-xxs {
+.process-xs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xxs .process-circle {
+.process-xs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xxs.process-danger .process-icon-horizontal {
+.process-xs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xxs.process-danger .process-icon-vertical {
+.process-xs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xxs .process-icon-horizontal,
-.process-xxs .process-icon-vertical {
+.process-xs .process-icon-horizontal,
+.process-xs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xxs.process-success .process-icon-container {
+.process-xs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xxs.process-success .process-icon-horizontal {
+.process-xs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xxs.process-success .process-icon-vertical {
+.process-xs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -17763,9 +17763,6 @@ 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;
 }
@@ -19406,13 +19403,10 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(-1.5px) rotate(-45deg);
+  transform: translateX(0.5px) rotate(-45deg);
   transform-origin: left bottom;
-}
-[dir="rtl"] .tw-checkbox-check::before,
-[dir="rtl"] .tw-checkbox-check::after {
-  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
-  transform-origin: right bottom;
+  inset-inline-start: 8px;
+  inset-inline-start: var(--size-8);
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
@@ -20311,18 +20305,10 @@ 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;
@@ -20499,14 +20485,12 @@ 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 {
-  --badge-h-side: right;
+  -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));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
@@ -21254,9 +21238,6 @@ 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);
@@ -24388,10 +24369,7 @@ button.np-link {
   inline-size: 161px;
 }
 [dir="rtl"] .wds-nudge-media-globe {
-  margin-inline-start: -63px;
-  margin-block-start: -15px;
-  position: absolute;
-  inline-size: 161px;
+  transform: scaleX(-1);
 }
 .wds-nudge-media-lock {
   margin-inline-start: -11px;
@@ -24400,24 +24378,36 @@ 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;
@@ -24425,48 +24415,73 @@ 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;
@@ -25233,10 +25248,6 @@ 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);
@@ -25245,10 +25256,6 @@ 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;
@@ -26930,7 +26937,8 @@ button.np-link {
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  text-align: start;
+  -moz-text-align-last: left;
+       text-align-last: left;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -26986,7 +26994,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 +27049,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/build/styles/styles/less/accordion.css

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

package/build/styles/styles/less/buttons.css

@@ -1277,11 +1277,17 @@ input[type="button"].btn-block {
   display: inline-flex;
   align-items: center;
 }
-.btn-loading:not(.btn-block) .btn-loader[class] {
+.btn-loading:not(.btn-block) .btn-loader {
   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/build/styles/styles/less/chevron.css

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