@gooddata/sdk-ui-dashboard 10.13.0-alpha.8 → 10.13.0-beta.0

package/styles/css/scheduled_mail_recipients.css

@@ -40,6 +40,10 @@
   font-size: 12px;
   margin-top: 5px;
 }
+.gd-recipients-field .gd-recipients-field-error:empty {
+  display: none;
+  margin-top: 0;
+}
 .gd-recipients-field .gd-recipients__control--is-focused,
 .gd-recipients-field .gd-recipients__control--is-focused:hover {
   border-color: var(--gd-palette-primary-base, #14b2e2);
@@ -70,50 +74,6 @@
   width: 100% !important;
   font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
 }
-.gd-recipients-field .gd-recipients__menu {
-  padding: 0;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0 0 3px 3px;
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-  border-top: 0;
-  border-top-color: var(--gd-palette-complementary-4, #ccd8e2);
-  margin-top: -2px;
-  outline: 0;
-  box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
-  color: var(--gd-palette-complementary-8, #464e56);
-  background-color: var(--gd-palette-complementary-0, #fff);
-}
-.gd-recipients-field .gd-recipients__menu .gd-recipients__option {
-  padding: 0;
-}
-.gd-recipients-field .gd-recipients__menu .gd-recipients__option:first-child.gd-recipients__option--is-focused {
-  border-top: 1px solid var(--gd-palette-complementary-4, #ccd8e2);
-}
-.gd-recipients-field .recipient-item-not-valid {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-.gd-recipients-field .gd-recipients__menu-list {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.gd-recipients-field .gd-recipients__menu-list .gd-recipient-option-item {
-  padding: 6px 8px;
-  font-size: 13px;
-  line-height: 15px;
-}
-.gd-recipients-field .gd-recipients__menu-list .gd-recipient-option-item .gd-recipient-option-value-item {
-  margin-left: 10px;
-  color: var(--gd-palette-complementary-5, #b0beca);
-}
-.gd-recipients-field .gd-recipients__menu-list .gd-recipient-existed {
-  display: block;
-  width: 100%;
-  padding: 8px 8px 8px 10px;
-  margin-top: 2px;
-}
 @media only screen and (max-width: 320px) {
   .gd-recipients-field .gd-recipients__value-container {
     display: flex;
@@ -177,21 +137,85 @@
   margin: 0;
   padding: 0;
 }
-.gd-recipients-field .gd-recipient-value-item.not-valid,
-.gd-recipients-field .gd-recipients__single-value.not-valid {
-  color: var(--gd-palette-complementary-0, #fff);
-  background: rgba(229, 77, 66, 0.98);
+.gd-recipients-field .gd-recipient-value-item.not-valid, .gd-recipients-field .gd-recipient-value-item.invalid-email,
+.gd-recipients-field .gd-recipients__single-value.not-valid,
+.gd-recipients-field .gd-recipients__single-value.invalid-email {
+  color: var(--gd-palette-error-base, #e54d42);
+  background: var(--gd-palette-error-dimmed, #fcedec);
+}
+.gd-recipients-field .gd-recipient-value-item.not-valid .gd-recipient-label, .gd-recipients-field .gd-recipient-value-item.invalid-email .gd-recipient-label,
+.gd-recipients-field .gd-recipients__single-value.not-valid .gd-recipient-label,
+.gd-recipients-field .gd-recipients__single-value.invalid-email .gd-recipient-label {
+  color: var(--gd-palette-error-base, #e54d42);
+}
+.gd-recipients-field .gd-recipient-value-item.not-valid .gd-recipients__multi-value__remove,
+.gd-recipients-field .gd-recipient-value-item.not-valid .gd-recipients__multi-value__remove:hover, .gd-recipients-field .gd-recipient-value-item.invalid-email .gd-recipients__multi-value__remove,
+.gd-recipients-field .gd-recipient-value-item.invalid-email .gd-recipients__multi-value__remove:hover,
+.gd-recipients-field .gd-recipients__single-value.not-valid .gd-recipients__multi-value__remove,
+.gd-recipients-field .gd-recipients__single-value.not-valid .gd-recipients__multi-value__remove:hover,
+.gd-recipients-field .gd-recipients__single-value.invalid-email .gd-recipients__multi-value__remove,
+.gd-recipients-field .gd-recipients__single-value.invalid-email .gd-recipients__multi-value__remove:hover {
+  color: var(--gd-palette-error-base, #e54d42);
+}
+
+.gd-recipients-overlay {
+  margin-top: 31px;
+}
+.gd-recipients-overlay .gd-recipients__menu {
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0 0 3px 3px;
+  border-color: var(--gd-palette-primary-base, #14b2e2);
+  border-top: 0;
+  border-top-color: var(--gd-palette-complementary-4, #ccd8e2);
+  margin-top: -2px;
+  outline: 0;
+  box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
+  color: var(--gd-palette-complementary-8, #464e56);
+  background-color: var(--gd-palette-complementary-0, #fff);
+}
+.gd-recipients-overlay .gd-recipients__menu .gd-recipients__option {
+  padding: 0;
+}
+.gd-recipients-overlay .gd-recipients__menu .gd-recipients__option:first-child.gd-recipients__option--is-focused {
+  border-top: 1px solid var(--gd-palette-complementary-4, #ccd8e2);
+}
+.gd-recipients-overlay .recipient-item-not-valid {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.gd-recipients-overlay .gd-recipients__menu-list {
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow-x: hidden;
+}
+.gd-recipients-overlay .gd-recipients__menu-list .gd-recipient-option-item {
+  padding: 6px 8px;
+  font-size: 13px;
+  line-height: 15px;
+}
+.gd-recipients-overlay .gd-recipients__menu-list .gd-recipient-option-item .gd-recipient-option-value-item {
+  margin-left: 10px;
+  color: var(--gd-palette-complementary-5, #b0beca);
+}
+.gd-recipients-overlay .gd-recipients__menu-list .gd-recipient-existed {
+  display: block;
+  width: 100%;
+  padding: 8px 8px 8px 10px;
+  margin-top: 2px;
 }
-.gd-recipients-field .gd-recipients__option--is-focused {
+.gd-recipients-overlay .gd-recipients__option--is-focused {
   color: var(--gd-palette-complementary-9, inherit);
   background: none;
   background-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-recipients-field .gd-recipients__option--is-focused .gd-message {
+.gd-recipients-overlay .gd-recipients__option--is-focused .gd-message {
   display: block;
   border-radius: 0 0 3px 3px;
 }
-.gd-recipients-field .gd-recipient-option-item.validEmail {
+.gd-recipients-overlay .gd-recipient-option-item.validEmail {
   padding: 0;
 }
 

package/styles/css/scheduled_mail_recipients.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Button/_variables.scss","../scss/scheduled_mail_recipients.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAIA;AAAA;AAAA;ACGI;EACI,cCkDgB;;ADjDhB;EACI,cCgDY;;;AD1CpB;EACI;;AAGJ;EAEI;EACA,YAnBO;EAoBP;EACA;EACA;EACA;EACA;EACA;EACA,aCgEU;ED/DV;EACA;EACA;EACA,OCJQ;EDKR,YClBS;EDmBT;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI,OCWgB;EDVhB;EACA;EACA;;AAIJ;AAAA;EAEI,cCfkB;EDgBlB;EACA;;AAIJ;EACI;EACA;EACA,YA7DO;EA8DP;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIJ;EACI;EACA;EACA;EACA,OCpDI;EDqDJ;;AAEA;EAGI;EACA,aCKE;;ADCd;EACI;EACA;EACA;EACA;EACA,cC3DkB;ED4DlB;EACA,kBDpFqB;ECqFrB;EACA;EACA;EACA,OC5EQ;ED6ER,kBC1FS;;AD6FT;EACI;;AAKA;EACI;;AAKZ;EACI;EACA;EACA;;AAIJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA,OCvHI;;AD2HZ;EACI;EACA;EACA;EACA;;AAIR;EACI;IAEI;IACA;IACA;;;AAIR;AAAA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,kBC7DgB;ED8DhB;;AAEA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA,OCrJI;EDsJJ,aCtFM;EDuFN;;AAIJ;AAAA;EACI;EACA;EACA;EACA,OD5KU;EC6KV;EACA;;AAEA;AAAA;EACI;EACA,OCrKA;;ADyKR;AAAA;EACI;;AAEA;AAAA;EACI,OC1LC;;AD8LL;AAAA;AAAA;AAAA;EAEI;EACA,OCjMC;;ADqMT;AAAA;EACI;EACA;;AAGJ;AAAA;EACI,OC3MK;ED4ML;;AAKR;EACI;EACA;EACA,kBCxHgB;;AD0HhB;EACI;EACA;;AAIR;EACI","file":"scheduled_mail_recipients.css"}
+{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Button/_variables.scss","../scss/scheduled_mail_recipients.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAIA;AAAA;AAAA;ACGI;EACI,cCkDgB;;ADjDhB;EACI,cCgDY;;;AD1CpB;EACI;;AAGJ;EAEI;EACA,YAnBO;EAoBP;EACA;EACA;EACA;EACA;EACA;EACA,aCgEU;ED/DV;EACA;EACA;EACA,OCJQ;EDKR,YClBS;EDmBT;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI,OCWgB;EDVhB;EACA;EACA;;AAEA;EACI;EACA;;AAKR;AAAA;EAEI,cCpBkB;EDqBlB;EACA;;AAIJ;EACI;EACA;EACA,YAlEO;EAmEP;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIJ;EACI;EACA;EACA;EACA,OCzDI;ED0DJ;;AAEA;EAGI;EACA;;AAKZ;EACI;IAEI;IACA;IACA;;;AAIR;AAAA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA,kBCRgB;EDShB;;AAEA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA,OChGI;EDiGJ,aCjCM;EDkCN;;AAIJ;AAAA;EACI;EACA;EACA;EACA,ODvHU;ECwHV;EACA;;AAEA;AAAA;EACI;EACA,OChHA;;ADoHR;AAAA;EACI;;AAEA;AAAA;EACI,OCrIC;;ADyIL;AAAA;AAAA;AAAA;EAEI;EACA,OC5IC;;ADgJT;AAAA;EACI;EACA;;AAGJ;AAAA;AAAA;EAEI,OC9GY;ED+GZ;;AAEA;AAAA;AAAA;EACI,OClHQ;;ADqHZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEI,OCvHQ;;;AD6HxB;EACI;;AAGA;EACI;EACA;EACA;EACA;EACA,cCvJkB;EDwJlB;EACA,kBDhLqB;ECiLrB;EACA;EACA;EACA,OCxKQ;EDyKR,kBCtLS;;ADyLT;EACI;;AAKA;EACI;;AAKZ;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA,OCpNI;;ADwNZ;EACI;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA,kBC5IgB;;AD8IhB;EACI;EACA;;AAIR;EACI","file":"scheduled_mail_recipients.css"}

package/styles/css/visualizationSwitcherHeader.css

@@ -28,6 +28,7 @@
 }
 
 .gd-visualization-switcher-widget-header-list {
+  min-width: 168px;
   max-height: 356px;
   overflow-y: auto;
   padding: 5px 0;

package/styles/css/visualizationSwitcherHeader.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../scss/visualizationSwitcherHeader.scss","../scss/_variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACFA;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA,OC2FmC;ED1FnC;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;;AAIZ;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI,OCwCY;EDvCZ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA","file":"visualizationSwitcherHeader.css"}
+{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../scss/visualizationSwitcherHeader.scss","../scss/_variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACFA;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA,OC2FmC;ED1FnC;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;;AAIZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI,OCuCY;EDtCZ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA","file":"visualizationSwitcherHeader.css"}

package/styles/css/visualizationSwitcherToolbar.css

@@ -23,13 +23,14 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  background-color: white;
+  background-color: var(--gd-palette-complementary-0, #fff);
   line-height: 0;
 }
 .gd-visualization-switcher-toolbar-top.bubble.bubble-light .gd-bubble-trigger {
   display: inline-block;
 }
 .gd-visualization-switcher-toolbar-top.bubble.bubble-light .left-section {
+  cursor: pointer;
   padding: 4px;
   flex: 0 1 auto;
 }
@@ -60,10 +61,14 @@
   justify-content: center;
   align-items: center;
 }
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .navigate-button:not(.is-disabled) {
+  cursor: pointer;
+}
 .gd-visualization-switcher-toolbar-top.bubble.bubble-light .navigate-button:not(.is-disabled):hover path {
   fill: var(--gd-palette-complementary-8, #464e56);
 }
 .gd-visualization-switcher-toolbar-top.bubble.bubble-light .right-section {
+  cursor: pointer;
   display: flex;
   padding: 4px;
   justify-content: center;
@@ -76,7 +81,7 @@
 
 .gd-visualization-switcher-toolbar-bottom.bubble.bubble-light {
   position: initial;
-  background-color: white;
+  background-color: var(--gd-palette-complementary-0, #fff);
 }
 .gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .configuration-panel-header {
   height: 39px;
@@ -122,6 +127,7 @@
   justify-content: space-between;
   height: 40px;
   cursor: pointer;
+  color: var(--gd-palette-complementary-8, #464e56);
 }
 .gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item .switcher-visualizations-list-item-content {
   width: 100%;
@@ -141,6 +147,9 @@
   text-align: left;
   background: transparent;
 }
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item:not(.is-selected):hover {
+  color: var(--gd-palette-complementary-9, #464e56);
+}
 .gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item:not(.is-selected) .gd-vis-switcher-show-more-button:hover {
   background: var(--gd-palette-complementary-7, #ccd8e2);
   color: var(--gd-palette-complementary-6, #94a1ad);

package/styles/css/visualizationSwitcherToolbar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../scss/visualizationSwitcherToolbar.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/_variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACCI;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AACA;EACI,MCPI;;ADWZ;EACI;EACA;EACA;EACA,kBEmBiB;;AFjBrB;EACI;EACA;EACA;EACA;EACA,OC1BQ;ED2BR;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI,MCnCI;;ADuCZ;EACI;EACA;EACA;EACA;EACA;;AAIA;EACI;;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AACA;EACI;EACA,kBEvDa;;AF0DrB;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMI;EACI;EACA,OC7IG;;ADiJf;EACI,kBC7HgB;;AD+HhB;EACI;EACA;EAIA;;AAIR;EACI,YCzEY;;AD2EZ;EACI;EACA;EACA,OCpKO;;ADwKf;EACI,kBCnFY;;ADqFZ;AAAA;EAEI,OChKA;;ADmKJ;EACI;EACA,OClLO;;ADuLX;AAAA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI,kBC7KY;;ADgLZ;EACI;;AAGA;EACI;;AAYhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;;AAOZ;EACI;EACA,OCvMgB;;;AD4MpB;EACI","file":"visualizationSwitcherToolbar.css"}
+{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../scss/visualizationSwitcherToolbar.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/_variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACCI;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI,MCRI;;ADYZ;EACI;EACA;EACA;EACA,kBEkBiB;;AFhBrB;EACI;EACA;EACA;EACA;EACA,OC3BQ;ED4BR;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI,MCtCA;;AD2CZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AACA;EACI;EACA,kBE5Da;;AF+DrB;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;AAIA;EACI;EACA,OCtJG;;AD0Jf;EACI,kBCtIgB;;ADwIhB;EACI;EACA;EAIA;;AAIR;EACI,YClFY;;ADoFZ;EACI;EACA;EACA,OC7KO;;ADiLf;EACI,kBC5FY;;AD8FZ;AAAA;EAEI,OCzKA;;AD4KJ;EACI;EACA,OC3LO;;ADgMX;AAAA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI,kBCtLY;;ADyLZ;EACI;;AAGA;EACI;;AAYhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;;AAOZ;EACI;EACA,OChNgB;;;ADqNpB;EACI","file":"visualizationSwitcherToolbar.css"}

package/styles/scss/alerting.scss

@@ -191,6 +191,15 @@
     color: kit-variables.$gd-color-state-blank;
 }
 
+.gd-edit-alert__recipients {
+    flex-direction: column;
+
+    > label {
+        font-size: 12px;
+        line-height: 21px;
+    }
+}
+
 //
 // Edit alert configuration
 //

package/styles/scss/dragAndDrop.scss

@@ -1,4 +1,4 @@
-// (C) 2022 GoodData Corporation
+// (C) 2022-2024 GoodData Corporation
 @use "sass:color";
 @use "variables";
 @use "zIndexes";
@@ -361,6 +361,10 @@
         }
     }
 
+    .drop-target-message {
+        display: block;
+    }
+
     &.type-loading {
         display: flex;
         justify-content: center;

package/styles/scss/filterBar.scss

@@ -532,6 +532,13 @@ $attribute-filter-drag-handle-left: 10px;
             }
         }
     }
+
+    // keyboard navigation highlight
+    &:focus-visible {
+        outline: auto 5px Highlight; /* For Firefox */
+        // stylelint-disable-next-line declaration-block-no-duplicate-properties
+        outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
+    }
 }
 
 .gd-button-primary.gd-filter-views-button--open {

package/styles/scss/scheduled_mail_recipients.scss

@@ -49,6 +49,11 @@ $input-height: 28px;
         font-family: Avenir, sans-serif;
         font-size: 12px;
         margin-top: 5px;
+
+        &:empty {
+            display: none;
+            margin-top: 0;
+        }
     }
 
     // custom className from react-select rendered
@@ -92,64 +97,6 @@ $input-height: 28px;
         }
     }
 
-    // custom className from react-select rendered
-    .gd-recipients__menu {
-        padding: 0;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 0 0 3px 3px;
-        border-color: kit-variables.$gd-palette-primary-base;
-        border-top: 0;
-        border-top-color: button-variables.$button-normal-border-color;
-        margin-top: -2px;
-        outline: 0;
-        box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
-        color: kit-variables.$gd-color-text;
-        background-color: kit-variables.$gd-color-white;
-
-        // custom className from react-select rendered
-        .gd-recipients__option {
-            padding: 0;
-        }
-
-        // custom className from react-select rendered
-        .gd-recipients__option:first-child {
-            &.gd-recipients__option--is-focused {
-                border-top: 1px solid var(--gd-palette-complementary-4, #ccd8e2);
-            }
-        }
-    }
-
-    .recipient-item-not-valid {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-    }
-
-    // custom className from react-select rendered
-    .gd-recipients__menu-list {
-        padding-top: 0;
-        padding-bottom: 0;
-
-        .gd-recipient-option-item {
-            padding: 6px 8px;
-            font-size: 13px;
-            line-height: 15px;
-
-            .gd-recipient-option-value-item {
-                margin-left: 10px;
-                color: kit-variables.$gd-color-disabled;
-            }
-        }
-
-        .gd-recipient-existed {
-            display: block;
-            width: 100%;
-            padding: 8px 8px 8px 10px;
-            margin-top: 2px;
-        }
-    }
-
     @media #{kit-variables.$xsmall-only} {
         .gd-recipients__value-container {
             // custom className from react-select rendered
@@ -217,9 +164,82 @@ $input-height: 28px;
             padding: 0;
         }
 
-        &.not-valid {
-            color: kit-variables.$gd-color-white;
-            background: rgba(229, 77, 66, 0.98);
+        &.not-valid,
+        &.invalid-email {
+            color: kit-variables.$gd-palette-error-base;
+            background: var(--gd-palette-error-dimmed, #fcedec);
+
+            .gd-recipient-label {
+                color: kit-variables.$gd-palette-error-base;
+            }
+
+            .gd-recipients__multi-value__remove,
+            .gd-recipients__multi-value__remove:hover {
+                color: kit-variables.$gd-palette-error-base;
+            }
+        }
+    }
+}
+
+.gd-recipients-overlay {
+    margin-top: 31px;
+
+    // custom className from react-select rendered
+    .gd-recipients__menu {
+        padding: 0;
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 0 0 3px 3px;
+        border-color: kit-variables.$gd-palette-primary-base;
+        border-top: 0;
+        border-top-color: button-variables.$button-normal-border-color;
+        margin-top: -2px;
+        outline: 0;
+        box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
+        color: kit-variables.$gd-color-text;
+        background-color: kit-variables.$gd-color-white;
+
+        // custom className from react-select rendered
+        .gd-recipients__option {
+            padding: 0;
+        }
+
+        // custom className from react-select rendered
+        .gd-recipients__option:first-child {
+            &.gd-recipients__option--is-focused {
+                border-top: 1px solid var(--gd-palette-complementary-4, #ccd8e2);
+            }
+        }
+    }
+
+    .recipient-item-not-valid {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    // custom className from react-select rendered
+    .gd-recipients__menu-list {
+        padding-top: 0;
+        padding-bottom: 0;
+        overflow-x: hidden;
+
+        .gd-recipient-option-item {
+            padding: 6px 8px;
+            font-size: 13px;
+            line-height: 15px;
+
+            .gd-recipient-option-value-item {
+                margin-left: 10px;
+                color: kit-variables.$gd-color-disabled;
+            }
+        }
+
+        .gd-recipient-existed {
+            display: block;
+            width: 100%;
+            padding: 8px 8px 8px 10px;
+            margin-top: 2px;
         }
     }
 

package/styles/scss/visualizationSwitcherHeader.scss

@@ -30,6 +30,7 @@
     }
 }
 .gd-visualization-switcher-widget-header-list {
+    min-width: 168px;
     max-height: 356px;
     overflow-y: auto;
     padding: 5px 0;

package/styles/scss/visualizationSwitcherToolbar.scss

@@ -25,13 +25,14 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    background-color: white;
+    background-color: var(--gd-palette-complementary-0, #fff);
     line-height: 0;
 
     .gd-bubble-trigger {
         display: inline-block;
     }
     .left-section {
+        cursor: pointer;
         padding: 4px;
         flex: 0 1 auto;
         &:not(.is-active):hover path {
@@ -62,12 +63,16 @@
         padding: 4px;
         justify-content: center;
         align-items: center;
-        &:not(.is-disabled):hover path {
-            fill: kit-variables.$gd-color-text;
+        &:not(.is-disabled) {
+            cursor: pointer;
+            &:hover path {
+                fill: kit-variables.$gd-color-text;
+            }
         }
     }
 
     .right-section {
+        cursor: pointer;
         display: flex;
         padding: 4px;
         justify-content: center;
@@ -84,7 +89,7 @@
 
 .gd-visualization-switcher-toolbar-bottom.bubble.bubble-light {
     position: initial;
-    background-color: white;
+    background-color: var(--gd-palette-complementary-0, #fff);
 
     .configuration-panel-header {
         height: 39px;
@@ -136,6 +141,7 @@
         justify-content: space-between;
         height: 40px;
         cursor: pointer;
+        color: var(--gd-palette-complementary-8, #464e56);
 
         .switcher-visualizations-list-item-content {
             width: 100%;
@@ -158,6 +164,9 @@
         }
 
         &:not(.is-selected) {
+            &:hover {
+                color: var(--gd-palette-complementary-9, #464e56);
+            }
             .gd-vis-switcher-show-more-button {
                 // stylelint-disable-next-line max-nesting-depth
                 &:hover {