@gooddata/sdk-ui-kit 10.25.0-alpha.5 → 10.25.0-alpha.50

package/esm/sdk-ui-kit.d.ts

@@ -475,10 +475,7 @@ export declare class ConfirmDialog extends PureComponent<IConfirmDialogBaseProps
 /**
  * @internal
  */
-export declare class ConfirmDialogBase extends DialogBase<IConfirmDialogBaseProps> {
-    static defaultProps: IConfirmDialogBaseProps;
-    render(): JSX.Element;
-}
+export declare const ConfirmDialogBase: React_2.NamedExoticComponent<IConfirmDialogBaseProps>;
 
 /**
  * @internal
@@ -591,20 +588,12 @@ export declare const DescriptionPanelContent: React_2.FC<IDescriptionPanelProps>
 /**
  * @internal
  */
-export declare class Dialog extends Component<IDialogBaseProps> {
-    render(): JSX.Element;
-}
+export declare const Dialog: React_2.NamedExoticComponent<IDialogProps>;
 
 /**
  * @internal
  */
-export declare class DialogBase<P extends IDialogBaseProps> extends PureComponent<P> {
-    static defaultProps: Partial<IDialogBaseProps>;
-    protected onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void | undefined;
-    protected getDialogClasses(additionalClassName?: string): string;
-    protected renderCloseButton(): JSX.Element;
-    render(): JSX.Element;
-}
+export declare const DialogBase: React_2.NamedExoticComponent<IDialogBaseProps>;
 
 /**
  * @internal
@@ -700,6 +689,7 @@ export declare type EmbedOptionsType = IReactOptions | IWebComponentsOptions;
 export declare type EmbedType = "react" | "webComponents";
 
 /**
+ * @deprecated use `event.key` or `event.code`. See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
  * @internal
  */
 export declare enum ENUM_KEY_CODE {
@@ -717,19 +707,12 @@ export declare class ErrorOverlay extends React_2.PureComponent<IErrorOverlayPro
 /**
  * @internal
  */
-export declare const ExportDialog: (props: IExportDialogBaseProps) => JSX.Element;
+export declare const ExportDialog: React_2.NamedExoticComponent<IExportDialogProps>;
 
 /**
  * @internal
  */
-export declare class ExportDialogBase extends DialogBase<IExportDialogBaseProps> {
-    static defaultProps: IExportDialogBaseProps;
-    state: IExportDialogBaseState;
-    render(): JSX.Element;
-    private onFilterContextChange;
-    private onMergeHeadersChange;
-    private onSubmit;
-}
+export declare const ExportDialogBase: React_2.NamedExoticComponent<IExportDialogBaseProps>;
 
 /**
  * @internal
@@ -1497,11 +1480,10 @@ export declare const Icon: Record<string, React_2.FC<IIconProps>>;
 /**
  * @internal
  */
-export declare interface IConfirmDialogBaseProps extends IDialogBaseProps {
+export declare interface IConfirmDialogBaseProps extends Omit<IDialogBaseProps, "accessibilityConfig"> {
     isSubmitDisabled?: boolean;
     isCancelDisabled?: boolean;
     isPositive?: boolean;
-    headline?: string;
     cancelButtonText?: string;
     submitButtonText?: string;
     submitButtonTooltipText?: string;
@@ -1513,11 +1495,12 @@ export declare interface IConfirmDialogBaseProps extends IDialogBaseProps {
     footerLeftRenderer?: () => JSX.Element;
     dialogHeaderClassName?: string;
     titleRightIconRenderer?: () => JSX.Element;
-    /**
-     * If true, the dialog will autofocus on the first focusable element when it is opened.
-     * Default is true.
-     */
-    autofocusOnOpen?: boolean;
+    headline?: string;
+    accessibilityConfig?: {
+        closeButton?: IButtonAccessibilityConfig;
+        titleElementId?: string;
+        descriptionElementId?: string;
+    };
 }
 
 /**
@@ -1634,6 +1617,8 @@ export declare interface IDialogBaseProps {
     displayCloseButton?: boolean;
     accessibilityConfig?: {
         closeButton?: IButtonAccessibilityConfig;
+        titleElementId?: string;
+        descriptionElementId?: string;
     };
     submitOnEnterKey?: boolean;
     onCancel?: (data?: any) => void;
@@ -1647,8 +1632,19 @@ export declare interface IDialogBaseProps {
     onClick?: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onMouseOver?: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onMouseUp?: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * If true, the dialog will autofocus on the first focusable element when it is opened.
+     * Default is true.
+     */
+    autofocusOnOpen?: boolean;
+    CloseButton?: React_2.ComponentType<IDialogCloseButtonProps>;
 }
 
+/**
+ * @internal
+ */
+export declare type IDialogCloseButtonProps = Pick<IDialogBaseProps, "onClose" | "accessibilityConfig">;
+
 /**
  * @internal
  */
@@ -1706,6 +1702,20 @@ export declare interface IDialogListProps<T extends IDialogListItem = IDialogLis
     onItemDelete?: (item: T) => void;
 }
 
+/**
+ * @internal
+ */
+export declare interface IDialogProps extends IDialogBaseProps {
+    /**
+     * These properties will be placed to the container, which wraps overlay background and dialog content elements
+     */
+    containerClassName?: string;
+    shouldCloseOnClick?: (e: Event) => boolean;
+    onClick?: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseOver?: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseUp?: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
 /**
  * @internal
  */
@@ -1978,12 +1988,7 @@ export declare interface IErrorOverlayProps {
 /**
  * @internal
  */
-export declare interface IExportDialogBaseProps extends IDialogBaseProps {
-    isSubmitDisabled?: boolean;
-    isPositive?: boolean;
-    headline?: string;
-    cancelButtonText?: string;
-    submitButtonText?: string;
+export declare interface IExportDialogBaseProps extends Pick<IConfirmDialogBaseProps, "className" | "displayCloseButton" | "isPositive" | "isSubmitDisabled" | "headline" | "cancelButtonText" | "submitButtonText" | "onCancel"> {
     filterContextText?: string;
     filterContextTitle?: string;
     filterContextVisible?: boolean;
@@ -1992,22 +1997,19 @@ export declare interface IExportDialogBaseProps extends IDialogBaseProps {
     mergeHeadersDisabled?: boolean;
     mergeHeadersText?: string;
     mergeHeadersTitle?: string;
+    onSubmit?: (data: IExportDialogData) => void;
 }
 
 /**
  * @internal
  */
-export declare interface IExportDialogBaseState {
-    includeFilterContext: boolean;
-    mergeHeaders: boolean;
-}
+export declare type IExportDialogData = Pick<IExportDialogBaseProps, "includeFilterContext" | "mergeHeaders">;
 
 /**
  * @internal
  */
-export declare interface IExportDialogData {
-    includeFilterContext: boolean;
-    mergeHeaders: boolean;
+export declare interface IExportDialogProps extends IExportDialogBaseProps {
+    containerClassName?: string;
 }
 
 /**
@@ -2338,6 +2340,12 @@ export declare interface IHubspotConversionTouchPointDialogBaseProps {
      * Form submitted callback function
      */
     onFormSubmitted?: () => void;
+    /**
+     * Properties enabling proper accessibility
+     */
+    accessibilityConfig?: {
+        titleElementId: string;
+    };
 }
 
 /**
@@ -2415,6 +2423,7 @@ export declare interface IInsightListItemProps {
     useRichText?: boolean;
     useReferences?: boolean;
     metadataTimeZone?: string;
+    richTextExecConfig?: IExecutionConfig;
     LoadingComponent?: React_2.ComponentType;
 }
 
@@ -2892,6 +2901,10 @@ export declare interface IMediaQueries {
      * Is screen classified as 'md' or larger?
      */
     ">=md": string;
+    /**
+     * Is screen classified as 'md' or smaller?
+     */
+    "<=md": string;
     /**
      * Is screen classified as 'md'?
      */
@@ -3498,7 +3511,8 @@ export declare interface IReactOptions {
  */
 export declare interface IRecurrenceFormProps {
     startDate?: Date | null;
-    cronExpression: string;
+    cronExpression?: string;
+    placeholder?: string;
     onChange: (cronExpression: string, startDate: Date | null, isValid: boolean) => void;
     locale?: string;
     dateFormat?: string;
@@ -3511,6 +3525,7 @@ export declare interface IRecurrenceFormProps {
     allowHourlyRecurrence?: boolean;
     showRepeatTypeDescription?: boolean;
     showTimezoneInOccurrence?: boolean;
+    showInheritValue?: boolean;
     onRecurrenceDropdownOpen?: () => void;
 }
 
@@ -3520,10 +3535,13 @@ export declare interface IRecurrenceFormProps {
 export declare interface IRecurrenceProps {
     label: string;
     showRepeatTypeDescription?: boolean;
+    showInheritValue?: boolean;
     recurrenceType: RecurrenceType;
+    inheritRecurrenceType?: RecurrenceType;
     startDate?: Date | null;
     timezone?: string;
     cronValue: string;
+    cronPlaceholder?: string;
     weekStart?: WeekStart;
     onRepeatTypeChange: (repeatType: string) => void;
     onCronValueChange: (cronValue: string, isValid: boolean) => void;
@@ -3612,6 +3630,10 @@ export declare interface IRichTextProps {
      * Filters to be used for rendering references.
      */
     filters?: IFilter[];
+    /**
+     * If true, the filters are loading.
+     */
+    isFiltersLoading?: boolean;
     /**
      * Separators to be used for rendering references.
      */
@@ -4014,21 +4036,7 @@ export declare const isSpaceKey: (event: KeyboardEvent_2) => boolean;
 /**
  * @internal
  */
-export declare interface IStylingEditorDialogFooterProps extends IDialogBaseProps {
-    link: {
-        text: string;
-        url: string;
-    };
-    disableSubmit?: boolean;
-    showProgressIndicator?: boolean;
-    errorMessage?: string;
-    onHelpClick?: () => void;
-}
-
-/**
- * @internal
- */
-export declare interface IStylingEditorDialogProps<T extends StylingPickerItemContent> extends IStylingEditorDialogFooterProps {
+export declare interface IStylingEditorDialogProps<T extends StylingPickerItemContent> extends TStylingEditorDialogFooterProps, Pick<IDialogBaseProps, "onClose" | "className"> {
     title: string;
     tooltip?: string;
     stylingItem?: IStylingPickerItem<T>;
@@ -4210,6 +4218,7 @@ export declare interface ITypographyProps {
     className?: string;
     onClick?: (e: React_2.MouseEvent) => void;
     title?: string;
+    id?: string;
 }
 
 /**
@@ -4695,6 +4704,7 @@ export declare const Recurrence: React_2.FC<IRecurrenceProps>;
  * @internal
  */
 export declare const RECURRENCE_TYPES: {
+    INHERIT: string;
     HOURLY: string;
     DAILY: string;
     WEEKLY: string;
@@ -4992,7 +5002,7 @@ export declare const StylingEditorDialog: <T extends StylingPickerItemContent>(p
 /**
  * @internal
  */
-export declare const StylingEditorDialogFooter: (props: IStylingEditorDialogFooterProps) => React_2.JSX.Element;
+export declare const StylingEditorDialogFooter: (props: TStylingEditorDialogFooterProps) => React_2.JSX.Element;
 
 /**
  * @internal
@@ -5135,9 +5145,24 @@ export declare function transform2Dropdown<T extends IDateDataset>(dateDatasets:
  * @param date - date to compare with cron expression
  * @param cronExpression - cron expression to transform
  * @param allowHourlyRecurrence - whether hourly recurrence is allowed
+ * @param allowInheritValue - whether inherit value is allowed
  * @param weekStart - Week start day
  */
-export declare const transformCronExpressionToRecurrenceType: (date: Date | null, cronExpression: string, allowHourlyRecurrence: boolean, weekStart: WeekStart) => RecurrenceType;
+export declare const transformCronExpressionToRecurrenceType: (date: Date | null, cronExpression: string | undefined, allowHourlyRecurrence: boolean, allowInheritValue: boolean, weekStart: WeekStart) => RecurrenceType;
+
+/**
+ * @internal
+ */
+export declare type TStylingEditorDialogFooterProps = {
+    link: {
+        text: string;
+        url: string;
+    };
+    disableSubmit?: boolean;
+    showProgressIndicator?: boolean;
+    errorMessage?: string;
+    onHelpClick?: () => void;
+} & Pick<IDialogBaseProps, "onCancel" | "onSubmit">;
 
 /**
  * @internal
@@ -5207,7 +5232,12 @@ export declare interface UiFocusTrapProps {
     children: React_2.ReactNode;
     autofocusOnOpen?: boolean;
     onDeactivate?: () => void;
-    returnFocusTo?: React_2.RefObject<HTMLElement>;
+    /**
+     * Specify the element to return focus to when the trap is deactivated/closed.
+     * If a string is provided, the focus will be returned to the element with the given id.
+     * If a ref is provided, the focus will be returned to the element referenced by the ref.
+     */
+    returnFocusTo?: React_2.RefObject<HTMLElement> | string;
 }
 
 /**
@@ -5258,7 +5288,7 @@ export declare interface UiPagedVirtualListSkeletonItemProps {
 /**
  * @internal
  */
-export declare function UiSkeleton({ itemsCount, itemHeight, itemWidth, itemsGap, direction, }: UiSkeletonProps): React_2.JSX.Element;
+export declare function UiSkeleton({ itemsCount, itemHeight, itemWidth, itemsGap, direction, itemBorderRadius, }: UiSkeletonProps): React_2.JSX.Element;
 
 /**
  * @internal
@@ -5284,6 +5314,10 @@ export declare interface UiSkeletonProps {
      * Whether to render the skeleton in a row or column.
      */
     direction?: "row" | "column";
+    /**
+     * Border radius of the item.
+     */
+    itemBorderRadius?: number;
 }
 
 /**

package/esm/typings/utilities.d.ts

@@ -1,4 +1,5 @@
 /**
+ * @deprecated use `event.key` or `event.code`. See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
  * @internal
  */
 export declare enum ENUM_KEY_CODE {

package/esm/typings/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/typings/utilities.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,oBAAY,aAAa;IACrB,cAAc,KAAK;IACnB,eAAe,KAAK;CACvB"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/typings/utilities.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,oBAAY,aAAa;IACrB,cAAc,KAAK;IACnB,eAAe,KAAK;CACvB"}

package/esm/typings/utilities.js

@@ -1,5 +1,6 @@
-// (C) 2020 GoodData Corporation
+// (C) 2020-2025 GoodData Corporation
 /**
+ * @deprecated use `event.key` or `event.code`. See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
  * @internal
  */
 export var ENUM_KEY_CODE;

package/esm/typings/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../../src/typings/utilities.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC;;GAEG;AACH,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,sEAAmB,CAAA;IACnB,wEAAoB,CAAA;AACxB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB"}
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../../src/typings/utilities.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC;;;GAGG;AACH,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,sEAAmB,CAAA;IACnB,wEAAoB,CAAA;AACxB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.25.0-alpha.5",
+  "version": "10.25.0-alpha.50",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -68,11 +68,11 @@
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
     "unified": "^11.0.5",
-    "@gooddata/sdk-backend-spi": "10.25.0-alpha.5",
-    "@gooddata/sdk-ui": "10.25.0-alpha.5",
-    "@gooddata/sdk-model": "10.25.0-alpha.5",
-    "@gooddata/util": "10.25.0-alpha.5",
-    "@gooddata/sdk-ui-theme-provider": "10.25.0-alpha.5"
+    "@gooddata/sdk-backend-spi": "10.25.0-alpha.50",
+    "@gooddata/sdk-ui": "10.25.0-alpha.50",
+    "@gooddata/sdk-model": "10.25.0-alpha.50",
+    "@gooddata/util": "10.25.0-alpha.50",
+    "@gooddata/sdk-ui-theme-provider": "10.25.0-alpha.50"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -131,8 +131,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.25.0-alpha.5",
-    "@gooddata/sdk-backend-mockingbird": "10.25.0-alpha.5"
+    "@gooddata/reference-workspace": "10.25.0-alpha.50",
+    "@gooddata/sdk-backend-mockingbird": "10.25.0-alpha.50"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",

package/src/@ui/UiChip/UiChip.scss

@@ -154,6 +154,8 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
 
     &__tag {
         @extend %ui-button__text;
+
+        margin-left: 2px;
     }
 
     &__icon-before {

package/styles/css/aria.css

@@ -0,0 +1,13 @@
+.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;
+}
+
+/*# sourceMappingURL=aria.css.map */

package/styles/css/aria.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/aria.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"aria.css"}

package/styles/css/bubble.css

@@ -90,7 +90,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;

package/styles/css/button.css

@@ -14,7 +14,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;
@@ -359,7 +359,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;

package/styles/css/datepicker.css

@@ -443,7 +443,7 @@
   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;
@@ -456,7 +456,7 @@
   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;
@@ -469,7 +469,7 @@
 .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;
@@ -566,7 +566,7 @@
   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;
 }
@@ -581,7 +581,7 @@
   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;
@@ -600,7 +600,7 @@
   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;

package/styles/css/descriptionPanel.css

@@ -31,7 +31,7 @@
   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;

package/styles/css/dialog.css

@@ -121,7 +121,7 @@
 }
 .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;
@@ -129,7 +129,7 @@
 }
 .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;
@@ -142,7 +142,7 @@
 
 .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;

package/styles/css/dialogList.css

@@ -6,7 +6,7 @@
   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);
@@ -20,7 +20,7 @@
   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);

package/styles/css/form.css

@@ -33,7 +33,7 @@
   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);
@@ -413,7 +413,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;