'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 Tag = function (_a) {
    var _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.color, color = _c === void 0 ? 'blue' : _c, _d = _a.customColor, customColor = _d === void 0 ? 'none' : _d, userProvidedId = _a.id, _e = _a.customCss, customCss = _e === void 0 ? '' : _e, onClick = _a.onClick, children = _a.children;
    var id = autoId_esm.useId(userProvidedId);
    var resolvedCss = utilities.useCustomCss(customCss);
    if (onClick) {
        return (jsxRuntime.jsx(StyledTagButton
        //data-color should only be used if no customColor was provided.
        , _tslib.__assign({ "data-color": customColor && customColor !== 'none' ? 'none' : color, "data-size": size, customColor: customColor, id: id, css: resolvedCss, onClick: onClick }, { children: children }), void 0));
    }
    else {
        return (jsxRuntime.jsx(StyledTagSpan, _tslib.__assign({ "data-color": customColor && customColor !== 'none' ? 'none' : color, "data-size": size, customColor: customColor, id: id, css: resolvedCss }, { children: children }), void 0));
    }
};
var baseTagStyles = css.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border-radius: 4px;\n  text-align: center;\n  display: inline-flex;\n  width: auto;\n  height: auto;\n  align-items: center;\n  font-weight: 600;\n  text-shadow: 0px 1px 0px #ffffff70;\n"], ["\n  border-radius: 4px;\n  text-align: center;\n  display: inline-flex;\n  width: auto;\n  height: auto;\n  align-items: center;\n  font-weight: 600;\n  text-shadow: 0px 1px 0px #ffffff70;\n"])));
var getShadow = function (color) { return "0px 1px 0px " + color; };
var StyledTagSpan = css.styled('span')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n  &[data-color=\"blue\"] {\n    background: #6fc7fc;\n    box-shadow: ", ";\n  }\n  &[data-color='green'] {\n    background: #75f4a6;\n    box-shadow: ", ";\n  }\n  &[data-color='red'] {\n    background: #ff7b8f;\n    box-shadow: ", ";\n  }\n  &[data-color='orange'] {\n    background: #ff9d55;\n    box-shadow: ", ";\n  }\n  &[data-color='yellow'] {\n    background: #fde94b;\n    box-shadow: ", ";\n  }\n  &[data-color='purple'] {\n    background: #d17bff;\n    box-shadow: ", ";\n  }\n  &[data-color='none'] {\n    background: ", ";\n    box-shadow: ", ";\n  }\n  &[data-size='small'] {\n    font-size: 10px;\n    padding: 1px 5px 2px 5px;\n  }\n  &[data-size='medium'] {\n    font-size: 11px;\n    padding: 1px 6px 3px 6px;\n  }\n  &[data-size='large'] {\n    font-size: 12px;\n    padding: 1px 7px 3px 7px;\n  }\n"], ["\n  ", "\n  &[data-color=\"blue\"] {\n    background: #6fc7fc;\n    box-shadow: ", ";\n  }\n  &[data-color='green'] {\n    background: #75f4a6;\n    box-shadow: ", ";\n  }\n  &[data-color='red'] {\n    background: #ff7b8f;\n    box-shadow: ", ";\n  }\n  &[data-color='orange'] {\n    background: #ff9d55;\n    box-shadow: ", ";\n  }\n  &[data-color='yellow'] {\n    background: #fde94b;\n    box-shadow: ", ";\n  }\n  &[data-color='purple'] {\n    background: #d17bff;\n    box-shadow: ", ";\n  }\n  &[data-color='none'] {\n    background: ", ";\n    box-shadow: ",
    ";\n  }\n  &[data-size='small'] {\n    font-size: 10px;\n    padding: 1px 5px 2px 5px;\n  }\n  &[data-size='medium'] {\n    font-size: 11px;\n    padding: 1px 6px 3px 6px;\n  }\n  &[data-size='large'] {\n    font-size: 12px;\n    padding: 1px 7px 3px 7px;\n  }\n"])), baseTagStyles, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#6FC7FC', 4.4));
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#75F4A6', 12));
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#FF7B8F', 4.4));
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#FF9D55', 14));
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#FDE94B', 18));
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#D17BFF', 6));
}, function (_a) {
    var customColor = _a.customColor;
    return customColor;
}, function (_a) {
    var customColor = _a.customColor, theme = _a.theme;
    return getShadow(theme.darken(customColor, 5));
});
var StyledTagButton = css.styled('button')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", "\n  outline: none;\n  border: none;\n  &[data-color='blue'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #6fc7fc;\n    box-shadow: ", ";\n  }\n  &[data-color='green'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #75f4a6;\n    box-shadow: ", ";\n  }\n  &[data-color='red'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #ff7b8f;\n    box-shadow: ", ";\n  }\n  &[data-color='orange'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #ff9d55;\n    box-shadow: ", ";\n  }\n  &[data-color='yellow'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #fde94b;\n    box-shadow: ", ";\n  }\n  &[data-color='purple'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #d17bff;\n    box-shadow: ", ";\n  }\n  &[data-color='none'] {\n    &:hover {\n      background: ", ";\n    }\n    background: ", ";\n    box-shadow: ", ";\n  }\n  &[data-size='small'] {\n    font-size: 10px;\n    padding: 1px 5px 2px 5px;\n  }\n  &[data-size='medium'] {\n    font-size: 11px;\n    padding: 1px 6px 3px 6px;\n  }\n  &[data-size='large'] {\n    font-size: 12px;\n    padding: 1px 7px 3px 7px;\n  }\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3);\n  }\n"], ["\n  ", "\n  outline: none;\n  border: none;\n  &[data-color='blue'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #6fc7fc;\n    box-shadow: ", ";\n  }\n  &[data-color='green'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #75f4a6;\n    box-shadow: ", ";\n  }\n  &[data-color='red'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #ff7b8f;\n    box-shadow: ", ";\n  }\n  &[data-color='orange'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #ff9d55;\n    box-shadow: ", ";\n  }\n  &[data-color='yellow'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #fde94b;\n    box-shadow: ", ";\n  }\n  &[data-color='purple'] {\n    &:hover {\n      background: ", ";\n    }\n    background: #d17bff;\n    box-shadow: ", ";\n  }\n  &[data-color='none'] {\n    &:hover {\n      background: ",
    ";\n    }\n    background: ", ";\n    box-shadow: ",
    ";\n  }\n  &[data-size='small'] {\n    font-size: 10px;\n    padding: 1px 5px 2px 5px;\n  }\n  &[data-size='medium'] {\n    font-size: 11px;\n    padding: 1px 6px 3px 6px;\n  }\n  &[data-size='large'] {\n    font-size: 12px;\n    padding: 1px 7px 3px 7px;\n  }\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3);\n  }\n"])), baseTagStyles, function (_a) {
    var theme = _a.theme;
    return theme.lighten('#6FC7FC', 6);
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#6FC7FC', 4.4));
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten('#75F4A6', 12);
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#75F4A6', 12));
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten('#FF7B8F', 6);
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#FF7B8F', 4.4));
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten('#FF9D55', 6);
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#FF9D55', 14));
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten('#FDE94B', 16);
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#FDE94B', 18));
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten('#D17BFF', 6);
}, function (_a) {
    var theme = _a.theme;
    return getShadow(theme.darken('#D17BFF', 6));
}, function (_a) {
    var theme = _a.theme, customColor = _a.customColor;
    return theme.lighten(customColor, 6);
}, function (_a) {
    var customColor = _a.customColor;
    return customColor;
}, function (_a) {
    var customColor = _a.customColor, theme = _a.theme;
    return getShadow(theme.darken(customColor, 5));
});
var templateObject_1, templateObject_2, templateObject_3;

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