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-d84df351.js';
import { u as useCustomCss } from './utilities-357c56e6.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 = __rest(_a, ["label", "wrapperProps", "customCss", "children"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(props.id);
    return (jsxs(Card, __assign({ id: id, role: "region", "aria-labelledby": "region-" + id, css: resolvedCss }, props, { children: [label && jsx(Label, __assign({ id: "region-" + id }, { children: label }), void 0),
            jsx(DetailsHolder, { children: children }, void 0)] }), void 0));
};
var Label = styled('h3')(templateObject_1 || (templateObject_1 = __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 = styled('div')(templateObject_2 || (templateObject_2 = __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 = styled('dl')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 10px 10px 10px;\n"], ["\n  padding: 0 10px 10px 10px;\n"])));
var templateObject_1, templateObject_2, templateObject_3;

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