@transferwise/components 46.116.1 → 46.117.1

package/build/main.css

@@ -1,5 +1,15 @@
+.wds-sentiment-surface {
+  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+}
+.wds-sentiment-surface--hasBaseStyles {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
 .np-theme-personal .wds-sentiment-surface-negative-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
+.np-theme-business .wds-sentiment-surface-negative-base,
+.np-theme-platform .wds-sentiment-surface-negative-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
+.np-theme-business--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
   --color-sentiment-content-primary-hover: #B8232B;
   --color-sentiment-content-primary-active: #A72027;
@@ -20,7 +30,10 @@
   --color-sentiment-background-surface-active: #F8D8D8;
 }
 .np-theme-personal .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
+.np-theme-business .wds-sentiment-surface-negative-elevated,
+.np-theme-platform .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #F5CCCC;
   --color-sentiment-content-primary-active: #F1B7B7;
@@ -32,7 +45,7 @@
   --color-sentiment-interactive-secondary-active: #A72027;
   --color-sentiment-interactive-secondary-neutral: #9B141B;
   --color-sentiment-interactive-secondary-neutral-hover: #831116;
-  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
@@ -41,7 +54,10 @@
   --color-sentiment-background-surface-active: #A72027;
 }
 .np-theme-personal--dark .wds-sentiment-surface-negative-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
+.np-theme-business--dark .wds-sentiment-surface-negative-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-negative-base,
+.np-theme-business--forest-green .wds-sentiment-surface-negative-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #FFA8AD;
   --color-sentiment-content-primary-hover: #FFBDC0;
   --color-sentiment-content-primary-active: #FFD1D3;
@@ -62,7 +78,10 @@
   --color-sentiment-background-surface-active: #761418;
 }
 .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
+.np-theme-business--dark .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-negative-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #410B0D;
   --color-sentiment-content-primary-hover: #641115;
   --color-sentiment-content-primary-active: #761418;
@@ -83,7 +102,10 @@
   --color-sentiment-background-surface-active: #FFD1D3;
 }
 .np-theme-personal .wds-sentiment-surface-warning-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
+.np-theme-business .wds-sentiment-surface-warning-base,
+.np-theme-platform .wds-sentiment-surface-warning-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
+.np-theme-business--bright-green .wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -104,7 +126,10 @@
   --color-sentiment-background-surface-active: #FFE98F;
 }
 .np-theme-personal .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
+.np-theme-business .wds-sentiment-surface-warning-elevated,
+.np-theme-platform .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -125,7 +150,10 @@
   --color-sentiment-background-surface-active: #FFBB00;
 }
 .np-theme-personal--dark .wds-sentiment-surface-warning-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
+.np-theme-business--dark .wds-sentiment-surface-warning-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-warning-base,
+.np-theme-business--forest-green .wds-sentiment-surface-warning-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #FADC65;
   --color-sentiment-content-primary-hover: #F9D648;
   --color-sentiment-content-primary-active: #F8CD20;
@@ -146,7 +174,10 @@
   --color-sentiment-background-surface-active: #665D3D;
 }
 .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
+.np-theme-business--dark .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-warning-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #3A3523;
   --color-sentiment-content-primary-hover: #504930;
   --color-sentiment-content-primary-active: #665D3D;
@@ -167,7 +198,10 @@
   --color-sentiment-background-surface-active: #F8CD20;
 }
 .np-theme-personal .wds-sentiment-surface-success-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-base {
+.np-theme-business .wds-sentiment-surface-success-base,
+.np-theme-platform .wds-sentiment-surface-success-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-base,
+.np-theme-business--bright-green .wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #054D28;
   --color-sentiment-content-primary-hover: #043A1E;
   --color-sentiment-content-primary-active: #022614;
@@ -188,7 +222,10 @@
   --color-sentiment-background-surface-active: #C5EDAB;
 }
 .np-theme-personal .wds-sentiment-surface-success-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
+.np-theme-business .wds-sentiment-surface-success-elevated,
+.np-theme-platform .wds-sentiment-surface-success-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #E2F6D5;
   --color-sentiment-content-primary-hover: #D3F2C0;
   --color-sentiment-content-primary-active: #C5EDAB;
