@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { TShowCalculationTypeCondition } from '../AdvancedPicker/types';
+import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
+    valueType?: ValueTypes;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     startDateConfig?: TDateConfig;
@@ -10,6 +11,7 @@ export interface AdvancedRangePickerProps {
     errorMessage?: string;
     showLabel?: boolean;
     showTime?: boolean;
+    timezone?: string;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -1,8 +1,9 @@
 // Libraries
 import dayjs from 'dayjs';
-import React from 'react';
+import React, { useState } from 'react';
 import omit from 'lodash/omit';
 import isEqual from 'react-fast-compare';
+import { useDeepCompareEffect } from '../../../../../hooks';
 // Atoms
 import { Space } from '../../../../atoms';
 // Molecules
@@ -16,20 +17,31 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
 export const AdvancedRangePicker = props => {
-    // const { t } = useTranslation();
     const { t } = i18nInstance;
     // Props
-    const { timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, onChange, } = props;
+    const [timeRangeState, setTimeRange] = useState(timeRange);
+    useDeepCompareEffect(() => {
+        if (typeof onChange === 'function') {
+            onChange({
+                timeRange: timeRangeState,
+                mode: 'system',
+            });
+        }
+    }, [timeRangeState]);
     // Handles
     const onUpdateTimeRange = (key, params, mode = 'user') => {
         try {
             if (typeof onChange === 'function') {
                 const newTimeRange = Object.assign(Object.assign({}, timeRange), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) });
                 if (!isEqual(newTimeRange, timeRange)) {
-                    onChange({
-                        timeRange: newTimeRange,
-                        mode,
-                    });
+                    setTimeRange(prev => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) })));
+                    if (mode === 'user') {
+                        onChange({
+                            timeRange: newTimeRange,
+                            mode,
+                        });
+                    }
                 }
             }
         }
