@transferwise/components 46.145.0 → 46.146.0

package/build/styles/main.css

@@ -1988,6 +1988,451 @@
 
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-negative-light-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;
+  --color-sentiment-border-overlay: rgba(203,39,47,0.30196);
+}
+
+.wds-sentiment-negative-light-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: #CB272F;
+  --color-sentiment-background-surface-hover: #B8232B;
+  --color-sentiment-background-surface-active: #A72027;
+  --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
+}
+
+.wds-sentiment-neutral-light-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: rgba(62,59,7,0.07059);
+  --color-sentiment-interactive-secondary-hover: rgba(62,59,7,0.12157);
+  --color-sentiment-interactive-secondary-active: rgba(62,59,7,0.16863);
+  --color-sentiment-interactive-secondary-neutral: rgba(62,59,7,0.07059);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62,59,7,0.12157);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62,59,7,0.16863);
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62,59,7,0.07059);
+  --color-sentiment-background-surface-hover: rgba(62,59,7,0.12157);
+  --color-sentiment-background-surface-active: rgba(62,59,7,0.16863);
+  --color-sentiment-border-overlay: rgba(69,71,69,0.30196);
+}
+
+.wds-sentiment-neutral-light-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: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
+  --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;
+  --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
+}
+
+.wds-sentiment-proposition-light-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;
+  --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
+}
+
+.wds-sentiment-proposition-light-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;
+  --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
+}
+
+.wds-sentiment-success-light-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;
+  --color-sentiment-border-overlay: rgba(5,77,40,0.30196);
+}
+
+.wds-sentiment-success-light-elevated {
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --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;
+  --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
+}
+
+.wds-sentiment-warning-light-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;
+  --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
+}
+
+.wds-sentiment-warning-light-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;
+  --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
+}
+
+.wds-sentiment-negative-dark-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;
+  --color-sentiment-border-overlay: rgba(255,168,173,0.30196);
+}
+
+.wds-sentiment-negative-dark-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;
+  --color-sentiment-border-overlay: rgba(65,11,13,0.30196);
+}
+
+.wds-sentiment-neutral-dark-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: rgba(255,255,255,0.10196);
+  --color-sentiment-interactive-secondary-hover: rgba(255,255,255,0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255,255,255,0.30196);
+  --color-sentiment-interactive-secondary-neutral: rgba(255,255,255,0.10196);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255,255,255,0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255,255,255,0.30196);
+  --color-sentiment-interactive-control: #2A2C29;
+  --color-sentiment-interactive-control-hover: #414441;
+  --color-sentiment-interactive-control-active: #595B58;
+  --color-sentiment-background-surface: rgba(255,255,255,0.10196);
+  --color-sentiment-background-surface-hover: rgba(255,255,255,0.2);
+  --color-sentiment-background-surface-active: rgba(255,255,255,0.30196);
+  --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
+}
+
+.wds-sentiment-neutral-dark-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;
+  --color-sentiment-border-overlay: rgba(42,44,41,0.30196);
+}
+
+.wds-sentiment-proposition-dark-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: #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;
+  --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
+}
+
+.wds-sentiment-proposition-dark-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;
+  --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
+}
+
+.wds-sentiment-success-dark-base {
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --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;
+  --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
+}
+
+.wds-sentiment-success-dark-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;
+  --color-sentiment-border-overlay: rgba(37,44,32,0.30196);
+}
+
+.wds-sentiment-warning-dark-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;
+  --color-sentiment-border-overlay: rgba(250,220,101,0.30196);
+}
+
+.wds-sentiment-warning-dark-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;
+  --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
+}
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -25392,588 +25837,88 @@ a[data-toggle="tooltip"] {
   padding-left: 44px;
 }
 
