@transferwise/components 46.160.0 → 46.160.1

package/build/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;
@@ -20485,12 +20499,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 +21254,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,27 +21894,35 @@ 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 {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .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 {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .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 {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .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 {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -24361,7 +24388,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 +24400,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 +24425,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 +25129,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 +25165,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 +25267,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 +25279,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;
@@ -26929,8 +26964,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 +27020,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 +27075,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/AvatarView/AvatarView.css

@@ -4,10 +4,18 @@
   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;

package/build/styles/AvatarView/Dot/Dot.css

@@ -4,10 +4,18 @@
   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;

package/build/styles/CheckboxButton/CheckboxButton.css

@@ -32,6 +32,9 @@
   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);

package/build/styles/Nudge/Nudge.css

@@ -41,7 +41,10 @@
   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;
@@ -50,36 +53,24 @@
   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;
@@ -87,73 +78,48 @@
   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;

package/build/styles/Prompt/CriticalBanner/CriticalBanner.css

@@ -155,6 +155,35 @@
     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,
@@ -162,4 +191,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask--animated {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

package/build/styles/SlidingPanel/SlidingPanel.css

@@ -73,6 +73,10 @@
   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);
@@ -81,3 +85,7 @@
   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);
+}

package/build/styles/UploadInput/UploadItem/UploadItem.css

@@ -41,8 +41,7 @@
 .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);
 }
@@ -98,7 +97,7 @@
   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);
@@ -153,8 +152,8 @@
   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;