import { Anchor, Button, Container, createTheme, InputWrapper, List, rem, Stepper } from '@mantine/core';
import { generateColors } from '@mantine/colors-generator';
export const DAYJS_LOCALE_MAP = {
    en: 'en',
    de: 'de',
    uk: 'uk',
    fil: 'en',
    tr: 'tr',
    bs: 'bs',
    sq: 'sq',
    vi: 'vi',
    es: 'es',
    hi: 'hi',
    ar: 'ar',
};
export const theme = createTheme({
    primaryColor: 'primary',
    breakpoints: {
        xs: '36em',
        sm: '48em',
        md: '62em',
        lg: '75em',
        xl: '88em',
    },
    colors: {
        primary: generateColors('#eab308'),
        education: generateColors('#34D399'),
        license: generateColors('#FBBF24'),
        language: generateColors('#5FA5FA'),
        additional: generateColors('#C084FC'),
        success: generateColors('#10B981'),
        error: generateColors('#EF4444'),
    },
    fontFamily: 'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
    fontFamilyMonospace: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
    fontSizes: {
        xs: rem(10),
        sm: rem(12),
        md: rem(14),
        lg: rem(16),
        lgxl: rem(18),
        xl: rem(20),
        xxl: rem(32),
        xxll: rem(38),
        xxxl: rem(48),
        xxxxl: rem(56),
        hero: rem(64),
    },
    headings: {
        fontFamily: 'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
        sizes: {
            h1: {
                fontSize: rem(40),
                lineHeight: '1.2',
                fontWeight: '400',
            },
            h2: {
                fontSize: rem(20),
                lineHeight: '1.2',
                fontWeight: '600',
            },
            h3: {
                fontSize: rem(18),
                lineHeight: '1.2',
                fontWeight: '600',
            },
            h4: {
                fontSize: rem(16),
                lineHeight: '1.2',
                fontWeight: '600',
            },
            h5: {
                fontSize: rem(14),
                lineHeight: '1.2',
                fontWeight: '600',
            },
            h6: {
                fontSize: rem(12),
                lineHeight: '1.2',
                fontWeight: '600',
            },
        },
    },
    components: {
        Container: Container.extend({
            defaultProps: {
                px: 'xl',
            },
            vars: (currentTheme, props) => {
                if (props.size === 'xl') {
                    return {
                        root: {
                            '--container-size': '80rem',
                        },
                    };
                }
                return { root: {} };
            },
        }),
        Button: Button.extend({
            defaultProps: {
                size: 'md',
                radius: 'lg',
            },
            styles: () => ({
                root: {
                    color: 'var(--mantine-color-black)',
                },
            }),
        }),
        InputWrapper: InputWrapper.extend({
            styles: {
                label: {
                    fontSize: rem(14),
                    fontWeight: 500,
                    marginBottom: rem(10),
                },
            },
        }),
        Stepper: Stepper.extend({
            styles: {
                stepIcon: {
                    backgroundColor: 'initial',
                    color: 'var(--mantine-color-dimmed)',
                    width: rem(30),
                    height: rem(30),
                    minWidth: rem(30),
                    minHeight: rem(30),
                },
                stepLabel: {
                    fontSize: rem(14),
                    color: 'var(--mantine-color-dimmed)',
                },
            },
        }),
        Anchor: Anchor.extend({
            styles: (currentTheme) => ({
                root: {
                    textDecoration: 'none',
                    color: currentTheme.colors.gray[9],
                    '&:hover, &:focusVisible': {
                        color: `${currentTheme.colors.blue[1]} !important`,
                    },
                },
            }),
        }),
        List: List.extend({
            styles: (currentTheme) => ({
                root: {
                    paddingLeft: rem(10),
                },
                item: {
                    color: currentTheme.colors.gray[8],
                },
            }),
        }),
    },
});
//# sourceMappingURL=index.js.map