'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 ContextDataChip = function (_a) {
    var label = _a.label, value = _a.value, variant = _a.variant, userProvidedId = _a.id, _b = _a.customCss, customCss = _b === void 0 ? '' : _b;
    var id = autoId_esm.useId(userProvidedId);
    var resolvedCss = utilities.useCustomCss(customCss);
    return (jsxRuntime.jsxs(StyledWrapperDiv, _tslib.__assign({ css: resolvedCss, id: id }, { children: [jsxRuntime.jsx(StyledTitleDiv, { children: label }, void 0),
            jsxRuntime.jsx(StyledNumberDiv, _tslib.__assign({ "data-variant": variant }, { children: value }), void 0)] }), void 0));
};
var StyledWrapperDiv = css.styled('div')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n"], ["\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n"])));
var StyledTitleDiv = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  font-size: 12px;\n  color: #868686;\n"], ["\n  font-size: 12px;\n  color: #868686;\n"])));
var StyledNumberDiv = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  font-size: 28px;\n  &[data-variant='primary'] {\n    color: ", ";\n  }\n  &[data-variant='success'] {\n    color: ", ";\n  }\n  &[data-variant='danger'] {\n    color: ", ";\n  }\n"], ["\n  font-size: 28px;\n  &[data-variant='primary'] {\n    color: ", ";\n  }\n  &[data-variant='success'] {\n    color: ", ";\n  }\n  &[data-variant='danger'] {\n    color: ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
});
var templateObject_1, templateObject_2, templateObject_3;

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