"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalloutBanner = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const Heading_1 = require("../Heading");
const HeadingGroup_1 = require("../HeadingGroup");
const TextContainer_1 = require("../TextContainer");
const View_1 = require("../View");
const CalloutBanner_css_1 = __importDefault(require("./CalloutBanner.css"));
function CalloutBanner({ title, children, border = 'block', background = 'secondary', alignment = 'center', spacing = 'tight', }) {
    const titleMarkup = title && <Heading_1.Heading level={3}>{title}</Heading_1.Heading>;
    return (<div className={css_utilities_1.classNames(CalloutBanner_css_1.default.CalloutBanner, border && CalloutBanner_css_1.default[css_utilities_1.variationName('border', border)], background && CalloutBanner_css_1.default[css_utilities_1.variationName('background', background)])} role="status" aria-atomic="true" aria-live="polite">
      <TextContainer_1.TextContainer alignment={alignment === 'leading' ? undefined : alignment} spacing={spacing}>
        <HeadingGroup_1.HeadingGroup>
          {titleMarkup}
          <View_1.View>{children}</View_1.View>
        </HeadingGroup_1.HeadingGroup>
      </TextContainer_1.TextContainer>
    </div>);
}
exports.CalloutBanner = CalloutBanner;