@transferwise/components 0.0.0-experimental-9050641 → 0.0.0-experimental-ce05ccb

package/build/styles/modal/Modal.css

@@ -41,7 +41,7 @@
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
   .tw-modal .tw-modal-content .tw-modal-footer {
     padding: 24px;
@@ -52,12 +52,12 @@
     padding: 0 var(--size-24);
   }
 }
-@media (min-width: 320.02px) {
+@media (min-width: 480px) {
   .tw-modal-dialog.tw-modal-sm {
     width: 300px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .tw-modal {
     padding: 40px;
     padding: var(--size-40);
@@ -67,16 +67,29 @@
     border-radius: var(--radius-small);
   }
   .tw-modal .tw-modal-dialog.tw-modal-md {
-    width: 576px;
+    width: 540px;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .tw-modal-dialog.tw-modal-lg {
-    width: 792px;
+    width: 720px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .tw-modal-dialog.tw-modal-xl {
     width: 1000px;
   }
 }
+/* Internet explorer hack */
+@media all and (-ms-high-contrast: none) {
+  /* IE11 */
+  /* stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown */
+  _:-ms-fullscreen,
+  :root .tw-modal {
+    height: 100%;
+  }
+  _:-ms-fullscreen .tw-modal-dialog,
+  :root .tw-modal .tw-modal-dialog {
+    height: 100%;
+  }
+}

package/build/styles/overlayHeader/OverlayHeader.css

@@ -2,7 +2,7 @@
   min-height: 97px;
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: 1164px;
 }
 .np-theme-personal .np-overlay-header {
   border-bottom: 1px solid rgba(0,0,0,0.10196);

package/build/styles/popover/Popover.css

@@ -41,12 +41,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-popover__container.np-bottom-sheet .np-popover__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-popover__container.np-bottom-sheet .np-popover__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -58,7 +58,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-popover__container.np-bottom-sheet .np-popover__title {
       -webkit-hyphenate-limit-before: 4;
     }

package/build/styles/promoCard/PromoCard.css

@@ -176,7 +176,7 @@
   gap: var(--size-24);
   width: 100%;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .np-CardGroup {
     flex-direction: row;
   }

package/build/styles/prompt/ActionPrompt/ActionPrompt.css

@@ -12,7 +12,7 @@
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 767px) {
   .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
     flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
     min-width: -moz-fit-content;

package/build/styles/prompt/CriticalBanner/CriticalBanner.css

@@ -73,7 +73,7 @@
     padding-top: 0;
   }
 }
-@container (width < 320px) {
+@container (max-width: 320px) {
   .wds-critical-banner__text-wrapper {
     padding-top: 0;
   }
@@ -124,6 +124,63 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang {
+  --critical-banner-mobile-overhang-size: 32px;
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-negative);
+  position: relative;
+}
+.wds-critical-banner-overhang--warning {
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-warning);
+}
+.wds-critical-banner-overhang--negative {
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-negative);
+}
+.wds-critical-banner-overhang--neutral {
+  --critical-banner-mobile-overhang-color: var(--color-background-neutral);
+}
+.wds-critical-banner-overhang--success {
+  --critical-banner-mobile-overhang-color: var(--color-sentiment-positive);
+}
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+    padding-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--critical-banner-mobile-overhang-color) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--critical-banner-mobile-overhang-color) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -131,4 +188,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -40,7 +40,7 @@
   grid-column-start: 2;
   grid-column-end: 3;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;

package/build/styles/props/custom-media.css

@@ -1,23 +1,11 @@
-/**
- * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 08 May 2026 16:25:08 GMT
- */
-
-@custom-media --screen-400-zoom (width <= 320px);
-
-@custom-media --screen-xs (width > 320px);
-@custom-media --screen-xs-max (width < 600px);
-@custom-media --screen-sm (width >= 600px);
-@custom-media --screen-sm-max (width < 840px);
-@custom-media --screen-md (width >= 840px);
-@custom-media --screen-md-max (width < 1160px);
-@custom-media --screen-lg (width >= 1160px);
-/* @deprecated use --screen-md-max */
-@custom-media --screen-lg-max (width < 1160px);
-/* @deprecated use --screen-lg */
-@custom-media --screen-xl (width >= 1160px);
-
-@custom-media --screen-xs-sm (320px < width < 600px);
-@custom-media --screen-sm-md (600px <= width < 840px);
-@custom-media --screen-md-lg (840px <= width < 1160px);
-
+@custom-media --screen-xs (min-width: 480px);
+@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
+@custom-media --screen-sm (min-width: 576px);
+@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
+@custom-media --screen-md (min-width: 768px);
+@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
+@custom-media --screen-lg (min-width: 992px);
+@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
+@custom-media --screen-xl (min-width: 1200px);
+
+@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */

