@gooddata/sdk-ui-kit 10.26.0-alpha.8 → 10.26.0

package/styles/css/main.css

@@ -196,9 +196,7 @@
   --gd-icon-fill-color: var(--gd-palette-complementary-9);
 }
 
-.gd-ui-kit-button,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete {
+.gd-ui-kit-button {
   font-family: var(--gd-font-family);
   gap: var(--gd-spacing-5px);
   border-radius: var(--gd-button-borderRadius);
@@ -216,133 +214,40 @@
    * Variant
    */
 }
-.gd-ui-kit-button:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled {
+.gd-ui-kit-button:disabled {
   cursor: default;
 }
-.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-button, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag {
-  padding-top: 1px;
-}
-.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-button, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete {
-  padding-top: 1px;
-}
-.gd-ui-kit-button__text,
-.gd-ui-kit-chip__label,
-.gd-ui-kit-chip__tag {
-  transition: var(--gd-transition-all);
-}
-.gd-ui-kit-button__icon,
-.gd-ui-kit-chip__icon-before,
-.gd-ui-kit-chip__icon-chevron,
-.gd-ui-kit-chip__icon-lock,
-.gd-ui-kit-chip__icon-delete {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--gd-transition-all);
-}
-.gd-ui-kit-button--isLoading .gd-ui-kit-button, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-before, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-lock, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-delete {
-  animation: rotate 1s infinite steps(30);
-}
 .gd-ui-kit-button--size-small {
   height: var(--gd-button-S);
-  padding: var(--gd-spacing-6px) var(--gd-spacing-10px);
+  padding: 0 var(--gd-spacing-10px);
   font-size: 12px;
-  line-height: 14px;
 }
-.gd-ui-kit-button--size-small.gd-ui-kit-button-left {
+.gd-ui-kit-button--size-small.gd-ui-kit-button--hasIconBefore {
   padding-left: var(--gd-spacing-7px);
 }
-.gd-ui-kit-button--size-small.gd-ui-kit-button-right {
+.gd-ui-kit-button--size-small.gd-ui-kit-button--hasIconAfter {
   padding-right: var(--gd-spacing-7px);
 }
 .gd-ui-kit-button--size-medium {
   height: var(--gd-button-M);
-  padding: var(--gd-spacing-6px) var(--gd-spacing-15px);
+  padding: 0 var(--gd-spacing-15px);
   font-size: 14px;
-  line-height: 16px;
 }
-.gd-ui-kit-button--size-medium.gd-ui-kit-button-left {
+.gd-ui-kit-button--size-medium.gd-ui-kit-button--hasIconBefore {
   padding-left: var(--gd-spacing-10px);
 }
-.gd-ui-kit-button--size-medium.gd-ui-kit-button-right {
+.gd-ui-kit-button--size-medium.gd-ui-kit-button--hasIconAfter {
   padding-right: var(--gd-spacing-10px);
 }
 .gd-ui-kit-button--size-large {
   height: var(--gd-button-L);
-  padding: var(--gd-spacing-6px) var(--gd-spacing-20px);
+  padding: 0 var(--gd-spacing-20px);
   font-size: 16px;
-  line-height: 18px;
 }
-.gd-ui-kit-button--size-large.gd-ui-kit-button-left {
+.gd-ui-kit-button--size-large.gd-ui-kit-button--hasIconBefore {
   padding-left: var(--gd-spacing-15px);
 }
-.gd-ui-kit-button--size-large.gd-ui-kit-button-right {
+.gd-ui-kit-button--size-large.gd-ui-kit-button--hasIconAfter {
   padding-right: var(--gd-spacing-15px);
 }
 .gd-ui-kit-button--variant-primary {
@@ -352,16 +257,13 @@
   border-color: var(--gd-palette-complementary-9-t90);
   font-weight: 700;
 }
-.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):focus {
-  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
-}
-.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):hover {
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):focus-visible, .gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):hover {
   background-color: var(--gd-palette-primary-base-d06);
-  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
 .gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):active {
-  background: var(--gd-palette-primary-base-d12);
-  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+  background-color: var(--gd-palette-primary-base-d12);
+  box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
 .gd-ui-kit-button--variant-primary:disabled {
   background-color: var(--gd-palette-primary-disabled);
@@ -375,137 +277,70 @@
   background-color: var(--gd-palette-complementary-0);
   font-weight: 400;
 }
-.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):focus {
-  --gd-icon-fill-color: var(--gd-palette-primary-base);
-  color: var(--gd-palette-complementary-8);
-  background: var(--gd-palette-complementary-1);
-  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40) inset;
-}
-.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):hover {
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):focus-visible, .gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):hover {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
   border-color: var(--gd-palette-complementary-5);
-  background: var(--gd-palette-complementary-0);
-  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40) inset;
+  background-color: var(--gd-palette-complementary-1);
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40) inset;
 }
 .gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):active {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
   border-color: var(--gd-palette-complementary-5);
-  background: var(--gd-palette-complementary-3);
-  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+  background-color: var(--gd-palette-complementary-3);
+  box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
 .gd-ui-kit-button--variant-secondary:disabled {
   color: var(--gd-palette-complementary-5);
   border-color: var(--gd-palette-complementary-4);
-  background: var(--gd-palette-complementary-0);
   box-shadow: none;
 }
-.gd-ui-kit-button--variant-tertiary,
-.gd-ui-kit-chip__trigger,
-.gd-ui-kit-chip__delete {
+.gd-ui-kit-button--variant-tertiary {
   --gd-icon-fill-color: var(--gd-palette-complementary-5);
   color: var(--gd-palette-complementary-7);
+  padding: 0;
   text-decoration: underline;
   background-color: transparent;
   border-color: transparent;
 }
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):focus,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):focus,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):focus {
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus-visible, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
 }
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):hover,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):hover,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):hover {
-  --gd-icon-fill-color: var(--gd-palette-primary-base);
-  color: var(--gd-palette-complementary-8);
-}
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):active,
-.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):active,
-.gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled):active {
-  --gd-icon-fill-color: var(--gd-palette-primary-base);
-  color: var(--gd-palette-complementary-8);
-}
-.gd-ui-kit-button--variant-tertiary:disabled,
-.gd-ui-kit-chip__trigger:disabled,
-.gd-ui-kit-chip__delete:disabled {
+.gd-ui-kit-button--variant-tertiary:disabled {
   color: var(--gd-palette-complementary-5);
   text-decoration: none;
 }
-.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-small, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-medium, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-large,
-.gd-ui-kit-button-small.gd-ui-kit-chip__trigger,
-.gd-ui-kit-button-small.gd-ui-kit-chip__delete,
-.gd-ui-kit-button-medium.gd-ui-kit-chip__trigger,
-.gd-ui-kit-button-medium.gd-ui-kit-chip__delete,
-.gd-ui-kit-button-large.gd-ui-kit-chip__trigger,
-.gd-ui-kit-button-large.gd-ui-kit-chip__delete {
-  padding: 0;
-  height: auto;
-}
 .gd-ui-kit-button--variant-popout {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-primary-base);
+  padding: 0;
   background-color: transparent;
   border-color: transparent;
 }