@@ -43,8 +55,8 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20 },
-        React.createElement(AdvancedPicker, { disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: date => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
-        React.createElement(AdvancedPicker, { disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: date => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const ADVANCED_RANGE_PICKER_FORMAT: {
     startDate: string;
     endDate: string;
+    general: string;
 };

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/constants.js

@@ -1,4 +1,5 @@
 export const ADVANCED_RANGE_PICKER_FORMAT = {
     startDate: 'YYYY-MM-DD 00:00:00',
     endDate: 'YYYY-MM-DD 23:59:59',
+    general: 'YYYY-MM-DD HH:mm:ss',
 };

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/types.d.ts

@@ -1,5 +1,6 @@
 import { TCalculationType, TOption } from '../AdvancedPicker/types';
 export type TOnChangeMode = 'system' | 'user';
+/** @param {string} calculatedDate - The calculated date based on the selected dynamic date. */
 export type TTimeRange = {
     startDate: TOption & {
         date: string;

package/es/components/molecules/DatePicker/components/DropdownLabel/DropdownLabel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TAdvancedType, TOperatorKey, ValueTypes } from '../AdvancedPicker/types';
+interface DropdownLabelProps {
+    valueType?: ValueTypes;
+    date?: string;
+    format?: string;
+    type?: TAdvancedType;
+    showTime?: boolean;
+    operatorKey?: TOperatorKey;
+    formatInputDisplay?: string;
+}
+export declare const DropdownLabel: React.FC<DropdownLabelProps>;
+export {};

package/es/components/molecules/DatePicker/components/DropdownLabel/DropdownLabel.js

@@ -0,0 +1,87 @@
+// Libraries
+import dayjs from 'dayjs';
+import React from 'react';
+// Components
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { ADVANCED_PICKER_TYPE, DEFAULT_DATE_FORMAT, HIDE_TIME_LABEL_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from '../AdvancedPicker/constants';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { getFormatDisplay, getLabelQuarterRange } from '../AdvancedPicker/utils';
+export const DropdownLabel = React.memo(({ valueType, date, format, type, showTime, operatorKey, formatInputDisplay }) => {
+    var _a;
+    const { t } = i18nInstance;
+    const title = (_a = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)) === null || _a === void 0 ? void 0 : _a.label;
+    const { timeFormatDisplay } = getFormatDisplay(operatorKey, type, valueType, formatInputDisplay);
+    let formatLabel = 'dddd, MMMM DD, YYYY';
+    let subLabel = '';
+    switch (valueType) {
+        case 'YEAR':
+            formatLabel = 'YYYY';
+            break;
+        case 'YEAR_QUARTER':
+            formatLabel = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+            subLabel = getLabelQuarterRange(date, format || DEFAULT_DATE_FORMAT, 'en');
+            // subLabel = getLabelQuarterRange(date!, format || DEFAULT_DATE_FORMAT, locale);
+            break;
+        case 'YEAR_MONTH':
+            formatLabel = 'MMMM, YYYY';
+            break;
+        case 'YEAR_WEEK': {
+            const dayObj = dayjs(date || new Date(), format).locale('en');
+            // const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
+            formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
+            subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
+                .day(6)
+                .format('MMMM DD, YYYY')}`;
+            // subLabel = `${dayjs(dayObj)
+            //   .day(['today', 'first_day_of_week_mon_sun'].includes(dateType || '') ? 1 : 0)
+            //   .format('MMMM DD, YYYY')} - ${dayjs(dayObj)
+            //   .day(['today', 'first_day_of_week_mon_sun'].includes(dateType || '') ? 7 : 6)
+            //   .format('MMMM DD, YYYY')}`;
+            break;
+        }
+        case 'YEAR_MONTH_DAY_HOUR':
+            formatLabel = 'dddd, MMMM DD, YYYY';
+            break;
+        case 'QUARTER':
+            formatLabel = `${QUARTER_PLACEHOLDER}Q`;
+            break;
+        case 'MONTH':
+            formatLabel = 'MMMM';
+            break;
+        case 'WEEK':
+            formatLabel = `${WEEK_PLACEHOLDER}W`;
+            break;
+        case 'MONTH_DAY':
+            formatLabel = 'MMMM DD';
+            break;
+        case 'DAY_OF_WEEK':
+            formatLabel = 'dddd';
+            break;
+        case 'DAY':
+            formatLabel = 'DD';
+            break;
+        case 'HOUR':
+            formatLabel = 'HH:00:00';
+            break;
+        case 'MINUTE':
+            formatLabel = '00:mm:00';
+            break;
+        default:
+            break;
+    }
+    return (React.createElement("div", { style: { textAlign: 'center' } },
+        title && operatorKey === 'between' && (React.createElement(Typography.Text, { className: "__title", style: { color: '#666666' } }, t(title))),
+        React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
+            .locale('en')
+            // .locale(locale || 'en')
+            .format(formatLabel)
+            .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+            .replace(WEEK_PLACEHOLDER, 'Week ')),
+        subLabel ? React.createElement("div", null, subLabel) : null,
+        !HIDE_TIME_LABEL_ARR.includes(valueType || '') && showTime && !subLabel ? (React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
+            .locale('en')
+            // .locale(locale || 'en')
+            .format(timeFormatDisplay))) : null));
+});

package/es/components/molecules/DatePicker/components/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ErrorMessageProps {
+    errorMessage?: string;
+}
+export declare const ErrorMessage: React.FC<ErrorMessageProps>;
+export {};

package/es/components/molecules/DatePicker/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon from '@antscorp/icons';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const ErrorMessage = React.memo(({ errorMessage }) => {
+    var _a;
+    if (!errorMessage)
+        return null;
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 5 } },
+        React.createElement(Icon, { type: "icon-ants-remove-circle", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError } }),
+        React.createElement(Typography.Text, { type: "danger" }, errorMessage)));
+});

package/es/components/molecules/Drawer/Drawer.d.ts

