import { a as __awaiter, _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { useState, useEffect } from 'react';
import dayjs from 'dayjs';
import './index-91c6a49c.js';
import { L as LOCALE } from './Locale-87b46912.js';
import { notifications, Notifications } from '@mantine/notifications';
import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-a8162282.js';
import { em, rem } from '@mantine/core';
import { C as CommonGAssets } from './index-43584299.js';
import { theme } from './miscTheme.js';
import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-32d7d5af.js';
import { C as CustomStylesType, F as FontWeight } from './index-38e03570.js';
import { A as ANIMATION_DURATION } from './shared-3674950a.js';

// Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
const MAPPED_LOCALE = {
    [LOCALE.Vietnam]: 'vi',
    [LOCALE.Cambodia]: 'km',
    [LOCALE.India]: 'hi',
    [LOCALE.Indonesia]: 'id',
    [LOCALE.Malaysia]: 'ms',
    [LOCALE.Thailand]: 'th',
    [LOCALE.Taiwan]: 'zh-tw',
    [LOCALE.PhilippinesTagalog]: 'tl-ph',
    [LOCALE.PhilippinesEnglish]: 'en',
    [LOCALE.Myanmar]: 'my',
    [LOCALE.Singapore]: 'zh-cn',
};
const LOCALE_LOADERS = {
    [LOCALE.Vietnam]: () => import('dayjs/locale/vi.js'),
    [LOCALE.Cambodia]: () => import('dayjs/locale/km.js'),
    [LOCALE.India]: () => import('dayjs/locale/hi.js'),
    [LOCALE.Indonesia]: () => import('dayjs/locale/id.js'),
    [LOCALE.Malaysia]: () => import('dayjs/locale/ms.js'),
    [LOCALE.Thailand]: () => import('dayjs/locale/th.js'),
    [LOCALE.Taiwan]: () => import('dayjs/locale/zh-tw.js'),
    [LOCALE.Singapore]: () => import('dayjs/locale/zh-cn.js'),
    [LOCALE.PhilippinesTagalog]: () => import('dayjs/locale/tl-ph.js'),
    [LOCALE.PhilippinesEnglish]: () => import('dayjs/locale/en.js'),
    [LOCALE.Myanmar]: () => import('dayjs/locale/my.js'),
};
const useMantineLocale = (locale) => {
    const [isLoaded, setIsLoaded] = useState(false);
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            var _a;
            setIsLoaded(false);
            yield ((_a = LOCALE_LOADERS[locale]) === null || _a === void 0 ? void 0 : _a.call(LOCALE_LOADERS));
            dayjs.locale(MAPPED_LOCALE[locale]);
            setIsLoaded(true);
        }))();
    }, [locale]);
    return {
        isLoaded,
    };
};

const GlobalButtonStyle = () => ({
    Button: {
        defaultProps: {
            variant: 'primary',
            size: 'md',
        },
    },
});

