'use strict';

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

var React = 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-f9c7d71b.js');
var utilities = require('./utilities-d51a0c2d.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var DetailList = function (_a) {
    var userProvidedId = _a.id, _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.wrapperProps, _d = _a.details, details = _d === void 0 ? [] : _d, _e = _a.customCss, customCss = _e === void 0 ? '' : _e, labelWidth = _a.labelWidth, _f = _a.topBorder, topBorder = _f === void 0 ? false : _f, _g = _a.bottomBorder, bottomBorder = _g === void 0 ? false : _g, props = _tslib.__rest(_a, ["id", "label", "wrapperProps", "details", "customCss", "labelWidth", "topBorder", "bottomBorder"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(userProvidedId);
    return (jsxRuntime.jsxs(DetailListHolder, _tslib.__assign({ id: id, css: resolvedCss }, props, { children: [label && jsxRuntime.jsx(Label, { children: label }, void 0),
            details && labelWidth && (jsxRuntime.jsx(List, _tslib.__assign({ topBorder: topBorder, bottomBorder: bottomBorder }, { children: details.map(function (detail, i) {
                    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(LabelHolder, _tslib.__assign({ labelWidth: labelWidth }, { children: detail.label || '' }), void 0),
                            jsxRuntime.jsx(ValueHolder, _tslib.__assign({ labelWidth: labelWidth }, { children: detail.value || '' }), void 0)] }, i));
                }) }), void 0)),
            details && !labelWidth && (jsxRuntime.jsx(DynamicWidth, _tslib.__assign({ topBorder: topBorder, bottomBorder: bottomBorder }, { children: details.map(function (detail, i) {
                    return (jsxRuntime.jsxs(React__default['default'].Fragment, { children: [jsxRuntime.jsx(LabelSide, { children: detail.label || '' }, void 0),
                            jsxRuntime.jsx(ValueSide, { children: detail.value || '' }, void 0)] }, i));
                }) }), void 0))] }), void 0));
};
var DynamicWidth = css.styled('div')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0.5em 0;\n  font-weight: 600;\n  display: grid;\n  margin-left: 0;\n"], ["\n  border-top: ", ";\n  border-bottom: ",
    ";\n  padding: 0.5em 0;\n  font-weight: 600;\n  display: grid;\n  margin-left: 0;\n"])), function (_a) {
    var topBorder = _a.topBorder;
    return (topBorder ? 'dotted 1px #999' : 'none');
}, function (_a) {
    var bottomBorder = _a.bottomBorder;
    return bottomBorder ? 'dotted 1px #999' : 'none';
});
var LabelSide = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  grid-column-start: 1;\n  padding: 6px 10px;\n  justify-self: end;\n  font-style: italic;\n  color: #666;\n  font-weight: normal;\n  font-size: 1em;\n  text-align: right;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n"], ["\n  grid-column-start: 1;\n  padding: 6px 10px;\n  justify-self: end;\n  font-style: italic;\n  color: #666;\n  font-weight: normal;\n  font-size: 1em;\n  text-align: right;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n"])));
var ValueSide = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  grid-column-start: 2;\n  padding: 6px 10px;\n  border-left: dotted 1px #999;\n  border-collapse: collapse;\n  text-align: left;\n  color: #444;\n  font-weight: 600;\n  font-size: 1em;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n"], ["\n  grid-column-start: 2;\n  padding: 6px 10px;\n  border-left: dotted 1px #999;\n  border-collapse: collapse;\n  text-align: left;\n  color: #444;\n  font-weight: 600;\n  font-size: 1em;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n"])));
var LabelHolder = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: ", "%;\n  margin: 0;\n  display: flex;\n  justify-content: flex-end;\n  font-style: italic;\n  color: #666;\n  font-weight: normal;\n  font-size: 1em;\n  padding: 6px 10px;\n  align-self: normal;\n  text-align: right;\n  overflow: hidden;\n"], ["\n  width: ", "%;\n  margin: 0;\n  display: flex;\n  justify-content: flex-end;\n  font-style: italic;\n  color: #666;\n  font-weight: normal;\n  font-size: 1em;\n  padding: 6px 10px;\n  align-self: normal;\n  text-align: right;\n  overflow: hidden;\n"])), function (_a) {
    var labelWidth = _a.labelWidth;
    return labelWidth || 40;
});
var ValueHolder = css.styled('div')(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  overflow-wrap: anywhere;\n  width: ", "%;\n  margin: 0;\n  display: flex;\n  justify-content: flex-start;\n  text-align: left;\n  color: #444;\n  font-weight: 600;\n  font-size: 1em;\n  white-space: pre-wrap;\n  padding: 6px 10px;\n  border-left: dotted 1px #999;\n  border-collapse: collapse;\n  align-self: normal;\n  overflow: hidden;\n"], ["\n  overflow-wrap: anywhere;\n  width: ", "%;\n  margin: 0;\n  display: flex;\n  justify-content: flex-start;\n  text-align: left;\n  color: #444;\n  font-weight: 600;\n  font-size: 1em;\n  white-space: pre-wrap;\n  padding: 6px 10px;\n  border-left: dotted 1px #999;\n  border-collapse: collapse;\n  align-self: normal;\n  overflow: hidden;\n"])), function (_a) {
    var labelWidth = _a.labelWidth;
    return 100 - (labelWidth || 40);
});
var List = css.styled('div')(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0.5em 0;\n  font-weight: 600;\n  justify-content: flex-start;\n  align-items: center;\n  display: flex;\n  margin-left: 0;\n  flex-direction: column;\n  > div {\n    align-items: flex-start;\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    justify-content: center;\n  }\n"], ["\n  border-top: ", ";\n  border-bottom: ",
    ";\n  padding: 0.5em 0;\n  font-weight: 600;\n  justify-content: flex-start;\n  align-items: center;\n  display: flex;\n  margin-left: 0;\n  flex-direction: column;\n  > div {\n    align-items: flex-start;\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    justify-content: center;\n  }\n"])), function (_a) {
    var topBorder = _a.topBorder;
    return (topBorder ? 'dotted 1px #999' : 'none');
}, function (_a) {
    var bottomBorder = _a.bottomBorder;
    return bottomBorder ? 'dotted 1px #999' : 'none';
});
var Label = css.styled('h3')(templateObject_7 || (templateObject_7 = _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 DetailListHolder = css.styled('div')(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: 4px 10px;\n  font-size: 16px;\n  flex-direction: column;\n  display: flex;\n"], ["\n  display: flex;\n  padding: 4px 10px;\n  font-size: 16px;\n  flex-direction: column;\n  display: flex;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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