"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertBanner = void 0;
const react_1 = __importDefault(require("react"));
const icons_1 = require("../../icons");
const inlines_1 = require("inlines");
const Styled_1 = require("../Styled");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const AlertBanner = ({ color = 'brand', children, style, action, }) => {
    const contentColor = color === 'default' ? 'default' : 'inverted';
    return (react_1.default.createElement(Styled_1.Center, { style: {
            width: '100%',
            padding: action ? '8px' : '12px',
            backgroundColor: (0, varsUtilities_1.color)('background', color, 'strong'),
            ...style,
        } },
        react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                marginRight: children ? 8 : 0,
                width: 16,
                height: 16,
                maxWidth: '100%',
                maxHeight: '100%',
                alignItems: 'center',
                justifyContent: 'center',
            } }, color === 'negative' ? (react_1.default.createElement(icons_1.IconErrorFill, { color: contentColor })) : color === 'warning' ? (react_1.default.createElement(icons_1.IconAlertFill, { color: contentColor })) : (react_1.default.createElement(icons_1.IconInfoFill, { color: contentColor }))),
        react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                alignItems: 'center',
            } },
            react_1.default.createElement(Text_1.Text, { selectable: "none", size: 14, weight: "strong", color: contentColor }, children),
            action && (react_1.default.createElement(Text_1.Text, { size: 14, weight: "strong", onClick: action.onClick, underline: true, color: contentColor, style: {
                    marginLeft: '10px',
                } }, action.label)))));
};
exports.AlertBanner = AlertBanner;
//# sourceMappingURL=index.js.map