import { cssVar, mode } from '@chakra-ui/theme-tools';
import { alertAnatomy } from '@chakra-ui/anatomy';

var $fg = cssVar('alert-fg');
var $bg = cssVar('alert-bg');
var baseStyle = {
    container: {
        bg: $bg.reference,
        padding: 'lg',
    },
    title: {
        textStyle: 'heading4',
    },
    description: {
        textStyle: 'body',
    },
    icon: {
        color: $fg.reference,
        flexShrink: 0,
        alignSelf: 'start',
        marginEnd: 'lg',
        w: 'sm',
        h: 'sm',
    },
};
var variantLeftAccent = function (props) {
    var _a;
    var c = props.colorScheme;
    var bg = mode("".concat(c, ".100"), "".concat(c, ".200"))(props);
    var fg = mode(props.status === 'info' ? "".concat(c, ".700") : "".concat(c, ".500"), "".concat(c, ".200"))(props);
    return {
        container: (_a = {},
            _a[$bg.variable] = "colors.".concat(bg),
            _a[$fg.variable] = "colors.".concat(fg),
            _a.paddingStart = 'lg',
            _a.borderStartWidth = '4px',
            _a.borderStartColor = $fg.reference,
            _a),
    };
};
var variants = {
    'left-accent': variantLeftAccent,
};
var defaultProps = {
    variant: 'left-accent',
    colorScheme: 'blue',
};
var Alert = {
    parts: alertAnatomy.keys,
    baseStyle: baseStyle,
    variants: variants,
    defaultProps: defaultProps,
};

export { Alert as default };
//# sourceMappingURL=alert.js.map