@@ -209,7 +246,10 @@
   --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark .wds-sentiment-surface-success-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-base {
+.np-theme-business--dark .wds-sentiment-surface-success-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-success-base,
+.np-theme-business--forest-green .wds-sentiment-surface-success-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #BAE5A0;
   --color-sentiment-content-primary-hover: #C8EAB3;
   --color-sentiment-content-primary-active: #D6F0C7;
@@ -230,7 +270,10 @@
   --color-sentiment-background-surface-active: #3E4A36;
 }
 .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
+.np-theme-business--dark .wds-sentiment-surface-success-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-success-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #252C20;
   --color-sentiment-content-primary-hover: #323B2B;
   --color-sentiment-content-primary-active: #3E4A36;
@@ -251,7 +294,10 @@
   --color-sentiment-background-surface-active: #D6F0C7;
 }
 .np-theme-personal .wds-sentiment-surface-neutral-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
+.np-theme-business .wds-sentiment-surface-neutral-base,
+.np-theme-platform .wds-sentiment-surface-neutral-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
+.np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #454745;
   --color-sentiment-content-primary-hover: #353635;
   --color-sentiment-content-primary-active: #232423;
@@ -272,7 +318,10 @@
   --color-sentiment-background-surface-active: #DFDED5;
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-business .wds-sentiment-surface-neutral-elevated,
+.np-theme-platform .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -293,7 +342,10 @@
   --color-sentiment-background-surface-active: #232423;
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
+.np-theme-business--dark .wds-sentiment-surface-neutral-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base,
+.np-theme-business--forest-green .wds-sentiment-surface-neutral-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -314,7 +366,10 @@
   --color-sentiment-background-surface-active: #595B58;
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-neutral-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #2A2C29;
   --color-sentiment-content-primary-hover: #414441;
   --color-sentiment-content-primary-active: #595B58;
@@ -335,7 +390,10 @@
   --color-sentiment-background-surface-active: #DFDED5;
 }
 .np-theme-personal .wds-sentiment-surface-proposition-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
+.np-theme-business .wds-sentiment-surface-proposition-base,
+.np-theme-platform .wds-sentiment-surface-proposition-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
+.np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;
@@ -356,7 +414,10 @@
   --color-sentiment-background-surface-active: #B6ECEC;
 }
 .np-theme-personal .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-business .wds-sentiment-surface-proposition-elevated,
+.np-theme-platform .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -377,7 +438,10 @@
   --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
+.np-theme-business--dark .wds-sentiment-surface-proposition-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
+.np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -398,7 +462,10 @@
   --color-sentiment-background-surface-active: #176460;
 }
 .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;
@@ -874,18 +941,35 @@
   position: relative;
   z-index: 1;
 }
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
 .wds-inline-prompt a:first-of-type:before,
 .wds-inline-prompt button:first-of-type:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -899,112 +983,16 @@
 }
 .wds-inline-prompt__media-wrapper .tw-icon-tags,
 .wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a,
-.wds-inline-prompt--negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a:hover,
-.wds-inline-prompt--negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-inline-prompt--negative a:active,
-.wds-inline-prompt--negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-inline-prompt--positive {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a,
-.wds-inline-prompt--positive button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a:hover,
-.wds-inline-prompt--positive button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-sentiment-content-primary);
 }
-.wds-inline-prompt--positive a:active,
-.wds-inline-prompt--positive button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-inline-prompt--proposition {
-  background-color: #D2F9F7;
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a,
-.wds-inline-prompt--proposition button {
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a:hover,
-.wds-inline-prompt--proposition button:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.wds-inline-prompt--proposition a:active,
-.wds-inline-prompt--proposition button:active {
-  color: var(--color-interactive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: #B2F4F3;
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: #91F0EE;
-}
-.wds-inline-prompt--neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt--neutral a,
-.wds-inline-prompt--neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-inline-prompt--warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a,
-.wds-inline-prompt--warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a:hover,
-.wds-inline-prompt--warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-inline-prompt--warning a:active,
-.wds-inline-prompt--warning button:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
 }
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
 }
 .np-dot {
   --np-dot-size: 14px;
@@ -1107,17 +1095,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-interactive-control);
+  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
   background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
+  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-interactive-accent-hover);
+  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-interactive-accent-active);
+  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -1145,14 +1133,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-interactive-neutral);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-interactive-neutral-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
@@ -1266,12 +1254,12 @@
   pointer-events: auto;
 }
 .wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-color-hover: var(--color-interactive-control-hover);
-  --Button-color-active: var(--color-interactive-control-active);
+  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
+  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
   --Button-border-radius: var(--radius-full);
   --Button-label-gap: var(--size-4);
   --Button-large-padding: var(--size-12) var(--size-16);
