'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 Detail = function (_a) {
    var userProvidedId = _a.id, _b = _a.label, label = _b === void 0 ? '' : _b, dotColor = _a.dotColor, fontSize = _a.fontSize, _c = _a.wrapperProps, _d = _a.customCss, customCss = _d === void 0 ? '' : _d, children = _a.children, props = _tslib.__rest(_a, ["id", "label", "dotColor", "fontSize", "wrapperProps", "customCss", "children"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(userProvidedId);
    return (jsxRuntime.jsxs(DetailHolder, _tslib.__assign({ id: id, css: resolvedCss }, props, { children: [label && jsxRuntime.jsx(Label, { children: label }, void 0),
            children && (jsxRuntime.jsxs(Children, _tslib.__assign({ style: {
                    fontSize: fontSize === 'large'
                        ? '1.5em'
                        : fontSize === 'small'
                            ? '.95em'
                            : '1.2em',
                } }, { children: [dotColor && jsxRuntime.jsx(Dot, { style: { backgroundColor: dotColor } }, void 0), children] }), void 0))] }), void 0));
};
var Children = css.styled('dd')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  font-weight: 600;\n  justify-content: flex-start;\n  align-items: center;\n  display: flex;\n  margin-left: 0;\n"], ["\n  font-weight: 600;\n  justify-content: flex-start;\n  align-items: center;\n  display: flex;\n  margin-left: 0;\n"])));
var Dot = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  justify-content: flex-start;\n  align-items: center;\n  margin-right: 5px;\n  flex: 0 0 8px;\n"], ["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  justify-content: flex-start;\n  align-items: center;\n  margin-right: 5px;\n  flex: 0 0 8px;\n"])));
var Label = css.styled('dt')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  font-size: 0.8em;\n  font-weight: 600;\n  color: #86888d;\n  font-style: italic;\n  align-items: center;\n  margin-bottom: 1px;\n"], ["\n  font-size: 0.8em;\n  font-weight: 600;\n  color: #86888d;\n  font-style: italic;\n  align-items: center;\n  margin-bottom: 1px;\n"])));
var DetailHolder = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: 4px 10px;\n  font-size: 16px;\n  flex-direction: column;\n"], ["\n  display: flex;\n  padding: 4px 10px;\n  font-size: 16px;\n  flex-direction: column;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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