@@ -1 +1,5 @@
-export declare const Drawer: any;
+import React from 'react';
+import { DrawerProps as AtndDrawerProps } from 'antd';
+export interface DrawerProps extends AtndDrawerProps {
+}
+export declare const Drawer: React.FC<DrawerProps>;

package/es/components/molecules/Drawer/Drawer.js

@@ -1,2 +1,4 @@
+// Libraries
+import React from 'react';
 import { Drawer as AntdDrawer } from 'antd';
-export const Drawer = AntdDrawer;
+export const Drawer = props => React.createElement(AntdDrawer, Object.assign({}, props));

package/es/components/molecules/Drawer/index.d.ts

@@ -1 +1,2 @@
 export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/es/components/molecules/EditorScript/EditorScript.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { IAceEditorProps } from 'react-ace';
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+interface EditorScriptProps extends IAceEditorProps {
+    label?: string | ReactNode;
+    expandModalLabel?: string | ReactNode;
+    hideExpand?: boolean | ReactNode;
+}
+export declare const EditorScript: React.FC<EditorScriptProps>;
+export {};

package/es/components/molecules/EditorScript/EditorScript.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Button, Icon } from '../../atoms';
+// Molecules
+import { Modal } from '../Modal';
+// Styled
+import { EditorScriptWrapper } from './styled';
+// Ace editor
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
+export const EditorScript = props => {
+    // Props
+    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
+    // State
+    const [isExpandEditor, setExpandEditor] = useState(false);
+    const { t } = i18nInstance;
+    const renderAceEditor = (aceHeight = height) => {
+        try {
+            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderAceEditor',
+                args: {},
+            });
+        }
+    };
+    const onCancelModal = () => {
+        try {
+            setExpandEditor(false);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onCancelModal',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditorScriptWrapper, { className: className },
+            label && React.createElement("div", { className: "ants-mb-5" }, label),
+            renderAceEditor(),
+            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
+                    setExpandEditor(true);
+                } },
+                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
+                        transform: 'scaleX(-1)',
+                    } }),
+                t(translations.expandEditor.title)))),
+        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close.title)) }, renderAceEditor('500px'))));
+};
+EditorScript.defaultProps = {
+    expandModalLabel: 'Editor Script',
+    mode: 'javascript',
+    theme: 'tomorrow',
+    name: 'Editor Script',
+    placeholder: '',
+    fontSize: 12,
+    showPrintMargin: true,
+    showGutter: true,
+    highlightActiveLine: true,
+    setOptions: {},
+    hideExpand: false,
+    height: '267px',
+};

package/es/components/molecules/EditorScript/index.d.ts

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/index.js

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/styled.d.ts

@@ -0,0 +1 @@
+export declare const EditorScriptWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/EditorScript/styled.js

@@ -0,0 +1,3 @@
+// Libraries
+import styled from 'styled-components';
+export const EditorScriptWrapper = styled.div ``;

package/es/components/molecules/FontFamilySelect/constants.d.ts

