@gooddata/sdk-ui-kit 10.25.0-alpha.9 → 10.25.0

package/styles/css/main.css

@@ -784,6 +784,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.gd-ui-kit-chip__tag {
+  margin-left: 2px;
+}
 .gd-ui-kit-chip__icon-before {
   margin-right: 5px;
 }
@@ -800,9 +803,21 @@
 .gd-ui-kit-chip__icon-lock {
   margin-left: 5px;
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .gd-heading-1 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 30px;
@@ -811,7 +826,7 @@
 
 .gd-heading-2 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 26px;
@@ -820,7 +835,7 @@
 
 .gd-heading-3 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 23px;
@@ -828,7 +843,7 @@
 }
 
 .gd-paragraph {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 1.4rem;
   color: var(--gd-palette-complementary-8, #464e56);
@@ -836,7 +851,7 @@
 }
 
 .gd-label-top {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 1.8rem;
   color: var(--gd-palette-complementary-7, #6d7680);
@@ -845,7 +860,7 @@
 }
 
 .gd-label {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 1.8rem;
   color: var(--gd-palette-complementary-7, #6d7680);
@@ -853,7 +868,7 @@
 }
 
 .gd-label-small {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 1.8rem;
   color: var(--gd-palette-complementary-7, #6d7680);
@@ -865,7 +880,7 @@
 }
 .gd-typography--h1 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 30px;
@@ -873,7 +888,7 @@
 }
 .gd-typography--h2 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 26px;
@@ -881,14 +896,14 @@
 }
 .gd-typography--h3 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 23px;
   font-size: 17px;
 }
 .gd-typography--p {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 1.4rem;
   color: var(--gd-palette-complementary-8, #464e56);
@@ -1357,7 +1372,7 @@
 .bubble .bubble-content .content,
 .bubble .bubble-content .content p,
 .bubble .bubble-content .content a {
-  font: 400 12px/18px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font: 400 12px/18px var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 .bubble .bubble-content .content p {
   margin: 0;
@@ -1776,7 +1791,7 @@
   align-items: center;
   padding: 5px 14px;
   border: 1px solid transparent;
-  font: 400 14px/20px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font: 400 14px/20px var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
@@ -2121,7 +2136,7 @@
   display: inline-flex;
   padding: 0 6px;
   border: 1px solid transparent;
-  font: 400 14px/30px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font: 400 14px/30px var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   vertical-align: middle;
   color: var(--gd-palette-primary-base, #14b2e2);
   background: none;
@@ -2948,7 +2963,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   margin-bottom: 0.6em;
 }
 .gd-datepicker-picker .rdp-caption_label {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 17px;
   text-align: center;
   font-weight: normal;
@@ -2961,7 +2976,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   display: table-cell;
   color: var(--gd-palette-complementary-8-from-theme, #94a1ad);
   cursor: help;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-size: 13px;
   text-transform: none;
@@ -2974,7 +2989,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 .gd-datepicker-picker .rdp-day {
   padding: 0.3125em 0.55em;
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   font-weight: 700;
   text-align: center;
@@ -3071,7 +3086,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   margin-left: 0.25em;
   margin-right: 0.25em;
   margin-bottom: 1em;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 17px;
   text-align: center;
 }
@@ -3086,7 +3101,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   color: var(--gd-palette-complementary-8-from-theme, #94a1ad);
   cursor: help;
   padding-bottom: 0.5em;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-size: 13px;
   text-align: center;
@@ -3105,7 +3120,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   display: table-cell;
   padding: 0.3125em 0.55em;
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   font-weight: 700;
   text-align: center;
@@ -3253,7 +3268,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 }
 .gd-dialog-header h2 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 26px;
@@ -3261,7 +3276,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 }
 .gd-dialog-header h3 {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 23px;
@@ -3274,7 +3289,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 
 .gd-dialog-icon {
   color: var(--gd-palette-complementary-8, #464e56);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   font-weight: 700;
   line-height: 30px;
@@ -3573,7 +3588,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   color: var(--gd-palette-complementary-8, #464e56);
   background: var(--gd-palette-complementary-0, #fff);
   font-size: 14px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 200;
   border-radius: 3px;
   box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.15);
@@ -3953,7 +3968,7 @@ textarea.gd-input, textarea.input-text {
   color: var(--gd-palette-complementary-8, #464e56);
   background: var(--gd-palette-complementary-0, #fff);
   font-size: 14px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 200;
   color: var(--gd-palette-complementary-6-from-theme, #b0beca);
   min-width: 30px;
@@ -5713,7 +5728,7 @@ span.CodeMirror-selectedtext {
   padding: 15px;
   color: var(--gd-palette-complementary-6, #94a1ad);
   font-size: 14px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   text-align: center;
 }
 
@@ -5732,7 +5747,7 @@ span.CodeMirror-selectedtext {
   font-size: 12px;
   padding-top: 5px;
   border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 .gd-list-status-bar span {
   flex: 0 0 auto;
@@ -5758,7 +5773,7 @@ span.CodeMirror-selectedtext {
 }
 
 .gd-list-actions {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   margin: 0 10px 10px;
   line-height: 1;
   font-size: 12px;
@@ -5813,7 +5828,7 @@ span.CodeMirror-selectedtext {
   padding: 0 10px;
   color: var(--gd-palette-complementary-8, #464e56);
   cursor: pointer;
-  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;
   text-decoration: none;
   overflow: hidden;
@@ -6353,7 +6368,7 @@ span.CodeMirror-selectedtext {
   align-items: flex-end;
   margin: 0 20px -1px 0;
   padding: 3px 0;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 16px;
   color: var(--gd-palette-complementary-7, #6d7680);
@@ -6388,7 +6403,7 @@ span.CodeMirror-selectedtext {
   padding: 0 0 0 20px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
   color: #fff;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   background: #000;
 }
 .gd-header.is-not-loaded {
@@ -6771,7 +6786,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   min-width: 210px;
 }
 .gd-header-search-dropdown .gd-list .gd-list-item {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
 }
 
@@ -6827,7 +6842,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   min-width: 210px;
 }
 .gd-header-notifications-dropdown .gd-list .gd-list-item {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
 }
 
@@ -6940,7 +6955,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   margin: -1px 0 0 5px;
   font-size: 14px;
   line-height: 44px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 .gd-header-invite .gd-header-invite-icon {
   display: inline-block;
@@ -7160,7 +7175,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   border: none;
   justify-content: flex-start;
   font-size: 14px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   padding: 0 15px;
 }
@@ -7197,7 +7212,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   min-width: 210px;
 }
 .gd-header-account-dropdown .gd-list .gd-list-item {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
 }
 .gd-header-account-dropdown .gd-list a.gd-list-item:focus-visible {
@@ -7218,7 +7233,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
 .gd-header-help-dropdown .gd-list .gd-list-item {
   padding-top: 5px;
   padding-bottom: 5px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   white-space: unset;
 }
@@ -7405,7 +7420,7 @@ button.gd-button-primary.gd-upsell-button {
   border-radius: 3px;
   color: #fff;
   background: #8351a4;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 button.gd-button-primary.gd-upsell-button .gd-upgrade-button-text {
   margin-right: 11px;
@@ -7482,7 +7497,7 @@ button.gd-button-primary.gd-upsell-button:active {
   font: inherit;
   background: none !important;
   cursor: pointer;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   border-style: none;
   perspective-origin: 0 0;
   text-align: start;
@@ -7668,7 +7683,7 @@ button.gd-button-primary.gd-upsell-button:active {
   pointer-events: all;
   max-width: 100%;
   border-radius: 3px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   text-align: left;
 }
@@ -7829,7 +7844,7 @@ button.gd-button-primary.gd-upsell-button:active {
 }
 
 .overlay {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 400;
   line-height: 1.4rem;
   color: var(--gd-palette-complementary-8, #464e56);
@@ -7837,7 +7852,7 @@ button.gd-button-primary.gd-upsell-button:active {
   position: relative;
   padding: 0.1px;
   border-radius: 3px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   background-color: var(--gd-palette-complementary-0, #fff);
   box-shadow: 0 1px 20px var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.2));
 }
@@ -7848,7 +7863,7 @@ button.gd-button-primary.gd-upsell-button:active {
 }
 
 .gd-overlay-content {
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   line-height: 1.5;
 }
 .gd-overlay-content *,
@@ -9080,7 +9095,7 @@ button.gd-button-primary.gd-upsell-button:active {
   align-items: center;
   height: 50px;
   font-weight: normal;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   line-height: 20px;
   color: var(--gd-palette-complementary-6, #94a1ad);
@@ -9134,7 +9149,7 @@ button.gd-button-primary.gd-upsell-button:active {
 }
 .gd-share-dialog-grantee-item .gd-grantee-content-label {
   overflow: hidden;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   line-height: 1.3rem;
   white-space: nowrap;
@@ -9145,7 +9160,7 @@ button.gd-button-primary.gd-upsell-button:active {
 }
 .gd-share-dialog-grantee-item .gd-grantee-content-label-inactive {
   overflow: hidden;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   line-height: 1.3rem;
   white-space: nowrap;
@@ -9304,7 +9319,7 @@ button.gd-button-primary.gd-upsell-button:active {
   padding: 0 8px;
   margin-left: 4px;
   border: 1px solid transparent;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 .gd-share-dialog-grantee-item .gd-granular-permission-button.disabled {
   color: var(--gd-palette-complementary-5, #b0beca);
@@ -9343,7 +9358,7 @@ button.gd-button-primary.gd-upsell-button:active {
   border: 1px solid var(--gd-palette-complementary-4, #ccd8e2);
   box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.15);
   font-size: 14px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 200;
   line-height: normal;
   vertical-align: middle;
@@ -9383,7 +9398,7 @@ button.gd-button-primary.gd-upsell-button:active {
 }
 .gd-share-dialog-content-select .gd-share-dialog-input .gd-share-dialog__input input {
   width: 100% !important;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 .gd-share-dialog-content-select .gd-share-dialog__placeholder {
   position: absolute;
@@ -9435,7 +9450,7 @@ button.gd-button-primary.gd-upsell-button:active {
   margin: 4px;
   padding: 4px;
   font-size: 14px;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-weight: 200;
   line-height: normal;
   vertical-align: middle;
@@ -9857,7 +9872,7 @@ button.gd-button-primary.gd-upsell-button:active {
   min-height: 50px;
   padding-bottom: 5px;
   font-weight: normal;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   line-height: 20px;
   color: var(--gd-palette-complementary-6, #94a1ad);
@@ -9871,7 +9886,7 @@ button.gd-button-primary.gd-upsell-button:active {
   padding-top: 10px;
   text-align: center;
   font-weight: normal;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   line-height: 20px;
   color: var(--gd-palette-complementary-6, #94a1ad);
@@ -10136,7 +10151,7 @@ button.gd-button-primary.gd-upsell-button:active {
 
 .gd-styling-editor-dialog {
   display: flex;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   max-height: 560px;
   width: 100vw;
   height: 100vh;
@@ -10400,7 +10415,7 @@ input[type=search]::-webkit-search-cancel-button {
   font-size: 12px;
   padding-top: 5px;
   border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
 }
 .gd-invertable-select-selection-status span,
 .gd-invertable-select-selection-status b {
@@ -10460,7 +10475,7 @@ input[type=search]::-webkit-search-cancel-button {
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   margin: 20px;
   color: var(--gd-palette-complementary-8, #464e56);
   gap: 10px;
@@ -10535,7 +10550,7 @@ input[type=search]::-webkit-search-cancel-button {
   line-height: 20px;
   white-space: nowrap;
   color: var(--gd-palette-complementary-7-from-theme, #687581);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   font-size: 14px;
   text-decoration: none;
   gap: 10px;
@@ -10591,7 +10606,7 @@ input[type=search]::-webkit-search-cancel-button {
   flex-direction: column;
   gap: 10px;
   background-color: var(--gd-palette-complementary-0, #fff);
-  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   max-height: 510px;
   overflow: hidden;
   padding: 15px 0;
@@ -10896,15 +10911,21 @@ input[type=search]::-webkit-search-cancel-button {
 .gd-recurrence-form .gd-input-component .gd-label {
   min-width: 100px;
 }
+.gd-recurrence-form .gd-recurrence-form-repeat-cron {
+  margin-bottom: 0;
+}
 .gd-recurrence-form .gd-recurrence-form-datetime {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
 }
 .gd-recurrence-form .gd-recurrence-form-datetime > :not(:first-of-type):not(.gd-label),
 .gd-recurrence-form .gd-recurrence-form-datetime > :not(:last-of-type) {
   margin-right: 10px;
 }
+.gd-recurrence-form .gd-recurrence-form-datetime .gd-recurrence-form-datetime-timezone {
+  margin-top: 5px;
+}
 .gd-recurrence-form .gd-recurrence-form-datetime .gd-label {
   margin-right: 0;
 }
@@ -10925,11 +10946,55 @@ input[type=search]::-webkit-search-cancel-button {
   max-width: 128px;
 }
 .gd-recurrence-form .gd-recurrence-form-datetime-inner,
+.gd-recurrence-form .gd-recurrence-form-time-inner,
 .gd-recurrence-form .gd-recurrence-form-repeat-inner {
   display: flex;
   gap: 10px;
   align-items: flex-start;
 }
+.gd-recurrence-form .gd-recurrence-form-datetime-inner .gd-recurrence-form-date {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.gd-recurrence-form .gd-recurrence-form-datetime-help,
+.gd-recurrence-form .gd-recurrence-form-datetime-error-message {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 13px;
+  width: 128px;
+}
+.gd-recurrence-form .gd-recurrence-form-datetime-error-message {
+  color: #e54d42;
+}
+.gd-recurrence-form .gd-recurrence-form-datetime-help {
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper {
+  margin-bottom: 20px;
+}
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-help,
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-error-message {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 13px;
+}
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-help,
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-help a {
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-help a {
+  text-decoration: underline;
+}
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-error-message {
+  color: #e54d42;
+}
+.gd-recurrence-form .gd-recurrence-form-hint-wrapper .gd-recurrence-form-cron-error-message a {
+  text-decoration: underline;
+  color: #e54d42;
+}
 .gd-recurrence-form .gd-recurrence-form-repeat {
   display: flex;
   flex-direction: row;
@@ -10963,7 +11028,8 @@ input[type=search]::-webkit-search-cancel-button {
 .gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-help a {
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
-.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-error-message {
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-error-message,
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-error-message a {
   color: #e54d42;
 }
 .gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron-icon {
@@ -10979,6 +11045,7 @@ input[type=search]::-webkit-search-cancel-button {
   font-size: 14px;
   line-height: 19px;
   gap: 5px;
+  margin-top: 5px;
 }
 @media only screen and (max-width: 640px) {
   .gd-recurrence-form .gd-recurrence-form-datetime,
@@ -10995,4 +11062,10 @@ input[type=search]::-webkit-search-cancel-button {
   }
 }
 
+@media only screen and (min-width:641px) {
+  .gd-notifications-channel-dialog-content-wrapper .gd-recurrence-form .gd-recurrence-form-hint-wrapper {
+    margin-left: 105px;
+  }
+}
+
 /*# sourceMappingURL=main.css.map */