import * as React from 'react';
import { teamsLightTheme } from '@fluentui/react-theme';
export default {
    title: 'Fluent UI Theme/Global/Border Radius',
};
var global = teamsLightTheme.global;
// FIXME: border radius -> string
export var GlobalBorderRadius = function () { return (React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'auto auto 1fr ', gap: '10px', alignItems: 'center' } }, Object.keys(global.borderRadius).map(function (radius) { return [
    React.createElement("div", { key: radius }, radius),
    React.createElement("div", { key: radius + "-col1", style: {
            background: '#bbb',
            width: '3em',
            height: '3em',
            borderRadius: global.borderRadius[radius],
        } }),
    React.createElement("div", { key: radius + "-col2", style: {
            border: global.strokeWidth.thin + " solid black",
            width: '3em',
            height: '3em',
            borderRadius: global.borderRadius[radius],
        } }),
]; }))); };
//# sourceMappingURL=GlobalBorderRadius.stories.js.map