import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
export const AddExpressionButton = function (props) {
    return (_jsxs(ToolboxItem, Object.assign({ hideLabel: props.hideLabel, onClick: () => {
            props.onClick(props.registration);
        }, "data-testid": `expression-${props.registration.name}` }, { children: [_jsx(ToolboxItemIcon, { children: props.registration.icon }, void 0),
            !props.hideLabel && _jsx(ToolboxItemText, { children: props.registration.name }, void 0)] }), void 0));
};
const ToolboxItem = styled("div") `
    display: flex;
    flex-direction: row;

    float: left;
    box-sizing: border-box;
    border-radius: 4px;
    height: 32px;

    color: #272932;

    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;

    align-items: center;
    cursor: pointer;
`;
const ToolboxItemIcon = styled.div `
    display: flex;
    border: 1px solid rgba(64, 80, 166, 0.15);
    width: 38px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
`;
const ToolboxItemText = styled.div `
    display: flex;
    float: left;
    margin-left: 8px;
    //styleName: text/Inter Regular 11px;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;

    color: #272932;

    flex: 1;
`;
//# sourceMappingURL=AddExpressionButton.js.map