@gooddata/sdk-ui-kit 11.49.0-alpha.1 → 11.50.0-alpha.0

package/styles/css/main.css

@@ -1296,11 +1296,186 @@
   transition: var(--gd-transition-all);
 }
 
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+.gd-button-primary,
+.gd-button-secondary, .gd-button-positive, .gd-button-negative, .gd-button-action, .gd-button-link.gd-button-icon-only[class*=gd-icon-], .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed {
+  position: relative;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 14px;
+  border: 1px solid transparent;
+  font: 400 14px/20px var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--gd-button-borderRadius, 3px);
+  text-transform: var(--gd-button-textCapitalization, none);
+  -moz-transition-property: all;
+  -webkit-transition-property: all;
+  transition-property: all;
+  -moz-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+.gd-button-primary::before,
+.gd-button-secondary::before, .gd-button-positive::before, .gd-button-negative::before, .gd-button-action::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::before, .gd-button-primary::after,
+.gd-button-secondary::after, .gd-button-positive::after, .gd-button-negative::after, .gd-button-action::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::after {
+  position: absolute;
+  top: 50%;
+  height: 20px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-5, #b0beca);
+  transform: translateY(-50%);
+  font-size: 18px;
+  text-align: center;
+  -moz-transition-property: color;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -moz-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+.gd-button-primary::before,
+.gd-button-secondary::before, .gd-button-positive::before, .gd-button-negative::before, .gd-button-action::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::before {
+  left: 10px;
+  margin-right: 0.5em;
+}
+.gd-button-primary::after,
+.gd-button-secondary::after, .gd-button-positive::after, .gd-button-negative::after, .gd-button-action::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::after {
+  right: 7px;
+  margin-left: 0.5em;
+}
+.gd-button-primary .gd-button-text,
+.gd-button-secondary .gd-button-text, .gd-button-positive .gd-button-text, .gd-button-negative .gd-button-text, .gd-button-action .gd-button-text, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-text, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-text,
+.gd-button-primary .gd-button-icon,
+.gd-button-secondary .gd-button-icon,
+.gd-button-positive .gd-button-icon,
+.gd-button-negative .gd-button-icon,
+.gd-button-action .gd-button-icon,
+.gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon,
+.gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon {
+  position: relative;
+  display: block;
+  justify-content: space-between;
+  align-items: center;
+}
+.gd-button-primary .gd-button-text,
+.gd-button-secondary .gd-button-text, .gd-button-positive .gd-button-text, .gd-button-negative .gd-button-text, .gd-button-action .gd-button-text, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-text, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-text {
+  top: 1px;
+  flex: 1 1 auto;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+}
+.gd-button-primary .gd-button-icon,
+.gd-button-secondary .gd-button-icon, .gd-button-positive .gd-button-icon, .gd-button-negative .gd-button-icon, .gd-button-action .gd-button-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin: 0 0.5em;
+  line-height: 18px;
+  color: var(--gd-palette-complementary-5, #b0beca);
+  font-size: 18px;
+  text-align: center;
+  text-decoration: none;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.gd-button-primary .gd-button-icon::before,
+.gd-button-secondary .gd-button-icon::before, .gd-button-positive .gd-button-icon::before, .gd-button-negative .gd-button-icon::before, .gd-button-action .gd-button-icon::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon::before, .gd-button-primary .gd-button-icon::after,
+.gd-button-secondary .gd-button-icon::after, .gd-button-positive .gd-button-icon::after, .gd-button-negative .gd-button-icon::after, .gd-button-action .gd-button-icon::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon::after {
+  color: inherit;
+  -moz-transition-property: color;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -moz-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+.gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child,
+.gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child {
+  margin-left: -4px;
+}
+.gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child,
+.gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child {
+  margin-right: -4px;
+}
+.gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child,
+.gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child {
+  width: 19px;
+  height: 17px;
+  line-height: 17px;
+  margin-right: -9px;
+  margin-left: -9px;
+  font-size: 16px;
+}
+.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before,
+.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after,
+.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after {
+  top: calc(50% + 1px);
+}
+.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text,
+.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text {
+  top: 2px;
+}
+.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon,
+.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon {
+  margin-top: 2px;
+}
+.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child,
+.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child {
+  color: var(--gd-palette-complementary-7-from-theme, #778491);
+}
+.gd-button-primary:hover::before,
+.gd-button-secondary:hover::before, .gd-button-positive:hover::before, .gd-button-negative:hover::before, .gd-button-action:hover::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover::before, .gd-button-primary:hover::after,
+.gd-button-secondary:hover::after, .gd-button-positive:hover::after, .gd-button-negative:hover::after, .gd-button-action:hover::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover::after,
+.gd-button-primary:hover .gd-button-icon,
+.gd-button-secondary:hover .gd-button-icon,
+.gd-button-positive:hover .gd-button-icon,
+.gd-button-negative:hover .gd-button-icon,
+.gd-button-action:hover .gd-button-icon,
+.gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover .gd-button-icon,
+.gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover .gd-button-icon {
+  color: var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-button-primary:focus-visible,
+.gd-button-secondary:focus-visible, .gd-button-positive:focus-visible, .gd-button-negative:focus-visible, .gd-button-action:focus-visible, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:focus-visible, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:focus-visible {
+  transition: none;
+}
+[class*=gd-icon-].gd-button-primary,
+[class*=gd-icon-].gd-button-secondary, [class*=gd-icon-].gd-button-positive, [class*=gd-icon-].gd-button-negative, [class*=gd-icon-].gd-button-action, [class*=gd-icon-].gd-button-link.gd-button-icon-only, [class*=gd-icon-].gd-button-icon-only.gd-button-link-dimmed {
+  padding-left: 37px;
+}
+[class*=gd-icon-].gd-icon-right.gd-button-primary,
+[class*=gd-icon-].gd-icon-right.gd-button-secondary, [class*=gd-icon-].gd-icon-right.gd-button-positive, [class*=gd-icon-].gd-icon-right.gd-button-negative, [class*=gd-icon-].gd-icon-right.gd-button-action, [class*=gd-icon-].gd-icon-right.gd-button-link.gd-button-icon-only, [class*=gd-icon-].gd-icon-right.gd-button-icon-only.gd-button-link-dimmed {
+  padding-left: 11px;
+  padding-right: 32px;
+}
+
+.gd-button-primary .ss-icon,
+.gd-button-secondary .ss-icon, .gd-button-positive .ss-icon, .gd-button-negative .ss-icon, .gd-button-action .ss-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .ss-icon, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .ss-icon {
+  vertical-align: middle;
+}
+
 .gd-ui-kit-control-button {
   position: relative;
   max-width: 230px;
   padding: 5px 10px;
-  font-family: var(--gd-font-family), gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
@@ -1339,14 +1514,19 @@
   border-color: var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2));
 }
 .gd-ui-kit-control-button:hover.gd-ui-kit-control-button--isDraggable {
-  box-shadow: 0 1px 3px 0 rgba(20, 56, 93, 0.1), 0 2px 9px 0 rgba(20, 56, 93, 0.15);
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.09)), 0 2px 9px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.15));
 }
 .gd-ui-kit-control-button:hover.gd-ui-kit-control-button--isDraggable::before {
   opacity: 1;
 }
 .gd-ui-kit-control-button--isOpen::after {
-  box-shadow: inset 0 1px 0 0 rgba(20, 56, 93, 0.1);
+  box-shadow: inset 0 1px 0 0 var(--gd-shadow-color-from-theme, rgba(177, 193, 209, 0.65));
   border-color: var(--gd-palette-complementary-5-from-theme, var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2)));
