'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var core = require('@mantine/core');
var shared = require('./shared-60ad3e5a.js');
var index = require('./index-59a9827e.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var useStyles = core.createStyles((_theme, _params) => {
    var _a, _b, _c, _d, _e, _f;
    const { other } = _theme;
    const { template } = other;
    const { size, variant, skipHover, withColorHover, isError, isSuccess, color, gradient, children, theme: themeProp, customStylesType, } = _params;
    const isMb = template === 'mb' || themeProp === 'marryBaby';
    const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
    const isHexColor = finalColor.startsWith('#');
    const hexColor50 = isHexColor
        ? _theme.fn.lighten(color, 0.9)
        : ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
    const hexColor = isHexColor
        ? finalColor
        : (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
    const hoverHexColor = isHexColor
        ? _theme.fn.darken(color, 0.05)
        : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
    const isLeadgen = customStylesType === index.CustomStylesType.LEADGEN;
    return {
        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${shared.ANIMATION_DURATION} ease-in-out` }, (gradient && Object.assign({ border: 0, position: 'relative' }, (variant === 'secondary' && {
            '&:before': {
                content: '""',
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: '#fff',
                borderRadius: 'inherit',
            },
        })))), { '&:focus': {
                outline: 'none',
            } }), (isLeadgen && {
            borderRadius: 12,
        })), (!children && {
            paddingLeft: '10px',
            paddingRight: '10px',
            '.mantine-Button-icon': {
                margin: 0,
            },
        })), (() => {
            switch (size) {
                case 'xl':
                    return Object.assign({ height: 56, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
                        letterSpacing: '-0.3px',
                    }));
                case 'lg':
                    return Object.assign({ height: 48, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
                        letterSpacing: '-0.3px',
                    }));
                case 'md':
                    return Object.assign({ height: 40, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '13px' : '14px', lineHeight: isLeadgen ? '20px' : '22px' }, (isLeadgen && {
                        letterSpacing: '-0.3px',
                    }));
                case 'sm':
                    return Object.assign(Object.assign({ height: 32, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : isMb ? '12px' : '14px', lineHeight: isLeadgen ? '16px' : '22px' }, (isLeadgen && {
                        letterSpacing: '-0.2px',
                    })), { paddingLeft: '16px', paddingRight: '16px' });
                case 'xs':
                    return Object.assign({ height: 24, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : '12px', lineHeight: isLeadgen ? '16px' : '18px', paddingLeft: '8px', paddingRight: '8px' }, (isLeadgen && {
                        letterSpacing: '-0.2px',
                    }));
            }
        })()), (() => {
            switch (variant) {
                case 'primary': {
                    return Object.assign(Object.assign({ color: _theme.white }, (gradient
                        ? {
                            backgroundImage: gradient,
                            backgroundColor: 'initial',
                        }
                        : { backgroundColor: hexColor })), (!skipHover && {
                        '&:hover': {
                            backgroundColor: gradient ? 'initial' : hoverHexColor,
                        },
                    }));
                }
                case 'secondary':
                    return Object.assign(Object.assign(Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (gradient && {
                        backgroundImage: gradient,
                        borderColor: 'transparent',
                    })), (!skipHover &&
                        !gradient && {
                        '&:hover': {
                            backgroundColor: hexColor50,
                            border: `1px solid ${hexColor}`,
                        },
                    })), (withColorHover &&
                        !gradient && {
                        '&:hover': {
                            backgroundColor: hexColor,
                            border: `1px solid ${hexColor}`,
                            color: '#fff',
                        },
                    }));
                case 'white':
                    return {
                        color: hexColor,
                        backgroundColor: 'transparent',
                        border: `1px solid transparent`,
                        '&:hover': {
                            backgroundColor: 'transparent',
                            borderColor: `transparent`,
                        },
                    };
                case 'tertiary':
                    return {
                        color: _theme.colors.gray[8],
                        backgroundColor: _theme.white,
                        border: `1px solid ${_theme.colors.neutral[2]}`,
                        '&:hover': Object.assign({}, (!skipHover
                            ? {
                                backgroundColor: _theme.colors.neutral[0],
                                border: `1px solid ${_theme.colors.neutral[0]}`,
                            }
                            : {
                                backgroundColor: _theme.white,
                                border: `1px solid ${_theme.colors.neutral[2]}`,
                            })),
                    };
                case 'light': {
                    return {
                        color: hexColor,
                        backgroundColor: hexColor50,
                        border: `1px solid transparent`,
                        '&:hover': Object.assign({}, (!skipHover
                            ? {
                                backgroundColor: _theme.white,
                                border: `1px solid ${hexColor50}`,
                            }
                            : {
                                backgroundColor: hexColor50,
                                border: `1px solid transparent`,
                            })),
                    };
                }
                case 'ghost':
                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
                        '&:hover': {
                            backgroundColor: hexColor50,
                            border: `1px solid transparent`,
                        },
                    }));
            }
        })()), { '&[data-disabled]': {
                backgroundColor: _theme.colors.gray[1],
                color: _theme.colors.gray[4],
            } }), (isError
            ? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
                '&:hover': {
                    backgroundColor: _theme.colors.red[0],
                    border: `1px solid ${_theme.colors.red[6]}`,
                },
            })) : {})), (isSuccess
            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
                '&:hover': {
                    backgroundColor: _theme.colors.green[0],
                },
            })) : {})),
        inner: Object.assign({ ref: core.getStylesRef('inner') }, (gradient && {
            position: 'relative',
        })),
        leftIcon: {
            marginRight: 8,
        },
        rightIcon: {},
        label: Object.assign({}, (gradient &&
            variant === 'secondary' && {
            background: gradient,
            '-webkit-background-clip': 'text',
            '-webkit-text-fill-color': 'transparent',
        })),
    };
});

const MAPPED_VARIANT = {
    primary: 'filled',
    secondary: 'outline',
    tertiary: 'default',
    light: 'light',
    ghost: 'subtle',
    error: 'outline',
    white: 'white',
    success: 'subtle',
};
function filterObject(obj) {
    const ret = {};
    Object.keys(obj)
        .filter((key) => obj[key] !== undefined)
        .forEach((key) => (ret[key] = obj[key]));
    return ret;
}
const Button = React.forwardRef((props, ref) => {
    var _a, _b;
    const theme = core.useMantineTheme();
    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, gradient, skipHover, withColorHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp, component, styles, classNames } = _c, rest = tslib_es6.__rest(_c, ["variant", "size", "color", "gradient", "skipHover", "withColorHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme", "component", "styles", "classNames"]);
    const isError = variant === 'error';
    const variantStyle = index.useTemplateVariant();
    const { classes, cx } = useStyles({
        variant,
        size,
        color,
        gradient,
        skipHover,
        withColorHover,
        isError,
        isSuccess: variant === 'success',
        children,
        theme: themeProp,
        customStylesType: variantStyle,
    }, { name: 'ButtonMantine', styles, classNames });
    return (React__default["default"].createElement(core.Button, Object.assign({ component: component, className: cx(className, variant), classNames: {
            root: classes.root,
            inner: classes.inner,
            leftIcon: classes.leftIcon,
            rightIcon: classes.rightIcon,
            label: classes.label,
        }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, ref: ref, loaderProps: rest.disabled ? { color: 'currentColor' } : undefined }, rest), children));
});

exports.Button = Button;