-[dir="rtl"] .btn-facebook,
-[dir="rtl"] .btn-google {
-  padding-right: 44px;
-  padding-left: 0;
-  padding-left: initial;
-}
-
-.btn-facebook.btn-lg,
-.btn-google.btn-lg {
-  background-position-x: 14px;
-  padding-left: 50px;
-}
-
-[dir="rtl"] .btn-facebook.btn-lg,
-[dir="rtl"] .btn-google.btn-lg {
-  padding-right: 50px;
-  padding-left: 0;
-  padding-left: initial;
-}
-
-.btn-facebook.btn-block,
-.btn-google.btn-block {
-  padding-right: 44px;
-}
-
-[dir="rtl"] .btn-facebook.btn-block,
-[dir="rtl"] .btn-google.btn-block {
-  padding-left: 44px;
-  padding-right: 0;
-  padding-right: initial;
-}
-
-.btn-facebook.btn-block.btn-lg,
-.btn-google.btn-block.btn-lg {
-  padding-right: 50px;
-}
-
-[dir="rtl"] .btn-facebook.btn-block.btn-lg,
-[dir="rtl"] .btn-google.btn-block.btn-lg {
-  padding-left: 50px;
-  padding-right: 0;
-  padding-right: initial;
-}
-
-[dir="rtl"] .btn-facebook,
-[dir="rtl"] .btn-google {
-  background-position-x: calc(100% - 11px);
-}
-
-[dir="rtl"] .btn-facebook,
-[dir="rtl"] .btn-google,
-[dir="rtl"] .btn-facebook.btn-lg,
-[dir="rtl"] .btn-google.btn-lg {
-  padding-left: 24px;
-}
-
-[dir="rtl"] .btn-facebook.btn-block,
-[dir="rtl"] .btn-google.btn-block {
-  padding-right: 44px;
-  padding-left: 44px;
-}
-
-[dir="rtl"] .btn-facebook.btn-lg,
-[dir="rtl"] .btn-google.btn-lg {
-  background-position-x: calc(100% - 14px);
-}
-
-[dir="rtl"] .btn-facebook.btn-lg.btn-block,
-[dir="rtl"] .btn-google.btn-lg.btn-block {
-  padding-right: 50px;
-  padding-left: 50px;
-}
-
-/* stylelint-enable */
-
-.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-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;
-  --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-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;
-  --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: #CB272F;
-  --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 {
-  --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-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;
-  --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-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;
-  --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-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;
-  --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-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;
-  --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-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;
-  --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;
+[dir="rtl"] .btn-facebook,
+[dir="rtl"] .btn-google {
+  padding-right: 44px;
+  padding-left: 0;
+  padding-left: initial;
 }
 
-.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;
-  --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;
+.btn-facebook.btn-lg,
+.btn-google.btn-lg {
+  background-position-x: 14px;
+  padding-left: 50px;
 }
 
-.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: #CEF1B8;
-  --color-sentiment-content-primary-hover: #E0FFCC;
-  --color-sentiment-content-primary-active: #E1F4D4;
-  --color-sentiment-interactive-primary: #CEF1B8;
-  --color-sentiment-interactive-primary-hover: #E0FFCC;
-  --color-sentiment-interactive-primary-active: #E1F4D4;
-  --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;
+[dir="rtl"] .btn-facebook.btn-lg,
+[dir="rtl"] .btn-google.btn-lg {
+  padding-right: 50px;
+  padding-left: 0;
+  padding-left: initial;
 }
 
-.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: #CEF1B8;
-  --color-sentiment-content-primary-hover: #E0FFCC;
-  --color-sentiment-content-primary-active: #E1F4D4;
-  --color-sentiment-interactive-primary: #CEF1B8;
-  --color-sentiment-interactive-primary-hover: #E0FFCC;
-  --color-sentiment-interactive-primary-active: #E1F4D4;
-  --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;
+.btn-facebook.btn-block,
+.btn-google.btn-block {
+  padding-right: 44px;
 }
 
-.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;
-  --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;
+[dir="rtl"] .btn-facebook.btn-block,
+[dir="rtl"] .btn-google.btn-block {
+  padding-left: 44px;
+  padding-right: 0;
+  padding-right: initial;
 }
 
-.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;
-  --color-sentiment-interactive-primary: #454745;
-  --color-sentiment-interactive-primary-hover: #353635;
-  --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
-  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
-  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
-  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
-  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
-  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
-  --color-sentiment-interactive-control: #F1F1ED;
-  --color-sentiment-interactive-control-hover: #E7E7E1;
-  --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
-  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
-  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
+.btn-facebook.btn-block.btn-lg,
+.btn-google.btn-block.btn-lg {
+  padding-right: 50px;
 }
 
-.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;
-  --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: #585958;
-  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
-  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
-  --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;
+[dir="rtl"] .btn-facebook.btn-block.btn-lg,
+[dir="rtl"] .btn-google.btn-block.btn-lg {
+  padding-left: 50px;
+  padding-right: 0;
+  padding-right: initial;
 }
 
-.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;
-  --color-sentiment-interactive-primary: #F1F1ED;
-  --color-sentiment-interactive-primary-hover: #E7E7E1;
-  --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
-  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
-  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
-  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
-  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
-  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
-  --color-sentiment-interactive-control: #2A2C29;
-  --color-sentiment-interactive-control-hover: #414441;
-  --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
-  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
-  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
+[dir="rtl"] .btn-facebook,
+[dir="rtl"] .btn-google {
+  background-position-x: calc(100% - 11px);
 }
 
-.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;
-  --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;
+[dir="rtl"] .btn-facebook,
+[dir="rtl"] .btn-google,
+[dir="rtl"] .btn-facebook.btn-lg,
+[dir="rtl"] .btn-google.btn-lg {
+  padding-left: 24px;
 }
 
-.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;
-  --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;
+[dir="rtl"] .btn-facebook.btn-block,
+[dir="rtl"] .btn-google.btn-block {
+  padding-right: 44px;
+  padding-left: 44px;
 }
 
-.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;
-  --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;
+[dir="rtl"] .btn-facebook.btn-lg,
+[dir="rtl"] .btn-google.btn-lg {
+  background-position-x: calc(100% - 14px);
 }
 
-.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;
-  --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;
+[dir="rtl"] .btn-facebook.btn-lg.btn-block,
+[dir="rtl"] .btn-google.btn-lg.btn-block {
+  padding-right: 50px;
+  padding-left: 50px;
 }
 
-.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;
-  --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;
+/* stylelint-enable */
+
+.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);
 }
 
 .wds-container {