'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-3b4575a4.js');
var utilities = require('./utilities-d51a0c2d.js');

var ContextButton = function (_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, userProvidedId = _a.id, _c = _a.customCss, customCss = _c === void 0 ? '' : _c, onClick = _a.onClick, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, children = _a.children, className = _a.className;
    var id = autoId_esm.useId(userProvidedId);
    var resolvedCss = utilities.useCustomCss(customCss);
    return (jsxRuntime.jsx(StyledButton, _tslib.__assign({ className: className, "aria-disabled": disabled, "data-variant": variant, onClick: disabled ? undefined : onClick, css: resolvedCss, id: id }, { children: jsxRuntime.jsxs(StyledTextDiv, { children: [leftIcon && jsxRuntime.jsx(StyledLeftIconDiv, { children: leftIcon }, void 0), children, rightIcon && jsxRuntime.jsx(StyledRightIconDiv, { children: rightIcon }, void 0)] }, void 0) }), void 0));
};
var StyledButton = css.styled('button')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: none;\n  outline: none;\n  background-color: ", ";\n  border-radius: 8px;\n  color: #ffffff;\n  text-transform: uppercase;\n  font-weight: bold;\n  font-size: 16px;\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    background-color: #999999 !important;\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &[data-variant='secondary'] {\n    background-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='danger'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='success'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  border: none;\n  outline: none;\n  background-color: ", ";\n  border-radius: 8px;\n  color: #ffffff;\n  text-transform: uppercase;\n  font-weight: bold;\n  font-size: 16px;\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    background-color: #999999 !important;\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &[data-variant='secondary'] {\n    background-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n  &[data-variant='danger'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='success'] {\n    background-color: ", ";\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 4);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.secondary;
}, function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.secondary, 47);
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.secondary, 4);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.danger, 4);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.success, 4);
});
var StyledTextDiv = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-left: 13px;\n  padding-right: 15px;\n  display: flex;\n  flex-direction: row;\n"], ["\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-left: 13px;\n  padding-right: 15px;\n  display: flex;\n  flex-direction: row;\n"])));
var StyledLeftIconDiv = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding-right: 10px;\n"], ["\n  padding-right: 10px;\n"])));
var StyledRightIconDiv = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding-left: 10px;\n"], ["\n  padding-left: 10px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.ContextButton = ContextButton;
//# sourceMappingURL=ContextButton.js.map
