@gooddata/sdk-ui-dashboard 10.33.0-alpha.68 → 10.33.0-alpha.7

package/styles/css/main.css

@@ -886,8 +886,8 @@
 /* allow vendor prefixes and disable max length */
 @font-face {
   font-family: "Indigo";
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -3072,8 +3072,8 @@ button.gd-list-item {
 }
 @font-face {
   font-family: "Indigo";
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -5666,7 +5666,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 
 .gd-spinner {
   display: inline-block;
-  background-image: url("@gooddata/sdk-ui-kit/esm/assets/loading.svg");
+  background-image: url("~@gooddata/sdk-ui-kit/esm/assets/loading.svg");
   background-repeat: no-repeat;
   background-position: top left;
   background-size: contain;
@@ -7147,8 +7147,8 @@ div.gd-empty-item-bubble {
 
 @font-face {
   font-family: "Indigo";
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -14076,8 +14076,8 @@ input[type=search]::-webkit-search-cancel-button {
 }
 @font-face {
   font-family: "Indigo";
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
-  src: url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot");
+  src: url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.woff") format("woff"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.ttf") format("truetype"), url("~@gooddata/sdk-ui-kit/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -16670,7 +16670,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 
 .gd-spinner {
   display: inline-block;
-  background-image: url("@gooddata/sdk-ui-kit/esm/assets/loading.svg");
+  background-image: url("~@gooddata/sdk-ui-kit/esm/assets/loading.svg");
   background-repeat: no-repeat;
   background-position: top left;
   background-size: contain;
@@ -17612,7 +17612,7 @@ div.gd-empty-item-bubble {
   content: "";
   width: 18px;
   height: 20px;
-  background-image: url("@gooddata/sdk-ui-kit/styles/icons/attribute.svg");
+  background-image: url("~@gooddata/sdk-ui-kit/styles/icons/attribute.svg");
   background-repeat: no-repeat;
   background-position: left center;
   background-size: contain;
@@ -17622,7 +17622,7 @@ div.gd-empty-item-bubble {
   content: "";
   width: 18px;
   height: 20px;
-  background-image: url("@gooddata/sdk-ui-kit/styles/icons/date.svg");
+  background-image: url("~@gooddata/sdk-ui-kit/styles/icons/date.svg");
   background-repeat: no-repeat;
   background-position: left center;
   background-size: contain;
@@ -17653,7 +17653,7 @@ div.gd-empty-item-bubble {
   content: "";
   width: 16px;
   height: 16px;
-  background-image: url("@gooddata/sdk-ui-ext/esm/internal/assets/icons/attribute-hierarchy.svg");
+  background-image: url("~@gooddata/sdk-ui-ext/esm/internal/assets/icons/attribute-hierarchy.svg");
   background-size: 16px 16px;
   background-repeat: no-repeat;
 }
@@ -19160,22 +19160,6 @@ figure {
   }
 }
 .gd-notifications-channels-attachments .gd-attachment-list {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1;
-  overflow: hidden;
-  margin: -2px 0;
-  flex-wrap: wrap;
-  gap: 5px;
-  scroll-margin-bottom: 40px;
-}
-@media only screen and (max-width: 640px) {
-  .gd-notifications-channels-attachments .gd-attachment-list {
-    max-width: none;
-  }
-}
-.gd-notifications-channels-attachments .gd-attachment-list-old {
   display: flex;
   flex-direction: row;
   align-items: end;
@@ -19185,7 +19169,7 @@ figure {
   flex-wrap: wrap;
 }
 @media only screen and (max-width: 640px) {
-  .gd-notifications-channels-attachments .gd-attachment-list-old {
+  .gd-notifications-channels-attachments .gd-attachment-list {
     max-width: none;
   }
 }
@@ -19331,7 +19315,6 @@ figure {
   display: flex;
   flex-direction: column;
   padding: 15px 10px;
-  gap: var(--gd-spacing-10px);
 }
 .gd-attachment-settings-dropdown .gd-attachment-settings-dropdown-footer {
   display: flex;
@@ -19441,7 +19424,7 @@ figure {
   height: 50px;
   border: none;
   cursor: pointer;
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/ellipsis.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/ellipsis.svg");
   background-color: transparent;
   background-position: center center;
 }
@@ -19832,75 +19815,6 @@ figure {
   min-width: unset;
 }
 
-.gd-attachment-type-label {
-  display: inline-flex;
-  gap: var(--gd-spacing-10px);
-  align-items: center;
-  margin-inline-start: 5px;
-}
-
-.gd-attachment-types-content {
-  padding: var(--gd-spacing-10px);
-}
-
-.gd-attachment-type-item {
-  padding: 3px 0;
-  font-size: 12px;
-}
-
-.gd-attachment-chip {
-  height: 27px;
-  max-width: 245px;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 20px;
-  padding-left: var(--gd-spacing-10px);
-  font-size: 12px;
-  border: 1px solid var(--gd-palette-complementary-4);
-  background-color: var(--gd-palette-complementary-0);
-  color: var(--gd-palette-complementary-7);
-}
-.gd-attachment-chip:has(.gd-attachment-chip-delete:hover) {
-  background-color: var(--gd-palette-error-dimmed);
-  color: var(--gd-palette-error-base);
-  border: 1px solid var(--gd-palette-error-base-t85);
-}
-
-.gd-attachment-chip-label {
-  display: inline-flex;
-  gap: var(--gd-spacing-5px);
-  align-items: center;
-}
-
-.gd-attachment-chip-button {
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  color: var(--gd-palette-complementary-6);
-  display: grid;
-  place-items: center;
-  width: 27px;
-  height: 100%;
-}
-.gd-attachment-chip-button:hover {
-  color: var(--gd-palette-complementary-8);
-}
-
-.gd-attachment-chip-delete:hover {
-  color: var(--gd-palette-error-base);
-}
-
-.gd-attachment-list-error {
-  color: var(--gd-palette-error-base);
-  font-size: 12px;
-}
-
 .gd-recipients-container.gd-input-component--invalid .gd-recipients__control {
   border-color: var(--gd-palette-error-base, #e54d42);
 }
@@ -20384,10 +20298,8 @@ figure {
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
-  padding: 10px;
-}
-.dash-item.dash-item-height {
   min-height: 178px;
+  padding: 10px;
 }
 @media only screen {
   .dash-item {
@@ -20518,7 +20430,6 @@ figure {
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: flex-start;
-  width: 100%;
 }
 
 .dash-item-content {
@@ -20751,7 +20662,7 @@ figure {
 }
 
 .dash-item-action.dash-item-action-alert.disabled {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/alert-bell-na.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/alert-bell-na.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 16px;
@@ -20854,7 +20765,7 @@ figure {
   background-color: var(--gd-palette-primary-base, #14b2e2);
 }
 .dash-item-action-delete.gd-icon-trash::before {
-  content: url("@gooddata/sdk-ui-dashboard/esm/assets/trash.svg");
+  content: url("~@gooddata/sdk-ui-dashboard/esm/assets/trash.svg");
   display: inline-block;
   width: 20px;
   height: 20px;
@@ -21005,9 +20916,6 @@ figure {
   bottom: 0;
   right: 0;
 }
-.insight-view-loader.is-invisible {
-  visibility: hidden;
-}
 
 .bubble.options-menu-bubble {
   background-color: #fff;
@@ -21048,9 +20956,6 @@ figure {
 .gd-grid-layout .dash-item .is-dragging-widget.dash-item-content {
   border-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
-  padding: 10px 0 0 0;
-}
 .gd-grid-layout .dash-item:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(.drag-info-placeholder) {
   padding: 10px 0;
 }
@@ -21217,50 +21122,49 @@ figure {
 
 .add-kpi-placeholder::before,
 .move-kpi-placeholder::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-kpi-placeholder.svg");
-}
-
-.add-attribute-filter-placeholder.disabled::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder-disabled.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-kpi-placeholder.svg");
 }
 
 .add-attribute-filter-placeholder::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder.svg");
+}
+.add-attribute-filter-placeholder::before:disabled {
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-attribute-filter-placeholder-disabled.svg");
 }
 
-.gd-fluid-layout .dropzone {
+.dropzone {
   z-index: 99;
 }
-.gd-fluid-layout .dropzone.next, .gd-fluid-layout .dropzone.prev {
+.dropzone.next, .dropzone.prev {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 50%;
 }
-.gd-fluid-layout .dropzone.next {
+.dropzone.next {
   right: 0;
 }
-.gd-fluid-layout .dropzone.next .drop-hint {
+.dropzone.next .drop-hint {
   float: right;
   margin-left: 3px;
 }
-.gd-fluid-layout .dropzone.next.full {
+.dropzone.next.full {
   width: 100%;
 }
-.gd-fluid-layout .dropzone.prev {
+.dropzone.prev {
   left: 0;
 }
-.gd-fluid-layout .dropzone.prev .drop-hint {
+.dropzone.prev .drop-hint {
   float: left;
   margin-left: -3px;
 }
-.gd-fluid-layout .dropzone.prev.full {
+.dropzone.prev.full {
   width: 100%;
 }
-.gd-fluid-layout .dropzone.hidden {
+.dropzone.hidden {
   display: none;
 }
-.gd-fluid-layout .dropzone.extended {
+.dropzone.extended {
   width: 100%;
 }
 
@@ -21427,7 +21331,7 @@ figure {
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
 .drag-info-placeholder-box .gd-icon-insight::before {
-  content: url("@gooddata/sdk-ui-dashboard/esm/assets/add-insight-placeholder.svg");
+  content: url("~@gooddata/sdk-ui-dashboard/esm/assets/add-insight-placeholder.svg");
   display: inline-block;
   margin-right: 10px;
 }
@@ -21529,7 +21433,7 @@ figure {
   cursor: pointer;
 }
 .kpi-placeholder.select-measure {
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/dummy-kpi-simple.svg") no-repeat center center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/dummy-kpi-simple.svg") no-repeat center center;
   background-size: 130px;
 }
 
@@ -21649,6 +21553,9 @@ figure {
   left: 10px;
   align-content: center;
 }
+.gd-grid-layout .dropzone.next .drop-hint {
+  float: unset;
+}
 .gd-grid-layout .row-hotspot-container .row-hotspot {
   top: -20px;
   right: unset;
@@ -21690,9 +21597,6 @@ figure {
   left: unset;
   padding: 10px;
 }
-.gd-grid-layout .gd-fluidlayout-column-dropzone__text--hidden .drop-target-inner {
-  padding: 4px;
-}
 .gd-grid-layout .drop-target-message {
   position: unset;
   top: unset;
@@ -21750,9 +21654,6 @@ figure {
 .gd-grid-layout .gd-fluidlayout-column-row-end-hotspot .drag-info-placeholder-inner {
   padding: 0;
 }
-.gd-grid-layout .gd-fluidlayout-column-row-end-hotspot.gd-fluidlayout-column-row-end-hotspot--direction-column.gd-fluidlayout-column-dropzone__text--hidden .widget-dropzone-box {
-  padding: 0;
-}
 .gd-grid-layout .gd-fluidlayout-column-row-end-hotspot.gd-first-container-row-dropzone .widget-dropzone-box {
   padding-top: 0;
 }
@@ -23243,13 +23144,13 @@ figure {
 .gd-powered-by-logo-img-large {
   width: 165px;
   height: 30px;
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/powered-by-gd-large.svg?v=2022");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/powered-by-gd-large.svg?v=2022");
   background-size: 165px 30px;
 }
 .gd-powered-by-logo-img-small {
   width: 146px;
   height: 16px;
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/powered-by-gd-small.svg?v=2022");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/powered-by-gd-small.svg?v=2022");
   background-size: 146px 16px;
 }
 
@@ -24230,14 +24131,12 @@ figure {
   flex-direction: column;
   align-items: stretch;
   gap: 10px;
-  max-width: 260px;
+  max-width: 240px;
 }
 .gd-container-tooltip__image {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/flexible-layouts-tooltip.gif");
-  background-repeat: no-repeat;
-  background-position: left top;
-  background-size: contain;
-  aspect-ratio: 44/27;
+  width: 100%;
+  aspect-ratio: 3/2;
+  background: fuchsia;
 }
 .gd-container-tooltip__actions {
   padding-top: 10px;
@@ -24278,7 +24177,7 @@ figure {
 .button-dropdown.gd-button-small.type-growIsGood::before,
 .dropdown-body .gd-list-item.type-growIsGood::before,
 .configuration-category label.type-growIsGood::before {
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/trend-positive.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/trend-positive.svg") no-repeat center;
 }
 .button-dropdown.gd-button-small.type-growIsGood.is-selected,
 .dropdown-body .gd-list-item.type-growIsGood.is-selected,
@@ -24298,7 +24197,7 @@ figure {
 .button-dropdown.gd-button-small.type-growIsBad::before,
 .dropdown-body .gd-list-item.type-growIsBad::before,
 .configuration-category label.type-growIsBad::before {
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/trend-negative.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/trend-negative.svg") no-repeat center;
 }
 .button-dropdown.gd-button-small.type-growIsBad.is-selected,
 .dropdown-body .gd-list-item.type-growIsBad.is-selected,
@@ -24313,23 +24212,23 @@ figure {
 .button-dropdown.gd-button-small.type-measure::before,
 .dropdown-body .gd-list-item.type-measure::before,
 .configuration-category label.type-measure::before {
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg") no-repeat center;
 }
 .button-dropdown.gd-button-small.type-metric::before,
 .dropdown-body .gd-list-item.type-metric::before,
 .configuration-category label.type-metric::before {
   margin-top: 0;
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/metric.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/metric.svg") no-repeat center;
 }
 .button-dropdown.gd-button-small.type-attribute::before,
 .dropdown-body .gd-list-item.type-attribute::before,
 .configuration-category label.type-attribute::before {
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg") no-repeat center;
 }
 .button-dropdown.gd-button-small.type-date::before,
 .dropdown-body .gd-list-item.type-date::before,
 .configuration-category label.type-date::before {
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg") no-repeat center;
 }
 .button-dropdown.gd-button-small.type-comparison::before,
 .dropdown-body .gd-list-item.type-comparison::before,
@@ -24345,73 +24244,65 @@ figure {
   left: 11px;
 }
 
-.gd-icon-list::before {
+.gd-list-item .gd-icon-list::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/list.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/list.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-save-as-new::before {
+.gd-list-item .gd-icon-save-as-new::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/save-as-new.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/save-as-new.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-filter::before {
+.gd-list-item .gd-icon-filter::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/filter.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/filter.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-type-pdf::before {
+.gd-list-item .gd-icon-type-pdf::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/type-pdf.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/type-pdf.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-type-sheet::before {
+.gd-list-item .gd-icon-type-sheet::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/type-sheet.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/type-sheet.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-type-slides::before {
+.gd-list-item .gd-icon-type-slides::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/type-slides.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/type-slides.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-type-image::before {
+.gd-list-item .gd-icon-type-image::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/type-image.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/type-image.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-type-csv-raw::before {
+.gd-list-item .gd-icon-type-csv-raw::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/type-csv-raw.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/type-csv-raw.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-
-.gd-icon-type-csv-formatted::before {
+.gd-list-item .gd-icon-type-csv-formatted::before {
   content: "";
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/type-csv-formatted.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/type-csv-formatted.svg") no-repeat center;
   width: 16px;
   height: 16px;
   display: inline-block;
@@ -24825,7 +24716,7 @@ figure {
   display: block;
   width: 18px;
   height: 24px;
-  background: url("@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg") no-repeat center;
+  background: url("~@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg") no-repeat center;
 }
 
 .dash-width-resizer-container {
@@ -25251,7 +25142,7 @@ figure {
   display: block;
   width: 18px;
   height: 24px;
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
   background-repeat: no-repeat;
   background-position: left top;
   background-size: contain;
@@ -25263,20 +25154,20 @@ figure {
   background: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
 .gd-drill-item-selector-dropdown .gd-drill-measure-selector-list-item::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
 }
 .gd-drill-item-selector-dropdown .gd-drill-metric-selector-list-item::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
   top: 8px;
   height: 18px;
 }
 .gd-drill-item-selector-dropdown .gd-drill-attribute-selector-list-item::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
 }
 .gd-drill-item-selector-dropdown .gd-drill-attribute-date-selector-list-item::before {
   top: 9px;
   height: 16px;
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
 }
 
 .drill-config-empty-hierarchy-target {
@@ -25349,7 +25240,7 @@ figure {
   display: block;
   width: 18px;
   height: 24px;
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
   background-repeat: no-repeat;
   background-position: left top;
   background-size: contain;
@@ -25381,16 +25272,16 @@ figure {
   background-repeat: no-repeat;
 }
 .gd-drill-config-measure-item .dm-button-icon-metric {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/metric.svg");
 }
 .gd-drill-config-measure-item .dm-button-icon-measure {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/measure.svg");
 }
 .gd-drill-config-measure-item .dm-button-icon-attribute {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute.svg");
 }
 .gd-drill-config-measure-item .dm-button-icon-date {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/date-dropdown.svg");
 }
 .gd-drill-config-measure-item .dm-button-title {
   overflow: hidden;
@@ -25530,21 +25421,21 @@ figure {
 }
 .gd-drill-config-panel-target .gd-icon-drill-to-dashboard::before,
 .drill-config-target .gd-icon-drill-to-dashboard::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/drill-to-dashboard.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/drill-to-dashboard.svg");
 }
 .gd-drill-config-panel-target .gd-icon-drill-to-insight::before,
 .drill-config-target .gd-icon-drill-to-insight::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/drill-to-insight.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/drill-to-insight.svg");
 }
 .gd-drill-config-panel-target .gd-icon-drill-down::before,
 .drill-config-target .gd-icon-drill-down::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/drill-down.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/drill-down.svg");
   background-repeat: no-repeat;
   top: 1px;
 }
 .gd-drill-config-panel-target .gd-icon-attribute-hierarchy::before,
 .drill-config-target .gd-icon-attribute-hierarchy::before {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
+  background-image: url("~@gooddata/sdk-ui-dashboard/esm/assets/attribute-hierarchy.svg");
   background-repeat: no-repeat;
   top: 1px;
 }
@@ -26847,7 +26738,7 @@ figure {
 
 .gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-content.dash-item-content {
   border-radius: 0;
-  padding: 19px 10px 15px 10px;
+  padding: 19px 10px 18px 10px;
 }
 .gd-dashboard-nested-layout-widget .is-selectable.gd-dashboard-nested-layout-content.dash-item-content:not(.is-selected):hover, .gd-dashboard-nested-layout-widget .is-selectable.gd-dashboard-nested-layout-content.dash-item-content.is-dragging-widget {
   border-style: solid;
@@ -26879,6 +26770,10 @@ figure {
   font-size: 18px;
 }
 
+.gd-nested-layout-widget-renderer .gd-nested-layout-hotspot.dropzone {
+  width: 50px;
+}
+
 .gd-dashboard-nested-layout-tab {
   display: none;
   width: auto;
@@ -26919,14 +26814,6 @@ figure {
 .gd-dashboard-nested-layout-widget-visualization-content .drag-info-placeholder {
   padding: 0 0 0 10px;
 }
-.gd-dashboard-nested-layout-widget-visualization-content .drag-info-empty-nested-layout {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  height: 100%;
-  justify-content: center;
-}
 
 .gd-grid-layout .gd-fluidlayout-column-dropzone {
   height: 100%;
@@ -26942,116 +26829,81 @@ figure {
 .gd-grid-layout .gd-empty-dashboard-dropzone .drag-info-placeholder {
   min-height: 300px;
 }
-
-.gd-grid-layout-dropzone {
-  z-index: 99;
-}
-.gd-grid-layout-dropzone--type-prev, .gd-grid-layout-dropzone--type-next {
-  position: absolute;
-}
-.gd-grid-layout-dropzone--type-prev .drop-hint {
-  float: left;
-  margin-left: -3px;
-}
-.gd-grid-layout-dropzone--type-next .drop-hint {
-  float: right;
-  margin-left: 3px;
-}
-.gd-grid-layout-dropzone--hidden {
+.gd-grid-layout .gd-hotspot-border__container {
   display: none;
+  position: absolute;
+  padding: 10px 0;
+  width: 10px;
+  height: 100%;
 }
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-prev, .gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-next {
-  top: 0;
-  bottom: 0;
-  width: 50%;
+.gd-grid-layout .gd-first-container-row-dropzone .gd-hotspot-border__container {
+  padding-top: 0;
 }
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-prev.gd-grid-layout-dropzone--full, .gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-next.gd-grid-layout-dropzone--full {
+.gd-grid-layout .gd-hotspot-border__drop-target {
   width: 100%;
+  height: 100%;
+  padding: 2px;
+  border: 1px dashed var(--gd-palette-primary-base, #14b2e2);
+  border-radius: 15px;
+  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-prev {
-  left: 0;
+.gd-grid-layout .gd-hotspot-border__drop-target .drop-target-inner {
+  width: 4px;
+  height: 100%;
+  padding: 0;
+  border-radius: 2px;
+  background-color: var(--gd-palette-primary-base, #14b2e2);
 }
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-prev.gd-grid-layout-dropzone--active .gd-grid-layout-dropzone__drop-target--direction-row {
+.gd-grid-layout .dropzone.prev.active .gd-hotspot-border__container {
   left: -15px;
+  display: block;
 }
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-next {
-  right: 0;
-}
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--type-next.gd-grid-layout-dropzone--active .gd-grid-layout-dropzone__drop-target--direction-row {
+.gd-grid-layout .dropzone.next.active .gd-hotspot-border__container {
   right: -15px;
+  display: block;
 }
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--extended {
-  width: 100%;
-}
-.gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--isOverNestedLayout.gd-grid-layout-dropzone--type-prev, .gd-grid-layout-dropzone--direction-row.gd-grid-layout-dropzone--isOverNestedLayout.gd-grid-layout-dropzone--type-next {
-  width: 50px;
-}
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-prev, .gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-next {
+
+.gd-dashboard-nested-layout-widget--column .dropzone.prev, .gd-dashboard-nested-layout-widget--column .dropzone.next {
+  top: unset;
   right: 0;
+  bottom: unset;
   left: 0;
-  height: 50%;
-}
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-prev.gd-grid-layout-dropzone--full, .gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-next.gd-grid-layout-dropzone--full {
   width: 100%;
-  height: 100%;
+  height: 50%;
 }
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-prev {
+.gd-dashboard-nested-layout-widget--column .dropzone.prev {
   top: 0;
 }
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-prev.gd-grid-layout-dropzone--active .gd-grid-layout-dropzone__drop-target--direction-column {
+.gd-dashboard-nested-layout-widget--column .dropzone.prev.full {
+  width: 50%;
+}
+.gd-dashboard-nested-layout-widget--column .dropzone.prev.active .gd-hotspot-border__container {
+  left: unset;
   top: -5px;
 }
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-next {
+.gd-dashboard-nested-layout-widget--column .dropzone.next {
   bottom: 0;
 }
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--type-next.gd-grid-layout-dropzone--active .gd-grid-layout-dropzone__drop-target--direction-column {
+.gd-dashboard-nested-layout-widget--column .dropzone.next.full {
+  width: 50%;
+}
+.gd-dashboard-nested-layout-widget--column .dropzone.next.active .gd-hotspot-border__container {
+  right: unset;
   bottom: -5px;
 }
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--isOverNestedLayout.gd-grid-layout-dropzone--type-prev, .gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--isOverNestedLayout.gd-grid-layout-dropzone--type-next {
+.gd-dashboard-nested-layout-widget--column .dropzone.gd-nested-layout-hotspot.prev, .gd-dashboard-nested-layout-widget--column .dropzone.gd-nested-layout-hotspot.next {
   height: 50px;
 }
-.gd-grid-layout-dropzone--direction-column.gd-grid-layout-dropzone--isInFirstRow.gd-grid-layout-dropzone--type-prev.gd-grid-layout-dropzone--active .gd-grid-layout-dropzone__drop-target--direction-column {
+.gd-dashboard-nested-layout-widget--column .dropzone.gd-first-container-row-dropzone.prev.active .gd-hotspot-border__container {
   top: -15px;
 }
-.gd-grid-layout-dropzone__drop-target {
-  display: none;
-  position: absolute;
-}
-.gd-grid-layout-dropzone__drop-target--direction-row {
-  padding: 10px 0;
-  width: 10px;
-  height: 100%;
-}
-.gd-grid-layout-dropzone__drop-target--direction-row .gd-grid-layout-dropzone__drop-target-inner {
-  width: 4px;
-}
-.gd-grid-layout-dropzone__drop-target--direction-column {
+.gd-dashboard-nested-layout-widget--column .gd-hotspot-border__container {
   padding: 0;
   width: 100%;
   height: 10px;
 }
-.gd-grid-layout-dropzone__drop-target--direction-column .gd-grid-layout-dropzone__drop-target-inner {
-  width: 100%;
-}
-.gd-grid-layout-dropzone__drop-target.gd-grid-layout-dropzone--isInFirstRow {
-  padding-top: 0;
-}
-.gd-grid-layout-dropzone--active .gd-grid-layout-dropzone__drop-target {
-  display: block;
-}
-.gd-grid-layout-dropzone__drop-target-border {
+.gd-dashboard-nested-layout-widget--column .gd-hotspot-border__drop-target .drop-target-inner {
   width: 100%;
-  height: 100%;
-  padding: 2px;
-  border: 1px dashed var(--gd-palette-primary-base, #14b2e2);
-  border-radius: 15px;
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
-}
-.gd-grid-layout-dropzone__drop-target-inner {
-  height: 100%;
-  padding: 0;
-  border-radius: 2px;
-  background-color: var(--gd-palette-primary-base, #14b2e2);
 }
 
 .gd-dashboard-settings-dialog {