import React__default from '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 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 = __rest(_a, ["id", "label", "wrapperProps", "details", "customCss", "labelWidth", "topBorder", "bottomBorder"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(userProvidedId);
    return (jsxs(DetailListHolder, __assign({ id: id, css: resolvedCss }, props, { children: [label && jsx(Label, { children: label }, void 0),
            details && labelWidth && (jsx(List, __assign({ topBorder: topBorder, bottomBorder: bottomBorder }, { children: details.map(function (detail, i) {
                    return (jsxs("div", { children: [jsx(LabelHolder, __assign({ labelWidth: labelWidth }, { children: detail.label || '' }), void 0),
                            jsx(ValueHolder, __assign({ labelWidth: labelWidth }, { children: detail.value || '' }), void 0)] }, i));
                }) }), void 0)),
            details && !labelWidth && (jsx(DynamicWidth, __assign({ topBorder: topBorder, bottomBorder: bottomBorder }, { children: details.map(function (detail, i) {
                    return (jsxs(React__default.Fragment, { children: [jsx(LabelSide, { children: detail.label || '' }, void 0),
                            jsx(ValueSide, { children: detail.value || '' }, void 0)] }, i));
                }) }), void 0))] }), void 0));
};
var DynamicWidth = styled('div')(templateObject_1 || (templateObject_1 = __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 = styled('div')(templateObject_2 || (templateObject_2 = __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 = styled('div')(templateObject_3 || (templateObject_3 = __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 = styled('div')(templateObject_4 || (templateObject_4 = __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 = styled('div')(templateObject_5 || (templateObject_5 = __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 = styled('div')(templateObject_6 || (templateObject_6 = __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 = styled('h3')(templateObject_7 || (templateObject_7 = __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 = styled('div')(templateObject_8 || (templateObject_8 = __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;

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