package/build/styles/props/neptune-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Fri, 08 May 2026 16:25:08 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 :root {

package/build/styles/snackbar/Snackbar.css

@@ -62,7 +62,7 @@
 .np-theme-personal--forest-green .snackbar__text {
   box-shadow: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .snackbar__text {
     width: auto;
     max-width: 600px;
@@ -86,7 +86,7 @@
   transform: translateY(-16px);
   transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .snackbar__text-container-enter-active {
     transform: translateY(-24px);
   }

package/build/styles/stepper/Stepper.css

@@ -2,7 +2,7 @@
   padding-bottom: 24px;
   width: 100%;
 }
-@media only screen and (max-width: 599.98px) {
+@media only screen and (max-width: 575px) {
   .tw-stepper {
     padding-bottom: 0;
   }
@@ -32,7 +32,7 @@
 .tw-stepper__step--has-tooltip {
   cursor: pointer;
 }
-@media screen and (min-width: 600px) and (max-width: 1159.98px) {
+@media screen and (min-width: 576px) and (max-width: 991px) {
   .tw-stepper__step:first-child .tooltip-inner {
     transform: translateX(calc(50% - 32px));
   }

package/build/styles/styles/less/accordion.css

@@ -68,12 +68,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .decision__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -85,7 +85,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .decision__title {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -137,7 +137,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 320.02px) {
+@media (min-width: 480px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

package/build/styles/styles/less/button-groups.css

@@ -53,7 +53,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .btn-toolbar:not(.btn-toolbar-xl) {
     margin-left: -4px;
     margin-right: -4px;
@@ -91,7 +91,7 @@
 [dir="rtl"] .btn-toolbar.btn-toolbar-xs .input-group {
   float: right;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .btn-toolbar.btn-toolbar-sm {
     margin-left: -4px;
     margin-right: -4px;
@@ -111,7 +111,7 @@
     float: right;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .btn-toolbar.btn-toolbar-md {
     margin-left: -4px;
     margin-right: -4px;
@@ -131,7 +131,7 @@
     float: right;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .btn-toolbar.btn-toolbar-lg {
     margin-left: -4px;
     margin-right: -4px;
@@ -151,7 +151,7 @@
     float: right;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .btn-toolbar.btn-toolbar-xl {
     margin-left: -4px;
     margin-right: -4px;
@@ -426,7 +426,7 @@ html:not([dir="rtl"]) .btn-group .btn + .btn-primary {
   padding-left: 40px;
   padding-right: 16px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .btn-group.btn-block .btn-input.btn.dropdown-toggle {
     padding-right: 48px;
   }

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

@@ -1127,7 +1127,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   height: 18px;
   background-size: 12px 12px !important;
 }
-@media (max-width: 839px) {
+@media (max-width: 767px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
     font-size: 1rem;

package/build/styles/styles/less/circles.css

@@ -145,7 +145,7 @@ a.circle.active:hover {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .circle-responsive {
     border-radius: 50%;
     background-color: #fff;

package/build/styles/styles/less/column-layout.css

@@ -49,7 +49,7 @@
   padding: 24px;
   padding: var(--size-24);
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .column-layout {
     display: table;
   }
@@ -89,12 +89,12 @@
   opacity: 1;
   top: 20px;
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .column-layout-cover {
     display: none;
   }
 }
-@media (max-width: 1159.98px) {
+@media (max-width: 991px) {
   .column-layout-open {
     overflow: hidden;
   }
@@ -134,7 +134,7 @@
   padding: 4px 24px;
   padding: var(--size-4) 24px;
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .column-layout-brand {
     padding-left: 32px;
     padding-right: 32px;

package/build/styles/styles/less/decision.css

@@ -33,12 +33,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .decision__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -50,7 +50,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .decision__title {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -102,7 +102,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 320.02px) {
+@media (min-width: 480px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

package/build/styles/styles/less/dropdowns.css

@@ -54,7 +54,7 @@
   border-radius: var(--radius-medium);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .dropdown-menu {
     min-width: 160px;
   }
@@ -176,7 +176,7 @@
   opacity: 1;
   transform: none;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .open > .dropdown-menu-overlay {
     position: fixed;
     top: 0;
@@ -238,7 +238,7 @@
   right: auto;
   right: initial;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .dropdown-menu-sm-right {
     left: auto;
     right: 0;
@@ -268,7 +268,7 @@
     right: initial;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .dropdown-menu-md-right {
     left: auto;
     right: 0;
@@ -298,7 +298,7 @@
     right: initial;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .dropdown-menu-lg-right {
     left: auto;
     right: 0;
@@ -328,7 +328,7 @@
     right: initial;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .dropdown-menu-xl-right {
     left: auto;
     right: 0;
@@ -384,12 +384,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .dropdown-header {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .dropdown-header {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -401,7 +401,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .dropdown-header {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -437,7 +437,7 @@
   bottom: -2px;
   margin-bottom: 2px;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .navbar-right .dropdown-menu {
     left: auto;
     right: 0;

package/build/styles/styles/less/droppable.css

@@ -25,7 +25,7 @@
   border-radius: 0;
   border-radius: initial;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .droppable {
     border-style: dashed;
   }
@@ -124,7 +124,7 @@
   max-width: 96px;
   margin: 0 auto;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .droppable .thumbnail {
     max-height: 128px;
     max-width: 128px;
@@ -175,12 +175,12 @@
 .droppable-sm {
   padding: 16px 16px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .droppable-sm {
     padding: 24px 16px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .droppable-sm {
     padding: 32px 24px;
   }
@@ -188,12 +188,12 @@
 .droppable-md {
   padding: 32px 32px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .droppable-md {
     padding: 48px 32px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .droppable-md {
     padding: 64px 48px;
   }
@@ -201,12 +201,12 @@
 .droppable-lg {
   padding: 48px 48px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .droppable-lg {
     padding: 72px 48px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .droppable-lg {
     padding: 96px 72px;
   }