define(["require", "exports", "react", "@storybook/addon-docs/blocks", "@fluentui/react-make-styles"], function (require, exports, React, blocks_1, react_make_styles_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.CodeExample = exports.CodeComparison = void 0;
    var useCodeComparisonStyles = react_make_styles_1.makeStyles({
        root: {
            display: 'flex',
            justifyContent: 'space-between',
            '> *': {
                width: '100%',
            },
            '> :not(:last-child)': {
                marginRight: '5%',
            },
        },
    });
    var CodeComparison = function (props) {
        var children = props.children;
        var classes = useCodeComparisonStyles();
        return React.createElement("div", { className: classes.root }, children);
    };
    exports.CodeComparison = CodeComparison;
    var codeLanguages = {
        html: 'HTML',
        css: 'CSS',
        js: 'JavaScript',
        jsx: 'React',
    };
    var CodeExample = function (props) {
        var _a, _b, _c;
        var title = props.title, children = props.children;
        // Access the raw values from the markdown source code block
        var markdownCodeBlockValue = (_c = (_b = (_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.children;
        if (markdownCodeBlockValue === undefined) {
            return children;
        }
        var value = markdownCodeBlockValue.trim();
        var codeBlockTag = '```';
        // JSX source blocks are passed without the backticks
        var language = (value.includes(codeBlockTag)
            ? value.substring(3, value.indexOf('\n'))
            : 'jsx');
        var code = value
            .replace(codeBlockTag + language, '')
            .replace(codeBlockTag, '')
            .trim();
        return (React.createElement("div", null,
            React.createElement("h3", null, title !== null && title !== void 0 ? title : codeLanguages[language]),
            React.createElement(blocks_1.Source, { language: language, code: code })));
    };
    exports.CodeExample = CodeExample;
});
//# sourceMappingURL=utils.js.map