@transferwise/components 46.128.3 → 46.130.0

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -1,34 +1,52 @@
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
+}
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);

package/build/styles/inputs/SelectInput.css

@@ -102,6 +102,14 @@
   border-radius: var(--size-10);
   text-align: start;
 }
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}
 .np-popover-v2-container {
   z-index: 1060;
   display: flex;

package/build/styles/listItem/ListItem.css

@@ -599,7 +599,7 @@
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;

package/build/styles/main.css

@@ -5,11 +5,11 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -29,11 +29,11 @@
   --color-sentiment-background-surface-hover: #F9E1E1;
   --color-sentiment-background-surface-active: #F8D8D8;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -53,11 +53,11 @@
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -77,11 +77,11 @@
   --color-sentiment-background-surface-hover: #641115;
   --color-sentiment-background-surface-active: #761418;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -101,11 +101,11 @@
   --color-sentiment-background-surface-hover: #FFBDC0;
   --color-sentiment-background-surface-active: #FFD1D3;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -125,11 +125,11 @@
   --color-sentiment-background-surface-hover: #FFF0B2;
   --color-sentiment-background-surface-active: #FFE98F;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -149,11 +149,11 @@
   --color-sentiment-background-surface-hover: #FFBF0F;
   --color-sentiment-background-surface-active: #FFBB00;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -173,11 +173,11 @@
   --color-sentiment-background-surface-hover: #504930;
   --color-sentiment-background-surface-active: #665D3D;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -197,11 +197,11 @@
   --color-sentiment-background-surface-hover: #F9D648;
   --color-sentiment-background-surface-active: #F8CD20;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -221,11 +221,11 @@
   --color-sentiment-background-surface-hover: #D3F2C0;
   --color-sentiment-background-surface-active: #C5EDAB;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -245,11 +245,11 @@
   --color-sentiment-background-surface-hover: #043A1E;
   --color-sentiment-background-surface-active: #022614;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -269,11 +269,11 @@
   --color-sentiment-background-surface-hover: #323B2B;
   --color-sentiment-background-surface-active: #3E4A36;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -293,11 +293,11 @@
   --color-sentiment-background-surface-hover: #C8EAB3;
   --color-sentiment-background-surface-active: #D6F0C7;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -317,11 +317,11 @@
   --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
   --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -341,11 +341,11 @@
   --color-sentiment-background-surface-hover: #353635;
   --color-sentiment-background-surface-active: #232423;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -365,11 +365,11 @@
   --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
   --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -389,11 +389,11 @@
   --color-sentiment-background-surface-hover: #E7E7E1;
   --color-sentiment-background-surface-active: #DFDED5;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -413,11 +413,11 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .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 {
+.np-theme-personal.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;
@@ -437,11 +437,11 @@
   --color-sentiment-background-surface-hover: #043A3A;
   --color-sentiment-background-surface-active: #022626;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -461,11 +461,11 @@
   --color-sentiment-background-surface-hover: #124F4C;
   --color-sentiment-background-surface-active: #176460;
 }
-.np-theme-personal--dark .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 {
+.np-theme-personal--dark.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;
@@ -485,37 +485,55 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
+}
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);
@@ -1969,6 +1987,55 @@
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
 }
+/* @define Card */
+.np-Card {
+  --Card-background-color: var(--color-background-neutral);
+  --Card-border-radius: var(--size-32);
+  --Card-flex-gap: var(--size-16);
+  --Card-padding: var(--size-24);
+  --Card-closeButton-position: var(--size-16);
+  --Card-max-width: initial;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--Card-background-color);
+  border-radius: 32px;
+  border-radius: var(--Card-border-radius);
+  gap: 16px;
+  gap: var(--Card-flex-gap);
+  padding: 24px;
+  padding: var(--Card-padding);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+@media (min-width: 576px) {
+  .np-Card {
+    max-width: var(--Card-max-width);
+  }
+}
+.np-Card.is-disabled .np-Card-closeButton {
+  cursor: not-allowed;
+}
+.np-theme-personal--dark .np-Card {
+  --Card-background-color: var(--color-background-elevated);
+}
+.np-Card-closeButton {
+  position: absolute;
+  z-index: 100;
+  top: var(--Card-closeButton-position);
+  right: var(--Card-closeButton-position);
+}
+[dir="rtl"] .np-Card-closeButton {
+  left: var(--Card-closeButton-position);
+  right: auto;
+}
+.np-Card--small {
+  --Card-border-radius: var(--size-16);
+  --Card-closeButton-position: var(--size-8);
+  --Card-padding: var(--size-16);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -2022,55 +2089,6 @@
   padding: 0 16px 16px;
   padding: 0 var(--size-16) var(--size-16);
 }
-/* @define Card */
-.np-Card {
-  --Card-background-color: var(--color-background-neutral);
-  --Card-border-radius: var(--size-32);
-  --Card-flex-gap: var(--size-16);
-  --Card-padding: var(--size-24);
-  --Card-closeButton-position: var(--size-16);
-  --Card-max-width: initial;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--Card-background-color);
-  border-radius: 32px;
-  border-radius: var(--Card-border-radius);
-  gap: 16px;
-  gap: var(--Card-flex-gap);
-  padding: 24px;
-  padding: var(--Card-padding);
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-@media (min-width: 576px) {
-  .np-Card {
-    max-width: var(--Card-max-width);
-  }
-}
-.np-Card.is-disabled .np-Card-closeButton {
-  cursor: not-allowed;
-}
-.np-theme-personal--dark .np-Card {
-  --Card-background-color: var(--color-background-elevated);
-}
-.np-Card-closeButton {
-  position: absolute;
-  z-index: 100;
-  top: var(--Card-closeButton-position);
-  right: var(--Card-closeButton-position);
-}
-[dir="rtl"] .np-Card-closeButton {
-  left: var(--Card-closeButton-position);
-  right: auto;
-}
-.np-Card--small {
-  --Card-border-radius: var(--size-16);
-  --Card-closeButton-position: var(--size-8);
-  --Card-padding: var(--size-16);
-}
 .np-close-button {
   transition: color 0.15s ease-in-out;
   color: #00a2dd;
@@ -3692,7 +3710,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;
@@ -3930,6 +3948,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: var(--size-10);
   text-align: start;
 }
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}
 .np-popover-v2-container {
   z-index: 1060;
   display: flex;