define(["require", "exports", "react", "@ctrl/tinycolor"], function (require, exports, React, tinycolor_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ColorRamp = exports.ColorRampItem = void 0;
    var ColorRampItem = function (props) {
        var color = new tinycolor_1.TinyColor(props.value);
        var isDark = color.isDark();
        var isTransparent = color.getAlpha() < 0.5;
        return (React.createElement("div", { style: {
                display: 'flex',
                justifyContent: 'space-between',
                padding: '1.5vh',
                background: props.value,
                color: isTransparent ? '#000' : isDark ? '#fff' : '#000',
                width: 250,
            } },
            props.name && React.createElement("span", null, props.name),
            props.value && React.createElement("span", null, props.value)));
    };
    exports.ColorRampItem = ColorRampItem;
    /**
     * Renders a color ramp for documentation purposes.
     */
    var ColorRamp = function (props) { return (React.createElement("div", null, Object.entries(props.ramp).map(function (_a) {
        var name = _a[0], value = _a[1];
        return React.createElement(exports.ColorRampItem, { key: name + ':' + value, name: name, value: value });
    }))); };
    exports.ColorRamp = ColorRamp;
});
//# sourceMappingURL=ColorRamp.js.map