'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 DetailCard = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.wrapperProps, _d = _a.customCss, customCss = _d === void 0 ? '' : _d, children = _a.children, props = _tslib.__rest(_a, ["label", "wrapperProps", "customCss", "children"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(props.id);
    return (jsxRuntime.jsxs(Card, _tslib.__assign({ id: id, role: "region", "aria-labelledby": "region-" + id, css: resolvedCss }, props, { children: [label && jsxRuntime.jsx(Label, _tslib.__assign({ id: "region-" + id }, { children: label }), void 0),
            jsxRuntime.jsx(DetailsHolder, { children: children }, void 0)] }), void 0));
};
var Label = css.styled('h3')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 10px;\n  margin: 0 0 10px 0;\n  font-size: 1em;\n  font-weight: 600;\n  color: #fff;\n  display: flex;\n  flex-direction: row;\n  height: 28px;\n  align-items: center;\n  border-radius: 12px 12px 0px 0px;\n  background-color: ", ";\n"], ["\n  padding: 10px;\n  margin: 0 0 10px 0;\n  font-size: 1em;\n  font-weight: 600;\n  color: #fff;\n  display: flex;\n  flex-direction: row;\n  height: 28px;\n  align-items: center;\n  border-radius: 12px 12px 0px 0px;\n  background-color: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var Card = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border-radius: 12px;\n  font-size: 16px;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n"], ["\n  border-radius: 12px;\n  font-size: 16px;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n"])));
var DetailsHolder = css.styled('dl')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: 0 10px 10px 10px;\n"], ["\n  padding: 0 10px 10px 10px;\n"])));
var templateObject_1, templateObject_2, templateObject_3;

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