"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextBlock = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const legacy_1 = require("../../utilities/legacy");
const typography_styles_css_1 = __importDefault(require("../../utilities/typography-styles.css"));
const inlineFormatting_1 = require("../../utilities/inlineFormatting");
const TextBlock_css_1 = __importDefault(require("./TextBlock.css"));
function TextBlock({ children, size, emphasized, subdued, appearance, style, id, }) {
    const className = css_utilities_1.classNames(TextBlock_css_1.default.TextBlock, size && TextBlock_css_1.default[css_utilities_1.variationName('size', size)], emphasized && TextBlock_css_1.default.emphasized, emphasized && legacy_1.utilityDefaultTextColorEmphasized, subdued && TextBlock_css_1.default.subdued, subdued && legacy_1.utilityDefaultTextColorSubdued, appearance && TextBlock_css_1.default[css_utilities_1.variationName('appearance', appearance)], appearance && appearance === 'accent' && legacy_1.utilityDefaultColorAccent, style && typography_styles_css_1.default[style]);
    const content = emphasized ? <strong>{children}</strong> : children;
    return (<inlineFormatting_1.InlineFormattingContext.Provider value>
      <p className={className} id={id}>
        {content}
      </p>
    </inlineFormatting_1.InlineFormattingContext.Provider>);
}
exports.TextBlock = TextBlock;