@transferwise/components 46.115.1 → 46.116.0

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -0,0 +1,424 @@
+.wds-sentiment-surface {
+  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 {
+  --color-sentiment-content-primary: #CB272F;
+  --color-sentiment-content-primary-hover: #B8232B;
+  --color-sentiment-content-primary-active: #A72027;
+  --color-sentiment-interactive-primary: #CB272F;
+  --color-sentiment-interactive-primary-hover: #B8232B;
+  --color-sentiment-interactive-primary-active: #A72027;
+  --color-sentiment-interactive-secondary: #FBEAEA;
+  --color-sentiment-interactive-secondary-hover: #F9E1E1;
+  --color-sentiment-interactive-secondary-active: #F8D8D8;
+  --color-sentiment-interactive-secondary-neutral: #F5D3D4;
+  --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
+  --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
+  --color-sentiment-interactive-control: #FBEAEA;
+  --color-sentiment-interactive-control-hover: #F9E1E1;
+  --color-sentiment-interactive-control-active: #F8D8D8;
+  --color-sentiment-background-surface: #FBEAEA;
+  --color-sentiment-background-surface-hover: #F9E1E1;
+  --color-sentiment-background-surface-active: #F8D8D8;
+}
+.np-theme-personal .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #F5CCCC;
+  --color-sentiment-content-primary-active: #F1B7B7;
+  --color-sentiment-interactive-primary: #FBEAEA;
+  --color-sentiment-interactive-primary-hover: #F5CCCC;
+  --color-sentiment-interactive-primary-active: #F1B7B7;
+  --color-sentiment-interactive-secondary: #CB272F;
+  --color-sentiment-interactive-secondary-hover: #B8232B;
+  --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-control: #CB272F;
+  --color-sentiment-interactive-control-hover: #B8232B;
+  --color-sentiment-interactive-control-active: #A72027;
+  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface-hover: #B8232B;
+  --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 {
+  --color-sentiment-content-primary: #FFA8AD;
+  --color-sentiment-content-primary-hover: #FFBDC0;
+  --color-sentiment-content-primary-active: #FFD1D3;
+  --color-sentiment-interactive-primary: #FFA8AD;
+  --color-sentiment-interactive-primary-hover: #FFBDC0;
+  --color-sentiment-interactive-primary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary: #410B0D;
+  --color-sentiment-interactive-secondary-hover: #641115;
+  --color-sentiment-interactive-secondary-active: #761418;
+  --color-sentiment-interactive-secondary-neutral: #601013;
+  --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
+  --color-sentiment-interactive-secondary-neutral-active: #90181D;
+  --color-sentiment-interactive-control: #410B0D;
+  --color-sentiment-interactive-control-hover: #641115;
+  --color-sentiment-interactive-control-active: #761418;
+  --color-sentiment-background-surface: #410B0D;
+  --color-sentiment-background-surface-hover: #641115;
+  --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 {
+  --color-sentiment-content-primary: #410B0D;
+  --color-sentiment-content-primary-hover: #641115;
+  --color-sentiment-content-primary-active: #761418;
+  --color-sentiment-interactive-primary: #410B0D;
+  --color-sentiment-interactive-primary-hover: #641115;
+  --color-sentiment-interactive-primary-active: #761418;
+  --color-sentiment-interactive-secondary: #FFA8AD;
+  --color-sentiment-interactive-secondary-hover: #FFBDC0;
+  --color-sentiment-interactive-secondary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary-neutral: #D9898D;
+  --color-sentiment-interactive-secondary-neutral-hover: #D68084;
+  --color-sentiment-interactive-secondary-neutral-active: #D06C71;
+  --color-sentiment-interactive-control: #FFA8AD;
+  --color-sentiment-interactive-control-hover: #FFBDC0;
+  --color-sentiment-interactive-control-active: #FFD1D3;
+  --color-sentiment-background-surface: #FFA8AD;
+  --color-sentiment-background-surface-hover: #FFBDC0;
+  --color-sentiment-background-surface-active: #FFD1D3;
+}
+.np-theme-personal .wds-sentiment-surface-warning-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
+  --color-sentiment-content-primary: #4A3B1C;
+  --color-sentiment-content-primary-hover: #302612;
+  --color-sentiment-content-primary-active: #2C2311;
+  --color-sentiment-interactive-primary: #FFD11A;
+  --color-sentiment-interactive-primary-hover: #FFBF0F;
+  --color-sentiment-interactive-primary-active: #FFBB00;
+  --color-sentiment-interactive-secondary: #FFF7D7;
+  --color-sentiment-interactive-secondary-hover: #FFF0B2;
+  --color-sentiment-interactive-secondary-active: #FFE98F;
+  --color-sentiment-interactive-secondary-neutral: #FFEC9E;
+  --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
+  --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
+  --color-sentiment-interactive-control: #4A3B1C;
+  --color-sentiment-interactive-control-hover: #302612;
+  --color-sentiment-interactive-control-active: #2C2311;
+  --color-sentiment-background-surface: #FFF7D7;
+  --color-sentiment-background-surface-hover: #FFF0B2;
+  --color-sentiment-background-surface-active: #FFE98F;
+}
+.np-theme-personal .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
+  --color-sentiment-content-primary: #4A3B1C;
+  --color-sentiment-content-primary-hover: #302612;
+  --color-sentiment-content-primary-active: #2C2311;
+  --color-sentiment-interactive-primary: #4A3B1C;
+  --color-sentiment-interactive-primary-hover: #302612;
+  --color-sentiment-interactive-primary-active: #2C2311;
+  --color-sentiment-interactive-secondary: #FFD11A;
+  --color-sentiment-interactive-secondary-hover: #FFBF0F;
+  --color-sentiment-interactive-secondary-active: #FFBB00;
+  --color-sentiment-interactive-secondary-neutral: #FFEC9E;
+  --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
+  --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
+  --color-sentiment-interactive-control: #FFD11A;
+  --color-sentiment-interactive-control-hover: #FFBF0F;
+  --color-sentiment-interactive-control-active: #FFBB00;
+  --color-sentiment-background-surface: #FFD11A;
+  --color-sentiment-background-surface-hover: #FFBF0F;
+  --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 {
+  --color-sentiment-content-primary: #FADC65;
+  --color-sentiment-content-primary-hover: #F9D648;
+  --color-sentiment-content-primary-active: #F8CD20;
+  --color-sentiment-interactive-primary: #FADC65;
+  --color-sentiment-interactive-primary-hover: #F9D648;
+  --color-sentiment-interactive-primary-active: #F8CD20;
+  --color-sentiment-interactive-secondary: #3A3523;
+  --color-sentiment-interactive-secondary-hover: #504930;
+  --color-sentiment-interactive-secondary-active: #665D3D;
+  --color-sentiment-interactive-secondary-neutral: #4D462A;
+  --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
+  --color-sentiment-interactive-secondary-neutral-active: #685D33;
+  --color-sentiment-interactive-control: #3A3523;
+  --color-sentiment-interactive-control-hover: #504930;
+  --color-sentiment-interactive-control-active: #665D3D;
+  --color-sentiment-background-surface: #3A3523;
+  --color-sentiment-background-surface-hover: #504930;
+  --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 {
+  --color-sentiment-content-primary: #3A3523;
+  --color-sentiment-content-primary-hover: #504930;
+  --color-sentiment-content-primary-active: #665D3D;
+  --color-sentiment-interactive-primary: #3A3523;
+  --color-sentiment-interactive-primary-hover: #504930;
+  --color-sentiment-interactive-primary-active: #665D3D;
+  --color-sentiment-interactive-secondary: #FADC65;
+  --color-sentiment-interactive-secondary-hover: #F9D648;
+  --color-sentiment-interactive-secondary-active: #F8CD20;
+  --color-sentiment-interactive-secondary-neutral: #E3C85D;
+  --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
+  --color-sentiment-interactive-secondary-neutral-active: #D9B526;
+  --color-sentiment-interactive-control: #FADC65;
+  --color-sentiment-interactive-control-hover: #F9D648;
+  --color-sentiment-interactive-control-active: #F8CD20;
+  --color-sentiment-background-surface: #FADC65;
+  --color-sentiment-background-surface-hover: #F9D648;
+  --color-sentiment-background-surface-active: #F8CD20;
+}
+.np-theme-personal .wds-sentiment-surface-success-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-base {
+  --color-sentiment-content-primary: #054D28;
+  --color-sentiment-content-primary-hover: #043A1E;
+  --color-sentiment-content-primary-active: #022614;
+  --color-sentiment-interactive-primary: #054D28;
+  --color-sentiment-interactive-primary-hover: #043A1E;
+  --color-sentiment-interactive-primary-active: #022614;
+  --color-sentiment-interactive-secondary: #E2F6D5;
+  --color-sentiment-interactive-secondary-hover: #D3F2C0;
+  --color-sentiment-interactive-secondary-active: #C5EDAB;
+  --color-sentiment-interactive-secondary-neutral: #BCD9B8;
+  --color-sentiment-interactive-secondary-neutral-hover: #AACFA5;
+  --color-sentiment-interactive-secondary-neutral-active: #94C38E;
+  --color-sentiment-interactive-control: #E2F6D5;
+  --color-sentiment-interactive-control-hover: #D3F2C0;
+  --color-sentiment-interactive-control-active: #C5EDAB;
+  --color-sentiment-background-surface: #E2F6D5;
+  --color-sentiment-background-surface-hover: #D3F2C0;
+  --color-sentiment-background-surface-active: #C5EDAB;
+}
+.np-theme-personal .wds-sentiment-surface-success-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
+  --color-sentiment-content-primary: #E2F6D5;
+  --color-sentiment-content-primary-hover: #D3F2C0;
+  --color-sentiment-content-primary-active: #C5EDAB;
+  --color-sentiment-interactive-primary: #E2F6D5;
+  --color-sentiment-interactive-primary-hover: #D3F2C0;
+  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --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 {
+  --color-sentiment-content-primary: #BAE5A0;
+  --color-sentiment-content-primary-hover: #C8EAB3;
+  --color-sentiment-content-primary-active: #D6F0C7;
+  --color-sentiment-interactive-primary: #BAE5A0;
+  --color-sentiment-interactive-primary-hover: #C8EAB3;
+  --color-sentiment-interactive-primary-active: #D6F0C7;
+  --color-sentiment-interactive-secondary: #252C20;
+  --color-sentiment-interactive-secondary-hover: #323B2B;
+  --color-sentiment-interactive-secondary-active: #3E4A36;
+  --color-sentiment-interactive-secondary-neutral: #37422F;
+  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
+  --color-sentiment-interactive-secondary-neutral-active: #546548;
+  --color-sentiment-interactive-control: #252C20;
+  --color-sentiment-interactive-control-hover: #323B2B;
+  --color-sentiment-interactive-control-active: #3E4A36;
+  --color-sentiment-background-surface: #252C20;
+  --color-sentiment-background-surface-hover: #323B2B;
+  --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 {
+  --color-sentiment-content-primary: #252C20;
+  --color-sentiment-content-primary-hover: #323B2B;
+  --color-sentiment-content-primary-active: #3E4A36;
+  --color-sentiment-interactive-primary: #252C20;
+  --color-sentiment-interactive-primary-hover: #323B2B;
+  --color-sentiment-interactive-primary-active: #3E4A36;
+  --color-sentiment-interactive-secondary: #BAE5A0;
+  --color-sentiment-interactive-secondary-hover: #C8EAB3;
+  --color-sentiment-interactive-secondary-active: #D6F0C7;
+  --color-sentiment-interactive-secondary-neutral: #A8CF91;
+  --color-sentiment-interactive-secondary-neutral-hover: #94C478;
+  --color-sentiment-interactive-secondary-neutral-active: #83BB63;
+  --color-sentiment-interactive-control: #BAE5A0;
+  --color-sentiment-interactive-control-hover: #C8EAB3;
+  --color-sentiment-interactive-control-active: #D6F0C7;
+  --color-sentiment-background-surface: #BAE5A0;
+  --color-sentiment-background-surface-hover: #C8EAB3;
+  --color-sentiment-background-surface-active: #D6F0C7;
+}
+.np-theme-personal .wds-sentiment-surface-neutral-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
+  --color-sentiment-content-primary: #454745;
+  --color-sentiment-content-primary-hover: #353635;
+  --color-sentiment-content-primary-active: #232423;
+  --color-sentiment-interactive-primary: #454745;
+  --color-sentiment-interactive-primary-hover: #353635;
+  --color-sentiment-interactive-primary-active: #232423;
+  --color-sentiment-interactive-secondary: #F1F1ED;
+  --color-sentiment-interactive-secondary-hover: #E7E7E1;
+  --color-sentiment-interactive-secondary-active: #DFDED5;
+  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
+  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
+  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #F1F1ED;
+  --color-sentiment-background-surface-hover: #E7E7E1;
+  --color-sentiment-background-surface-active: #DFDED5;
+}
+.np-theme-personal .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #454745;
+  --color-sentiment-interactive-secondary-hover: #353635;
+  --color-sentiment-interactive-secondary-active: #232423;
+  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
+  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
+  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-control: #454745;
+  --color-sentiment-interactive-control-hover: #353635;
+  --color-sentiment-interactive-control-active: #232423;
+  --color-sentiment-background-surface: #454745;
+  --color-sentiment-background-surface-hover: #353635;
+  --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 {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #2A2C29;
+  --color-sentiment-interactive-secondary-hover: #414441;
+  --color-sentiment-interactive-secondary-active: #595B58;
+  --color-sentiment-interactive-secondary-neutral: #424441;
+  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
+  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-control: #2A2C29;
+  --color-sentiment-interactive-control-hover: #414441;
+  --color-sentiment-interactive-control-active: #595B58;
+  --color-sentiment-background-surface: #2A2C29;
+  --color-sentiment-background-surface-hover: #414441;
+  --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 {
+  --color-sentiment-content-primary: #2A2C29;
+  --color-sentiment-content-primary-hover: #414441;
+  --color-sentiment-content-primary-active: #595B58;
+  --color-sentiment-interactive-primary: #2A2C29;
+  --color-sentiment-interactive-primary-hover: #414441;
+  --color-sentiment-interactive-primary-active: #595B58;
+  --color-sentiment-interactive-secondary: #F1F1ED;
+  --color-sentiment-interactive-secondary-hover: #E7E7E1;
+  --color-sentiment-interactive-secondary-active: #DFDED5;
+  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
+  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
+  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #F1F1ED;
+  --color-sentiment-background-surface-hover: #E7E7E1;
+  --color-sentiment-background-surface-active: #DFDED5;
+}
+.np-theme-personal .wds-sentiment-surface-proposition-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #054D4D;
+  --color-sentiment-interactive-primary-hover: #043A3A;
+  --color-sentiment-interactive-primary-active: #022626;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+}
+.np-theme-personal .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #EAF9F9;
+  --color-sentiment-content-primary-active: #D5F4F4;
+  --color-sentiment-interactive-primary: #E0F7F7;
+  --color-sentiment-interactive-primary-hover: #CAF1F1;
+  --color-sentiment-interactive-primary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --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 {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #EAF9F9;
+  --color-sentiment-content-primary-active: #D5F4F4;
+  --color-sentiment-interactive-primary: #E0F7F7;
+  --color-sentiment-interactive-primary-hover: #CAF1F1;
+  --color-sentiment-interactive-primary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary: #0B312F;
+  --color-sentiment-interactive-secondary-hover: #124F4C;
+  --color-sentiment-interactive-secondary-active: #176460;
+  --color-sentiment-interactive-secondary-neutral: #174E4D;
+  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
+  --color-sentiment-interactive-secondary-neutral-active: #237675;
+  --color-sentiment-interactive-control: #0B312F;
+  --color-sentiment-interactive-control-hover: #124F4C;
+  --color-sentiment-interactive-control-active: #176460;
+  --color-sentiment-background-surface: #0B312F;
+  --color-sentiment-background-surface-hover: #124F4C;
+  --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 {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #0B312F;
+  --color-sentiment-interactive-primary-hover: #104744;
+  --color-sentiment-interactive-primary-active: #16605C;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+}

package/build/styles/statusIcon/StatusIcon.css

@@ -1,38 +1,6 @@
-.status-circle .light {
-  color: var(--color-contrast-overlay);
+.wds-sentiment-surface.status-circle {
+  background-color: var(--color-sentiment-interactive-primary);
 }
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
-}
-.status-circle .dark {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.status-circle.warning,
-.status-circle.pending {
-  background-color: var(--color-sentiment-warning);
-}
-.np-theme-personal .status-circle.warning .status-icon,
-.np-theme-personal .status-circle.pending .status-icon {
-  color: var(--color-dark);
-}
-.status-circle.negative,
-.status-circle.error {
-  background-color: var(--color-sentiment-negative);
-}
-.status-circle.negative .status-icon,
-.status-circle.error .status-icon {
-  color: var(--color-sentiment-negative-secondary);
-}
-.status-circle.neutral {
-  background-color: #5d7079;
-  background-color: var(--color-content-secondary);
-}
-.status-circle.positive,
-.status-circle.success {
-  background-color: var(--color-sentiment-positive);
-}
-.status-circle.positive .status-icon,
-.status-circle.success .status-icon {
-  color: var(--color-sentiment-positive-secondary);
+.wds-sentiment-surface.status-circle .status-icon {
+  color: var(--color-sentiment-interactive-control);
 }

package/build/types/criticalBanner/CriticalCommsBanner.d.ts

@@ -3,7 +3,8 @@ export type CriticalCommsBannerProps = {
     subtitle?: string;
     action?: {
         label: string;
-        href: string;
+        href?: string;
+        onClick?: () => void;
     };
     className?: string;
 };

package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAY5F;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAY5F;AAED,eAAe,mBAAmB,CAAC"}

package/build/types/mocks.d.ts

@@ -5,5 +5,6 @@ interface GlobalMockParams {
 }
 export declare function mockMatchMedia({ fn, stubGlobal }: GlobalMockParams): void;
 export declare function mockResizeObserver({ fn, stubGlobal }: GlobalMockParams): void;
+export declare function mockRequestAnimationFrame(): void;
 export {};
 //# sourceMappingURL=mocks.d.ts.map

package/build/types/mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F"}
+{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F;AAED,wBAAgB,yBAAyB,SAKxC"}

package/build/types/sentimentSurface/SentimentSurface.d.ts

@@ -0,0 +1,30 @@
+import { SentimentSurfaceComponent } from './SentimentSurface.types';
+/**
+ * SentimentSurface is a polymorphic container component that applies contextual background colours
+ * and text styling based on sentiment types (negative, warning, neutral, success, proposition).
+ * It's designed to visually communicate the nature or importance of its content through colour.
+ *
+ * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.
+ * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).
+ * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
+ * @param {ReactNode} [children] - Content to render inside the surface.
+ * @param {string} [className] - Additional CSS classes to apply.
+ * @param {CSSProperties} [style] - Inline styles to apply.
+ * @param {string} [id] - Unique identifier for the component.
+ * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with negative sentiment
+ * <SentimentSurface sentiment="negative">
+ *   Your payment has failed
+ * </SentimentSurface>
+ * ```
+ *
+ * @see {@link SentimentSurface} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}
+ */
+declare const SentimentSurface: SentimentSurfaceComponent;
+export default SentimentSurface;
+//# sourceMappingURL=SentimentSurface.d.ts.map

package/build/types/sentimentSurface/SentimentSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBA+BtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}

package/build/types/sentimentSurface/SentimentSurface.types.d.ts

@@ -0,0 +1,80 @@
+import { ReactNode, ElementType, CSSProperties, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+/**
+ * Sentiment types for the SentimentSurface component
+ */
+export type Sentiment = 'negative' | 'warning' | 'neutral' | 'success' | 'proposition';
+/**
+ * Emphasis levels for the SentimentSurface component
+ */
+export type Emphasis = 'base' | 'elevated';
+/**
+ * Common properties for the SentimentSurface component
+ */
+export interface CommonProps {
+    /**
+     * The sentiment type that determines the colour scheme
+     */
+    sentiment: Sentiment;
+    /**
+     * The emphasis level affecting background and text contrast
+     * @default 'base'
+     */
+    emphasis?: Emphasis;
+    /**
+     * Content to render inside the surface
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Inline styles
+     */
+    style?: CSSProperties;
+    /**
+     * Unique identifier for the component
+     */
+    id?: string;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * `data-testid` is strictly controlled through the `testId` prop.
+     * This lets consumers know that this data attribute will not be applied.
+     */
+    'data-testid'?: never;
+}
+/**
+ * Props when rendering as a div or custom element
+ */
+export type SentimentSurfaceDivProps<T extends ElementType = 'div'> = Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & CommonProps & {
+    /**
+     * The underlying HTML element to render
+     * @default 'div'
+     */
+    as?: T;
+};
+/**
+ * All possible props for the SentimentSurface component
+ */
+export type SentimentSurfaceProps<T extends ElementType = 'div'> = SentimentSurfaceDivProps<T>;
+/**
+ * Combines SentimentSurface props with all valid HTML attributes for the specified element type.
+ * Supports polymorphic rendering via the `as` prop while maintaining full type safety.
+ *
+ * @example
+ * <SentimentSurface sentiment="negative" role="alert" aria-live="polite">
+ *   Error message
+ * </SentimentSurface>
+ */
+export type SentimentSurfaceComponentProps<T extends ElementType = 'div'> = SentimentSurfaceProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SentimentSurfaceProps<T>>;
+/**
+ * The SentimentSurface component type signature
+ */
+export interface SentimentSurfaceComponent {
+    <T extends ElementType = 'div'>(props: SentimentSurfaceComponentProps<T>): ReactNode;
+    displayName?: string;
+}
+//# sourceMappingURL=SentimentSurface.types.d.ts.map

package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentimentSurface.types.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,wBAAwB,EACxB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CACxE,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,WAAW,CAClB,GACC,WAAW,GAAG;IACZ;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE/F;;;;;;;;GAQG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACtE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/build/types/sentimentSurface/classMap.d.ts

@@ -0,0 +1,4 @@
+import type { Sentiment, Emphasis } from './SentimentSurface.types';
+export declare const sentimentClassMap: Record<Sentiment, string>;
+export declare const getSentimentSurfaceClassName: (sentiment: Sentiment, emphasis: Emphasis) => string;
+//# sourceMappingURL=classMap.d.ts.map

package/build/types/sentimentSurface/classMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/classMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIpE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMvD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,SAAS,EAAE,UAAU,QAAQ,KAAG,MAEvF,CAAC"}

package/build/types/sentimentSurface/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './SentimentSurface';
+export type { SentimentSurfaceComponent, SentimentSurfaceProps, CommonProps, Sentiment, Emphasis, } from './SentimentSurface.types';
+//# sourceMappingURL=index.d.ts.map

package/build/types/sentimentSurface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,0BAA0B,CAAC"}

package/build/types/statusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCA8D7F,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCAyE7F,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/types/test-utils/window-mock.d.ts

@@ -1,3 +1,4 @@
 export declare function mockMatchMedia(): void;
 export declare function mockResizeObserver(): void;
+export declare function mockRequestAnimationFrame(): void;
 //# sourceMappingURL=window-mock.d.ts.map

package/build/types/test-utils/window-mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC"}
+{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC;AAED,wBAAgB,yBAAyB,SAExC"}