const themeColors$1 = {
    [CustomStylesType.NONE]: {
        hb: [
            '#e3f2ff',
            '#bcdeff',
            '#91caff',
            '#65b5ff',
            '#45a4ff',
            '#2b94ff',
            '#2d87f3',
            '#2c74df',
            '#2b62cd',
            '#2743ad',
        ],
        mb: [
            '#FFE9F1',
            '#F8CCDC',
            '#F5B4CB',
            '#F29CBA',
            '#EE84AA',
            '#EB6B99',
            '#E85388',
            '#D34C7C',
            '#BE446F',
            '#A93D63',
        ],
        blue: [
            '#e3f2ff',
            '#bcdeff',
            '#91caff',
            '#65b5ff',
            '#45a4ff',
            '#2b94ff',
            '#2d87f3',
            '#2c74df',
            '#2b62cd',
            '#2743ad',
        ],
        gray: [
            '#fafafa',
            '#f2f2f2',
            '#d9d9d9',
            '#bfbfbf',
            '#8c8c8c',
            '#737373',
            '#595959',
            '#404040',
            '#262626',
            '#1a1a1a',
        ],
        delftGray: [
            '#F3F3F3',
            '#EAEAEC',
            '#D9DAE2',
            '#B9BAC8',
            '#9898A9',
            '#7C7C8F',
            '#5A5A72',
            '#3E3F58',
            '#202135',
            '#0C0C12',
        ],
        neutral: [
            '#f7f9fc',
            '#e4e8ec',
            '#d2d6dc',
            '#bfc5cc',
            '#adb3bc',
            '#9aa2ac',
            '#87909c',
            '#757f8c',
            '#626d7c',
            '#545E6C',
        ],
        green: [
            '#e0f8ee',
            '#b3eed5',
            '#7ce2b9',
            '#2ed69e',
            '#00CB8A',
            '#00C076',
            '#00B16A',
            '#009E5C',
            '#008C50',
            '#006C39',
        ],
        pink: [
            '#fff1f6',
            '#ffdce9',
            '#fec7dc',
            '#feb2cf',
            '#fe9dc2',
            '#fd87b4',
            '#fd72a7',
            '#fc5d9a',
            '#fc488d',
            '#e92d74',
        ],
        violet: [
            '#F5EDFF',
            '#E7D2F7',
            '#D8B7F0',
            '#CA9CE8',
            '#BB82E1',
            '#AD67D9',
            '#9E4CD1',
            '#9031CA',
            '#8116C2',
            '#63059D',
        ],
        yellow: [
            '#fff8e2',
            '#ffecb6',
            '#ffe187',
            '#ffd658',
            '#ffcb37',
            '#ffc326',
            '#ffb521',
            '#fea21e',
            '#fe921d',
            '#fc7419',
        ],
        teal: [
            '#e0f7fc',
            '#b1ebf8',
            '#7ddff3',
            '#44d1ec',
            '#00c7e6',
            '#00bee0',
            '#00aecd',
            '#0099b2',
            '#008599',
            '#00626c',
        ],
        indigol: [
            '#CEDDF0',
            '#ACC5E6',
            '#95B3DA',
            '#85A6CF',
            '#6D91BE',
            '#5F85B5',
            '#4C77AC',
            '#35639C',
            '#284A75',
            '#1B3250',
        ],
        red: [
            '#fae9e8',
            '#feccbf',
            '#FEAA96',
            '#f44d2c',
            '#ff6f4d',
            '#ff5331',
            '#f44d2c',
            '#e64728',
            '#d84023',
            '#bf331b',
        ],
        redViolet: [
            '#F3EAEB',
            '#E8D5D7',
            '#DDC1C4',
            '#D1ACB0',
            '#C5979C',
            '#BA8288',
            '#AF6D74',
            '#A35961',
            '#97444D',
            '#8C2F39',
        ],
    },
    [CustomStylesType.LEADGEN]: {
        hb: [
            '#e3f2ff',
            '#bcdeff',
            '#91caff',
            '#65b5ff',
            '#45a4ff',
            '#2b94ff',
            '#2d87f3',
            '#2c74df',
            '#2b62cd',
            '#2743ad',
        ],
        mb: [
            '#FFE9F1',
            '#F8CCDC',
            '#F5B4CB',
            '#F29CBA',
            '#EE84AA',
            '#EB6B99',
            '#E85388',
            '#D34C7C',
            '#BE446F',
            '#A93D63',
        ],
        blue: [
            '#e3f2ff',
            '#bcdeff',
            '#91caff',
            '#65b5ff',
            '#45a4ff',
            '#2b94ff',
            '#2d87f3',
            '#2c74df',
            '#2b62cd',
            '#2743ad',
        ],
        gray: [
            '#fafafa',
            '#f2f2f2',
            '#d9d9d9',
            '#bfbfbf',
            '#8c8c8c',
            '#737373',
            '#595959',
            '#404040',
            '#262626',
            '#111111',
        ],
        delftGray: [
            '#F3F3F3',
            '#EAEAEC',
            '#D9DAE2',
            '#B9BAC8',
            '#9898A9',
            '#7C7C8F',
            '#5A5A72',
            '#3E3F58',
            '#202135',
            '#0C0C12',
        ],
        neutral: [
            '#f7f9fc',
            '#e4e8ec',
            '#d2d6dc',
            '#bfc5cc',
            '#adb3bc',
            '#9aa2ac',
            '#87909c',
            '#757f8c',
            '#626d7c',
            '#545E6C',
        ],
        green: [
            '#e0f8ee',
            '#b3eed5',
            '#7ce2b9',
            '#2ed69e',
            '#00CB8A',
            '#00C076',
            '#00B16A',
            '#009E5C',
            '#008C50',
            '#006C39',
        ],
        pink: [
            '#fff1f6',
            '#ffdce9',
            '#fec7dc',
            '#feb2cf',
            '#fe9dc2',
            '#fd87b4',
            '#fd72a7',
            '#fc5d9a',
            '#fc488d',
            '#e92d74',
        ],
        violet: [
            '#F5EDFF',
            '#E7D2F7',
            '#D8B7F0',
            '#CA9CE8',
            '#BB82E1',
            '#AD67D9',
            '#9E4CD1',
            '#9031CA',
            '#8116C2',
            '#63059D',
        ],
        yellow: [
            '#fff8e2',
            '#ffecb6',
            '#ffe187',
            '#ffd658',
            '#ffcb37',
            '#ffc326',
            '#ffb521',
            '#fea21e',
            '#fe921d',
            '#fc7419',
        ],
        teal: [
            '#e0f7fc',
            '#b1ebf8',
            '#7ddff3',
            '#44d1ec',
            '#00c7e6',
            '#00bee0',
            '#00aecd',
            '#0099b2',
            '#008599',
            '#00626c',
        ],
        indigol: [
            '#CEDDF0',
            '#ACC5E6',
            '#95B3DA',
            '#85A6CF',
            '#6D91BE',
            '#5F85B5',
            '#4C77AC',
            '#35639C',
            '#284A75',
            '#1B3250',
        ],
        red: [
            '#fae9e8',
            '#feccbf',
            '#FEAA96',
            '#f44d2c',
            '#ff6f4d',
            '#ff5331',
            '#f44d2c',
            '#e64728',
            '#d84023',
            '#bf331b',
        ],
        redViolet: [
            '#F3EAEB',
            '#E8D5D7',
            '#DDC1C4',
            '#D1ACB0',
            '#C5979C',
            '#BA8288',
            '#AF6D74',
            '#A35961',
            '#97444D',
            '#8C2F39',
        ],
    },
};

const DangerIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    React__default.createElement("path", { d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10", fill: "#262626" }),
    React__default.createElement("path", { d: "m14.829 9.172-5.657 5.656m-.001-5.656 5.657 5.656", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const InfoIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    React__default.createElement("path", { d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12", fill: "#2D87F3" }),
    React__default.createElement("path", { d: "M8 11V8m0-3h.01", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const SuccessIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    React__default.createElement("path", { d: "M10 18.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666", fill: "#00B16A" }),
    React__default.createElement("path", { d: "m13.833 7.5-5.5 5-2.5-2.273", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const WarningIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1.66666C5.4 1.66666 1.66667 5.39999 1.66667 9.99999C1.66667 14.6 5.4 18.3333 10 18.3333C14.6 18.3333 18.3333 14.6 18.3333 9.99999C18.3333 5.39999 14.6 1.66666 10 1.66666ZM10 10.8333C9.54167 10.8333 9.16667 10.4583 9.16667 9.99999V6.66666C9.16667 6.20832 9.54167 5.83332 10 5.83332C10.4583 5.83332 10.8333 6.20832 10.8333 6.66666V9.99999C10.8333 10.4583 10.4583 10.8333 10 10.8333ZM9.16667 12.5V14.1667H10.8333V12.5H9.16667Z", fill: "#FE921D" })));

function NotificationsHandler() {
    return (React__default.createElement(Notifications, { position: "top-right", zIndex: ZINDEX_SSO + 5, autoClose: 5000 }));
}
const MappingColor = {
    success: 'green',
    danger: 'red',
    warning: 'yellow',
    info: 'blue',
    firebase: 'gray',
};
const MappingIcon = {
    success: React__default.createElement(SuccessIcon, null),
    danger: React__default.createElement(DangerIcon, null),
    warning: React__default.createElement(WarningIcon, null),
    info: React__default.createElement(InfoIcon, null),
    firebase: '',
};
const showNotification = (_a) => {
    var { type, title } = _a, rest = __rest(_a, ["type", "title"]);
    const icon = MappingIcon[type];
    // Most used notification props
    notifications.show(Object.assign(Object.assign({ title: React__default.createElement("b", null, title), icon, withCloseButton: true, closeButtonProps: {
            label: 'Close alert',
        } }, rest), { styles: (theme) => {
            const mapColor = MappingColor[type] || 'blue';
            return {
                root: {
                    backgroundColor: theme.colors[mapColor][0],
                    borderColor: theme.colors[mapColor][0],
                    '&::before': { backgroundColor: theme.white },
                },
                title: { color: theme.colors[mapColor][8] },
                description: { color: theme.black },
                closeButton: {
                    color: theme.black,
                    '&:hover': {
                        backgroundColor: theme.colors[mapColor][0],
                    },
                },
                icon: {
                    backgroundColor: 'transparent',
                    padding: 0,
                },
            };
        } }));
};

const GlobalContainerStyle = {
    Container: {
        defaultProps: {
            sizes: {
                lg: em(Screens.LG),
            },
        },
    },
};

const headingStyles = {
    none: {
        default: [
            { size: '40px', lineHeight: '52px', letterSpacing: '-1.2px' },
            { size: '32px', lineHeight: '42px', letterSpacing: '-1px' },
            { size: '26px', lineHeight: '36px', letterSpacing: '-0.8px' },
            { size: '22px', lineHeight: '32px', letterSpacing: '-0.6px' },
            { size: '18px', lineHeight: '28px', letterSpacing: '-0.2px' },
            { size: '16px', lineHeight: '24px', letterSpacing: 0 },
        ],
        mbDown: [
            { size: '26px', lineHeight: '34px', letterSpacing: '-0.9px' },
            { size: '24px', lineHeight: '32px', letterSpacing: '-0.8px' },
            { size: '20px', lineHeight: '26px', letterSpacing: '-0.7px' },
            { size: '18px', lineHeight: '26px', letterSpacing: '-0.6px' },
            { size: '16px', lineHeight: '24px', letterSpacing: '-0.2px' },
            { size: '14px', lineHeight: '22px', letterSpacing: '-0.2px' },
        ],
    },
    leadgen: {
        default: [
            { size: '40px', lineHeight: '48px', letterSpacing: '-1.2px' },
            { size: '32px', lineHeight: '40px', letterSpacing: '-1px' },
            { size: '26px', lineHeight: '32px', letterSpacing: '-0.6px' },
            { size: '20px', lineHeight: '28px', letterSpacing: '-0.4px' },
            { size: '17px', lineHeight: '24px', letterSpacing: '-0.4px' },
            { size: '15px', lineHeight: '24px', letterSpacing: '-0.3px' },
        ],
        mbDown: [
            { size: '26px', lineHeight: '34px', letterSpacing: '-0.9px' },
            { size: '24px', lineHeight: '32px', letterSpacing: '-0.8px' },
            { size: '20px', lineHeight: '26px', letterSpacing: '-0.7px' },
            { size: '18px', lineHeight: '26px', letterSpacing: '-0.6px' },
            { size: '16px', lineHeight: '24px', letterSpacing: '-0.2px' },
            { size: '14px', lineHeight: '22px', letterSpacing: '-0.2px' },
        ],
    },
};
const getHeadingStyles = (options) => {
    const { version = CustomStylesType.NONE, mbDown } = options || {};
    const currentStyles = headingStyles[version] || {};
    return Object.fromEntries((currentStyles[mbDown ? 'mbDown' : 'default'] || []).map((style, index) => [
        `h${index + 1}`,
        {
            fontSize: style.size,
            lineHeight: style.lineHeight,
            letterSpacing: style.letterSpacing,
        },
    ]));
};
const GlobalHeadingStyle = (version = CustomStylesType.NONE) => {
    return {
        Title: {
            styles: {
                root: Object.assign(Object.assign({ fontWeight: FontWeight.bold }, getHeadingStyles({
                    version,
                })), { [`&${MediaQueries.mbDown}`]: Object.assign({}, getHeadingStyles({
                        version,
                        mbDown: true,
                    })) }),
            },
        },
    };
};

const GlobalInputStyle = (locale) => {
    var _a;
    return ({
        InputWrapper: {
            styles: {
                label: {
                    display: 'inline-flex',
                    gap: 4,
                    marginBottom: '0.25rem',
                    fontWeight: 600,
                    fontSize: rem(14),
                    lineHeight: '22px',
                    color: theme.colors.gray600,
                },
                description: {
                    fontWeight: 400,
                    fontSize: '12px',
                    lineHeight: '18px',
                    color: theme.colors.gray600,
                    marginBottom: '0.25rem',
                },
                error: {
                    marginTop: '0.25rem',
                },
            },
        },
        NumberInput: {
            defaultProps: {
                decimalSeparator: (_a = ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
            },
        },
        Input: {
            styles: (_theme, _, { size }) => ({
                input: {
                    border: `1px solid ${theme.colors.gray200}`,
                    transition: `all ${ANIMATION_DURATION} ease-in-out`,
                    ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
                        switch (size) {
                            case 'lg':
                                return {
                                    height: 48,
                                    minHeight: 'unset',
                                    fontSize: 16,
                                    lineHeight: '24px',
                                };
                            case 'md':
                                return {
                                    height: 40,
                                    minHeight: 'unset',
                                    fontSize: rem(14),
                                    lineHeight: '22px',
                                };
                            case 'sm':
                                return {
                                    height: 32,
                                    minHeight: 'unset',
                                    fontSize: rem(14),
                                    lineHeight: '22px',
                                };
                        }
                    })()),
                    '&:hover': {
                        border: `1px solid ${_theme.primaryColor}`,
                        // boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
                    },
                    '&:focus': {
                        boxShadow: `0px 0px 0px 2px ${_theme.colors[_theme.primaryColor][2]}`,
                    },
                },
                '&[data-invalid="true"]': {
                    border: `1px solid ${theme.colors.red600}`,
                    color: '#000',
                },
            }),
        },
    });
};

const getGlobalRadioStyle = {
    Radio: {
        defaultProps: {
            size: 'sm',
            color: 'blue.6',
        },
        styles: {
            radio: {
                backgroundColor: 'transparent',
                '&:checked': {
                    backgroundColor: 'transparent',
                },
            },
        },
    },
};

const themeColors = themeColors$1[CustomStylesType.NONE];
const getMantineThemeOverride = (locale, template = 'hb', version) => {
    var _a;
    return {
        defaultRadius: template === 'hb' ? 8 : 16,
        cursorType: 'pointer',
        colors: Object.assign(Object.assign(Object.assign({}, ((_a = themeColors$1[version]) !== null && _a !== void 0 ? _a : themeColors$1[CustomStylesType.NONE])), theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
        primaryColor: template,
        primaryShade: 6,
        fontFamily: (locale === LOCALE.Cambodia
            ? 'Battambang'
            : locale === LOCALE.Thailand
                ? 'Noto Sans Thai'
                : 'Inter') +
            `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
        breakpoints: {
            xs: em(Breakpoints.BREAK_POINT_SMALL_MOBILE),
            sm: em(Breakpoints.BREAK_POINT_MOBILE),
            md: em(Breakpoints.BREAK_POINT_TABLET),
            lg: em(Breakpoints.BREAK_POINT_PC),
            xl: em(Breakpoints.BREAK_POINT_LGPC),
        },
        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle()), GlobalHeadingStyle(version)), GlobalContainerStyle),
        other: {
            template,
            customStyleType: version,
            defaultImage: CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
        },
    };
};

export { MAPPED_LOCALE as M, NotificationsHandler as N, getHeadingStyles as a, getMantineThemeOverride as g, showNotification as s, themeColors as t, useMantineLocale as u };