@@ -1280,22 +1268,22 @@
   --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
-  --Button-secondary-color-active: var(--color-interactive-primary-active);
-  --Button-secondary-neutral-background: var(--color-background-neutral);
-  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
-  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
-  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
+  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
+  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
+  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
+  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
   --Button-tertiary-background: transparent;
-  --Button-tertiary-background-hover: var(--color-background-screen-hover);
-  --Button-tertiary-background-active: var(--color-background-screen-active);
-  --Button-tertiary-color: var(--color-interactive-primary);
-  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
-  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
+  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
+  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
   --Button-primary-negative-background: var(--color-sentiment-negative-primary);
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -1380,7 +1368,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);
@@ -4321,6 +4309,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 a,
 button.np-link {
   border-radius: 2px;
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
 }
 .np-link .tw-icon {
   display: flex;

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -28,6 +28,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var Body = require('../../body/Body.js');
+var SentimentSurface = require('../../sentimentSurface/SentimentSurface.js');
 
 const InlinePrompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.POSITIVE,
@@ -36,15 +37,11 @@ const InlinePrompt = ({
   className,
   children,
   media = null,
+  'data-testid': dataTestId,
   ...rest
 }) => {
+  const surfaceSentiment = sentiment$1 === sentiment.Sentiment.POSITIVE ? 'success' : sentiment$1;
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment$1)) {
-      return media;
-    }
-    if (sentiment$1 === 'proposition') {
-      return /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
-    }
     if (muted) {
       return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
         size: 16,
@@ -54,15 +51,24 @@ const InlinePrompt = ({
     if (loading) {
       return /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator.default, {
         "data-testid": "InlinePrompt_ProcessIndicator",
-        size: "xxs"
+        size: "xxs",
+        className: "wds-inline-prompt-process-indicator"
       });
     }
+    if (sentiment$1 === 'positive' && media) {
+      return media;
+    }
+    if (sentiment$1 === 'proposition') {
+      return media || /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
+    }
     return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
       size: 16,
       sentiment: sentiment$1
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(SentimentSurface.default, {
+    sentiment: surfaceSentiment,
+    "data-testid": dataTestId,
     className: clsx.clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment$1}`, {
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading

package/build/prompt/InlinePrompt/InlinePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","rest","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZ,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIF,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACG,QAAQ,CAACV,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOW,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOQ,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBAAOO,cAAA,CAACI,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEiB,eAAA,CAAA,KAAA,EAAA;IACEZ,SAAS,EAAEa,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBlB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEG,IAAI;AAAAF,IAAAA,QAAA,gBAERK,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEG,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACQ,YAAI,EAAA;AAAAb,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,cAAA,CAACG,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,cAAA,CAACI,aAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,eAAA,CAACC,wBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,cAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACS,YAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -17,7 +17,7 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
-import { GiftBox, BackslashCircle } from '@transferwise/icons';
+import { BackslashCircle, GiftBox } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import 'react';
 import 'react-intl';
@@ -26,6 +26,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
+import SentimentSurface from '../../sentimentSurface/SentimentSurface.mjs';
 
 const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,
@@ -34,15 +35,11 @@ const InlinePrompt = ({
   className,
   children,
   media = null,
+  'data-testid': dataTestId,
   ...rest
 }) => {
+  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment)) {
-      return media;
-    }
-    if (sentiment === 'proposition') {
-      return /*#__PURE__*/jsx(GiftBox, {});
-    }
     if (muted) {
       return /*#__PURE__*/jsx(BackslashCircle, {
         size: 16,
@@ -52,15 +49,24 @@ const InlinePrompt = ({
     if (loading) {
       return /*#__PURE__*/jsx(ProcessIndicator, {
         "data-testid": "InlinePrompt_ProcessIndicator",
-        size: "xxs"
+        size: "xxs",
+        className: "wds-inline-prompt-process-indicator"
       });
     }
+    if (sentiment === 'positive' && media) {
+      return media;
+    }
+    if (sentiment === 'proposition') {
+      return media || /*#__PURE__*/jsx(GiftBox, {});
+    }
     return /*#__PURE__*/jsx(StatusIcon, {
       size: 16,
       sentiment: sentiment
     });
   };
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs(SentimentSurface, {
+    sentiment: surfaceSentiment,
+    "data-testid": dataTestId,
     className: clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment}`, {
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading