"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AliasShadows = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_theme_1 = require("@fluentui/react-theme");
exports.default = {
    title: 'Fluent UI Theme/Alias/Shadows',
};
// FIXME: hardcoded theme
var theme = {
    light: react_theme_1.teamsLightTheme,
    dark: react_theme_1.teamsDarkTheme,
    highContrast: react_theme_1.teamsHighContrastTheme,
};
var ShadowBox = function (props) { return (React.createElement("div", tslib_1.__assign({}, props, { style: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        boxShadow: props.shadow,
        minHeight: '2rem',
        fontFamily: 'monospace',
        fontSize: 10,
    } }), props.shadow.split('),').map(function (line, index, arr) {
    var value = index < arr.length - 1 ? line + ')' : line;
    return React.createElement("div", { key: value }, value);
}))); };
var AliasShadows = function () {
    return (React.createElement("div", { style: {
            display: 'grid',
            gridTemplateColumns: 'auto 1fr 1fr 1fr',
            gap: '80px',
            alignItems: 'center',
            marginBottom: '6em',
        } },
        React.createElement("h3", { key: "shadow-title" }, "Shadow"),
        React.createElement("h3", { key: "shadow-title-light" }, "Light"),
        React.createElement("h3", { key: "shadow-title-dark" }, "Dark"),
        React.createElement("h3", { key: "shadow-title-hc" }, "High Contrast"),
        Object.keys(theme.light.alias.shadow).map(function (shadow) { return [
            React.createElement("div", { key: shadow }, shadow),
            React.createElement(ShadowBox, { key: shadow + "-light", shadow: theme.light.alias.shadow[shadow] }),
            React.createElement(ShadowBox, { key: shadow + "-dark", shadow: theme.dark.alias.shadow[shadow] }),
            React.createElement(ShadowBox, { key: shadow + "-hc", shadow: theme.highContrast.alias.shadow[shadow] }),
        ]; })));
};
exports.AliasShadows = AliasShadows;
//# sourceMappingURL=AliasShadow.stories.js.map