-.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):focus {
-  text-decoration: underline;
-}
-.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):hover {
-  color: var(--gd-palette-complementary-8);
-  text-decoration: underline;
-}
-.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):active {
-  color: var(--gd-palette-primary-base);
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):hover, .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):focus-visible, .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):active {
   text-decoration: underline;
 }
 .gd-ui-kit-button--variant-popout:disabled {
   color: var(--gd-palette-complementary-5);
 }
-.gd-ui-kit-button--variant-popout.gd-ui-kit-button-small, .gd-ui-kit-button--variant-popout.gd-ui-kit-button-medium, .gd-ui-kit-button--variant-popout.gd-ui-kit-button-large {
-  padding: 0;
-  height: auto;
-}
 .gd-ui-kit-button--variant-danger {
   --gd-icon-fill-color: var(--gd-palette-complementary-0);
-  background: var(--gd-palette-error-base);
   color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-error-base);
   border-color: var(--gd-palette-complementary-9-t90);
   font-weight: 700;
 }
-.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):focus {
-  border-color: var(--gd-palette-complementary-9-t80);
-  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
-}
-.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):hover {
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):focus-visible, .gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):hover {
   border-color: var(--gd-palette-complementary-9-t80);
   background-color: var(--gd-palette-error-base-d10);
-  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
 .gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):active {
   border-color: var(--gd-palette-complementary-9-t80);
-  background: var(--gd-palette-error-base-d20);
-  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+  background-color: var(--gd-palette-error-base-d20);
+  box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
 .gd-ui-kit-button--variant-danger:disabled {
   background-color: var(--gd-palette-error-disabled);
@@ -513,13 +348,122 @@
   border-color: transparent;
 }
 
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.gd-ui-kit-icon-button {
+  border-radius: var(--gd-button-borderRadius);
+  transition: var(--gd-transition-all);
+  cursor: pointer;
+  border-style: solid;
+  border-width: 1px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  /**
+   * Size
+   */
+  /**
+   * Variant
+   */
+}
+.gd-ui-kit-icon-button:disabled {
+  cursor: default;
+}
+.gd-ui-kit-icon-button--size-small {
+  height: var(--gd-button-S);
+  width: var(--gd-button-S);
+}
+.gd-ui-kit-icon-button--size-medium {
+  height: var(--gd-button-M);
+  width: var(--gd-button-M);
+}
+.gd-ui-kit-icon-button--size-large {
+  height: var(--gd-button-L);
+  width: var(--gd-button-L);
+}
+.gd-ui-kit-icon-button--variant-primary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-primary-base);
+  border-color: var(--gd-palette-complementary-9-t90);
+}
+.gd-ui-kit-icon-button--variant-primary:not(.gd-ui-kit-icon-button--variant-primary:disabled):focus-visible, .gd-ui-kit-icon-button--variant-primary:not(.gd-ui-kit-icon-button--variant-primary:disabled):hover {
+  background-color: var(--gd-palette-primary-base-d06);
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-icon-button--variant-primary:not(.gd-ui-kit-icon-button--variant-primary:disabled):active {
+  background-color: var(--gd-palette-primary-base-d12);
+  box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-icon-button--variant-primary:disabled {
+  background-color: var(--gd-palette-primary-disabled);
+  box-shadow: none;
+  border-color: transparent;
+}
+.gd-ui-kit-icon-button--variant-secondary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  border-color: var(--gd-palette-complementary-4);
+  background-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-icon-button--variant-secondary:not(.gd-ui-kit-icon-button--variant-secondary:disabled):focus-visible, .gd-ui-kit-icon-button--variant-secondary:not(.gd-ui-kit-icon-button--variant-secondary:disabled):hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  border-color: var(--gd-palette-complementary-5);
+  background-color: var(--gd-palette-complementary-1);
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40) inset;
+}
+.gd-ui-kit-icon-button--variant-secondary:not(.gd-ui-kit-icon-button--variant-secondary:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  border-color: var(--gd-palette-complementary-5);
+  background-color: var(--gd-palette-complementary-3);
+  box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-icon-button--variant-secondary:disabled {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+  border-color: var(--gd-palette-complementary-4);
+  box-shadow: none;
+}
+.gd-ui-kit-icon-button--variant-tertiary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  background-color: transparent;
+  border-color: transparent;
+}
+.gd-ui-kit-icon-button--variant-tertiary:not(.gd-ui-kit-icon-button--variant-tertiary:disabled):hover, .gd-ui-kit-icon-button--variant-tertiary:not(.gd-ui-kit-icon-button--variant-tertiary:disabled):focus-visible, .gd-ui-kit-icon-button--variant-tertiary:not(.gd-ui-kit-icon-button--variant-tertiary:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-icon-button--variant-tertiary:disabled {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-icon-button--variant-popout {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.gd-ui-kit-icon-button--variant-popout:not(.gd-ui-kit-icon-button--variant-popout:disabled):hover, .gd-ui-kit-icon-button--variant-popout:not(.gd-ui-kit-icon-button--variant-popout:disabled):focus-visible, .gd-ui-kit-icon-button--variant-popout:not(.gd-ui-kit-icon-button--variant-popout:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-icon-button--variant-popout:disabled {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-icon-button--variant-danger {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-error-base);
+  border-color: var(--gd-palette-complementary-9-t90);
+}
+.gd-ui-kit-icon-button--variant-danger:not(.gd-ui-kit-icon-button--variant-danger:disabled):focus-visible, .gd-ui-kit-icon-button--variant-danger:not(.gd-ui-kit-icon-button--variant-danger:disabled):hover {
+  border-color: var(--gd-palette-complementary-9-t80);
+  background-color: var(--gd-palette-error-base-d10);
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-icon-button--variant-danger:not(.gd-ui-kit-icon-button--variant-danger:disabled):active {
+  border-color: var(--gd-palette-complementary-9-t80);
+  background-color: var(--gd-palette-error-base-d20);
+  box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-icon-button--variant-danger:disabled {
+  background-color: var(--gd-palette-error-disabled);
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.gd-ui-kit-icon {
+  fill: var(--gd-icon-fill-color);
 }
 .gd-ui-kit-icon--color-primary {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
@@ -560,9 +504,8 @@
 .gd-ui-kit-icon--color-complementary-9 {
   --gd-icon-fill-color: var(--gd-palette-complementary-9);
 }
-.gd-ui-kit-icon__fill {
+.gd-ui-kit-icon path {
   transition: var(--gd-transition-all);
-  fill: var(--gd-icon-fill-color);
 }
 
 @keyframes react-loading-skeleton {
@@ -681,7 +624,7 @@
 .gd-ui-kit-chip {
   height: 27px;
   max-width: 245px;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
@@ -739,10 +682,21 @@
 .gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__trigger--isActive {
   background-color: var(--gd-palette-error-lightest);
 }
-.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__delete svg {
-  --gd-icon-fill-color: var(--gd-palette-error-base);
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__delete {
+  color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-chip .gd-ui-kit-chip__trigger--isDeletable {
+  border-right: 1px solid transparent;
 }
 .gd-ui-kit-chip__trigger, .gd-ui-kit-chip__delete {
+  color: var(--gd-palette-complementary-7);
+  background-color: transparent;
+  border-radius: var(--gd-button-borderRadius);
+  transition: var(--gd-transition-all);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
   height: 100%;
   min-width: 0;
   flex-shrink: 1;
@@ -751,6 +705,10 @@
   padding: 0 10px;
   border: none;
 }
+.gd-ui-kit-chip__trigger:disabled, .gd-ui-kit-chip__delete:disabled {
+  cursor: default;
+  color: var(--gd-palette-complementary-5);
+}
 .gd-ui-kit-chip__trigger {
   border-radius: 20px 0 0 20px;
   border-right: 1px solid transparent;
@@ -770,6 +728,12 @@
   color: var(--gd-palette-complementary-7);
   border: none;
 }
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):hover, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):focus, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):active {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):hover svg, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):focus svg, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):active svg {
+  color: var(--gd-palette-primary-base);
+}
 .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger--isDeletable) {
   border-radius: 20px;
   border: none;
@@ -779,18 +743,33 @@
   border-radius: 0 20px 20px 0;
   padding: 0 7px 0 5px;
 }
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):hover, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):focus, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):active {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):hover svg, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):focus svg, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):active svg {
+  color: var(--gd-palette-error-base);
+}
 .gd-ui-kit-chip__label {
+  transition: var(--gd-transition-all);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .gd-ui-kit-chip__tag {
+  transition: var(--gd-transition-all);
   margin-left: 2px;
 }
 .gd-ui-kit-chip__icon-before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--gd-transition-all);
   margin-right: 5px;
 }
 .gd-ui-kit-chip__icon-chevron {
+  align-items: center;
+  justify-content: center;
+  transition: var(--gd-transition-all);
   display: none;
   margin-left: 5px;
 }
@@ -801,8 +780,82 @@
   display: flex;
 }
 .gd-ui-kit-chip__icon-lock {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--gd-transition-all);
   margin-left: 5px;
 }
