import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    itemKey: {
        width: theme.spacing(4),
        height: theme.spacing(0.5),
        marginTop: theme.spacing(0.5)
    },
    keyRoot: {
        display: 'flex',
        justifyContent: 'space-between',
        marginRight: theme.spacing(5),
        width: theme.spacing(10)
    }
}));
export const ColorKey = ({ label, color }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.keyRoot }, React.createElement(Typography, { variant: "caption" }, label), React.createElement("div", { className: classes.itemKey, style: { background: color } })));
};
ColorKey.propTypes = {
    /**
     * Key label
     */
    label: PropTypes.string.isRequired,
    /**
     * Color of the key item
     */
    color: PropTypes.string.isRequired
};
//# sourceMappingURL=ColorKey.js.map