import 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss } from './utilities-357c56e6.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 = __rest(_a, ["id", "label", "dotColor", "fontSize", "wrapperProps", "customCss", "children"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(userProvidedId);
    return (jsxs(DetailHolder, __assign({ id: id, css: resolvedCss }, props, { children: [label && jsx(Label, { children: label }, void 0),
            children && (jsxs(Children, __assign({ style: {
                    fontSize: fontSize === 'large'
                        ? '1.5em'
                        : fontSize === 'small'
                            ? '.95em'
                            : '1.2em',
                } }, { children: [dotColor && jsx(Dot, { style: { backgroundColor: dotColor } }, void 0), children] }), void 0))] }), void 0));
};
var Children = styled('dd')(templateObject_1 || (templateObject_1 = __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 = styled('div')(templateObject_2 || (templateObject_2 = __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 = styled('dt')(templateObject_3 || (templateObject_3 = __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 = styled('div')(templateObject_4 || (templateObject_4 = __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;

export { Detail };
//# sourceMappingURL=Detail.js.map