+.gd-ui-kit-chip__icon-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--gd-transition-all);
+}
+
+.gd-ui-kit-listbox {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  min-width: 200px;
+}
+@media only screen and (max-width: 640px) {
+  .gd-ui-kit-listbox {
+    /* stylelint-disable-next-line declaration-no-important */
+    max-width: 100vw !important;
+    max-height: 100vh;
+    width: 100vw;
+  }
+}
+.gd-ui-kit-listbox__items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+.gd-ui-kit-listbox__items:focus-visible .gd-ui-kit-listbox__item--isFocused {
+  outline-offset: -2px;
+  outline: auto 5px Highlight; /* For Firefox */
+  outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
+}
+.gd-ui-kit-listbox__item {
+  padding: 8px 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-8, #464e56);
+  transition: background-color 0.2s;
+}
+.gd-ui-kit-listbox__item:hover:not(.gd-ui-kit-listbox__item--isDisabled):not(.gd-ui-kit-listbox__item--isSelected) {
+  background-color: var(--gd-palette-complementary-2, #ebeff4);
+  color: var(--gd-palette-complementary-9, #000);
+}
+.gd-ui-kit-listbox__item--isFocused {
+  background-color: var(--gd-palette-complementary-2, #ebeff4);
+  color: var(--gd-palette-complementary-9, #000);
+}
+.gd-ui-kit-listbox__item--isSelected {
+  font-weight: bold;
+  background-color: none;
+  color: var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-ui-kit-listbox__item--isSelected.gd-ui-kit-listbox__item--isFocused, .gd-ui-kit-listbox__item:hover.gd-ui-kit-listbox__item--isSelected {
+  font-weight: bold;
+  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
+  color: var(--gd-palette-primary-base, #14b2e2);
+}
+.gd-ui-kit-listbox__item--isDisabled {
+  color: var(--gd-palette-complementary-5, #b0beca);
+  cursor: not-allowed;
+}
+.gd-ui-kit-listbox__item-title {
+  width: 100%;
+  white-space: nowrap;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -2209,12 +2262,6 @@
 .is-active.gd-button-link-dimmed .gd-button-icon {
   color: var(--gd-palette-primary-base, #14b2e2);
 }
-.gd-button-link:focus, .gd-button-link-dimmed:focus {
-  box-shadow: var(--gd-button-dropShadow, 0 0 3px 0) var(--gd-palette-primary-base-t80, rgba(20, 178, 226, 0.2));
-  color: var(--gd-palette-primary-base, #14b2e2);
-  border-color: var(--gd-palette-primary-base-t70, rgba(20, 178, 226, 0.3));
-  border-radius: 2px;
-}
 .gd-button-link:hover .gd-button-text, .gd-button-link-dimmed:hover .gd-button-text, .gd-button-link:focus .gd-button-text, .gd-button-link-dimmed:focus .gd-button-text, .gd-button-link:active .gd-button-text, .gd-button-link-dimmed:active .gd-button-text, .gd-button-link.is-active .gd-button-text, .is-active.gd-button-link-dimmed .gd-button-text {
   text-decoration: underline;
 }
@@ -9320,6 +9367,21 @@ button.gd-button-primary.gd-upsell-button:active {
   margin-left: 4px;
   border: 1px solid transparent;
   font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
+  background: none;
+  box-shadow: none;
+}
+.gd-share-dialog-grantee-item .gd-granular-permission-button .gd-button-text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-8, #464e56);
+}
+.gd-share-dialog-grantee-item .gd-granular-permission-button .gd-button-icon {
+  margin-left: 4px;
+  margin-top: 2px;
+}
+.gd-share-dialog-grantee-item .gd-granular-permission-button:focus {
+  border-color: none;
 }
 .gd-share-dialog-grantee-item .gd-granular-permission-button.disabled {
   color: var(--gd-palette-complementary-5, #b0beca);
@@ -9330,6 +9392,7 @@ button.gd-button-primary.gd-upsell-button:active {
   background-color: var(--gd-palette-complementary-0, #fff);
   border: 1px solid var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2));
   border-radius: 3px;
+  box-shadow: none;
 }
 .gd-share-dialog-grantee-item .gd-granular-permission-button.is-active {
   border-radius: 3px;
@@ -11047,6 +11110,19 @@ input[type=search]::-webkit-search-cancel-button {
   gap: 5px;
   margin-top: 5px;
 }
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-repeat-type-description .gd-recurrence-form-timezone-wrapper {
+  display: flex;
+}
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-repeat-type-description .gd-recurrence-form-timezone {
+  display: inline-block;
+  white-space: nowrap;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-repeat-type-description .s-portal-scroll-anchor {
+  display: none;
+}
 @media only screen and (max-width: 640px) {
   .gd-recurrence-form .gd-recurrence-form-datetime,
   .gd-recurrence-form .gd-recurrence-form-repeat {