@@ -0,0 +1,307 @@
+export declare const OPTION_FONT_FAMILY: readonly [{
+    readonly label: "Arial";
+    readonly value: "Arial";
+    readonly style: {
+        readonly fontFamily: "Arial";
+    };
+}, {
+    readonly label: "Sacramento";
+    readonly value: "Sacramento";
+    readonly style: {
+        readonly fontFamily: "Sacramento";
+    };
+}, {
+    readonly label: "PT Serif";
+    readonly value: "PT Serif";
+    readonly style: {
+        readonly fontFamily: "PT Serif";
+    };
+}, {
+    readonly label: "Georgia";
+    readonly value: "Georgia";
+    readonly style: {
+        readonly fontFamily: "Georgia";
+    };
+}, {
+    readonly label: "Helvetica";
+    readonly value: "Helvetica";
+    readonly style: {
+        readonly fontFamily: "Helvetica";
+    };
+}, {
+    readonly label: "Helvetica Neue";
+    readonly value: "Helvetica Neue";
+    readonly style: {
+        readonly fontFamily: "Helvetica Neue";
+    };
+}, {
+    readonly label: "Lucida Grande";
+    readonly value: "Lucida Grande";
+    readonly style: {
+        readonly fontFamily: "Lucida Grande";
+    };
+}, {
+    readonly label: "Tahoma";
+    readonly value: "Tahoma";
+    readonly style: {
+        readonly fontFamily: "Tahoma";
+    };
+}, {
+    readonly label: "Times New Roman";
+    readonly value: "Times New Roman";
+    readonly style: {
+        readonly fontFamily: "Times New Roman";
+    };
+}, {
+    readonly label: "Verdana";
+    readonly value: "Verdana";
+    readonly style: {
+        readonly fontFamily: "Verdana";
+    };
+}, {
+    readonly label: "Abril Fatface";
+    readonly value: "Abril Fatface";
+    readonly style: {
+        readonly fontFamily: "Abril Fatface";
+    };
+}, {
+    readonly label: "Aleo";
+    readonly value: "Aleo";
+    readonly style: {
+        readonly fontFamily: "Aleo";
+    };
+}, {
+    readonly label: "Arvo";
+    readonly value: "arvo";
+    readonly style: {
+        readonly fontFamily: "Arvo";
+    };
+}, {
+    readonly label: "Bitter";
+    readonly value: "bitter";
+    readonly style: {
+        readonly fontFamily: "Bitter";
+    };
+}, {
+    readonly label: "Bree Serif";
+    readonly value: "Bree Serif";
+    readonly style: {
+        readonly fontFamily: "Bree Serif";
+    };
+}, {
+    readonly label: "Cabin";
+    readonly value: "Cabin";
+    readonly style: {
+        readonly fontFamily: "Cabin";
+    };
+}, {
+    readonly label: "Cookie";
+    readonly value: "Cookie";
+    readonly style: {
+        readonly fontFamily: "Cookie";
+    };
+}, {
+    readonly label: "Delius Swash Caps";
+    readonly value: "Delius Swash Caps";
+    readonly style: {
+        readonly fontFamily: "Delius Swash Caps";
+    };
+}, {
+    readonly label: "Dosis";
+    readonly value: "Dosis";
+    readonly style: {
+        readonly fontFamily: "Dosis";
+    };
+}, {
+    readonly label: "Droid Sans";
+    readonly value: "Droid Sans";
+    readonly style: {
+        readonly fontFamily: "Droid Sans";
+    };
+}, {
+    readonly label: "Droid Serif";
+    readonly value: "Droid Serif";
+    readonly style: {
+        readonly fontFamily: "Droid Serif";
+    };
+}, {
+    readonly label: "EB Garamond";
+    readonly value: "EB Garamond";
+    readonly style: {
+        readonly fontFamily: "EB Garamond";
+    };
+}, {
+    readonly label: "Josefin Slab";
+    readonly value: "Josefin Slab";
+    readonly style: {
+        readonly fontFamily: "Josefin Slab";
+    };
+}, {
+    readonly label: "Just Another Hand";
+    readonly value: "Just Another Hand";
+    readonly style: {
+        readonly fontFamily: "Just Another Hand";
+    };
+}, {
+    readonly label: "Lakki Reddy";
+    readonly value: "Lakki Reddy";
+    readonly style: {
+        readonly fontFamily: "Lakki Reddy";
+    };
+}, {
+    readonly label: "Lato";
+    readonly value: "Lato";
+    readonly style: {
+        readonly fontFamily: "Lato";
+    };
+}, {
+    readonly label: "Libre Baskerville";
+    readonly value: "Libre Baskerville";
+    readonly style: {
+        readonly fontFamily: "Libre Baskerville";
+    };
+}, {
+    readonly label: "Lobster";
+    readonly value: "Lobster";
+    readonly style: {
+        readonly fontFamily: "Lobster";
+    };
+}, {
+    readonly label: "Lora";
+    readonly value: "Lora";
+    readonly style: {
+        readonly fontFamily: "Lora";
+    };
+}, {
+    readonly label: "Mali";
+    readonly value: "Mali";
+    readonly style: {
+        readonly fontFamily: "Mali";
+    };
+}, {
+    readonly label: "Merriweather";
+    readonly value: "Merriweather";
+    readonly style: {
+        readonly fontFamily: "Merriweather";
+    };
+}, {
+    readonly label: "Montserrat";
+    readonly value: "Montserrat";
+    readonly style: {
+        readonly fontFamily: "Montserrat";
+    };
+}, {
+    readonly label: "Noto Sans";
+    readonly value: "Noto Sans";
+    readonly style: {
+        readonly fontFamily: "Noto Sans";
+    };
+}, {
+    readonly label: "Noto Serif";
+    readonly value: "Noto Serif";
+    readonly style: {
+        readonly fontFamily: "Noto Serif";
+    };
+}, {
+    readonly label: "Nunito";
+    readonly value: "Nunito";
+    readonly style: {
+        readonly fontFamily: "Nunito";
+    };
+}, {
+    readonly label: "Open Sans";
+    readonly value: "Open Sans";
+    readonly style: {
+        readonly fontFamily: "Open Sans";
+    };
+}, {
+    readonly label: "Oswald";
+    readonly value: "Oswald";
+    readonly style: {
+        readonly fontFamily: "Oswald";
+    };
+}, {
+    readonly label: "Poppins";
+    readonly value: "Poppins";
+    readonly style: {
+        readonly fontFamily: "Poppins";
+    };
+}, {
+    readonly label: "PT Sans";
+    readonly value: "PT Sans";
+    readonly style: {
+        readonly fontFamily: "PT Sans";
+    };
+}, {
+    readonly label: "Pinyon Script";
+    readonly value: "Pinyon Script";
+    readonly style: {
+        readonly fontFamily: "Pinyon Script";
+    };
+}, {
+    readonly label: "Playfair Display";
+    readonly value: "Playfair Display";
+    readonly style: {
+        readonly fontFamily: "Playfair Display";
+    };
+}, {
+    readonly label: "Quicksand";
+    readonly value: "Quicksand";
+    readonly style: {
+        readonly fontFamily: "Quicksand";
+    };
+}, {
+    readonly label: "Raleway";
+    readonly value: "Raleway";
+    readonly style: {
+        readonly fontFamily: "Raleway";
+    };
+}, {
+    readonly label: "Righteous";
+    readonly value: "Righteous";
+    readonly style: {
+        readonly fontFamily: "Righteous";
+    };
+}, {
+    readonly label: "Roboto Slab";
+    readonly value: "Roboto Slab";
+    readonly style: {
+        readonly fontFamily: "Roboto Slab";
+    };
+}, {
+    readonly label: "Roboto";
+    readonly value: "Roboto";
+    readonly style: {
+        readonly fontFamily: "Roboto";
+    };
+}, {
+    readonly label: "Rubik";
+    readonly value: "Rubik";
+    readonly style: {
+        readonly fontFamily: "Rubik";
+    };
+}, {
+    readonly label: "Sarabun";
+    readonly value: "Sarabun";
+    readonly style: {
+        readonly fontFamily: "Sarabun";
+    };
+}, {
+    readonly label: "Source Sans Pro";
+    readonly value: "Source Sans Pro";
+    readonly style: {
+        readonly fontFamily: "Source Sans Pro";
+    };
+}, {
+    readonly label: "Ubuntu";
+    readonly value: "Ubuntu";
+    readonly style: {
+        readonly fontFamily: "Ubuntu";
+    };
+}, {
+    readonly label: "Vollkorn";
+    readonly value: "Vollkorn";
+    readonly style: {
+        readonly fontFamily: "Vollkorn";
+    };
+}];