+  background: var(--gd-palette-complementary-2-from-theme, #ecf0f5); /* Old browsers */
+  background-image: -webkit-linear-gradient(top, var(--gd-palette-complementary-2-from-theme, #dee6ef), var(--gd-palette-complementary-2-from-theme, #ecf0f5)); /* Chrome 10+, Saf5.1+ */
+  background-image: -moz-linear-gradient(top, var(--gd-palette-complementary-2-from-theme, #dee6ef), var(--gd-palette-complementary-2-from-theme, #ecf0f5)); /* FF3.6 */
+  background-image: -ms-linear-gradient(top, var(--gd-palette-complementary-2-from-theme, #dee6ef), var(--gd-palette-complementary-2-from-theme, #ecf0f5)); /* IE10 */
+  background-image: linear-gradient(to top, var(--gd-palette-complementary-2-from-theme, #dee6ef), var(--gd-palette-complementary-2-from-theme, #ecf0f5));
 }
 .gd-ui-kit-control-button--isOpen.gd-ui-kit-control-button--isDraggable::before {
   opacity: 1;
@@ -3904,31 +4084,6 @@
   padding-bottom: var(--gd-spacing-5px);
 }
 
-.gd-ui-kit-transfer-ownership-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gd-spacing-15px);
-  padding-bottom: var(--gd-spacing-5px);
-}
-.gd-ui-kit-transfer-ownership-dialog__field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gd-spacing-5px);
-}
-.gd-ui-kit-transfer-ownership-dialog__field-label {
-  font-size: 14px;
-  line-height: 21px;
-  color: var(--gd-palette-complementary-7);
-}
-.gd-ui-kit-transfer-ownership-dialog__note {
-  padding: 4px 10px;
-  border-radius: 3px;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--gd-message-information-textColor);
-  background: var(--gd-message-information-backgroundColor);
-}
-
 .gd-ui-kit-grantee-async-picker {
   display: flex;
   flex-direction: column;
@@ -4105,6 +4260,10 @@
   color: var(--gd-palette-primary-base);
   font-weight: 700;
 }
+.gd-ui-kit-permission-menu__item--disabled {
+  color: var(--gd-palette-complementary-5);
+  cursor: default;
+}
 .gd-ui-kit-permission-menu__item-label {
   flex: 1 1 auto;
   min-width: 0;
@@ -5218,184 +5377,6 @@
   display: none;
 }
 
-/* ==========================================================================
-   Variables
-   ========================================================================== */
-/* ==========================================================================
-   Silent classes - more clever mixins
-   ========================================================================== */
-.gd-button-primary,
-.gd-button-secondary, .gd-button-positive, .gd-button-negative, .gd-button-action, .gd-button-link.gd-button-icon-only[class*=gd-icon-], .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed {
-  position: relative;
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 14px;
-  border: 1px solid transparent;
-  font: 400 14px/20px var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  text-align: left;
-  border-radius: var(--gd-button-borderRadius, 3px);
-  text-transform: var(--gd-button-textCapitalization, none);
-  -moz-transition-property: all;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -moz-transition-duration: 0.25s;
-  -webkit-transition-duration: 0.25s;
-  transition-duration: 0.25s;
-  -moz-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-}
-.gd-button-primary::before,
-.gd-button-secondary::before, .gd-button-positive::before, .gd-button-negative::before, .gd-button-action::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::before, .gd-button-primary::after,
-.gd-button-secondary::after, .gd-button-positive::after, .gd-button-negative::after, .gd-button-action::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::after {
-  position: absolute;
-  top: 50%;
-  height: 20px;
-  line-height: 20px;
-  color: var(--gd-palette-complementary-5, #b0beca);
-  transform: translateY(-50%);
-  font-size: 18px;
-  text-align: center;
-  -moz-transition-property: color;
-  -webkit-transition-property: color;
-  transition-property: color;
-  -moz-transition-duration: 0.25s;
-  -webkit-transition-duration: 0.25s;
-  transition-duration: 0.25s;
-  -moz-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-}
-.gd-button-primary::before,
-.gd-button-secondary::before, .gd-button-positive::before, .gd-button-negative::before, .gd-button-action::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::before {
-  left: 10px;
-  margin-right: 0.5em;
-}
-.gd-button-primary::after,
-.gd-button-secondary::after, .gd-button-positive::after, .gd-button-negative::after, .gd-button-action::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed::after {
-  right: 7px;
-  margin-left: 0.5em;
-}
-.gd-button-primary .gd-button-text,
-.gd-button-secondary .gd-button-text, .gd-button-positive .gd-button-text, .gd-button-negative .gd-button-text, .gd-button-action .gd-button-text, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-text, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-text,
-.gd-button-primary .gd-button-icon,
-.gd-button-secondary .gd-button-icon,
-.gd-button-positive .gd-button-icon,
-.gd-button-negative .gd-button-icon,
-.gd-button-action .gd-button-icon,
-.gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon,
-.gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon {
-  position: relative;
-  display: block;
-  justify-content: space-between;
-  align-items: center;
-}
-.gd-button-primary .gd-button-text,
-.gd-button-secondary .gd-button-text, .gd-button-positive .gd-button-text, .gd-button-negative .gd-button-text, .gd-button-action .gd-button-text, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-text, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-text {
-  top: 1px;
-  flex: 1 1 auto;
-  overflow: hidden;
-  width: 100%;
-  text-overflow: ellipsis;
-}
-.gd-button-primary .gd-button-icon,
-.gd-button-secondary .gd-button-icon, .gd-button-positive .gd-button-icon, .gd-button-negative .gd-button-icon, .gd-button-action .gd-button-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon {
-  flex: 0 0 auto;
-  width: 18px;
-  height: 18px;
-  margin: 0 0.5em;
-  line-height: 18px;
-  color: var(--gd-palette-complementary-5, #b0beca);
-  font-size: 18px;
-  text-align: center;
-  text-decoration: none;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.gd-button-primary .gd-button-icon::before,
-.gd-button-secondary .gd-button-icon::before, .gd-button-positive .gd-button-icon::before, .gd-button-negative .gd-button-icon::before, .gd-button-action .gd-button-icon::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon::before, .gd-button-primary .gd-button-icon::after,
-.gd-button-secondary .gd-button-icon::after, .gd-button-positive .gd-button-icon::after, .gd-button-negative .gd-button-icon::after, .gd-button-action .gd-button-icon::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .gd-button-icon::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .gd-button-icon::after {
-  color: inherit;
-  -moz-transition-property: color;
-  -webkit-transition-property: color;
-  transition-property: color;
-  -moz-transition-duration: 0.25s;
-  -webkit-transition-duration: 0.25s;
-  transition-duration: 0.25s;
-  -moz-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-}
-.gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child,
-.gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child {
-  margin-left: -4px;
-}
-.gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child,
-.gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child {
-  margin-right: -4px;
-}
-.gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child,
-.gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child {
-  width: 19px;
-  height: 17px;
-  line-height: 17px;
-  margin-right: -9px;
-  margin-left: -9px;
-  font-size: 16px;
-}
-.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before,
-.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after,
-.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after {
-  top: calc(50% + 1px);
-}
-.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text,
-.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text {
-  top: 2px;
-}
-.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon,
-.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon {
-  margin-top: 2px;
-}
-.gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child,
-.gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child {
-  color: var(--gd-palette-complementary-7-from-theme, #778491);
-}
-.gd-button-primary:hover::before,
-.gd-button-secondary:hover::before, .gd-button-positive:hover::before, .gd-button-negative:hover::before, .gd-button-action:hover::before, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover::before, .gd-button-primary:hover::after,
-.gd-button-secondary:hover::after, .gd-button-positive:hover::after, .gd-button-negative:hover::after, .gd-button-action:hover::after, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover::after, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover::after,
-.gd-button-primary:hover .gd-button-icon,
-.gd-button-secondary:hover .gd-button-icon,
-.gd-button-positive:hover .gd-button-icon,
-.gd-button-negative:hover .gd-button-icon,
-.gd-button-action:hover .gd-button-icon,
-.gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover .gd-button-icon,
-.gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover .gd-button-icon {
-  color: var(--gd-palette-primary-base, #14b2e2);
-}
-.gd-button-primary:focus-visible,
-.gd-button-secondary:focus-visible, .gd-button-positive:focus-visible, .gd-button-negative:focus-visible, .gd-button-action:focus-visible, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:focus-visible, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:focus-visible {
-  transition: none;
-}
-[class*=gd-icon-].gd-button-primary,
-[class*=gd-icon-].gd-button-secondary, [class*=gd-icon-].gd-button-positive, [class*=gd-icon-].gd-button-negative, [class*=gd-icon-].gd-button-action, [class*=gd-icon-].gd-button-link.gd-button-icon-only, [class*=gd-icon-].gd-button-icon-only.gd-button-link-dimmed {
-  padding-left: 37px;
-}
-[class*=gd-icon-].gd-icon-right.gd-button-primary,
-[class*=gd-icon-].gd-icon-right.gd-button-secondary, [class*=gd-icon-].gd-icon-right.gd-button-positive, [class*=gd-icon-].gd-icon-right.gd-button-negative, [class*=gd-icon-].gd-icon-right.gd-button-action, [class*=gd-icon-].gd-icon-right.gd-button-link.gd-button-icon-only, [class*=gd-icon-].gd-icon-right.gd-button-icon-only.gd-button-link-dimmed {
-  padding-left: 11px;
-  padding-right: 32px;
-}
-
-.gd-button-primary .ss-icon,
-.gd-button-secondary .ss-icon, .gd-button-positive .ss-icon, .gd-button-negative .ss-icon, .gd-button-action .ss-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-] .ss-icon, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed .ss-icon {
-  vertical-align: middle;
-}
-
 /* Basic button variants
    ========================================================================== */
 /* disable max length */
@@ -14199,6 +14180,83 @@ input[type=search]::-webkit-search-cancel-button {
   border-top: 1px solid var(--gd-palette-complementary-3);
 }
 
+.gd-ui-kit-parameter-input {
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--gd-palette-complementary-4);
+  border-radius: 3px;
+  background-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-parameter-input:hover {
+  border-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-parameter-input:focus-within {
+  border-color: var(--gd-palette-primary-base);
+  box-shadow: 0 0 0 1px var(--gd-palette-primary-base);
+}
+.gd-ui-kit-parameter-input--hasError {
+  border-color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-parameter-input--hasError:focus-within {
+  border-color: var(--gd-palette-error-base);
+  box-shadow: 0 0 0 1px var(--gd-palette-error-base);
+}
+.gd-ui-kit-parameter-input__field {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  padding: 6px 10px 5px;
+  border: 0;
+  background: transparent;
+  color: var(--gd-palette-complementary-9);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: normal;
+}
+.gd-ui-kit-parameter-input__field:focus-visible {
+  outline: none;
+}
+.gd-ui-kit-parameter-input__field--number {
+  text-align: right;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.gd-ui-kit-parameter-input__field--number::-webkit-outer-spin-button, .gd-ui-kit-parameter-input__field--number::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.gd-ui-kit-parameter-input__stepper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  width: 25px;
+  min-width: 25px;
+  padding: 0;
+  border-left: 1px solid var(--gd-palette-complementary-4);
+  background-color: var(--gd-palette-complementary-1);
+}
+.gd-ui-kit-parameter-input__stepper-button {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-parameter-input__stepper-button:hover {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-parameter-input__stepper-button:disabled {
+  color: var(--gd-palette-complementary-5);
+  cursor: default;
+}
+
 .gd-ui-kit-parameter-control--dropdown {
   display: flex;
   flex-direction: column;
@@ -14208,30 +14266,19 @@ input[type=search]::-webkit-search-cancel-button {
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 .gd-ui-kit-parameter-control__dropdown-field {
-  padding: 10px 10px 0;
+  padding: 10px;
 }
 .gd-ui-kit-parameter-control__dropdown-field-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 5px;
+  font-size: 12px;
 }
 .gd-ui-kit-parameter-control__dropdown-label {
   color: var(--gd-palette-complementary-8);
-  font-size: 12px;
   font-weight: 400;
 }
-.gd-ui-kit-parameter-control__dropdown-reset {
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--gd-palette-primary-base);
-  font-size: 12px;
-  cursor: pointer;
-}
-.gd-ui-kit-parameter-control__dropdown-reset:hover {
-  text-decoration: underline;
-}
 .gd-ui-kit-parameter-control__dropdown-error {
   padding-top: 5px;
   color: var(--gd-palette-error-base);
@@ -14239,7 +14286,7 @@ input[type=search]::-webkit-search-cancel-button {
 }
 .gd-ui-kit-parameter-control__dropdown-divider {
   height: 1px;
-  margin: 10px 0;
+  margin: 10px;
   background-color: var(--gd-palette-complementary-3);
 }
 .gd-ui-kit-parameter-control__dropdown-preview {
@@ -14262,7 +14309,8 @@ input[type=search]::-webkit-search-cancel-button {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
-  padding: 10px;
+  margin: 0 10px;
+  padding: 10px 0;
   border-top: 1px solid var(--gd-palette-complementary-3);
 }